From 368b43cb8e754319e1882e7c0913a489e5267747 Mon Sep 17 00:00:00 2001
From: Antigravity <antigravity@gemini.ai>
Date: Sat, 9 May 2026 14:40:36 +0000
Subject: [PATCH] feat: improve AI Chat UX, add notebook summary, and fix
 shared/reminders routing

---
 memento-note/app/(main)/layout.tsx            |   4 +-
 memento-note/app/(main)/page.tsx              |   1 +
 memento-note/app/(main)/reminders/page.tsx    |   9 -
 .../general/general-settings-client.tsx       |   2 +
 memento-note/app/api/chat/route.ts            |   9 +-
 memento-note/app/globals.css                  |  10 +-
 memento-note/app/layout.tsx                   |   4 +
 .../components/admin-providers-wrapper.tsx    |  18 +-
 memento-note/components/ai-chat.tsx           |  44 ++---
 .../components/chat/chat-container.tsx        |   4 +-
 memento-note/components/chat/chat-input.tsx   |  10 +-
 .../components/chat/chat-messages.tsx         |   2 +-
 memento-note/components/chat/chat-sidebar.tsx |   2 +-
 .../components/contextual-ai-chat.tsx         | 168 +++++++++---------
 .../components/direction-initializer.tsx      |   6 +-
 memento-note/components/home-client.tsx       |  65 +++++--
 memento-note/components/sidebar.tsx           |  83 +++++----
 memento-note/lib/i18n/LanguageProvider.tsx    |  19 +-
 memento-note/lib/i18n/detect-user-language.ts |  13 +-
 memento-note/next.config.ts                   |  15 ++
 20 files changed, 292 insertions(+), 196 deletions(-)
 delete mode 100644 memento-note/app/(main)/reminders/page.tsx

