feat: standardize UI theme, fix dark mode consistency, and implement editorial tags

memento-note/components/sidebar.tsx

@@ -23,9 +23,12 @@ import {
   Bell,
   Pencil,
   Clock,
+  Moon,
+  Sun,
 } from 'lucide-react'
 import { useLanguage } from '@/lib/i18n'
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { applyDocumentTheme } from '@/lib/apply-document-theme'
 import { getAllNotes, getTrashCount } from '@/app/actions/notes'
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import { useNotebooks } from '@/context/notebooks-context'
@@ -151,7 +154,7 @@ function SidebarCarnetItem({
             onDoubleClick={(e) => { e.stopPropagation(); onRename() }}
             className={cn(
               'flex-1 flex items-center gap-2.5 px-2 py-1.5 rounded-lg transition-all duration-300 group/item cursor-pointer relative',
-              isActive ? 'bg-white shadow-sm border border-border/40' : 'hover:bg-white/40'
+              isActive ? 'bg-white dark:bg-white/10 shadow-sm border border-border/40' : 'hover:bg-white/40 dark:hover:bg-white/5'
             )}
           >
             {isActive && (
@@ -163,9 +166,9 @@ function SidebarCarnetItem({
             )}
             <div className={cn(
               'w-6 h-6 rounded-md flex items-center justify-center text-[10px] font-bold border shrink-0 transition-all',
-              isActive
+                isActive
                 ? 'bg-blueprint text-white border-blueprint'
-                : 'bg-white/60 text-ink border-border'
+                : 'bg-white/60 dark:bg-white/5 text-ink dark:text-foreground border-border'
             )}>
               {carnet.initial}
             </div>
@@ -260,6 +263,19 @@ export function Sidebar({ className, user }: { className?: string; user?: any })
   const [createParentId, setCreateParentId] = useState<string | null>(null)
   const [renamingNotebook, setRenamingNotebook] = useState<Notebook | null>(null)
   const [renameValue, setRenameValue] = useState('')
+  const [isDark, setIsDark] = useState(false)
+
+  useEffect(() => {
+    setIsDark(document.documentElement.classList.contains('dark'))
+  }, [])
+
+  const toggleTheme = useCallback(() => {
+    const next = !isDark
+    setIsDark(next)
+    const theme = next ? 'dark' : 'light'
+    localStorage.setItem('theme-preference', theme)
+    applyDocumentTheme(theme)
+  }, [isDark])
   const [deletingNotebook, setDeletingNotebook] = useState<Notebook | null>(null)
   const [isDeleting, setIsDeleting] = useState(false)
   const [isRenaming, setIsRenaming] = useState(false)
@@ -581,7 +597,7 @@ export function Sidebar({ className, user }: { className?: string; user?: any })
                   {user?.image ? (
                     <Avatar className="size-10 ring-1 ring-border/60">
                       <AvatarImage src={user.image} alt="" />
-                      <AvatarFallback className="bg-secondary text-sm font-semibold text-[#1C1C1C]/60">{initial}</AvatarFallback>
+                      <AvatarFallback className="bg-secondary text-sm font-semibold text-muted-ink">{initial}</AvatarFallback>
                     </Avatar>
                   ) : (
                     <span>{initial}</span>
@@ -621,10 +637,16 @@ export function Sidebar({ className, user }: { className?: string; user?: any })
             </DropdownMenuContent>
           </DropdownMenu>
 
-          {/* Notification bell + Notebooks / Agents toggle */}
           <div className="flex items-center gap-2">
+            <button
+              onClick={toggleTheme}
+              className="p-2 text-muted-foreground hover:text-foreground transition-all bg-white/50 dark:bg-white/10 rounded-full border border-border dark:border-white/10"
+            >
+              {isDark ? <Sun size={14} /> : <Moon size={14} />}
+            </button>
+
             <NotificationPanel />
-            <div className="flex bg-white/50 p-1 rounded-full border border-border transition-all">
+            <div className="flex bg-white/50 dark:bg-white/5 p-1 rounded-full border border-border dark:border-white/10 transition-all">
               <button
                 onClick={() => { setActiveView('notebooks'); if (pathname !== '/') router.push('/') }}
                 className={cn('p-1.5 rounded-full transition-all', activeView === 'notebooks' ? 'bg-ink text-paper shadow-sm' : 'text-muted-ink hover:text-ink')}
@@ -721,7 +743,7 @@ export function Sidebar({ className, user }: { className?: string; user?: any })
                     'w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium border shrink-0',
                     isInboxActive
                       ? 'bg-ink text-paper border-ink'
-                      : 'bg-white/60 text-ink border-border'
+                      : 'bg-white/60 dark:bg-white/5 text-ink dark:text-foreground border-border'
                   )}>
                     <Inbox size={14} />
                   </div>
@@ -784,14 +806,14 @@ export function Sidebar({ className, user }: { className?: string; user?: any })
                         href={item.href}
                         className={cn(
                           'w-full flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-300 group',
-                          isActive ? 'memento-active-nav' : 'text-muted-foreground hover:bg-white/40 hover:text-foreground'
+                          isActive ? 'memento-active-nav' : 'text-muted-foreground hover:bg-foreground/5 hover:text-foreground'
                         )}
                       >
                         <div className={cn(
                           'w-8 h-8 rounded-full flex items-center justify-center border transition-colors shrink-0',
                           isActive
                             ? 'bg-foreground text-background border-foreground'
-                            : 'bg-white/60 border-border group-hover:border-foreground/20'
+                            : 'bg-paper border-border group-hover:border-foreground/20'
                         )}>
                           <item.icon size={16} />
                         </div>
@@ -814,7 +836,7 @@ export function Sidebar({ className, user }: { className?: string; user?: any })
                 'w-full flex items-center gap-3 px-3 py-2 text-[12px] transition-all font-medium group rounded-xl',
                 searchParams.get('shared') === '1' && pathname === '/'
                   ? 'bg-blueprint/5 text-blueprint'
-                  : 'text-muted-ink hover:text-ink hover:bg-black/5'
+                  : 'text-muted-ink hover:text-ink hover:bg-foreground/5'
               )}
             >
               <Users size={14} className={searchParams.get('shared') === '1' && pathname === '/' ? 'text-blueprint' : 'text-muted-ink group-hover:text-ink'} />
@@ -823,7 +845,7 @@ export function Sidebar({ className, user }: { className?: string; user?: any })
 
             <Link
               href="/archive"
-              className="w-full flex items-center gap-3 px-3 py-2 text-[12px] text-muted-ink hover:text-ink hover:bg-black/5 transition-all font-medium group rounded-xl"
+              className="w-full flex items-center gap-3 px-3 py-2 text-[12px] text-muted-ink hover:text-ink hover:bg-foreground/5 transition-all font-medium group rounded-xl"
             >
               <Archive size={14} className="text-muted-ink group-hover:text-ink" />
               <span>{t('sidebar.archive')}</span>
@@ -853,7 +875,7 @@ export function Sidebar({ className, user }: { className?: string; user?: any })
                 'w-full flex items-center gap-3 px-3 py-2 text-[12px] transition-all font-medium group rounded-xl',
                 pathname.startsWith('/settings')
                   ? 'bg-ink text-paper shadow-sm'
-                  : 'text-muted-ink hover:text-ink hover:bg-black/5'
+                  : 'text-muted-ink hover:text-ink hover:bg-foreground/5'
               )}
             >
               <Settings size={14} className={pathname.startsWith('/settings') ? 'text-paper' : 'text-muted-ink group-hover:text-ink'} />