Add Google Drive file loading functionality

[takaokouji]

Summary

Implements the ability to load Scratch 3.0 projects (.sb3) directly from
Google Drive, addressing issue #426.

Key Features

• Dynamic Script Loading: Google API scripts are loaded only when the
  user first clicks "Load from Google Drive", improving initial page load
  performance
• OAuth 2.0 Authentication: Secure authentication using Google Identity
  Services
• Google Picker API: Native Google Drive file selection UI
• Seamless Integration: Works with existing project loading mechanism

Implementation Details

New Files

1. src/lib/google-script-loader.js

   • Dynamically loads Google API Client Library and Google Identity Services
   • Prevents unnecessary script loading on initial page load
   • Implements promise-based loading with error handling

2. src/lib/google-drive-api.js

   • Manages Google Drive authentication and file operations
   • Implements OAuth 2.0 flow using Google Identity Services
   • Provides Picker API integration for file selection
   • Handles file download from Google Drive

3. src/containers/google-drive-loader.jsx

   • Higher Order Component (HOC) for Google Drive functionality
   • Integrates with existing project loading state management
   • Provides error handling and user feedback

4. docs/google-drive-setup.md

   • Comprehensive setup guide for Google Cloud Platform configuration
   • Step-by-step instructions for OAuth 2.0 client creation
   • Troubleshooting section for common issues

5. .env.example

   • Template for environment variable configuration
   • Documents required credentials

6. cspell.json

   • Custom dictionary for Google API-specific terms

Modified Files

1. src/components/menu-bar/menu-bar.jsx

   • Added "Load from Google Drive" menu item in File menu
   • Integrated GoogleDriveLoaderHOC into component composition

2. .gitignore

   • Added .env to prevent accidental commits of sensitive credentials

Configuration

Environment Variables

Two environment variables are required:

• GOOGLE_CLIENT_ID: OAuth 2.0 Client ID from Google Cloud Console
• GOOGLE_API_KEY: API Key for Google Picker API

Setup Instructions

See docs/google-drive-setup.md for detailed setup instructions including:

1. Creating a Google Cloud Platform project
2. Enabling required APIs (Google Drive API, Google Picker API)
3. Configuring OAuth 2.0 credentials
4. Setting up environment variables

Technical Approach

Why Dynamic Script Loading?

Instead of including Google API scripts in index.html, we use dynamic
loading because:

1. Performance: Most users won't use Google Drive loading, so we avoid
   loading unnecessary scripts
2. Privacy: Google scripts are only loaded when explicitly requested
   by the user
3. Maintainability: Scripts are loaded only when needed, reducing
   initial bundle size

Error Handling

• Configuration validation on first use
• User-friendly error messages for common issues
• Graceful handling of authentication failures
• Proper cleanup on picker cancellation

Testing

Manual Testing Steps

1. Set up Google Cloud Platform credentials (see docs)
2. Configure environment variables
3. Build the project: npm run build
4. Test the following scenarios:
   • Click "Load from Google Drive" without configuration (should show error)
   • Configure credentials and try again (should show Google Picker)
   • Select a .sb3 file (should load project)
   • Cancel picker (should close without error)
   • Try to load invalid file type (should show error)

Lint and Build

• ✅ All lint checks pass: npm run test:lint
• ✅ Build succeeds: npm run build

Breaking Changes

None. This is a new feature that doesn't affect existing functionality.

Future Enhancements

Possible improvements for future PRs:

• Support for saving projects to Google Drive
• Integration with Google Drive file picker in "Save As" dialog
• Automatic sync with Google Drive
• Support for loading from shared Google Drive links

Related Issues

Closes #426

---

🤖 Generated with Claude Code

Co-Authored-By: Claude [email protected]