diff --git a/memento-note/app/(main)/layout.tsx b/memento-note/app/(main)/layout.tsx
index 6922f1c..c06ba40 100644
--- a/memento-note/app/(main)/layout.tsx
+++ b/memento-note/app/(main)/layout.tsx
@@ -31,12 +31,12 @@ export default async function MainLayout({
   return (
     <ProvidersWrapper initialLanguage={initialLanguage} initialTranslations={initialTranslations}>
       {/* No top-bar header — sidebar-only navigation (architectural-grid design) */}
-      <div className="flex h-screen overflow-hidden bg-[#E5E2D9]">
+      <div className="flex h-screen overflow-hidden bg-memento-desk">
         <Suspense fallback={<div className="hidden w-80 shrink-0 md:block" />}>
           <Sidebar user={session?.user} />
         </Suspense>
 
-        <main className="flex min-h-0 flex-1 flex-col overflow-y-auto scroll-smooth bg-background">
+        <main className="flex min-h-0 flex-1 flex-col overflow-y-auto scroll-smooth bg-memento-paper">
           {children}
         </main>
 
diff --git a/memento-note/app/(main)/page.tsx b/memento-note/app/(main)/page.tsx
index 8615f62..49c507a 100644
--- a/memento-note/app/(main)/page.tsx
+++ b/memento-note/app/(main)/page.tsx
@@ -25,6 +25,7 @@ export default async function HomePage() {
         notesViewMode,
         noteHistory: settings?.noteHistory === true,
         noteHistoryMode: (settings?.noteHistoryMode ?? 'manual') as 'manual' | 'auto',
+        aiAssistantEnabled: settings?.paragraphRefactor !== false,
       }}
     />
   )
diff --git a/memento-note/app/(main)/reminders/page.tsx b/memento-note/app/(main)/reminders/page.tsx
deleted file mode 100644
index 00ce5a8..0000000
--- a/memento-note/app/(main)/reminders/page.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { getNotesWithReminders } from '@/app/actions/notes'
-import { RemindersPage } from '@/components/reminders-page'
-
-export const dynamic = 'force-dynamic'
-
-export default async function RemindersRoute() {
-  const notes = await getNotesWithReminders()
-  return <RemindersPage notes={notes} />
-}
diff --git a/memento-note/app/(main)/settings/general/general-settings-client.tsx b/memento-note/app/(main)/settings/general/general-settings-client.tsx
index 1f1d2e1..4123555 100644
--- a/memento-note/app/(main)/settings/general/general-settings-client.tsx
+++ b/memento-note/app/(main)/settings/general/general-settings-client.tsx
@@ -29,9 +29,11 @@ export function GeneralSettingsClient({ initialSettings }: GeneralSettingsClient
     await updateAISettings({ preferredLanguage: value as any })
     if (value === 'auto') {
       localStorage.removeItem('user-language')
+      document.cookie = 'user-language=;path=/;max-age=0'
       toast.success(t('settings.languageAuto') || 'Language set to Auto')
     } else {
       localStorage.setItem('user-language', value)
+      document.cookie = `user-language=${value};path=/;max-age=${60 * 60 * 24 * 365};samesite=lax`
       setContextLanguage(value as any)
       toast.success(t('profile.languageUpdateSuccess') || 'Language updated')
     }
diff --git a/memento-note/app/api/chat/route.ts b/memento-note/app/api/chat/route.ts
index a24cd0a..a412eb3 100644
--- a/memento-note/app/api/chat/route.ts
+++ b/memento-note/app/api/chat/route.ts
@@ -273,22 +273,21 @@ Focus ONLY on this note unless asked otherwise.`
 
   const provider = getChatProvider(sysConfig)
   const result = await streamText({
-    model: provider.chatModel,
+    model: provider.getModel(),
     system: systemPrompt,
     messages: incomingMessages,
     tools: chatTools,
     maxSteps: 5,
     onFinish: async (final) => {
-      // Save messages to DB
       const userContent = incomingMessages[incomingMessages.length - 1].content
-      await prisma.message.create({
+      await prisma.chatMessage.create({
         data: { conversationId: conversation.id, role: 'user', content: userContent }
       })
-      await prisma.message.create({
+      await prisma.chatMessage.create({
         data: { conversationId: conversation.id, role: 'assistant', content: final.text }
       })
     }
   })
 
-  return result.toDataStreamResponse()
+  return result.toUIMessageStreamResponse()
 }
diff --git a/memento-note/app/globals.css b/memento-note/app/globals.css
index dcd8661..31cd3d9 100644
--- a/memento-note/app/globals.css
+++ b/memento-note/app/globals.css
@@ -15,9 +15,11 @@
   /* Memento — Architectural Grid (réf. architectural-grid1) */
   --color-memento-desk: #E5E2D9;
   --color-memento-paper: #F2F0E9;
+  --color-memento-sidebar: #F6F4F0;
   --color-memento-ink: #1C1C1C;
   --color-primary: #ACB995;
   --color-memento-accent: #D4A373;
+  --color-memento-blue: #75B2D6;
   --color-memento-paper-elevated: #faf9f5;
   --color-background-light: var(--color-memento-paper);
   --color-background-dark: #202020;
@@ -342,8 +344,8 @@ html.dark .memento-active-nav {
 
 :root {
   --radius: 0.5rem;
-  --memento-desk: #F9F8F6;
-  --background: #F9F8F6;
+  --memento-desk: #E5E2D9;
+  --background: #F2F0E9;
   --foreground: #212529;
   --card: #ffffff;
   --card-foreground: #212529;
@@ -365,7 +367,7 @@ html.dark .memento-active-nav {
   --pinned-gold: #F59E0B;
   --sage-green: #10B981;
 
-  --sidebar: #ffffff;
+  --sidebar: #F6F4F0;
   --sidebar-foreground: #212529;
   --sidebar-primary: #212529;
   --sidebar-primary-foreground: #F9F8F6;
@@ -403,7 +405,7 @@ html.dark {
   --border: rgba(28, 28, 28, 0.1);
   --input: rgba(28, 28, 28, 0.12);
   --ring: rgba(28, 28, 28, 0.35);
-  --sidebar: color-mix(in oklab, #ffffff 65%, #F2F0E9);
+  --sidebar: #F6F4F0;
   --sidebar-foreground: #1C1C1C;
   --sidebar-primary: #1C1C1C;
   --sidebar-primary-foreground: #F2F0E9;
diff --git a/memento-note/app/layout.tsx b/memento-note/app/layout.tsx
index db48e02..531d560 100644
--- a/memento-note/app/layout.tsx
+++ b/memento-note/app/layout.tsx
@@ -75,6 +75,10 @@ const directionScript = `
 (function(){
   try {
     var lang = localStorage.getItem('user-language');
+    if (!lang) {
+      var c = document.cookie.split(';').map(function(s){return s.trim()}).find(function(s){return s.startsWith('user-language=')});
+      if (c) lang = c.split('=')[1];
+    }
     if (lang === 'fa' || lang === 'ar') {
       document.documentElement.dir = 'rtl';
       document.documentElement.lang = lang;
diff --git a/memento-note/components/admin-providers-wrapper.tsx b/memento-note/components/admin-providers-wrapper.tsx
index 796479c..666a4cf 100644
--- a/memento-note/components/admin-providers-wrapper.tsx
+++ b/memento-note/components/admin-providers-wrapper.tsx
@@ -1,6 +1,8 @@
 'use client'
 
 import { LanguageProvider } from '@/lib/i18n/LanguageProvider'
+import { NoteRefreshProvider } from '@/context/NoteRefreshContext'
+import { QueryProvider } from '@/components/query-provider'
 import type { Translations } from '@/lib/i18n/load-translations'
 import type { ReactNode } from 'react'
 
@@ -16,11 +18,15 @@ export function AdminProvidersWrapper({
   initialTranslations,
 }: AdminProvidersWrapperProps) {
   return (
-    <LanguageProvider
-      initialLanguage={initialLanguage as any}
-      initialTranslations={initialTranslations}
-    >
-      {children}
-    </LanguageProvider>
+    <QueryProvider>
+      <NoteRefreshProvider>
+        <LanguageProvider
+          initialLanguage={initialLanguage as any}
+          initialTranslations={initialTranslations}
+        >
+          {children}
+        </LanguageProvider>
+      </NoteRefreshProvider>
+    </QueryProvider>
   )
 }
diff --git a/memento-note/components/ai-chat.tsx b/memento-note/components/ai-chat.tsx
index ca520d1..29e99f0 100644
--- a/memento-note/components/ai-chat.tsx
+++ b/memento-note/components/ai-chat.tsx
@@ -152,18 +152,18 @@ export function AIChat({ showFloatingTrigger = true }: { showFloatingTrigger?: b
     return (
       <Button
         onClick={() => setIsOpen(true)}
-        className="fixed bottom-6 right-6 h-12 w-12 rounded-full shadow-xl z-40 transition-transform hover:scale-105 bg-[#E9ECEF] text-[#1C1C1C] hover:bg-[#E9ECEF]/80 border border-black/5"
+        className="fixed bottom-6 right-6 h-12 w-12 rounded-full shadow-xl z-40 transition-transform hover:scale-105 bg-muted text-foreground hover:bg-muted/80 border border-border"
         size="icon"
         title={t('ai.openAssistant')}
       >
-        <Sparkles className="h-5 w-5" />
+        <Sparkles className="h-5 w-5 text-memento-accent" />
       </Button>
     )
   }
 
   return (
     <aside className={cn(
-      "fixed bottom-20 right-6 border border-border/40 bg-[#FDFDFE] flex flex-col z-40 shadow-2xl rounded-2xl overflow-hidden transition-all duration-300",
+      "fixed bottom-20 right-6 border border-border/40 bg-background flex flex-col z-40 shadow-2xl rounded-2xl overflow-hidden transition-all duration-300",
       isExpanded ? "w-[80vw] h-[85vh] max-w-[1200px]" : "h-[700px] max-h-[85vh] w-[360px]"
     )}>
       {/* Header */}
@@ -207,7 +207,7 @@ export function AIChat({ showFloatingTrigger = true }: { showFloatingTrigger?: b
           onClick={() => setActiveTab('chat')}
           className={cn(
             "flex-1 pb-3 border-b-2 text-sm font-semibold flex items-center justify-center gap-2 transition-all",
-            activeTab === 'chat' ? "border-[#75B2D6] text-[#75B2D6]" : "border-transparent text-muted-foreground hover:text-foreground"
+            activeTab === 'chat' ? "border-memento-blue text-memento-blue" : "border-transparent text-muted-foreground hover:text-foreground"
           )}
         >
           <Bot className="h-4 w-4" /> {t('ai.chatTab')}
@@ -216,7 +216,7 @@ export function AIChat({ showFloatingTrigger = true }: { showFloatingTrigger?: b
           onClick={() => setActiveTab('insights')}
           className={cn(
             "flex-1 pb-3 border-b-2 text-sm font-semibold flex items-center justify-center gap-2 transition-all",
-            activeTab === 'insights' ? "border-[#75B2D6] text-[#75B2D6]" : "border-transparent text-muted-foreground hover:text-foreground"
+            activeTab === 'insights' ? "border-memento-blue text-memento-blue" : "border-transparent text-muted-foreground hover:text-foreground"
           )}
         >
           <Sparkles className="h-4 w-4" /> {t('ai.insightsTab')}
@@ -225,7 +225,7 @@ export function AIChat({ showFloatingTrigger = true }: { showFloatingTrigger?: b
           onClick={() => setActiveTab('history')}
           className={cn(
             "flex-1 pb-3 border-b-2 text-sm font-semibold flex items-center justify-center gap-2 transition-all",
-            activeTab === 'history' ? "border-[#75B2D6] text-[#75B2D6]" : "border-transparent text-muted-foreground hover:text-foreground"
+            activeTab === 'history' ? "border-memento-blue text-memento-blue" : "border-transparent text-muted-foreground hover:text-foreground"
           )}
         >
           <History className="h-4 w-4" /> {t('ai.historyTab')}
@@ -239,10 +239,10 @@ export function AIChat({ showFloatingTrigger = true }: { showFloatingTrigger?: b
             {/* AI Welcome Message */}
             {messages.length === 0 && (
               <div className="flex gap-3">
-                <div className="w-8 h-8 rounded-full bg-[#75B2D6]/10 text-[#75B2D6] flex items-center justify-center flex-shrink-0 border border-[#75B2D6]/20">
+                <div className="w-8 h-8 rounded-full bg-memento-blue/10 text-memento-blue flex items-center justify-center flex-shrink-0 border border-memento-blue/20">
                   <Bot className="h-4 w-4" />
                 </div>
-                <div className="bg-[#FDFDFE] border border-border/50 p-3.5 rounded-2xl rounded-tl-sm shadow-sm">
+                <div className="bg-background border border-border/50 p-3.5 rounded-2xl rounded-tl-sm shadow-sm">
                   <p className="text-sm text-foreground leading-relaxed">
                     {t('ai.welcomeMsg')}
                   </p>
@@ -260,16 +260,16 @@ export function AIChat({ showFloatingTrigger = true }: { showFloatingTrigger?: b
                   <div className={cn(
                     'w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 border text-[10px] font-bold',
                     msg.role === 'user'
-                      ? 'bg-zinc-100 border-zinc-200 text-zinc-600'
-                      : 'bg-[#75B2D6]/10 text-[#75B2D6] border-[#75B2D6]/20',
+                      ? 'bg-muted border-border text-muted-foreground'
+                      : 'bg-memento-blue/10 text-memento-blue border-memento-blue/20',
                   )}>
                     {msg.role === 'user' ? 'U' : <Bot className="h-4 w-4" />}
                   </div>
                   <div className={cn(
                     'max-w-[85%] p-3.5 rounded-2xl text-sm leading-relaxed shadow-sm',
                     msg.role === 'user'
-                      ? 'bg-[#75B2D6] text-white rounded-tr-sm'
-                      : 'bg-[#FDFDFE] border border-border/50 rounded-tl-sm text-foreground',
+                      ? 'bg-memento-blue text-white rounded-tr-sm'
+                      : 'bg-background border border-border/50 rounded-tl-sm text-foreground',
                   )}>
                     {msg.role === 'assistant'
                       ? <MarkdownContent content={text} />
@@ -281,10 +281,10 @@ export function AIChat({ showFloatingTrigger = true }: { showFloatingTrigger?: b
             
             {isLoading && (
               <div className="flex gap-3">
-                <div className="w-8 h-8 rounded-full bg-[#75B2D6]/10 text-[#75B2D6] flex items-center justify-center flex-shrink-0 border border-[#75B2D6]/20">
+                <div className="w-8 h-8 rounded-full bg-memento-blue/10 text-memento-blue flex items-center justify-center flex-shrink-0 border border-memento-blue/20">
                   <Bot className="h-4 w-4" />
                 </div>
-                <div className="bg-[#FDFDFE] border border-border/50 p-3.5 rounded-2xl rounded-tl-sm shadow-sm">
+                <div className="bg-background border border-border/50 p-3.5 rounded-2xl rounded-tl-sm shadow-sm">
                   <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
                 </div>
               </div>
@@ -295,7 +295,7 @@ export function AIChat({ showFloatingTrigger = true }: { showFloatingTrigger?: b
         
         {activeTab === 'insights' && (
           <div className="h-full">
-            <h3 className="text-sm font-semibold mb-4 flex items-center gap-2"><Sparkles className="h-4 w-4 text-[#75B2D6]" /> {t('ai.summaryLast5')}</h3>
+            <h3 className="text-sm font-semibold mb-4 flex items-center gap-2"><Sparkles className="h-4 w-4 text-memento-accent" /> {t('ai.summaryLast5')}</h3>
             {insightsLoading ? (
               <div className="flex flex-col items-center justify-center py-10 opacity-60">
                 <Loader2 className="h-8 w-8 animate-spin mb-4 text-muted-foreground" />
@@ -323,7 +323,7 @@ export function AIChat({ showFloatingTrigger = true }: { showFloatingTrigger?: b
               history.map(conv => (
                 <button 
                   key={conv.id}
-                  className="w-full text-left p-3 rounded-xl border border-border/50 hover:bg-muted/50 hover:border-[#75B2D6]/30 transition-all flex flex-col gap-1"
+                  className="w-full text-left p-3 rounded-xl border border-border/50 hover:bg-muted/50 hover:border-memento-blue/30 transition-all flex flex-col gap-1"
                   onClick={() => {
                     setConversationId(conv.id)
                     setMessages(conv.messages.map((m: any) => ({
@@ -350,12 +350,12 @@ export function AIChat({ showFloatingTrigger = true }: { showFloatingTrigger?: b
       </div>
 
       {/* Input Area & Tone Controls (Only in Chat tab) */}
-      <div className={cn("p-4 border-t border-border/40 bg-[#FDFDFE] shrink-0", activeTab !== 'chat' && "hidden")}>
+      <div className={cn("p-4 border-t border-border/40 bg-background shrink-0", activeTab !== 'chat' && "hidden")}>
         {/* Context Scope */}
         <div className="mb-3">
           <span className="text-[9px] font-bold uppercase tracking-widest text-muted-foreground block mb-1.5 ml-1">{t('ai.discussionContextLabel')}</span>
           <Select value={chatScope} onValueChange={setChatScope}>
-            <SelectTrigger className="h-8 text-xs bg-[#FDFDFE] border-border/60">
+            <SelectTrigger className="h-8 text-xs bg-background border-border/60">
               <SelectValue placeholder={t('ai.selectNotebook')} />
             </SelectTrigger>
             <SelectContent>
@@ -392,8 +392,8 @@ export function AIChat({ showFloatingTrigger = true }: { showFloatingTrigger?: b
                   className={cn(
                     "py-1 rounded-md border text-[10px] font-medium transition-all flex flex-col items-center justify-center gap-0.5",
                     isSelected 
-                      ? "border-[#75B2D6] bg-[#75B2D6]/10 text-[#75B2D6] shadow-sm" 
-                      : "border-border/60 bg-[#FDFDFE] text-muted-foreground hover:bg-muted hover:border-border"
+                      ? "border-memento-blue bg-memento-blue/10 text-memento-blue shadow-sm" 
+                      : "border-border/60 bg-background text-muted-foreground hover:bg-muted hover:border-border"
                   )}
                 >
                   <Icon className="h-3 w-3" />
@@ -405,7 +405,7 @@ export function AIChat({ showFloatingTrigger = true }: { showFloatingTrigger?: b
         </div>
 
         {/* Text Input */}
-        <div className="relative bg-[#FDFDFE] border border-border/60 rounded-xl p-1 focus-within:border-[#75B2D6] focus-within:ring-1 focus-within:ring-[#75B2D6]/20 transition-all shadow-sm">
+        <div className="relative bg-background border border-border/60 rounded-xl p-1 focus-within:border-memento-blue focus-within:ring-1 focus-within:ring-memento-blue/20 transition-all shadow-sm">
           <textarea 
             className="w-full bg-transparent border-none focus:ring-0 resize-none text-sm text-foreground placeholder:text-muted-foreground/70 p-2 min-h-[60px] max-h-[120px]" 
             placeholder={t('ai.chatPlaceholder')} 
@@ -440,7 +440,7 @@ export function AIChat({ showFloatingTrigger = true }: { showFloatingTrigger?: b
             ) : (
               <Button
                 size="icon"
-                className="h-8 w-8 rounded-lg bg-[#75B2D6] text-white shadow-sm hover:shadow-md transition-all"
+                className="h-8 w-8 rounded-lg bg-memento-blue text-white shadow-sm hover:shadow-md transition-all"
                 onClick={handleSend}
                 disabled={!input.trim()}
               >
diff --git a/memento-note/components/chat/chat-container.tsx b/memento-note/components/chat/chat-container.tsx
index e7e9b1c..6511657 100644
--- a/memento-note/components/chat/chat-container.tsx
+++ b/memento-note/components/chat/chat-container.tsx
@@ -188,7 +188,7 @@ export function ChatContainer({ initialConversations, notebooks, webSearchAvaila
   }, [displayMessages])
 
   return (
-    <div className="flex-1 flex overflow-hidden bg-white dark:bg-[#1a1c22]">
+    <div className="flex-1 flex overflow-hidden bg-background">
       <ChatSidebar
         conversations={conversations}
         currentId={currentId}
@@ -202,7 +202,7 @@ export function ChatContainer({ initialConversations, notebooks, webSearchAvaila
           <ChatMessages messages={displayMessages} isLoading={isLoading || isLoadingHistory} />
         </div>
 
-        <div className="w-full flex justify-center sticky bottom-0 bg-gradient-to-t from-white dark:from-[#1a1c22] via-white/90 dark:via-[#1a1c22]/90 to-transparent pt-6 pb-4">
+        <div className="w-full flex justify-center sticky bottom-0 bg-gradient-to-t from-background via-background/90 to-transparent pt-6 pb-4">
           <div className="w-full max-w-4xl px-4">
             <ChatInput
               onSend={handleSendMessage}
diff --git a/memento-note/components/chat/chat-input.tsx b/memento-note/components/chat/chat-input.tsx
index 62fc4a9..c847655 100644
--- a/memento-note/components/chat/chat-input.tsx
+++ b/memento-note/components/chat/chat-input.tsx
@@ -64,7 +64,7 @@ export function ChatInput({ onSend, isLoading, onStop, notebooks, currentNoteboo
 
   return (
     <div className="w-full relative">
-      <div className="relative flex flex-col bg-slate-50 dark:bg-[#202228] rounded-[24px] border border-slate-200/60 dark:border-white/10 shadow-sm focus-within:shadow-md focus-within:border-slate-300 dark:focus-within:border-white/20 transition-all duration-300 overflow-hidden">
+      <div className="relative flex flex-col bg-muted/50 rounded-[24px] border border-border/60 shadow-sm focus-within:shadow-md focus-within:border-border transition-all duration-300 overflow-hidden">
         
         {/* Input Area */}
         <Textarea
@@ -84,7 +84,7 @@ export function ChatInput({ onSend, isLoading, onStop, notebooks, currentNoteboo
               value={selectedNotebook || 'global'}
               onValueChange={(val) => setSelectedNotebook(val === 'global' ? undefined : val)}
             >
-              <SelectTrigger className="h-8 w-auto min-w-[130px] rounded-full bg-white dark:bg-[#1a1c22] border-slate-200 dark:border-white/10 shadow-sm text-xs font-medium gap-2 ring-offset-transparent focus:ring-0 focus:ring-offset-0 hover:bg-slate-50 dark:hover:bg-[#252830] transition-colors">
+              <SelectTrigger className="h-8 w-auto min-w-[130px] rounded-full bg-background border-border/60 shadow-sm text-xs font-medium gap-2 ring-offset-transparent focus:ring-0 focus:ring-offset-0 hover:bg-muted/50 transition-colors">
                 <BookOpen className="h-3.5 w-3.5 text-muted-foreground" />
                 <SelectValue placeholder={t('chat.allNotebooks')} />
               </SelectTrigger>
@@ -113,9 +113,9 @@ export function ChatInput({ onSend, isLoading, onStop, notebooks, currentNoteboo
                 onClick={onToggleWebSearch}
                 className={cn(
                   "h-8 rounded-full border shadow-sm text-xs font-medium gap-1.5 flex items-center px-3 transition-all duration-200",
-                  webSearchEnabled
-                    ? "bg-primary/10 text-primary border-primary/30 hover:bg-primary/20"
-                    : "bg-white dark:bg-[#1a1c22] border-slate-200 dark:border-white/10 text-slate-500 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-[#252830]"
+                    webSearchEnabled
+                      ? "bg-primary/10 text-primary border-primary/30 hover:bg-primary/20"
+                      : "bg-background border-border/60 text-muted-foreground hover:bg-muted/50"
                 )}
               >
                 <Globe className="h-3.5 w-3.5" />
diff --git a/memento-note/components/chat/chat-messages.tsx b/memento-note/components/chat/chat-messages.tsx
index 5d75832..18a1393 100644
--- a/memento-note/components/chat/chat-messages.tsx
+++ b/memento-note/components/chat/chat-messages.tsx
@@ -52,7 +52,7 @@ export function ChatMessages({ messages, isLoading }: ChatMessagesProps) {
             )}
           >
             {msg.role === 'user' ? (
-              <div dir="auto" className="max-w-[85%] md:max-w-[70%] bg-[#f4f4f5] dark:bg-[#2a2d36] text-slate-800 dark:text-slate-100 rounded-3xl rounded-br-md px-6 py-4 shadow-sm border border-slate-200/50 dark:border-white/5">
+              <div dir="auto" className="max-w-[85%] md:max-w-[70%] bg-muted text-foreground rounded-3xl rounded-br-md px-6 py-4 shadow-sm border border-border/50">
                 <div className="prose prose-sm dark:prose-invert max-w-none text-[15px] leading-relaxed">
                   <ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>
                 </div>
diff --git a/memento-note/components/chat/chat-sidebar.tsx b/memento-note/components/chat/chat-sidebar.tsx
index 20d4e6c..9241144 100644
--- a/memento-note/components/chat/chat-sidebar.tsx
+++ b/memento-note/components/chat/chat-sidebar.tsx
@@ -46,7 +46,7 @@ export function ChatSidebar({
   }
 
   return (
-    <div className="w-64 border-r flex flex-col h-full bg-white dark:bg-[#1e2128]">
+    <div className="w-64 border-r flex flex-col h-full bg-sidebar">
       <div className="p-4 border-bottom">
         <Button
           onClick={onNew}
diff --git a/memento-note/components/contextual-ai-chat.tsx b/memento-note/components/contextual-ai-chat.tsx
index ea2ec0c..167dd4d 100644
--- a/memento-note/components/contextual-ai-chat.tsx
+++ b/memento-note/components/contextual-ai-chat.tsx
@@ -139,7 +139,7 @@ export function ContextualAIChat({
   const { t, language } = useLanguage()
   const webSearchAvailable = useWebSearchAvailable()
 
-  const [activeTab, setActiveTab]           = useState<'chat' | 'actions' | 'resource'>('chat')
+  const [activeTab, setActiveTab]           = useState<'chat' | 'actions' | 'resource'>('actions')
   const [selectedTone, setSelectedTone]     = useState('professional')
   const [input, setInput]                   = useState('')
   const [chatScope, setChatScope]           = useState<'note' | 'all' | string>('note')
@@ -482,12 +482,12 @@ export function ContextualAIChat({
     <>
       {expanded && (
         <div
-          className="fixed inset-0 z-[199] bg-[#1C1C1C]/40 backdrop-blur-sm"
+          className="fixed inset-0 z-[199] bg-foreground/40 backdrop-blur-sm"
           onClick={() => setExpanded(false)}
         />
       )}
       <aside className={cn(
-        'border-l border-border bg-[#FDFDFE] flex flex-col flex-shrink-0 z-10 transition-all duration-300 shadow-2xl',
+        'border-l border-border bg-background flex flex-col flex-shrink-0 z-10 transition-all duration-300 shadow-2xl',
         expanded
           ? 'fixed right-0 top-0 h-screen w-[640px] z-[200]'
           : 'h-full w-[360px]',
@@ -497,25 +497,25 @@ export function ContextualAIChat({
         <div className="p-6 border-b border-border shrink-0">
           <div className="flex items-start justify-between">
             <div className="min-w-0 space-y-2">
-              <h2 className="font-serif text-xl font-medium text-[#1C1C1C] flex items-center gap-2 leading-tight">
+              <h2 className="font-serif text-xl font-medium text-foreground flex items-center gap-2 leading-tight">
                 <Sparkles className="h-[18px] w-[18px] shrink-0 text-memento-accent" />
                 IA Assistant
               </h2>
-              <p className="text-[11px] text-[#1C1C1C]/60 uppercase tracking-wider font-medium opacity-60 truncate">
+              <p className="text-[11px] text-foreground/60 uppercase tracking-wider font-medium opacity-60 truncate">
                 "{noteTitle || t('ai.currentNote')}"
               </p>
             </div>
             <div className="flex items-center gap-1 shrink-0 -mt-1">
               <button
                 onClick={() => setExpanded(e => !e)}
-                className="p-1.5 hover:bg-white/40 rounded-full transition-colors text-[#1C1C1C]/40"
+                className="p-1.5 hover:bg-muted/60 rounded-full transition-colors text-foreground/40"
                 title={expanded ? t('ai.shrinkPanel') : t('ai.expandPanel')}
               >
                 {expanded ? <Minimize2 size={18} /> : <Maximize2 size={18} />}
               </button>
               <button 
                 onClick={onClose}
-                className="p-1.5 hover:bg-white/40 rounded-full transition-colors text-[#1C1C1C]/40 group"
+                className="p-1.5 hover:bg-muted/60 rounded-full transition-colors text-foreground/40 group"
               >
                 <div className="relative w-5 h-5 flex items-center justify-center">
                   <ChevronRight size={20} className="transition-all duration-200 group-hover:opacity-0 group-hover:scale-0" />
@@ -528,8 +528,8 @@ export function ContextualAIChat({
 
         <div className="flex border-b border-border shrink-0 px-2">
           {[
-            { id: 'chat',     label: 'Discussion',       icon: <MessageSquare size={16} /> },
             { id: 'actions',  label: 'Actions',          icon: <Sparkles size={16} /> },
+            { id: 'chat',     label: 'Discussion',       icon: <MessageSquare size={16} /> },
             { id: 'resource', label: 'Ressource',        icon: <Link2 size={16} /> },
           ].map(tab => (
             <button
@@ -537,12 +537,12 @@ export function ContextualAIChat({
               onClick={() => setActiveTab(tab.id as any)}
               className={cn(
                 "flex-1 flex items-center justify-center gap-2 py-3.5 text-[10px] font-bold uppercase tracking-[0.2em] transition-all relative",
-                activeTab === tab.id ? 'text-[#1C1C1C]' : 'text-[#1C1C1C]/60 hover:text-[#1C1C1C]'
+                activeTab === tab.id ? 'text-foreground' : 'text-foreground/60 hover:text-foreground'
               )}
             >
               {tab.label}
               {activeTab === tab.id && (
-                <motion.div layoutId="activeTab" className="absolute bottom-0 left-0 right-0 h-[2px] bg-memento-accent" />
+                <motion.div layoutId="activeTab" className="absolute bottom-0 left-0 right-0 h-[2px] bg-memento-blue" />
               )}
             </button>
           ))}
@@ -550,40 +550,40 @@ export function ContextualAIChat({
 
         <div className="flex-1 flex flex-col min-h-0 relative">
           {actionPreview && (
-            <div className="absolute inset-0 z-20 flex flex-col bg-[#FDFDFE]/95 backdrop-blur-md animate-in fade-in slide-in-from-top-4 duration-300">
+            <div className="absolute inset-0 z-20 flex flex-col bg-background/95 backdrop-blur-md animate-in fade-in slide-in-from-top-4 duration-300">
               <div className="px-6 py-4 border-b border-border flex items-center justify-between shrink-0">
-                <p className="text-[10px] font-bold uppercase tracking-widest text-[#75B2D6]">{actionPreview.label}</p>
-                <button onClick={handleDiscardPreview} className="text-[#1C1C1C]/40 hover:text-[#1C1C1C]"><X size={18} /></button>
+                <p className="text-[10px] font-bold uppercase tracking-widest text-memento-blue">{actionPreview.label}</p>
+                <button onClick={handleDiscardPreview} className="text-foreground/40 hover:text-foreground"><X size={18} /></button>
               </div>
               <div className="flex-1 overflow-y-auto p-6 custom-scrollbar">
-                <div className="bg-white/60 backdrop-blur-sm border border-border p-6 rounded-2xl shadow-sm leading-relaxed text-sm">
+                <div className="bg-card/60 backdrop-blur-sm border border-border p-6 rounded-2xl shadow-sm leading-relaxed text-sm">
                   <MarkdownContent content={actionPreview.text} />
                 </div>
               </div>
               <div className="p-6 border-t border-border flex gap-3 shrink-0">
-                <button onClick={handleDiscardPreview} className="flex-1 py-3.5 text-[10px] font-bold uppercase tracking-widest text-[#1C1C1C]/40 hover:text-[#1C1C1C] transition-all">ANNULER</button>
-                <button onClick={handleApplyPreview} className="flex-1 py-3.5 bg-[#1C1C1C] text-[#FDFDFE] rounded-xl text-[10px] font-bold uppercase tracking-widest shadow-lg transition-all hover:opacity-90">APPLIQUER À LA NOTE</button>
+                <button onClick={handleDiscardPreview} className="flex-1 py-3.5 text-[10px] font-bold uppercase tracking-widest text-foreground/40 hover:text-foreground transition-all">ANNULER</button>
+                <button onClick={handleApplyPreview} className="flex-1 py-3.5 bg-foreground text-background rounded-xl text-[10px] font-bold uppercase tracking-widest shadow-lg transition-all hover:opacity-90">APPLIQUER À LA NOTE</button>
               </div>
             </div>
           )}
 
           {resourcePreview && (
-            <div className="absolute inset-0 z-20 flex flex-col bg-[#FDFDFE]/95 backdrop-blur-md animate-in fade-in slide-in-from-top-4 duration-300">
+            <div className="absolute inset-0 z-20 flex flex-col bg-background/95 backdrop-blur-md animate-in fade-in slide-in-from-top-4 duration-300">
               <div className="px-6 py-4 border-b border-border/40 flex items-center justify-between shrink-0">
                 <p className="text-[10px] font-bold uppercase tracking-widest text-memento-blue">
                   {resourcePreview.source === 'chat' ? 'Injecter depuis Discussion' : 'Aperçu IA'}
                 </p>
-                <button onClick={() => setResourcePreview(null)} className="text-[#1C1C1C]/40 hover:text-[#1C1C1C]">
+                <button onClick={() => setResourcePreview(null)} className="text-foreground/40 hover:text-foreground">
                   <X size={18} />
                 </button>
               </div>
               <div className="flex-1 overflow-y-auto p-6 custom-scrollbar">
-                <div className="bg-white/60 backdrop-blur-sm border border-border p-6 rounded-2xl shadow-sm leading-relaxed text-sm">
+                <div className="bg-card/60 backdrop-blur-sm border border-border p-6 rounded-2xl shadow-sm leading-relaxed text-sm">
                   <MarkdownContent content={resourcePreview.text} />
                 </div>
               </div>
               <div className="p-6 border-t border-border flex gap-3 shrink-0">
-                <button onClick={() => setResourcePreview(null)} className="flex-1 py-3.5 text-[10px] font-bold uppercase tracking-widest text-[#1C1C1C]/40 hover:text-[#1C1C1C] transition-all">ANNULER</button>
+                <button onClick={() => setResourcePreview(null)} className="flex-1 py-3.5 text-[10px] font-bold uppercase tracking-widest text-foreground/40 hover:text-foreground transition-all">ANNULER</button>
                 <button onClick={handleApplyResourcePreview} className="flex-1 py-3.5 bg-memento-blue text-white rounded-xl text-[10px] font-bold uppercase tracking-widest shadow-lg shadow-memento-blue/20 transition-all hover:opacity-90">APPLIQUER À LA NOTE</button>
               </div>
             </div>
@@ -601,10 +601,10 @@ export function ContextualAIChat({
                 <div className="flex-1 overflow-y-auto p-6 custom-scrollbar space-y-8">
                   {messages.length === 0 && (
                     <div className="h-full flex flex-col items-center justify-center text-center space-y-6 py-12">
-                      <div className="w-20 h-20 rounded-full bg-white/40 backdrop-blur-sm border border-dashed border-border flex items-center justify-center shadow-sm">
+                      <div className="w-20 h-20 rounded-full bg-card/40 backdrop-blur-sm border border-dashed border-border flex items-center justify-center shadow-sm">
                         <MessageSquare size={32} className="text-memento-blue/60" />
                       </div>
-                      <p className="text-xs font-serif italic text-[#1C1C1C]/40 leading-relaxed max-w-[200px]">Posez une question à l'Assistant pour commencer.</p>
+                      <p className="text-xs font-serif italic text-foreground/40 leading-relaxed max-w-[200px]">Posez une question à l'Assistant pour commencer.</p>
                     </div>
                   )}
                   {messages.map((msg: UIMessage) => {
@@ -614,14 +614,14 @@ export function ContextualAIChat({
                     return (
                       <div key={msg.id} className={cn('flex flex-col gap-3', !isAssistant && 'items-end')} onMouseEnter={() => isAssistant && setHoveredMsgId(msg.id)} onMouseLeave={() => setHoveredMsgId(null)}>
                         <div className="relative group max-w-[95%]">
-                          <div className={cn('p-5 rounded-2xl text-sm leading-relaxed transition-all shadow-sm', !isAssistant ? 'bg-[#1C1C1C] text-[#FDFDFE]' : 'bg-white/60 backdrop-blur-sm border border-border text-[#1C1C1C]')}>
+                          <div className={cn('p-5 rounded-2xl text-sm leading-relaxed transition-all shadow-sm', !isAssistant ? 'bg-foreground text-background' : 'bg-card/60 backdrop-blur-sm border border-border text-foreground')}>
                             {isAssistant ? <MarkdownContent content={content} /> : <p className="font-medium">{content}</p>}
                           </div>
                           {isAssistant && onApplyToNote && (hoveredMsgId === msg.id || messages.at(-1)?.id === msg.id) && (
                             <div className="flex gap-2 mt-3 opacity-0 group-hover:opacity-100 transition-all">
-                              <button onClick={() => handleInjectFromChat(content, 'replace')} className="px-3 py-1.5 rounded-lg text-[9px] font-bold uppercase tracking-widest bg-[#1C1C1C] text-[#FDFDFE] hover:opacity-90">REPLACER</button>
-                              <button onClick={() => handleInjectFromChat(content, 'complete')} className="px-3 py-1.5 rounded-lg text-[9px] font-bold uppercase tracking-widest bg-white/40 backdrop-blur-sm border border-border text-[#1C1C1C] hover:bg-white/60">COMPLÉTER</button>
-                              <button onClick={() => handleInjectFromChat(content, 'merge')} className="px-3 py-1.5 rounded-lg text-[9px] font-bold uppercase tracking-widest bg-white/40 backdrop-blur-sm border border-border text-[#1C1C1C] hover:bg-white/60">FUSIONNER</button>
+                              <button onClick={() => handleInjectFromChat(content, 'replace')} className="px-3 py-1.5 rounded-lg text-[9px] font-bold uppercase tracking-widest bg-foreground text-background hover:opacity-90">REPLACER</button>
+                              <button onClick={() => handleInjectFromChat(content, 'complete')} className="px-3 py-1.5 rounded-lg text-[9px] font-bold uppercase tracking-widest bg-card/40 backdrop-blur-sm border border-border text-foreground hover:bg-card/60">COMPLÉTER</button>
+                              <button onClick={() => handleInjectFromChat(content, 'merge')} className="px-3 py-1.5 rounded-lg text-[9px] font-bold uppercase tracking-widest bg-card/40 backdrop-blur-sm border border-border text-foreground hover:bg-card/60">FUSIONNER</button>
                             </div>
                           )}
                         </div>
@@ -630,7 +630,7 @@ export function ContextualAIChat({
                   })}
                   {isLoading && (
                     <div className="flex flex-col gap-3">
-                      <div className="bg-white/60 backdrop-blur-sm border border-border p-5 rounded-2xl shadow-sm w-fit">
+                      <div className="bg-card/60 backdrop-blur-sm border border-border p-5 rounded-2xl shadow-sm w-fit">
                         <div className="flex gap-1.5"><span className="w-1.5 h-1.5 bg-memento-blue rounded-full animate-pulse" /><span className="w-1.5 h-1.5 bg-memento-blue rounded-full animate-pulse delay-75" /><span className="w-1.5 h-1.5 bg-memento-blue rounded-full animate-pulse delay-150" /></div>
                       </div>
                     </div>
@@ -642,15 +642,15 @@ export function ContextualAIChat({
                 <div className="px-6 py-8 border-t border-border shrink-0 space-y-6">
                   <div className="grid grid-cols-2 gap-4">
                     <div className="space-y-3">
-                      <label className="text-[10px] uppercase tracking-[0.25em] font-bold text-[#1C1C1C]/40 px-1">CONTEXTE</label>
+                      <label className="text-[10px] uppercase tracking-[0.25em] font-bold text-foreground/40 px-1">CONTEXTE</label>
                       <Select value={chatScope} onValueChange={setChatScope}>
-                        <SelectTrigger className="w-full h-10 px-3 bg-white/60 backdrop-blur-sm border border-border rounded-xl text-[11px] flex items-center justify-between cursor-pointer hover:border-[#1C1C1C]/20 transition-all outline-none ring-0 shadow-sm text-[#1C1C1C]">
+                        <SelectTrigger className="w-full h-10 px-3 bg-card/60 backdrop-blur-sm border border-border rounded-xl text-[11px] flex items-center justify-between cursor-pointer hover:border-foreground/20 transition-all outline-none ring-0 shadow-sm text-foreground">
                           <div className="flex items-center gap-2">
-                            <BookOpen size={14} className="text-[#1C1C1C]/40" />
+                            <BookOpen size={14} className="text-foreground/40" />
                             <SelectValue />
                           </div>
                         </SelectTrigger>
-                        <SelectContent className="rounded-xl border-border shadow-xl bg-[#FDFDFE]">
+                        <SelectContent className="rounded-xl border-border shadow-xl bg-background">
                           <SelectItem value="note" className="text-[11px] py-2.5 uppercase tracking-wider font-bold">Cette note</SelectItem>
                           <SelectItem value="all" className="text-[11px] py-2.5 uppercase tracking-wider font-bold">Tout Momento</SelectItem>
                           {notebooks.map(nb => (
@@ -660,7 +660,7 @@ export function ContextualAIChat({
                       </Select>
                     </div>
                     <div className="space-y-3">
-                      <label className="text-[10px] uppercase tracking-[0.25em] font-bold text-[#1C1C1C]/40 px-1">TON D'ÉCRITURE</label>
+                      <label className="text-[10px] uppercase tracking-[0.25em] font-bold text-foreground/40 px-1">TON D'ÉCRITURE</label>
                       <div className="grid grid-cols-4 gap-1.5">
                         {TONES.map((tone) => {
                           const Icon = tone.icon
@@ -673,10 +673,10 @@ export function ContextualAIChat({
                                 'h-[52px] rounded-xl border transition-all flex flex-col items-center justify-center gap-1.5 shadow-sm',
                                 isActive 
                                   ? 'bg-memento-blue/10 border-memento-blue text-memento-blue' 
-                                  : 'bg-white/60 border-border text-[#1C1C1C]/40 hover:border-[#1C1C1C]/20'
+                                  : 'bg-card/60 border-border text-foreground/40 hover:border-foreground/20'
                               )}
                             >
-                              <Icon size={14} className={isActive ? 'text-memento-blue' : 'text-[#1C1C1C]/40'} />
+                              <Icon size={14} className={isActive ? 'text-memento-blue' : 'text-foreground/40'} />
                               <span className="text-[9px] font-bold uppercase tracking-tight">{tone.label}</span>
                             </button>
                           )
@@ -688,7 +688,7 @@ export function ContextualAIChat({
                   <div className="relative">
                     <textarea
                       rows={4}
-                      className="w-full bg-white/60 border border-border rounded-2xl p-5 pr-14 text-sm outline-none focus:border-memento-blue transition-all resize-none leading-relaxed font-light custom-scrollbar shadow-sm text-[#1C1C1C]"
+                      className="w-full bg-card/60 border border-border rounded-2xl p-5 pr-14 text-sm outline-none focus:border-memento-blue transition-all resize-none leading-relaxed font-light custom-scrollbar shadow-sm text-foreground"
                       placeholder="Posez votre question sur cette note..."
                       value={input}
                       onChange={e => setInput(e.target.value)}
@@ -698,7 +698,7 @@ export function ContextualAIChat({
                     <div className="absolute right-4 bottom-4 flex gap-2">
                       <button 
                         onClick={() => setWebSearch(!webSearch)}
-                        className={cn("p-2.5 rounded-xl transition-colors", webSearch ? "text-memento-blue bg-memento-blue/10" : "text-[#1C1C1C]/20 hover:text-[#1C1C1C]")}
+                        className={cn("p-2.5 rounded-xl transition-colors", webSearch ? "text-memento-blue bg-memento-blue/10" : "text-foreground/20 hover:text-foreground")}
                         title="Web Search"
                       >
                         <Globe size={18} />
@@ -708,7 +708,7 @@ export function ContextualAIChat({
                       </button>
                     </div>
                   </div>
-                  <p className="text-[9px] text-[#1C1C1C]/30 text-center mt-2 uppercase tracking-[0.2em] font-bold italic">Maj+Entrée = nouvelle ligne</p>
+                  <p className="text-[9px] text-foreground/30 text-center mt-2 uppercase tracking-[0.2em] font-bold italic">Maj+Entrée = nouvelle ligne</p>
                 </div>
               </motion.div>
             )}
@@ -724,7 +724,7 @@ export function ContextualAIChat({
                 <div className="space-y-6">
                   <div className="flex items-center gap-2">
                     <div className="h-px flex-1 bg-border/40" />
-                    <h4 className="text-[9px] uppercase tracking-[0.3em] font-bold text-[#1C1C1C]/40 whitespace-nowrap">{t('ai.transformations')}</h4>
+                    <h4 className="text-[9px] uppercase tracking-[0.3em] font-bold text-foreground/40 whitespace-nowrap">{t('ai.transformations')}</h4>
                     <div className="h-px flex-1 bg-border/40" />
                   </div>
 
@@ -744,11 +744,11 @@ export function ContextualAIChat({
                       const isActive = action.id === 'translate' && showLangPicker
                       const Icon = action.icon
                       return (
-                        <button key={i} onClick={() => action.id === 'translate' ? setShowLangPicker(v => !v) : handleAction(action)} disabled={!!actionLoading} className={cn("flex flex-col items-center gap-3 p-4 bg-white/40 backdrop-blur-sm border rounded-xl transition-all group shadow-sm", isActive ? "border-memento-blue bg-memento-blue/5" : "border-border hover:border-[#1C1C1C]/20")}>
-                          <div className={cn("p-2 rounded-lg bg-white/60 transition-colors group-hover:bg-[#1C1C1C] group-hover:text-[#FDFDFE] shadow-sm", loading && "animate-pulse", isActive && "bg-memento-blue text-white")}>
+                        <button key={i} onClick={() => action.id === 'translate' ? setShowLangPicker(v => !v) : handleAction(action)} disabled={!!actionLoading}                         className={cn("flex flex-col items-center gap-3 p-4 bg-card/40 backdrop-blur-sm border rounded-xl transition-all group shadow-sm", isActive ? "border-memento-blue bg-memento-blue/5" : "border-border hover:border-foreground/20")}>
+                          <div className={cn("p-2 rounded-lg bg-card/60 transition-colors group-hover:bg-foreground group-hover:text-background shadow-sm", loading && "animate-pulse", isActive && "bg-memento-blue text-white")}>
                             {loading ? <Loader2 size={14} className="animate-spin" /> : <Icon size={14} />}
                           </div>
-                          <span className={cn("text-[10px] font-bold uppercase tracking-widest", isActive ? "text-memento-blue" : "text-[#1C1C1C]/80")}>{t(action.i18nKey)}</span>
+                          <span className={cn("text-[10px] font-bold uppercase tracking-widest", isActive ? "text-memento-blue" : "text-foreground/80")}>{t(action.i18nKey)}</span>
                         </button>
                       )
                     })}
@@ -762,7 +762,7 @@ export function ContextualAIChat({
                           exit={{ height: 0, opacity: 0 }}
                           className="col-span-2 overflow-hidden"
                         >
-                          <div className="mt-2 p-5 bg-white/40 backdrop-blur-sm border border-[#75B2D6]/30 rounded-2xl space-y-5 shadow-sm">
+                          <div className="mt-2 p-5 bg-card/40 backdrop-blur-sm border border-memento-blue/30 rounded-2xl space-y-5 shadow-sm">
                             <div className="grid grid-cols-3 gap-2">
                               {['Français', 'English', 'Español', 'Deutsch', 'Persan', 'Portugais', 'Italiano', 'Chinois', 'Japonais'].map((lang) => (
                                 <button
@@ -772,7 +772,7 @@ export function ContextualAIChat({
                                     "py-2 px-1 rounded-lg border text-[10px] font-bold uppercase tracking-tighter transition-all",
                                     translateTarget === lang 
                                       ? "bg-memento-blue border-memento-blue text-white shadow-md shadow-memento-blue/20" 
-                                      : "bg-white/60 border-border text-[#1C1C1C]/60 hover:border-[#1C1C1C]/20"
+                                      : "bg-card/60 border-border text-foreground/60 hover:border-foreground/20"
                                   )}
                                 >
                                   {lang}
@@ -781,7 +781,7 @@ export function ContextualAIChat({
                             </div>
                             
                             <div className="space-y-2">
-                              <span className="text-[8px] uppercase tracking-[0.2em] font-bold text-[#1C1C1C]/40 px-1">{t('ai.otherLanguage')}</span>
+                              <span className="text-[8px] uppercase tracking-[0.2em] font-bold text-foreground/40 px-1">{t('ai.otherLanguage')}</span>
                               <input 
                                 type="text"
                                 value={customLangInput}
@@ -790,7 +790,7 @@ export function ContextualAIChat({
                                   setTranslateTarget(e.target.value)
                                 }}
                                 placeholder="ex: Arabe, Russe..."
-                                className="w-full bg-white/60 border border-border rounded-xl px-4 py-2.5 text-[11px] outline-none focus:border-[#75B2D6] transition-all text-[#1C1C1C]"
+                                className="w-full bg-card/60 border border-border rounded-xl px-4 py-2.5 text-[11px] outline-none focus:border-memento-blue transition-all text-foreground"
                               />
                             </div>
 
@@ -810,18 +810,18 @@ export function ContextualAIChat({
                       <button 
                         onClick={() => handleAction(ACTION_IDS.find(a => a.id === 'markdown')!)} 
                         disabled={!!actionLoading}
-                        className="col-span-2 flex items-center justify-center gap-3 py-3.5 bg-white/40 backdrop-blur-sm border border-border rounded-xl text-[10px] font-bold text-[#1C1C1C]/80 hover:bg-white/60 transition-all uppercase tracking-[0.2em] shadow-sm disabled:opacity-50"
+                        className="col-span-2 flex items-center justify-center gap-3 py-3.5 bg-card/40 backdrop-blur-sm border border-border rounded-xl text-[10px] font-bold text-foreground/80 hover:bg-card/60 transition-all uppercase tracking-[0.2em] shadow-sm disabled:opacity-50"
                       >
-                        <Code size={14} className="text-[#1C1C1C]/40" /> 
+                        <Code size={14} className="text-foreground/40" /> 
                         {actionLoading === 'markdown' ? <Loader2 size={14} className="animate-spin" /> : t('ai.action.toMarkdown')}
                       </button>
                     ) : (
                       <button 
                         onClick={() => handleAction(ACTION_IDS.find(a => a.id === 'toRichText')!)} 
                         disabled={!!actionLoading}
-                        className="col-span-2 flex items-center justify-center gap-3 py-3.5 bg-white/40 backdrop-blur-sm border border-border rounded-xl text-[10px] font-bold text-[#1C1C1C]/80 hover:bg-white/60 transition-all uppercase tracking-[0.2em] shadow-sm disabled:opacity-50"
+                        className="col-span-2 flex items-center justify-center gap-3 py-3.5 bg-card/40 backdrop-blur-sm border border-border rounded-xl text-[10px] font-bold text-foreground/80 hover:bg-card/60 transition-all uppercase tracking-[0.2em] shadow-sm disabled:opacity-50"
                       >
-                        <Wand2 size={14} className="text-[#1C1C1C]/40" /> 
+                        <Wand2 size={14} className="text-foreground/40" /> 
                         {actionLoading === 'toRichText' ? <Loader2 size={14} className="animate-spin" /> : t('ai.action.toRichText')}
                       </button>
                     )}
@@ -831,34 +831,34 @@ export function ContextualAIChat({
                 <div className="space-y-6">
                   <div className="flex items-center gap-2">
                     <div className="h-px flex-1 bg-border/40" />
-                    <h4 className="text-[9px] uppercase tracking-[0.3em] font-bold text-[#1C1C1C]/40 whitespace-nowrap">{t('ai.generationTools')}</h4>
+                    <h4 className="text-[9px] uppercase tracking-[0.3em] font-bold text-foreground/40 whitespace-nowrap">{t('ai.generationTools')}</h4>
                     <div className="h-px flex-1 bg-border/40" />
                   </div>
 
-                  <div className="group relative p-6 rounded-2xl bg-white/40 backdrop-blur-sm border border-border hover:border-memento-blue/30 transition-all duration-500 overflow-hidden shadow-sm">
+                  <div className="group relative p-6 rounded-2xl bg-card/40 backdrop-blur-sm border border-border hover:border-memento-blue/30 transition-all duration-500 overflow-hidden shadow-sm">
                     <div className="absolute top-0 right-0 p-4 opacity-5 group-hover:opacity-10 transition-opacity">
                       <Layout size={80} className="text-memento-blue" />
                     </div>
                     <div className="relative space-y-5">
                       <div className="flex items-center gap-3">
-                        <div className="p-2 bg-white/60 rounded-lg text-memento-blue"><Layout size={18} /></div>
+                        <div className="p-2 bg-card/60 rounded-lg text-memento-blue"><Layout size={18} /></div>
                         <div className="space-y-0.5">
-                          <h5 className="text-sm font-bold text-[#1C1C1C] leading-none">{t('ai.generate.slides')}</h5>
-                          <p className="text-[9px] text-[#1C1C1C]/40 uppercase tracking-tight">{t('ai.generate.sectionLabel')}</p>
+                          <h5 className="text-sm font-bold text-foreground leading-none">{t('ai.generate.slides')}</h5>
+                          <p className="text-[9px] text-foreground/40 uppercase tracking-tight">{t('ai.generate.sectionLabel')}</p>
                         </div>
                       </div>
                       <div className="grid grid-cols-2 gap-3">
                         <div className="space-y-1.5">
-                          <span className="text-[8px] uppercase tracking-[0.2em] font-bold text-[#1C1C1C]/40 px-1">{t('ai.generate.theme')}</span>
-                          <select value={slideTheme} onChange={e => setSlideTheme(e.target.value)} className="w-full bg-white/60 border border-border rounded-lg px-2 py-2 text-[10px] outline-none focus:ring-1 ring-[#75B2D6]/10 transition-all cursor-pointer text-[#1C1C1C]">
+                          <span className="text-[8px] uppercase tracking-[0.2em] font-bold text-foreground/40 px-1">{t('ai.generate.theme')}</span>
+                           <select value={slideTheme} onChange={e => setSlideTheme(e.target.value)} className="w-full bg-card/60 border border-border rounded-lg px-2 py-2 text-[10px] outline-none focus:ring-1 ring-memento-blue/10 transition-all cursor-pointer text-foreground">
                             <option value="architectural_mono">{t('ai.generate.themeArchitecturalMono')}</option>
                             <option value="vibrant_tech">{t('ai.generate.themeVibrantTech')}</option>
                             <option value="minimal_silk">{t('ai.generate.themeMinimalSilk')}</option>
                           </select>
                         </div>
                         <div className="space-y-1.5">
-                          <span className="text-[8px] uppercase tracking-[0.2em] font-bold text-[#1C1C1C]/40 px-1">{t('ai.generate.style')}</span>
-                          <select value={slideStyle} onChange={e => setSlideStyle(e.target.value)} className="w-full bg-white/60 border border-border rounded-lg px-2 py-2 text-[10px] outline-none focus:ring-1 ring-memento-blue/10 transition-all cursor-pointer text-[#1C1C1C]">
+                          <span className="text-[8px] uppercase tracking-[0.2em] font-bold text-foreground/40 px-1">{t('ai.generate.style')}</span>
+                           <select value={slideStyle} onChange={e => setSlideStyle(e.target.value)} className="w-full bg-card/60 border border-border rounded-lg px-2 py-2 text-[10px] outline-none focus:ring-1 ring-memento-blue/10 transition-all cursor-pointer text-foreground">
                             <option value="professional">{t('ai.generate.styleProfessional')}</option>
                             <option value="creative">Creative</option>
                             <option value="brutalist">Brutalist</option>
@@ -883,7 +883,7 @@ export function ContextualAIChat({
                               href={`/lab?id=${generateResult.canvasId}`}
                               target="_blank"
                               rel="noopener noreferrer"
-                              className="p-1.5 bg-white/60 rounded-lg text-[#1C1C1C]/50 hover:text-[#1C1C1C] hover:bg-white transition-colors"
+                              className="p-1.5 bg-card/60 rounded-lg text-foreground/50 hover:text-foreground hover:bg-card transition-colors"
                               title="Voir dans L'Atelier"
                             >
                               <ExternalLink size={12} />
@@ -913,7 +913,7 @@ export function ContextualAIChat({
                                 mToast.error('Échec du téléchargement')
                               }
                             }}
-                            className="flex items-center justify-center gap-2 w-full py-2.5 bg-[#75B2D6] text-white rounded-lg text-[10px] font-bold uppercase tracking-[0.15em] hover:opacity-90 transition-opacity shadow-sm"
+                            className="flex items-center justify-center gap-2 w-full py-2.5 bg-memento-blue text-white rounded-lg text-[10px] font-bold uppercase tracking-[0.15em] hover:opacity-90 transition-opacity shadow-sm"
                           >
                             <Download size={13} />
                             Télécharger .pptx
@@ -924,22 +924,22 @@ export function ContextualAIChat({
                     </div>
                   </div>
 
-                  <div className="group relative p-6 rounded-2xl bg-white/40 backdrop-blur-sm border border-border hover:border-[#A3B18A]/30 transition-all duration-500 overflow-hidden shadow-sm">
+                  <div className="group relative p-6 rounded-2xl bg-card/40 backdrop-blur-sm border border-border hover:border-primary/30 transition-all duration-500 overflow-hidden shadow-sm">
                     <div className="absolute top-0 right-0 p-4 opacity-5 group-hover:opacity-10 transition-opacity">
-                      <BookOpen size={80} className="text-[#A3B18A]" />
+                      <BookOpen size={80} className="text-primary" />
                     </div>
                     <div className="relative space-y-5">
                       <div className="flex items-center gap-3">
-                        <div className="p-2 bg-white/60 rounded-lg text-[#A3B18A]"><BookOpen size={18} /></div>
+                        <div className="p-2 bg-card/60 rounded-lg text-primary"><BookOpen size={18} /></div>
                         <div className="space-y-0.5">
-                          <h5 className="text-sm font-bold text-[#1C1C1C] leading-none">{t('ai.generate.diagram')}</h5>
-                          <p className="text-[9px] text-[#1C1C1C]/40 uppercase tracking-tight">{t('ai.generate.diagramReadyHint')}</p>
+                          <h5 className="text-sm font-bold text-foreground leading-none">{t('ai.generate.diagram')}</h5>
+                          <p className="text-[9px] text-foreground/40 uppercase tracking-tight">{t('ai.generate.diagramReadyHint')}</p>
                         </div>
                       </div>
                       <div className="grid grid-cols-2 gap-3">
                         <div className="space-y-1.5">
-                          <span className="text-[8px] uppercase tracking-[0.2em] font-bold text-[#1C1C1C]/40 px-1">{t('ai.generate.diagramType')}</span>
-                          <select value={diagramType} onChange={e => setDiagramType(e.target.value)} className="w-full bg-white/60 border border-border rounded-lg px-2 py-2 text-[10px] outline-none focus:ring-1 ring-[#A3B18A]/10 transition-all cursor-pointer text-[#1C1C1C]">
+                          <span className="text-[8px] uppercase tracking-[0.2em] font-bold text-foreground/40 px-1">{t('ai.generate.diagramType')}</span>
+                           <select value={diagramType} onChange={e => setDiagramType(e.target.value)} className="w-full bg-card/60 border border-border rounded-lg px-2 py-2 text-[10px] outline-none focus:ring-1 ring-primary/10 transition-all cursor-pointer text-foreground">
                             <option value="auto">{t('ai.generate.typeAuto')}</option>
                             <option value="flowchart">{t('ai.generate.typeFlowchart')}</option>
                             <option value="mind_map">{t('ai.generate.typeMindMap')}</option>
@@ -950,8 +950,8 @@ export function ContextualAIChat({
                           </select>
                         </div>
                         <div className="space-y-1.5">
-                          <span className="text-[8px] uppercase tracking-[0.2em] font-bold text-[#1C1C1C]/40 px-1">{t('ai.generate.style')}</span>
-                          <select value={diagramStyle} onChange={e => setDiagramStyle(e.target.value)} className="w-full bg-white/60 border border-border rounded-lg px-2 py-2 text-[10px] outline-none focus:ring-1 ring-[#A3B18A]/10 transition-all cursor-pointer text-[#1C1C1C]">
+                          <span className="text-[8px] uppercase tracking-[0.2em] font-bold text-foreground/40 px-1">{t('ai.generate.style')}</span>
+                           <select value={diagramStyle} onChange={e => setDiagramStyle(e.target.value)} className="w-full bg-card/60 border border-border rounded-lg px-2 py-2 text-[10px] outline-none focus:ring-1 ring-primary/10 transition-all cursor-pointer text-foreground">
                             <option value="sketchy">{t('ai.generate.styleSketchy')}</option>
                             <option value="soft">{t('ai.generate.styleSoft')}</option>
                             <option value="minimal">{t('ai.generate.styleMinimal')}</option>
@@ -962,7 +962,7 @@ export function ContextualAIChat({
                           </select>
                         </div>
                       </div>
-                      <button onClick={() => handleGenerate('diagram')} disabled={!!generateLoading} className="w-full py-3.5 bg-[#A3B18A] text-white rounded-xl text-[10px] font-bold flex items-center justify-center gap-2 hover:opacity-90 transition-all shadow-lg shadow-[#A3B18A]/20 uppercase tracking-[0.2em] disabled:opacity-50">
+                      <button onClick={() => handleGenerate('diagram')} disabled={!!generateLoading}                        className="w-full py-3.5 bg-primary text-primary-foreground rounded-xl text-[10px] font-bold flex items-center justify-center gap-2 hover:opacity-90 transition-all shadow-lg shadow-primary/20 uppercase tracking-[0.2em] disabled:opacity-50">
                         {generateLoading === 'diagram' ? <Loader2 size={14} className="animate-spin" /> : <>{t('ai.generating')} <ArrowRightLeft size={14} className="opacity-60" /></>}
                       </button>
 
@@ -970,16 +970,16 @@ export function ContextualAIChat({
                         <motion.div 
                           initial={{ opacity: 0, y: 10 }}
                           animate={{ opacity: 1, y: 0 }}
-                          className="mt-4 p-4 bg-[#A3B18A]/10 border border-[#A3B18A]/20 rounded-xl space-y-3"
+                          className="mt-4 p-4 bg-primary/10 border border-primary/20 rounded-xl space-y-3"
                         >
                           <div className="flex items-center justify-between">
-                            <span className="text-[9px] font-bold text-[#A3B18A] uppercase tracking-widest">{t('ai.generate.diagramReady')}</span>
+                            <span className="text-[9px] font-bold text-primary uppercase tracking-widest">{t('ai.generate.diagramReady')}</span>
                             <div className="flex gap-2">
                               <a 
                                 href={`/lab?id=${generateResult.canvasId}`}
                                 target="_blank"
                                 rel="noopener noreferrer"
-                                className="p-2 bg-white/60 rounded-lg text-[#1C1C1C] hover:bg-white transition-colors"
+                                className="p-2 bg-card/60 rounded-lg text-foreground hover:bg-card transition-colors"
                                 title={t('ai.generate.openInExcalidraw')}
                               >
                                 <ExternalLink size={14} />
@@ -987,7 +987,7 @@ export function ContextualAIChat({
                               <button 
                                 onClick={() => handleEmbedDiagramInNote(generateResult.canvasId!)}
                                 disabled={diagramEmbedLoading}
-                                className="p-2 bg-[#A3B18A] text-white rounded-lg hover:opacity-90 transition-opacity disabled:opacity-50"
+                                className="p-2 bg-primary text-primary-foreground rounded-lg hover:opacity-90 transition-opacity disabled:opacity-50"
                                 title={t('ai.generate.insertDiagramInNote')}
                               >
                                 {diagramEmbedLoading ? <Loader2 size={14} className="animate-spin" /> : <ImagePlus size={14} />}
@@ -1017,27 +1017,27 @@ export function ContextualAIChat({
               >
                 <div className="space-y-6">
                   <div className="space-y-3">
-                    <label className="text-[9px] uppercase tracking-[0.3em] font-bold text-[#1C1C1C]/40">{t('ai.resource.urlLabel')}</label>
+                    <label className="text-[9px] uppercase tracking-[0.3em] font-bold text-foreground/40">{t('ai.resource.urlLabel')}</label>
                     <div className="relative">
-                      <input type="text" placeholder="https://..." className="w-full bg-white/40 backdrop-blur-sm border border-border rounded-xl pl-4 pr-12 py-3.5 text-xs outline-none focus:border-[#75B2D6] transition-colors shadow-sm text-[#1C1C1C]" value={resourceUrl} onChange={e => setResourceUrl(e.target.value)} />
-                      <Globe size={16} className="absolute right-4 top-1/2 -translate-y-1/2 text-[#1C1C1C]/20" />
+                      <input type="text" placeholder="https://..." className="w-full bg-card/40 backdrop-blur-sm border border-border rounded-xl pl-4 pr-12 py-3.5 text-xs outline-none focus:border-memento-blue transition-colors shadow-sm text-foreground" value={resourceUrl} onChange={e => setResourceUrl(e.target.value)} />
+                      <Globe size={16} className="absolute right-4 top-1/2 -translate-y-1/2 text-foreground/20" />
                     </div>
                   </div>
                   <div className="space-y-3">
-                    <label className="text-[9px] uppercase tracking-[0.3em] font-bold text-[#1C1C1C]/40">{t('ai.resource.resourceText')}</label>
-                    <textarea rows={10} placeholder={t('ai.resource.resourcePlaceholder')} className="w-full bg-white/40 backdrop-blur-sm border border-border rounded-xl p-5 text-sm outline-none focus:border-[#75B2D6] transition-colors resize-none leading-relaxed font-light shadow-sm text-[#1C1C1C]" value={resourceText} onChange={e => setResourceText(e.target.value)} />
+                    <label className="text-[9px] uppercase tracking-[0.3em] font-bold text-foreground/40">{t('ai.resource.resourceText')}</label>
+                     <textarea rows={10} placeholder={t('ai.resource.resourcePlaceholder')} className="w-full bg-card/40 backdrop-blur-sm border border-border rounded-xl p-5 text-sm outline-none focus:border-memento-blue transition-colors resize-none leading-relaxed font-light shadow-sm text-foreground" value={resourceText} onChange={e => setResourceText(e.target.value)} />
                   </div>
                   <div className="space-y-4">
-                    <label className="text-[9px] uppercase tracking-[0.3em] font-bold text-[#1C1C1C]/40">{t('ai.resource.integrationMode')}</label>
+                    <label className="text-[9px] uppercase tracking-[0.3em] font-bold text-foreground/40">{t('ai.resource.integrationMode')}</label>
                     <div className="grid grid-cols-3 gap-2">
-                      {[
+                       {[
                         { id: 'replace', label: t('ai.resource.modeReplace'), sub: t('ai.resource.modeReplaceDesc') },
                         { id: 'complete', label: t('ai.resource.modeComplete'), sub: t('ai.resource.modeCompleteDesc') },
                         { id: 'merge', label: t('ai.resource.modeMerge'), sub: t('ai.resource.modeMergeDesc') },
                       ].map((mode) => (
-                        <button key={mode.id} onClick={() => setResourceMode(mode.id as any)} className={cn("flex flex-col items-center justify-center p-3 rounded-xl border transition-all text-center", resourceMode === mode.id ? 'bg-[#75B2D6]/10 border-[#75B2D6] ring-1 ring-[#75B2D6]/20' : 'bg-white/40 backdrop-blur-sm border-border hover:bg-white/60 shadow-sm')}>
-                          <span className={cn("text-[10px] font-bold uppercase tracking-wider", resourceMode === mode.id ? 'text-[#75B2D6]' : 'text-[#1C1C1C]')}>{mode.label}</span>
-                          <span className="text-[8px] text-[#1C1C1C]/40 leading-tight mt-1 font-medium">{mode.sub}</span>
+                        <button key={mode.id} onClick={() => setResourceMode(mode.id as any)} className={cn("flex flex-col items-center justify-center p-3 rounded-xl border transition-all text-center", resourceMode === mode.id ? 'bg-memento-blue/10 border-memento-blue ring-1 ring-memento-blue/20' : 'bg-card/40 backdrop-blur-sm border-border hover:bg-card/60 shadow-sm')}>
+                           <span className={cn("text-[10px] font-bold uppercase tracking-wider", resourceMode === mode.id ? 'text-memento-blue' : 'text-foreground')}>{mode.label}</span>
+                           <span className="text-[8px] text-foreground/40 leading-tight mt-1 font-medium">{mode.sub}</span>
                         </button>
                       ))}
                     </div>
diff --git a/memento-note/components/direction-initializer.tsx b/memento-note/components/direction-initializer.tsx
index a199d85..98ab334 100644
--- a/memento-note/components/direction-initializer.tsx
+++ b/memento-note/components/direction-initializer.tsx
@@ -9,7 +9,11 @@ import { useEffect } from 'react'
 export function DirectionInitializer() {
   useEffect(() => {
     try {
-      const lang = localStorage.getItem('user-language')
+      let lang = localStorage.getItem('user-language')
+      if (!lang) {
+        const c = document.cookie.split(';').map(s => s.trim()).find(s => s.startsWith('user-language='))
+        if (c) lang = c.split('=')[1]
+      }
       if (lang === 'fa' || lang === 'ar') {
         document.documentElement.dir = 'rtl'
         document.documentElement.lang = lang
diff --git a/memento-note/components/home-client.tsx b/memento-note/components/home-client.tsx
index 72b78be..898a23b 100644
--- a/memento-note/components/home-client.tsx
+++ b/memento-note/components/home-client.tsx
@@ -11,7 +11,7 @@ import { NotesEditorialView } from '@/components/notes-editorial-view'
 import { MemoryEchoNotification } from '@/components/memory-echo-notification'
 import { NotebookSuggestionToast } from '@/components/notebook-suggestion-toast'
 import { Button } from '@/components/ui/button'
-import { Plus, ArrowUpDown, Search, Sparkles } from 'lucide-react'
+import { Plus, ArrowUpDown, Search, Sparkles, FileText } from 'lucide-react'
 import { useNoteRefresh } from '@/context/NoteRefreshContext'
 import { useRefresh } from '@/lib/use-refresh'
 import { useReminderCheck } from '@/hooks/use-reminder-check'
@@ -38,12 +38,17 @@ const AutoLabelSuggestionDialog = dynamic(
   () => import('@/components/auto-label-suggestion-dialog').then(m => ({ default: m.AutoLabelSuggestionDialog })),
   { ssr: false }
 )
+const NotebookSummaryDialog = dynamic(
+  () => import('@/components/notebook-summary-dialog').then(m => ({ default: m.NotebookSummaryDialog })),
+  { ssr: false }
+)
 
 type InitialSettings = {
   showRecentNotes: boolean
   notesViewMode: 'masonry' | 'tabs' | 'list'
   noteHistory: boolean
   noteHistoryMode: 'manual' | 'auto'
+  aiAssistantEnabled: boolean
 }
 
 interface HomeClientProps {
@@ -83,6 +88,7 @@ export function HomeClient({ initialNotes, initialSettings }: HomeClientProps) {
 
   const { shouldSuggest: shouldSuggestLabels, notebookId: suggestNotebookId, dismiss: dismissLabelSuggestion } = useAutoLabelSuggestion()
   const [autoLabelOpen, setAutoLabelOpen] = useState(false)
+  const [summaryDialogOpen, setSummaryDialogOpen] = useState(false)
 
   useEffect(() => {
     if (shouldSuggestLabels && suggestNotebookId) {
@@ -263,9 +269,12 @@ export function HomeClient({ initialNotes, initialSettings }: HomeClientProps) {
         : await getAllNotes(false, notebook || undefined)
 
       const sharedOnly = searchParams.get('shared') === '1'
+      const remindersOnly = searchParams.get('reminders') === '1'
       
       if (sharedOnly) {
         allNotes = allNotes.filter((note: any) => note._isShared)
+      } else if (remindersOnly) {
+        allNotes = allNotes.filter((note: any) => note.reminder !== null)
       } else if (!notebook && !search) {
         allNotes = allNotes.filter((note: any) => !note.notebookId && !note._isShared)
       }
@@ -300,10 +309,13 @@ export function HomeClient({ initialNotes, initialSettings }: HomeClientProps) {
     } else {
       let filtered = initialNotes
       const sharedOnly = searchParams.get('shared') === '1'
+      const remindersOnly = searchParams.get('reminders') === '1'
       if (notebook) {
         filtered = initialNotes.filter((n: any) => n.notebookId === notebook && !n._isShared)
       } else if (sharedOnly) {
         filtered = initialNotes.filter((n: any) => n._isShared)
+      } else if (remindersOnly) {
+        filtered = initialNotes.filter((n: any) => n.reminder !== null)
       } else {
         filtered = initialNotes.filter((n: any) => !n.notebookId && !n._isShared)
       }
@@ -384,14 +396,20 @@ export function HomeClient({ initialNotes, initialSettings }: HomeClientProps) {
           fullPage
         />
       ) : (
-        <div className="flex-1 overflow-y-auto min-h-0">
+        <div className="flex-1 overflow-y-auto min-h-0 bg-memento-paper flex flex-col">
           <div className={cn(
             'px-12 pt-12 pb-8 flex flex-col gap-6',
-            isEditorialMode ? 'sticky top-0 bg-background/90 backdrop-blur-md z-30' : ''
+            isEditorialMode ? 'sticky top-0 bg-memento-paper/90 backdrop-blur-md z-30' : ''
           )}>
             <div className="flex justify-between items-start">
               <h1 className="font-memento-serif text-4xl font-medium tracking-tight text-foreground leading-tight pr-12">
-                {currentNotebook ? currentNotebook.name : (searchParams.get('shared') === '1' ? 'Partagées avec moi' : t('notes.title'))}
+                {currentNotebook 
+                  ? currentNotebook.name 
+                  : searchParams.get('shared') === '1' 
+                    ? (t('sidebar.sharedWithMe') || 'Partagées avec moi')
+                    : searchParams.get('reminders') === '1'
+                      ? (t('sidebar.reminders') || 'Rappels')
+                      : t('notes.title')}
               </h1>
             </div>
 
@@ -481,13 +499,29 @@ export function HomeClient({ initialNotes, initialSettings }: HomeClientProps) {
                   </button>
                 )}
               </div>
-              <button
-                onClick={() => setSortOrder(s => s === 'newest' ? 'oldest' : s === 'oldest' ? 'alpha' : 'newest')}
-                className="flex items-center gap-2 text-[13px] text-foreground font-medium hover:opacity-70 transition-opacity"
-              >
-                <ArrowUpDown size={16} />
-                <span>{sortLabels[sortOrder]}</span>
-              </button>
+              <div className="flex items-center gap-6">
+                {searchParams.get('notebook') && (
+                  <button
+                    onClick={() => setSummaryDialogOpen(true)}
+                    disabled={!initialSettings.aiAssistantEnabled}
+                    className={cn(
+                      "flex items-center gap-2 text-[13px] font-medium transition-opacity",
+                      initialSettings.aiAssistantEnabled ? "text-foreground hover:opacity-70" : "text-muted-foreground opacity-50 cursor-not-allowed"
+                    )}
+                    title={initialSettings.aiAssistantEnabled ? t('notebook.summary') : "Activez l'Assistant IA dans les paramètres pour résumer"}
+                  >
+                    <FileText size={16} />
+                    <span>{t('notebook.summary') || 'Summarize'}</span>
+                  </button>
+                )}
+                <button
+                  onClick={() => setSortOrder(s => s === 'newest' ? 'oldest' : s === 'oldest' ? 'alpha' : 'newest')}
+                  className="flex items-center gap-2 text-[13px] text-foreground font-medium hover:opacity-70 transition-opacity"
+                >
+                  <ArrowUpDown size={16} />
+                  <span>{sortLabels[sortOrder]}</span>
+                </button>
+              </div>
             </div>
           </div>
 
@@ -595,6 +629,15 @@ export function HomeClient({ initialNotes, initialSettings }: HomeClientProps) {
         onEnableHistory={async () => { if (historyNote) await handleEnableHistory(historyNote.id) }}
         onRestored={handleHistoryRestored}
       />
+
+      {searchParams.get('notebook') && (
+        <NotebookSummaryDialog
+          open={summaryDialogOpen}
+          onOpenChange={setSummaryDialogOpen}
+          notebookId={searchParams.get('notebook')}
+          notebookName={currentNotebook?.name}
+        />
+      )}
     </div>
   )
 }
diff --git a/memento-note/components/sidebar.tsx b/memento-note/components/sidebar.tsx
index 328c3df..6bbbb9c 100644
--- a/memento-note/components/sidebar.tsx
+++ b/memento-note/components/sidebar.tsx
@@ -94,6 +94,7 @@ function SidebarCarnetItem({
   isDragging?: boolean
   dragHandleProps?: React.HTMLAttributes<HTMLDivElement>
 }) {
+  const { t } = useLanguage()
   return (
     <div className={cn('space-y-1 transition-opacity', isDragging && 'opacity-40')}>
       <div className="relative group/carnet">
@@ -160,7 +161,7 @@ function SidebarCarnetItem({
               />
             ))}
             {notes.length === 0 && (
-              <p className="pl-12 text-[11px] text-muted-foreground/50 py-2 italic font-light">No notes yet</p>
+              <p className="pl-12 text-[11px] text-muted-foreground/50 py-2 italic font-light">{t('common.noResults')}</p>
             )}
           </motion.div>
         )}
@@ -234,7 +235,7 @@ export function Sidebar({ className, user }: { className?: string; user?: any })
           const notes = await getAllNotes(false, nb.id)
           const mapped = notes.map((n: Note) => ({
             id: n.id,
-            title: getNoteDisplayTitle(n, t('notes.untitled') || 'Untitled'),
+            title: getNoteDisplayTitle(n, t('notes.untitled')),
           }))
           return [nb.id, mapped] as const
         })
@@ -325,9 +326,9 @@ export function Sidebar({ className, user }: { className?: string; user?: any })
   }
 
   const sortLabels: Record<SortOrder, string> = {
-    newest: t('sidebar.sortNewest') || 'Newest first',
-    oldest: t('sidebar.sortOldest') || 'Oldest first',
-    alpha: t('sidebar.sortAlpha') || 'A → Z',
+    newest: t('sidebar.sortNewest'),
+    oldest: t('sidebar.sortOldest'),
+    alpha: t('sidebar.sortAlpha'),
   }
 
   return (
@@ -335,7 +336,7 @@ export function Sidebar({ className, user }: { className?: string; user?: any })
       <aside
         className={cn(
           'hidden h-full min-h-0 w-72 shrink-0 flex-col lg:w-80 md:flex',
-          'border-e border-border/40 bg-[#F6F4F0] backdrop-blur-md sidebar-shadow dark:border-white/6 dark:bg-[#252525] dark:backdrop-blur-none',
+          'border-e border-border/40 bg-memento-sidebar backdrop-blur-md sidebar-shadow dark:border-white/6 dark:bg-[#252525] dark:backdrop-blur-none',
           className
         )}
       >
@@ -346,13 +347,13 @@ export function Sidebar({ className, user }: { className?: string; user?: any })
               <button
                 type="button"
                 className="shrink-0 rounded-full outline-none ring-offset-background transition-shadow hover:ring-2 hover:ring-primary/30 focus-visible:ring-2 focus-visible:ring-ring"
-                aria-label={t('sidebar.accountMenu') || 'Menu du compte'}
+                aria-label={t('sidebar.accountMenu')}
               >
-                <div className="w-10 h-10 rounded-full bg-[#E9ECEF] border border-black/10 flex items-center justify-center text-foreground font-memento-serif text-lg shadow-sm">
+                <div className="w-10 h-10 rounded-full bg-secondary border border-black/10 flex items-center justify-center text-foreground font-memento-serif text-lg shadow-sm">
                   {user?.image ? (
                     <Avatar className="size-10 ring-1 ring-border/60">
                       <AvatarImage src={user.image} alt="" />
-                      <AvatarFallback className="bg-[#E9ECEF] text-sm font-semibold text-[#1C1C1C]/60">{initial}</AvatarFallback>
+                      <AvatarFallback className="bg-secondary text-sm font-semibold text-[#1C1C1C]/60">{initial}</AvatarFallback>
                     </Avatar>
                   ) : (
                     <span>{initial}</span>
@@ -399,14 +400,14 @@ export function Sidebar({ className, user }: { className?: string; user?: any })
               <button
                 onClick={() => { setActiveView('notebooks'); if (pathname !== '/') router.push('/') }}
                 className={cn('p-1.5 rounded-full transition-all', activeView === 'notebooks' ? 'bg-foreground text-background' : 'text-muted-foreground hover:text-foreground')}
-                title={t('nav.notebooks') || 'Notebooks'}
+                title={t('nav.notebooks')}
               >
                 <BookOpen size={14} />
               </button>
               <button
                 onClick={() => { setActiveView('agents'); router.push('/agents') }}
                 className={cn('p-1.5 rounded-full transition-all', activeView === 'agents' ? 'bg-foreground text-background' : 'text-muted-foreground hover:text-foreground')}
-                title={t('nav.agents') || 'Agents'}
+                title={t('nav.agents')}
               >
                 <Bot size={14} />
               </button>
@@ -429,13 +430,13 @@ export function Sidebar({ className, user }: { className?: string; user?: any })
                 {/* Section header with sort button */}
                 <div className="flex items-center justify-between px-4 mb-3">
                   <p className="text-[10px] font-bold text-muted-foreground tracking-widest uppercase">
-                    {t('nav.notebooks') || 'Notebooks'}
+                    {t('nav.notebooks')}
                   </p>
                   <div className="relative">
                     <button
                       onClick={() => setShowSortMenu(s => !s)}
                       className="p-1 text-muted-foreground hover:text-foreground transition-colors rounded"
-                      title={t('sidebar.sortOrder') || 'Sort order'}
+                      title={t('sidebar.sortOrder')}
                     >
                       <ArrowUpDown size={12} />
                     </button>
@@ -484,18 +485,22 @@ export function Sidebar({ className, user }: { className?: string; user?: any })
                     'text-[13px] font-medium truncate',
                     isInboxActive ? 'text-foreground' : 'text-muted-foreground'
                   )}>
-                    {t('sidebar.inbox') || 'Inbox'}
+                    {t('sidebar.inbox')}
                   </span>
                 </button>
                 
-                {/* Partagées avec moi */}
-                <Link
-                  href="/shared"
-                  className={cn('sidebar-inbox-item', pathname === '/shared' && 'active')}
+                <button
+                  onClick={() => {
+                    const params = new URLSearchParams()
+                    params.set('shared', '1')
+                    params.set('forceList', '1')
+                    router.push(`/?${params.toString()}`)
+                  }}
+                  className={cn('sidebar-inbox-item', searchParams.get('shared') === '1' && pathname === '/' && 'active')}
                 >
                   <div className={cn(
                     'w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium border shrink-0',
-                    pathname === '/shared'
+                    searchParams.get('shared') === '1' && pathname === '/'
                       ? 'bg-foreground text-background border-foreground'
                       : 'bg-white/60 text-foreground border-border'
                   )}>
@@ -503,20 +508,24 @@ export function Sidebar({ className, user }: { className?: string; user?: any })
                   </div>
                   <span className={cn(
                     'text-[13px] font-medium truncate',
-                    pathname === '/shared' ? 'text-foreground' : 'text-muted-foreground'
+                    searchParams.get('shared') === '1' && pathname === '/' ? 'text-foreground' : 'text-muted-foreground'
                   )}>
-                    {t('sidebar.sharedWithMe') || 'Partagées avec moi'}
+                    {t('sidebar.sharedWithMe')}
                   </span>
-                </Link>
+                </button>
 
-                {/* Rappels */}
-                <Link
-                  href="/reminders"
-                  className={cn('sidebar-inbox-item', pathname === '/reminders' && 'active')}
+                <button
+                  onClick={() => {
+                    const params = new URLSearchParams()
+                    params.set('reminders', '1')
+                    params.set('forceList', '1')
+                    router.push(`/?${params.toString()}`)
+                  }}
+                  className={cn('sidebar-inbox-item', searchParams.get('reminders') === '1' && pathname === '/' && 'active')}
                 >
                   <div className={cn(
                     'w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium border shrink-0',
-                    pathname === '/reminders'
+                    searchParams.get('reminders') === '1' && pathname === '/'
                       ? 'bg-foreground text-background border-foreground'
                       : 'bg-white/60 text-foreground border-border'
                   )}>
@@ -524,11 +533,11 @@ export function Sidebar({ className, user }: { className?: string; user?: any })
                   </div>
                   <span className={cn(
                     'text-[13px] font-medium truncate',
-                    pathname === '/reminders' ? 'text-foreground' : 'text-muted-foreground'
+                    searchParams.get('reminders') === '1' && pathname === '/' ? 'text-foreground' : 'text-muted-foreground'
                   )}>
-                    {t('sidebar.reminders') || 'Rappels'}
+                    {t('sidebar.reminders')}
                   </span>
-                </Link>
+                </button>
 
                 {/* Divider */}
                 <div className="mx-4 my-3 h-px bg-border/40" />
@@ -583,7 +592,7 @@ export function Sidebar({ className, user }: { className?: string; user?: any })
                     className="w-full mt-4 flex items-center gap-3 px-4 py-2 text-[13px] text-muted-foreground hover:text-foreground transition-colors font-medium rounded-lg hover:bg-white/40"
                   >
                     <Plus size={16} />
-                    <span>{t('notebooks.create') || 'New Carnet'}</span>
+                    <span>{t('notebook.create')}</span>
                   </button>
                 </div>
               </motion.div>
@@ -596,12 +605,12 @@ export function Sidebar({ className, user }: { className?: string; user?: any })
                 transition={{ duration: 0.2 }}
               >
                 <p className="text-[10px] font-bold text-muted-foreground tracking-widest uppercase mb-4 px-4">
-                  {t('agents.intelligenceOS') || 'Intelligence OS'}
+                  {t('agents.intelligenceOS')}
                 </p>
                 <div className="space-y-1">
                   {[
-                    { id: 'agents', href: '/agents', label: t('agents.myAgents') || 'Mes Agents', icon: Bot },
-                    { id: 'lab', href: '/lab', label: t('nav.lab') || 'Le Lab AI', icon: FlaskConical },
+                    { id: 'agents', href: '/agents', label: t('agents.myAgents'), icon: Bot },
+                    { id: 'lab', href: '/lab', label: t('nav.lab'), icon: FlaskConical },
                   ].map(item => {
                     const isActive = pathname.startsWith(item.href)
                     return (
@@ -638,21 +647,21 @@ export function Sidebar({ className, user }: { className?: string; user?: any })
             className="flex items-center gap-3 px-4 py-2 text-[13px] text-[#1C1C1C]/60 hover:text-[#1C1C1C] transition-colors font-medium rounded-lg hover:bg-white/30"
           >
             <Archive size={16} />
-            <span>{t('sidebar.archive') || 'Archives'}</span>
+            <span>{t('sidebar.archive')}</span>
           </Link>
           <Link
             href="/trash"
             className="flex items-center gap-3 px-4 py-2 text-[13px] text-[#1C1C1C]/60 hover:text-[#1C1C1C] transition-colors font-medium rounded-lg hover:bg-white/30"
           >
             <Trash2 size={16} />
-            <span>{t('sidebar.trash') || 'Corbeille'}</span>
+            <span>{t('sidebar.trash')}</span>
           </Link>
           <Link
             href="/settings"
             className="flex items-center gap-3 px-4 py-2 text-[13px] text-[#1C1C1C]/60 hover:text-[#1C1C1C] transition-colors font-medium rounded-lg hover:bg-white/30"
           >
             <Settings size={16} />
-            <span>{t('nav.settings') || 'Paramètres'}</span>
+            <span>{t('nav.settings')}</span>
           </Link>
         </div>
       </aside>
diff --git a/memento-note/lib/i18n/LanguageProvider.tsx b/memento-note/lib/i18n/LanguageProvider.tsx
index b9b0cc4..8d8f01e 100644
--- a/memento-note/lib/i18n/LanguageProvider.tsx
+++ b/memento-note/lib/i18n/LanguageProvider.tsx
@@ -31,15 +31,23 @@ export function LanguageProvider({ children, initialLanguage = 'en', initialTran
   initialLanguage?: SupportedLanguage
   initialTranslations?: Translations
 }) {
-  // Use server-provided initialLanguage for the first render to prevent hydration mismatch.
+  // Use server-provided initialLanguage and translations for the first render 
+  // to ensure client hydration matches server HTML exactly.
   const [language, setLanguageState] = useState<SupportedLanguage>(initialLanguage)
 
-  // Start with server-provided translations or English fallback
-  const [translations, setTranslations] = useState<Translations>(
-    (initialTranslations || enTranslations) as unknown as Translations
-  )
+  // Start with server-provided translations or fallback to English ONLY if it's the requested language
+  const [translations, setTranslations] = useState<Translations>(() => {
+    if (initialTranslations) return initialTranslations
+    return enTranslations as unknown as Translations
+  })
 
   const cacheRef = useRef<Map<SupportedLanguage, Translations>>(new Map())
+  
+  // Initialize cache with initial translations to prevent redundant loading
+  if (initialTranslations && !cacheRef.current.has(initialLanguage)) {
+    cacheRef.current.set(initialLanguage, initialTranslations)
+  }
+
   const isFirstRender = useRef(true)
 
   // Load saved preference from localStorage AFTER hydration
@@ -74,6 +82,7 @@ export function LanguageProvider({ children, initialLanguage = 'en', initialTran
   const setLanguage = useCallback((lang: SupportedLanguage) => {
     setLanguageState(lang)
     localStorage.setItem('user-language', lang)
+    document.cookie = `user-language=${lang};path=/;max-age=${60 * 60 * 24 * 365};samesite=lax`
     updateDocumentDirection(lang)
   }, [])
 
diff --git a/memento-note/lib/i18n/detect-user-language.ts b/memento-note/lib/i18n/detect-user-language.ts
index 3e370c1..229ecea 100644
--- a/memento-note/lib/i18n/detect-user-language.ts
+++ b/memento-note/lib/i18n/detect-user-language.ts
@@ -1,6 +1,7 @@
 /**
  * Detect user's preferred language.
  * Priority:
+ * 0. user-language cookie (explicit user choice, synced with localStorage)
  * 1. Most common language among user's notes (DB GROUP BY)
  * 2. Browser language hint (passed from server component via Accept-Language)
  * 3. Default: 'en'
@@ -8,7 +9,7 @@
 
 import { auth } from '@/auth'
 import { prisma } from '@/lib/prisma'
-import { unstable_cache } from 'next/cache'
+import { unstable_cache, cookies } from 'next/cache'
 import { SupportedLanguage } from './load-translations'
 
 const SUPPORTED_LANGUAGES = new Set(['en', 'fr', 'es', 'de', 'fa', 'it', 'pt', 'ru', 'zh', 'ja', 'ko', 'ar', 'hi', 'nl', 'pl'])
@@ -79,6 +80,16 @@ const getCachedUserLanguage = unstable_cache(
  *                               Should be passed from server components that have access to headers().
  */
 export async function detectUserLanguage(browserLanguageHint?: SupportedLanguage | null): Promise<SupportedLanguage> {
+  // 0. Cookie has highest priority — set by the client when user picks a language.
+  //    This guarantees server and client agree on the language (no hydration mismatch).
+  try {
+    const cookieStore = await cookies()
+    const cookieLang = cookieStore.get('user-language')?.value
+    if (cookieLang && SUPPORTED_LANGUAGES.has(cookieLang)) {
+      return cookieLang as SupportedLanguage
+    }
+  } catch {}
+
   const session = await auth()
 
   if (!session?.user?.id) {
diff --git a/memento-note/next.config.ts b/memento-note/next.config.ts
index 8c4358a..56f37a9 100644
--- a/memento-note/next.config.ts
+++ b/memento-note/next.config.ts
@@ -17,6 +17,21 @@ const nextConfig: NextConfig = {
       },
     ]
   },
+  
+  async redirects() {
+    return [
+      {
+        source: '/shared',
+        destination: '/?shared=1',
+        permanent: false,
+      },
+      {
+        source: '/reminders',
+        destination: '/?reminders=1',
+        permanent: false,
+      },
+    ]
+  },
 
   // Image optimization (enabled for better performance)
   images: {