feat(drive): Google Drive folder sync — frontend (Phase 10)

[Jason-jo17]

Design / tracking issue: #99 — part of the Google Drive folder-sync feature.

What & why

Google Drive integration — part 2 of 3 (frontend). New Settings → Integrations tab with a DriveSettings panel: connect/disconnect Google, list linked folders (direction + accepted types + status), Sync-now / pause / unlink, and an add-link flow (pick a Mnema folder, pick or create a Drive folder, choose direction + file types). Also fleshes out the connections/drive.astro stub into a real landing and adds the Integrations nav item.

Linked issue

No single issue — see below.

Stacked: depends on the backend PR (feat/drive-backend) at runtime — merge that first.

Test evidence

ESLint clean on DriveSettings.tsx; astro check reports no new type errors (only the repo’s pre-existing SettingsLayout.astro unused-var warnings). UI calls /api/drive/*.

Checklist

• One logical change; matches the surrounding code style.
• Ran the relevant checks for what I touched (see Test evidence).
• Commits are signed off for the DCO (git commit -s).
• This is a core change — not enterprise-adjacent and not in the licensing/release machinery.
• I understand this PR is merged here on GitHub once approved (authorship + DCO preserved) and ships in the next tagged release.

[CLAassistant]

All committers have signed the CLA.

[nbkdoesntknowcoding]

Nice work — the panel is XSS-clean (all Drive-supplied strings render as escaped React children), it matches our inline-style/token conventions, and it handles the not-configured / not-connected / loading / empty / error states properly. Since it depends on #96, we'll merge that first.

A few accessibility items to address before merge (these are the kind of thing our a11y pass would flag):

The "Add link" modal needs proper dialog semantics. AddLinkModal (around DriveSettings.tsx:230) is a bare position: fixed overlay — please add role="dialog" + aria-modal="true", trap focus inside it, and close on Escape (right now it only closes via backdrop-click / Cancel).
The file-type chips need a pressed state. They're toggle s (around DriveSettings.tsx:281) but expose no aria-pressed, so a screen reader can't tell which types are selected. Add aria-pressed={selected}.
Replace the native confirm() for unlink (:98) with the app's own confirm pattern for consistency (minor).
One tiny token nit: there's a hardcoded #f87171 for destructive text — fine to leave, but a --danger/error token would be more consistent if we have one.

Everything else looks good — once the dialog + aria-pressed items are in, this is ready.

[Jason-jo17]

Done in 5a6938c.

• AddLinkModal is a proper dialog now — role="dialog" + aria-modal="true" + aria-labelledby, focus moves into it on open, Tab is trapped within it, Escape closes it, and focus returns to the trigger on close.
• File-type chips expose aria-pressed so a screen reader announces which types are selected.
• Native confirm() for unlink replaced with the app's inline confirm/cancel pattern (matches ApiKeys/DevSettings).
• Destructive text uses the var(--status-error) token instead of hardcoded #f87171.

Depends on #96 as you noted — that one's ready to merge first.