From 7aa0c5a892522e9430924353bbf898a2fc1671b1 Mon Sep 17 00:00:00 2001
From: sepehr <sepehr1151@gmail.com>
Date: Fri, 15 May 2026 20:01:36 +0200
Subject: [PATCH] feat: add GDPR cookie consent banner and upgrade-to-Pro link
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Cookie consent banner with accept all / essential only buttons
- Uses existing i18n messages (en/fr) and localStorage for persistence
- Animated with Framer Motion, respects dark/light theme
- Free tier users see "Passer Pro →" link next to their badge in sidebar

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 .../src/app/dashboard/DashboardSidebar.tsx    | 23 ++++---
 frontend/src/app/layout.tsx                   |  2 +
 frontend/src/components/ui/cookie-consent.tsx | 65 +++++++++++++++++++
 3 files changed, 82 insertions(+), 8 deletions(-)
 create mode 100644 frontend/src/components/ui/cookie-consent.tsx

diff --git a/frontend/src/app/dashboard/DashboardSidebar.tsx b/frontend/src/app/dashboard/DashboardSidebar.tsx
index e9a6f7e..a380985 100644
--- a/frontend/src/app/dashboard/DashboardSidebar.tsx
+++ b/frontend/src/app/dashboard/DashboardSidebar.tsx
@@ -73,15 +73,22 @@ export function DashboardSidebar() {
               <div className="flex min-w-0 flex-1 flex-col gap-0.5">
                 <span className="truncate text-sm font-medium leading-none text-foreground">{user.name}</span>
                 <span className="truncate text-xs leading-none text-muted-foreground">{user.email}</span>
-                <Badge
-                  variant="secondary"
-                  className={cn(
-                    'mt-0.5 w-fit text-xs',
-                    user.tier !== 'free' && user.tier && 'border border-primary/20 bg-primary/10 text-primary'
+                <div className="flex items-center gap-1.5">
+                  <Badge
+                    variant="secondary"
+                    className={cn(
+                      'text-xs',
+                      user.tier !== 'free' && user.tier && 'border border-primary/20 bg-primary/10 text-primary'
+                    )}
+                  >
+                    {translateTier(t, user.tier)}
+                  </Badge>
+                  {(!user.tier || user.tier === 'free') && (
+                    <Link href="/pricing" className="text-xs font-medium text-primary hover:underline">
+                      {t('dashboard.sidebar.upgradeToPro', { defaultValue: 'Passer Pro →' })}
+                    </Link>
                   )}
-                >
-                  {translateTier(t, user.tier)}
-                </Badge>
+                </div>
               </div>
               <ThemeToggle />
             </div>
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
index 178ac4e..e48f9b7 100644
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -7,6 +7,7 @@ import { NotificationProvider } from "@/components/ui/notification";
 import { I18nProvider } from "@/lib/i18n";
 import { Agentation } from "agentation";
 import { GoogleOAuthProvider } from "@react-oauth/google";
+import { CookieConsent } from "@/components/ui/cookie-consent";
 
 export const dynamic = 'force-dynamic';
 
@@ -33,6 +34,7 @@ export default function RootLayout({
               <GoogleOAuthProvider clientId={process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID || ""}>
                 <NotificationProvider>
                   {children}
+                  <CookieConsent />
                 </NotificationProvider>
               </GoogleOAuthProvider>
             </QueryProvider>
diff --git a/frontend/src/components/ui/cookie-consent.tsx b/frontend/src/components/ui/cookie-consent.tsx
new file mode 100644
index 0000000..9d184c4
--- /dev/null
+++ b/frontend/src/components/ui/cookie-consent.tsx
@@ -0,0 +1,65 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { useTranslations } from "next-intl";
+import { motion, AnimatePresence } from "framer-motion";
+import { Button } from "@/components/ui/button";
+
+const STORAGE_KEY = "cookie-consent";
+
+export function CookieConsent() {
+  const t = useTranslations("cookieConsent");
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    setVisible(!localStorage.getItem(STORAGE_KEY));
+  }, []);
+
+  function acceptAll() {
+    localStorage.setItem(STORAGE_KEY, "all");
+    setVisible(false);
+  }
+
+  function essentialOnly() {
+    localStorage.setItem(STORAGE_KEY, "essential");
+    setVisible(false);
+  }
+
+  return (
+    <AnimatePresence>
+      {visible && (
+        <motion.div
+          initial={{ y: 100, opacity: 0 }}
+          animate={{ y: 0, opacity: 1 }}
+          exit={{ y: 100, opacity: 0 }}
+          transition={{ type: "spring", damping: 25, stiffness: 300 }}
+          className="fixed bottom-0 inset-x-0 z-50 p-4"
+        >
+          <div className="mx-auto max-w-3xl rounded-t-2xl border border-border bg-background/95 backdrop-blur-md shadow-2xl p-6">
+            <div className="flex items-start gap-3">
+              <span className="text-2xl shrink-0" aria-hidden="true">
+                🍪
+              </span>
+              <div className="flex-1 min-w-0">
+                <h3 className="font-semibold text-foreground mb-1">
+                  {t("title")}
+                </h3>
+                <p className="text-sm text-muted-foreground leading-relaxed">
+                  {t("description")}
+                </p>
+                <div className="flex flex-wrap items-center gap-3 mt-4">
+                  <Button variant="outline" size="sm" onClick={essentialOnly}>
+                    {t("essentialOnly")}
+                  </Button>
+                  <Button size="sm" onClick={acceptAll}>
+                    {t("acceptAll")}
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}