fix(ui): thème, textes et lisibilité restants de la revue

Les boutons suivent la couleur d’apparence, les libellés trop petits ou trop techniques sont clarifiés, et le catalogue des fournisseurs se met à jour tout seul.

Co-authored-by: Cursor <cursoragent@cursor.com>

memento-note/components/sidebar.tsx

@@ -36,6 +36,13 @@ import {
   Folder,
   FolderOpen,
   LayoutGrid,
+  Palette,
+  CreditCard,
+  Database,
+  Globe,
+  Plug,
+  Key,
+  Info,
 } from 'lucide-react'
 import { useSearchModal } from '@/context/search-modal-context'
 import { useLanguage } from '@/lib/i18n'
@@ -67,7 +74,7 @@ import { performSignOut } from '@/lib/auth-client'
 import { isDashboardHomeRoute } from '@/lib/dashboard/home-route'
 import { useBrainstormSessions, useDeleteBrainstorm } from '@/hooks/use-brainstorm'
 
-type NavigationView = 'dashboard' | 'notebooks' | 'agents' | 'reminders' | 'brainstorms' | 'revision' | 'insights'
+type NavigationView = 'dashboard' | 'notebooks' | 'agents' | 'reminders' | 'brainstorms' | 'revision' | 'insights' | 'settings'
 type SortOrder = 'newest' | 'oldest' | 'alpha' | 'manual'
 
 const NOTEBOOKS_PANEL_HEIGHT_KEY = 'memento-sidebar-notebooks-height'
@@ -859,6 +866,7 @@ export function Sidebar({ className, user }: { className?: string; user?: any })
   }, [currentNotebookId, notebooks])
 
   const isDashboardRoute = isDashboardHomeRoute(pathname, searchParams)
+  const panelView: NavigationView = pathname.startsWith('/settings') ? 'settings' : activeView
 
   const isInboxActive =
     pathname === '/home' &&
@@ -873,6 +881,7 @@ export function Sidebar({ className, user }: { className?: string; user?: any })
     else if (pathname.startsWith('/agents') || pathname.startsWith('/lab')) setActiveView('agents')
     else if (pathname === '/insights') setActiveView('insights')
     else if (pathname.startsWith('/revision')) setActiveView('revision')
+    else if (pathname.startsWith('/settings')) setActiveView('settings')
     else if (searchParams.get('reminders') === '1' && pathname === '/home') setActiveView('reminders')
     else if (isDashboardRoute) setActiveView('dashboard')
     else if (pathname === '/home' || pathname.startsWith('/notes')) setActiveView('notebooks')
@@ -1593,6 +1602,7 @@ export function Sidebar({ className, user }: { className?: string; user?: any })
             <Link
               href="/settings"
               aria-label={t('nav.settings')}
