feat: Google Drive tab on upload form

[aalemayhu]

What

Adds a third "Google Drive" tab to the upload form alongside "Your computer" and "Dropbox". Clicking "Choose from Google Drive" opens the Google Picker, lets the user pick one file, and POSTs the picked file metadata plus an OAuth bearer token to the existing POST /api/upload/google_drive endpoint. The same conversion + downloads flow that Dropbox uses runs from there.

The tab is gated on REACT_APP_GOOGLE_CLIENT_ID and REACT_APP_GOOGLE_API_KEY. When either is missing, the tab is hidden — deploys without the env vars degrade gracefully to the two-tab layout. The prod build needs both env vars set before users will see the new tab.

Why

The google_drive_uploads table has been around since August 2024 but nothing in the web app has populated it for a while. #2305 added a "From Google Drive" section on Downloads — without this PR that section sits empty forever. Drive is the largest unaddressed file source for student users (Notion + Dropbox + Drive ≈ all of them), so closing the loop is the single biggest conversion-surface gap on the upload form.

How

• New useGooglePicker hook (web/src/pages/UploadPage/components/UploadForm/hooks/useGooglePicker.ts) — lazy-loads apis.google.com/js/api.js (gapi/Picker) and accounts.google.com/gsi/client (Google Identity Services token client) on demand. No npm package — the official scripts are the only sanctioned path Google supports for Picker, and the equivalent npm packages pull in heavy server-side SDKs that are wrong for the browser.
• OAuth scope: https://www.googleapis.com/auth/drive.file — Google's narrowest Picker scope. Per-file authorization (only the file the user picked is readable by our OAuth client); cannot enumerate the user's other Drive files. This was an active trio resolution — PM wanted drive.file, engineer initially said drive.readonly. Drive.file wins because Picker authorizes those specific files for us and the existing server-side Authorization: Bearer download call still works.
• Concrete gotcha: Google Identity Services' requestAccessToken callback is fire-and-forget — it does not return a Promise. The Picker must be opened inside that callback or it races the token init and silently no-ops. The hook does this.
• Added the third tab to UploadSourceTabs.tsx (new entrant at the end, per designer call).
• Wired handleGoogleDriveClick + handleGoogleDriveFiles in UploadForm.tsx mirroring the Dropbox handlers. POSTs files (JSON-stringified GoogleDriveFile[]) + googleDriveAuth (bearer) — the exact body shape src/controllers/Upload/helpers/handleGoogleDrive.ts expects.
• Reused all existing conversion states (converting / success / emptyDeck / error / limitReached). The converting status line now reads "Fetching {filename} from Google Drive" when Drive is the source — same pattern as Dropbox.
• Designer pass: monochrome currentColor Drive triangle glyph (no full-color Google mark — full-color marks have stricter brand-guideline rules and fight the Stripe-class restraint baseline).

Measuring success

Leading indicator: Drive-sourced conversions per week. Phase-2 gate: 25+ successful Drive uploads in the first 14 days post-launch unlocks investment in folder-pick + multi-file. Below 10 → leave as-is. Secondary: rows in google_drive_uploads start increasing immediately after deploy, which surfaces the "From Google Drive" history section on /downloads for real users.

Testing

• New useGooglePicker.test.ts — 5 tests (loading-state guards, picked-files outcome with access token, cancelled outcome, token-error rejection, missing-env-var rejection). Mocks window.gapi, window.google.picker, and window.google.accounts.oauth2 to drive the callbacks deterministically without loading the real scripts.
• Existing UploadForm.test.tsx extended with 2 tests for tab visibility (Drive tab appears iff both env vars are present).
• /check: server tsc clean, web typecheck clean, 483 Vitest tests pass (was 481 before; +5 hook tests, +2 form tests minus 2 reused existing setup), Biome lint clean.

Risks

• Picker UX gate: this depends on users granting drive.file scope inline. If they decline, the token callback gets error: 'access_denied' and we surface "Couldn't reach Google Drive. Sign in again and retry." Worth watching for the first week.
• Script load failure: the two Google scripts come from apis.google.com and accounts.google.com. Script blockers or corporate proxies will fail to load them and the user sees "Couldn't load Google Drive. Check your connection or disable script blockers and try again." Same behavior as the Dropbox tab on a Dropbox-blocked network.
• Rollback: removing this PR removes the tab. The server endpoint, repository, and migration stay — they predated this PR and serve the history section in feat: Google Drive upload history #2305.

Out of scope (deferred to phase 2)

• Multi-file batch upload (Picker supports it behind a flag; defer until Bump websocket-extensions from 0.1.3 to 0.1.4 #25-in-14-days gate clears).
• Folder pick / recursive (Drive folders).
• Paywall/quota wiring beyond what /api/upload/google_drive already enforces.

Sonar

Sonar scanner not run locally (token not configured in this environment) — flagging for reviewers so a Sonar bounce on the new hook isn't a surprise. The hook has nested callbacks which can trigger cognitive complexity warnings.

Goal alignment

• Simpler/faster/more beautiful: users studying from Drive-hosted PDFs or Docs skip the download-then-reupload round trip.
• Scale-to-300K: Drive is the largest unaddressed file source on the upload form; closing it unblocks an entire student population (Notion / Dropbox / Drive covers ~all of them).

---

Trio synthesis

• PM: Ship now. Drive tab parity with Dropbox; logged-in users only; PR-1 = single file, no folder pick. Leading indicator: 25+ Drive uploads / 14 days.
• Designer: Tab order Your computer / Dropbox / Google Drive (new entrant at end). "Pick a file from your Google Drive to convert it into a deck" + "Choose from Google Drive" + "Fetching {filename} from Google Drive". Monochrome Drive glyph in currentColor — no full-color Google mark.
• Engineer: S effort. 5 files. Dynamic <script> tags for both Google scripts (no npm pkg). Gotcha: open Picker inside the token callback. Hook unit tests mock both globals.
• Conflict: PM said drive.file scope; Engineer said drive.readonly. Resolution: drive.file — narrower, Google-recommended for Picker workflows, server-side download still works because Picker authorizes those specific files for the OAuth client.

---

^{Need help on this PR? Tag @codesmith with what you need.}

• Let Codesmith autofix CI failures and bot reviews

[blacksmith-sh]

Autofix enabled on this PR. I'll automatically:

• Fix CI failures
• Address review comments from bots
• Resolve merge conflicts

To disable, uncheck the autofix checkbox in the PR description or comment @codesmith !autofix off.

[sonarqubecloud]

Quality Gate failed

Failed conditions
7.3% Duplication on New Code (required ≤ 3%)

See analysis details on SonarQube Cloud