Add GDPR-compliant cookie consent bar

[xinbenlv]

Original Request

proper cookie consent bar setup (dependency for adding Google Analytics)

Agent's Two Cents (could be wrong)

Everything below is the AI agent's best guess based on the current codebase.
Take with a grain of salt — the original request above is the only thing that came from a human.

Problem / Motivation

WikiLoop DoubleCheck currently has zero tracking cookies and its privacy policy (/tos, /privacy) explicitly states "No tracking data, analytics cookies, or advertising identifiers." Before any analytics can be added, GDPR/ePrivacy compliance requires informed user consent for non-essential cookies. Without a consent mechanism, adding Google Analytics would violate EU ePrivacy Directive and GDPR.

Proposed Solution

Add a cookie consent banner that appears on first visit, allowing users to accept or reject non-essential cookies (analytics). Essential cookies (session auth) should be allowed without consent. The consent choice should be persisted and respected — analytics scripts should only load after explicit opt-in.

Architecture Diagram

┌──────────────────────────────────────────┐
│              User's Browser               │
│                                           │
│  ┌─────────────────────────────────┐      │
│  │     Cookie Consent Banner       │      │
│  │  [Accept All] [Reject] [Custom] │      │
│  └──────────────┬──────────────────┘      │
│                 │                          │
│                 ▼                          │
│  ┌─────────────────────────────┐          │
│  │   localStorage/cookie       │          │
│  │   consent_analytics: true   │          │
│  │   consent_essential: true   │          │
│  └──────────────┬──────────────┘          │
│                 │                          │
│        ┌────────┴────────┐                │
│        ▼                 ▼                │
│  ┌──────────┐    ┌─────────────┐          │
│  │ Session  │    │ GA gtag.js  │          │
│  │ (always) │    │ (only if    │          │
│  │          │    │  opted in)  │          │
│  └──────────┘    └─────────────┘          │
└──────────────────────────────────────────┘

Dependencies & Potential Blockers

• Privacy policy at packages/web/src/pages/TosPage.vue must be updated to reflect new cookie categories
• Need to decide: use a library (e.g., vanilla-cookieconsent) or build a minimal custom banner
• Extension and userscript may not need consent (no analytics in those contexts)

How to Validate

• Banner appears on first visit to web app
• Dismissing with "Reject" persists choice — banner doesn't reappear, no analytics cookies set
• Accepting sets consent cookie and enables analytics script loading
• Consent choice survives page reload / new session
• Banner re-appears if consent cookie expires or is cleared
• Privacy policy page updated to describe cookie categories
• No analytics scripts load before consent is given (verify in DevTools Network tab)

Scope Estimate

small

Key Files/Modules Likely Involved

• packages/web/src/App.vue — mount consent banner component
• packages/web/src/components/CookieConsent.vue — NEW component
• packages/web/src/composables/useConsent.ts — NEW composable for consent state
• packages/web/src/pages/TosPage.vue — update privacy policy text

Rough Implementation Sketch

• Create a CookieConsent.vue component with Accept/Reject buttons
• Store consent in localStorage (not a cookie, to avoid chicken-and-egg)
• Export a useConsent() composable that other features check before loading trackers
• Mount banner in App.vue when consent state is undecided
• Update TosPage.vue to describe essential vs analytics cookie categories

Open Questions

• Use a library like vanilla-cookieconsent or build minimal custom? Custom is simpler for just one category (analytics)
• Should consent apply to extension popup too? (Probably not — no analytics there)
• Cookie consent expiry duration? (Common: 6–12 months)

Potential Risks or Gotchas

• Current privacy policy explicitly says "No tracking" — this is a policy change, not just a code change
• Must ensure analytics never fires before consent, even on slow connections (race condition)
• Different jurisdictions have different rules (GDPR, CCPA, etc.) — start with GDPR as strictest