+              onClick={() => setActiveView('settings')}
               className={cn(
                 'w-9 h-9 rounded-lg flex items-center justify-center transition-all relative group',
                 pathname.startsWith('/settings')
@@ -1627,14 +1637,14 @@ export function Sidebar({ className, user }: { className?: string; user?: any })
         <div
           className={cn(
             'flex-1 flex flex-col min-h-0 -mx-0 pb-4',
-            activeView === 'notebooks'
+            panelView === 'notebooks'
               ? 'overflow-hidden'
               : 'overflow-y-auto custom-scrollbar space-y-6',
           )}
         >
 
           <AnimatePresence mode="wait">
-            {activeView === 'dashboard' ? (
+            {panelView === 'dashboard' ? (
               <motion.div
                 key="dashboard"
                 initial={{ opacity: 0, x: isRtl ? 10 : -10 }}
@@ -1653,45 +1663,6 @@ export function Sidebar({ className, user }: { className?: string; user?: any })
                   {t('sidebar.dashboardPanelBody')}
                 </p>
                 <div className="space-y-1.5">
-                  <button
-                    type="button"
-                    onClick={handleInboxClick}
-                    className="w-full flex items-center justify-between gap-2 px-3 py-2.5 rounded-xl border border-border/40 bg-white/60 dark:bg-zinc-800/40 hover:border-brand-accent/30 hover:bg-brand-accent/5 transition-all text-[12px] font-medium text-foreground"
-                  >
-                    <span className="flex items-center gap-2 min-w-0">
-                      <Inbox size={14} className="text-brand-accent shrink-0" />
-                      {t('homeDashboard.inbox')}
-                    </span>
-                    {inboxCount > 0 && (
-                      <span className="text-[10px] font-mono font-bold text-brand-accent bg-brand-accent/10 px-1.5 py-0.5 rounded shrink-0">
-                        {inboxCount}
-                      </span>
-                    )}
-                  </button>
-                  <button
-                    type="button"
-                    onClick={() => router.push('/revision')}
-                    className="w-full flex items-center gap-2 px-3 py-2.5 rounded-xl border border-border/40 bg-white/60 dark:bg-zinc-800/40 hover:border-brand-accent/30 hover:bg-brand-accent/5 transition-all text-[12px] font-medium text-foreground"
-                  >
-                    <GraduationCap size={14} className="text-brand-accent shrink-0" />
-                    {t('homeDashboard.review')}
-                  </button>
-                  <button
-                    type="button"
-                    onClick={handleRemindersClick}
-                    className="w-full flex items-center gap-2 px-3 py-2.5 rounded-xl border border-border/40 bg-white/60 dark:bg-zinc-800/40 hover:border-brand-accent/30 hover:bg-brand-accent/5 transition-all text-[12px] font-medium text-foreground"
-                  >
-                    <Bell size={14} className="text-brand-accent shrink-0" />
-                    {t('homeDashboard.reminders')}
-                  </button>
-                  <button
-                    type="button"
-                    onClick={() => router.push('/insights')}
-                    className="w-full flex items-center gap-2 px-3 py-2.5 rounded-xl border border-border/40 bg-white/60 dark:bg-zinc-800/40 hover:border-brand-accent/30 hover:bg-brand-accent/5 transition-all text-[12px] font-medium text-foreground"
-                  >
-                    <Sparkles size={14} className="text-brand-accent shrink-0" />
-                    {t('homeDashboard.themes')}
-                  </button>
                   <button
                     type="button"
                     onClick={() => {
@@ -1705,7 +1676,54 @@ export function Sidebar({ className, user }: { className?: string; user?: any })
                   </button>
                 </div>
               </motion.div>
-            ) : activeView === 'notebooks' ? (
+            ) : panelView === 'settings' ? (
+              <motion.div
+                key="settings"
+                initial={{ opacity: 0, x: isRtl ? 10 : -10 }}
+                animate={{ opacity: 1, x: 0 }}
+                exit={{ opacity: 0, x: isRtl ? -10 : 10 }}
+                transition={{ duration: 0.2 }}
+                className="px-4 pt-4"
+              >
+                <div className="flex items-center gap-1.5 mb-6">
+                  <Settings size={14} className="text-brand-accent" />
+                  <h3 className="text-xs font-black tracking-widest uppercase text-ink dark:text-dark-ink">
+                    {t('settings.title')}
+                  </h3>
+                </div>
+                <div className="space-y-1">
+                  {[
+                    { id: 'general', href: '/settings/general', label: t('generalSettings.title'), icon: Settings },
+                    { id: 'ai', href: '/settings/ai', label: t('aiSettings.title'), icon: Sparkles },
+                    { id: 'billing', href: '/settings/billing', label: t('billing.title'), icon: CreditCard },
+                    { id: 'appearance', href: '/settings/appearance', label: t('appearance.title'), icon: Palette },
+                    { id: 'profile', href: '/settings/profile', label: t('profile.title'), icon: User },
+                    { id: 'data', href: '/settings/data', label: t('dataManagement.title'), icon: Database },
+                    { id: 'published', href: '/settings/published', label: t('settings.publishedTitle') || 'Mes pages', icon: Globe },
+                    { id: 'integrations', href: '/settings/integrations', label: t('integrations.title') || 'Intégrations', icon: Plug },
+                    { id: 'mcp', href: '/settings/mcp', label: t('mcpSettings.title'), icon: Key },
+                    { id: 'about', href: '/settings/about', label: t('about.title'), icon: Info },
+                  ].map((tab) => {
+                    const isActive = pathname === tab.href || pathname.startsWith(`${tab.href}/`)
+                    return (
+                      <Link
+                        key={tab.id}
+                        href={tab.href}
+                        className={cn(
+                          'w-full text-start px-3 py-2 text-[11px] transition-all rounded-lg flex items-center gap-2.5',
+                          isActive
+                            ? 'text-ink bg-brand-accent/10'
+                            : 'text-muted-foreground hover:text-ink hover:bg-black/5 dark:hover:bg-white/5',
+                        )}
+                      >
+                        <tab.icon size={12} className="text-concrete shrink-0" />
+                        <span className="font-semibold">{tab.label}</span>
+                      </Link>
+                    )
+                  })}
+                </div>
+              </motion.div>
+            ) : panelView === 'notebooks' ? (
               <motion.div
                 key="notebooks"
                 ref={notebooksContainerRef}
@@ -1721,7 +1739,7 @@ export function Sidebar({ className, user }: { className?: string; user?: any })
                     <div className="flex items-center gap-1.5">
                       <BookMarked size={14} className="text-brand-accent" />
                       <h3 className="text-xs font-black tracking-widest uppercase text-ink dark:text-dark-ink">
-                        {t('sidebar.documents')}
+                        {t('nav.notebooks')}
                       </h3>
                     </div>
                     <div className="flex items-center gap-0.5">
@@ -1893,7 +1911,7 @@ export function Sidebar({ className, user }: { className?: string; user?: any })
                   </div>
                 </div>
               </motion.div>
-            ) : activeView === 'insights' ? (
+            ) : panelView === 'insights' ? (
               <motion.div
                 key="insights"
                 initial={{ opacity: 0, x: isRtl ? 10 : -10 }}
@@ -1915,12 +1933,20 @@ export function Sidebar({ className, user }: { className?: string; user?: any })
                   type="button"
                   onClick={() => router.push('/home')}
                   className="w-full flex items-center gap-2 px-3 py-2.5 rounded-xl border border-border/40 bg-white/60 dark:bg-zinc-800/40 hover:border-brand-accent/30 hover:bg-brand-accent/5 transition-all text-[12px] font-medium text-foreground"
+                >
+                  <Home size={14} className="text-brand-accent shrink-0" />
+                  {t('sidebar.backToHome')}
+                </button>
+                <button
+                  type="button"
+                  onClick={() => router.push('/home?forceList=1')}
+                  className="w-full flex items-center gap-2 px-3 py-2.5 rounded-xl border border-border/40 bg-white/60 dark:bg-zinc-800/40 hover:border-brand-accent/30 hover:bg-brand-accent/5 transition-all text-[12px] font-medium text-foreground"
                 >
                   <BookOpen size={14} className="text-brand-accent shrink-0" />
                   {t('sidebar.backToNotebooks')}
                 </button>
               </motion.div>
-            ) : activeView === 'revision' ? (
+            ) : panelView === 'revision' ? (
               <motion.div
                 key="revision"
                 initial={{ opacity: 0, x: isRtl ? 10 : -10 }}
@@ -1942,12 +1968,20 @@ export function Sidebar({ className, user }: { className?: string; user?: any })
                   type="button"
                   onClick={() => router.push('/home')}
                   className="w-full flex items-center gap-2 px-3 py-2.5 rounded-xl border border-border/40 bg-white/60 dark:bg-zinc-800/40 hover:border-brand-accent/30 hover:bg-brand-accent/5 transition-all text-[12px] font-medium text-foreground"
+                >
+                  <Home size={14} className="text-brand-accent shrink-0" />
+                  {t('sidebar.backToHome')}
+                </button>
+                <button
+                  type="button"
+                  onClick={() => router.push('/home?forceList=1')}
+                  className="w-full flex items-center gap-2 px-3 py-2.5 rounded-xl border border-border/40 bg-white/60 dark:bg-zinc-800/40 hover:border-brand-accent/30 hover:bg-brand-accent/5 transition-all text-[12px] font-medium text-foreground"
                 >
                   <BookOpen size={14} className="text-brand-accent shrink-0" />
                   {t('sidebar.backToNotebooks')}
                 </button>
               </motion.div>
-            ) : activeView === 'reminders' ? (
+            ) : panelView === 'reminders' ? (
               <motion.div
                 key="reminders"
                 initial={{ opacity: 0, x: isRtl ? 10 : -10 }}
@@ -1966,7 +2000,7 @@ export function Sidebar({ className, user }: { className?: string; user?: any })
                   <SidebarReminders onOpenNote={handleReminderNoteClick} />
                 </div>
               </motion.div>
-            ) : activeView === 'agents' ? (
+            ) : panelView === 'agents' ? (
               <motion.div
                 key="agents"
                 initial={{ opacity: 0, x: isRtl ? -10 : 10 }}