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

memento-note/components/notes-editorial-view.tsx

@@ -7,6 +7,7 @@ import { useLanguage } from '@/lib/i18n'
 import { useRefresh } from '@/lib/use-refresh'
 import { motion, AnimatePresence } from 'motion/react'
 import { ChevronRight, MoreHorizontal, Trash2, Archive, Pin, History, Pencil, Sparkles, Loader2, Bell, FolderOpen } from 'lucide-react'
+import { useLabelsQuery } from '@/lib/query-hooks'
 import { useSession } from 'next-auth/react'
 import { getAISettings } from '@/app/actions/ai-settings'
 import { generateNoteIllustrationSvg } from '@/app/actions/note-illustration'
@@ -275,7 +276,7 @@ function NoteThumbnailPlaceholder({ title, noteId }: { title: string; noteId: st
   return (
     <div
       className="h-full w-full flex items-center justify-center relative overflow-hidden"
-      style={{ background: `linear-gradient(145deg, hsl(${hue} 25% 94%) 0%, hsl(${hue} 18% 87%) 100%)` }}
+      style={{ background: `linear-gradient(145deg, hsl(${hue} 25% var(--thumb-lightness-1, 94%)) 0%, hsl(${hue} 18% var(--thumb-lightness-2, 87%)) 100%)` }}
     >
       {/* Decorative concentric circles */}
       <svg
@@ -314,6 +315,18 @@ function NoteThumbnailPlaceholder({ title, noteId }: { title: string; noteId: st
   )
 }
 
+function NoteTag({ labelName, allLabels }: { labelName: string; allLabels: any[] }) {
+  const labelDef = allLabels?.find(l => l.name === labelName)
+  const isAI = labelDef?.type === 'ai'
+  
+  return (
+    <div className="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-md bg-paper dark:bg-white/5 text-[9px] font-bold uppercase tracking-[0.15em] text-muted-foreground border border-border/40">
+      {isAI && <Sparkles size={8} className="text-blueprint" />}
+      {labelName}
+    </div>
+  )
+}
+
 export function NotesEditorialView({
   notes,
   onOpen,
@@ -322,6 +335,7 @@ export function NotesEditorialView({
 }: NotesEditorialViewProps) {
   const { t } = useLanguage()
   const { data: session } = useSession()
+  const { data: allLabels } = useLabelsQuery()
   const [aiIllustrationEnabled, setAiIllustrationEnabled] = useState(false)
 
   useEffect(() => {
@@ -374,6 +388,13 @@ export function NotesEditorialView({
               <div className="flex flex-col md:flex-row gap-8 items-start">
                 <EditorialThumbnail note={note} title={title} aiIllustrationEnabled={aiIllustrationEnabled} />
                 <div className="space-y-3 flex-1">
+                  {note.labels && note.labels.length > 0 && (
+                    <div className="flex flex-wrap gap-2">
+                      {note.labels.slice(0, 2).map((labelName) => (
+                        <NoteTag key={labelName} labelName={labelName} allLabels={allLabels || []} />
+                      ))}
+                    </div>
+                  )}
                   {excerpt ? (
                     <p className="text-[14px] leading-relaxed text-foreground/80 font-light max-w-lg line-clamp-4">
                       {excerpt}