feat: design system overhaul — sidebar, AI chats, settings, brainstorm, color cleanup

- Sidebar: dynamic brand-accent colors, brainstorm section restyled - AI chat general: popup panel with expand/collapse, hides when contextual AI open - AI chat contextual: tabs reordered (Actions first), X close button, height fix - Settings: all tabs restyled, 6 new color presets (sage, terracotta, iron, etc.) - Global color cleanup: emerald/orange hardcoded → brand-accent dynamic - Brainstorm page: orange → brand-accent throughout - PageEntry animation component added to key pages - Floating AI button: bg-brand-accent instead of hardcoded black - i18n: all 15 locales updated with new AI/billing keys - Billing: freemium quota tracking, BYOK, stripe subscription scaffolding - Admin: integrated into new design - AGENTS.md + CLAUDE.md project rules added
2026-05-16 12:59:30 +00:00
parent 1fcea6ed7d
commit bd495be965
2284 changed files with 395285 additions and 2327 deletions
--- a/memento-note/app/(main)/settings/appearance/appearance-settings-client.tsx
+++ b/memento-note/app/(main)/settings/appearance/appearance-settings-client.tsx
@@ -1,28 +1,54 @@
 'use client'

-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import { updateAISettings } from '@/app/actions/ai-settings'
 import { updateUserSettings } from '@/app/actions/user-settings'
 import { useLanguage } from '@/lib/i18n'
 import { toast } from 'sonner'
-import { Palette, Type } from 'lucide-react'
+import { Palette, Type, LayoutGrid, Maximize } from 'lucide-react'
 import { applyDocumentTheme, normalizeThemeId, type ThemeId } from '@/lib/apply-document-theme'
+import { motion } from 'motion/react'
+
+const PRESET_COLORS = [
+  { name: 'Warm Earth', value: '#A47148' },
+  { name: 'Sage', value: '#4E594A' },
+  { name: 'Terracotta', value: '#B1523E' },
+  { name: 'Iron', value: '#4A5568' },
+  { name: 'Charcoal', value: '#1E293B' },
+  { name: 'Slate', value: '#475569' },
+  { name: 'Olive', value: '#7C8363' },
+  { name: 'Wine', value: '#722F37' },
+]

 interface AppearanceSettingsClientProps {
  initialFontSize: string
  initialTheme: string
  initialFontFamily?: string
+  initialAccentColor?: string
 }

 export function AppearanceSettingsClient({
  initialFontSize,
  initialTheme,
  initialFontFamily = 'inter',
+  initialAccentColor = '#A47148',
 }: AppearanceSettingsClientProps) {
  const { t } = useLanguage()
  const [theme, setTheme] = useState<ThemeId>(normalizeThemeId(initialTheme || 'light'))
  const [fontSize, setFontSize] = useState(initialFontSize || 'medium')
  const [fontFamily, setFontFamily] = useState(initialFontFamily)
+  const [accentColor, setAccentColor] = useState(initialAccentColor)
+
+  useEffect(() => {
+    document.documentElement.style.setProperty('--color-brand-accent', accentColor)
+  }, [accentColor])
+
+  const handleAccentColorChange = async (color: string) => {
+    setAccentColor(color)
+    document.documentElement.style.setProperty('--color-brand-accent', color)
+    localStorage.setItem('accent-color', color)
+    await updateUserSettings({ accentColor: color })
+  }

  const handleThemeChange = async (value: string) => {
    const next = normalizeThemeId(value)
@@ -74,21 +100,21 @@ export function AppearanceSettingsClient({
    optionGroups?: { label: string; options: { value: string; label: string }[] }[]
    onChange: (v: string) => void
  }) => (
-    <div className="bg-card rounded-lg border border-border p-6 shadow-sm flex flex-col gap-4">
-      <div className="flex items-center gap-3">
-        <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary shrink-0">
+    <div className="bg-white/40 dark:bg-white/5 border border-border rounded-2xl p-8 space-y-8 group transition-all duration-300 hover:shadow-xl hover:shadow-slate/5">
+      <div className="flex items-center gap-5">
+        <div className="p-3 bg-paper dark:bg-white/10 rounded-2xl text-slate border border-border group-hover:scale-110 transition-transform duration-300">
          <Icon className="h-5 w-5" />
        </div>
-        <div>
-          <h3 className="font-semibold text-foreground">{title}</h3>
-          <p className="text-sm text-muted-foreground">{description}</p>
+        <div className="space-y-0.5 text-left">
+          <h4 className="text-base font-bold text-foreground">{title}</h4>
+          <p className="text-[11px] text-muted-foreground leading-tight">{description}</p>
        </div>
      </div>
-      <div className="relative mt-2">
+      <div className="relative group/select">
        <select
          value={value}
          onChange={(e) => onChange(e.target.value)}
-          className="w-full h-11 px-4 bg-muted border border-border rounded-lg text-foreground text-sm focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none appearance-none cursor-pointer transition-colors"
+          className="w-full bg-white/50 dark:bg-black/40 border border-border rounded-xl px-5 py-4 text-sm outline-none focus:ring-1 ring-slate/20 appearance-none cursor-pointer text-foreground font-bold transition-all hover:bg-white dark:hover:bg-black/60"
        >
          {optionGroups
            ? optionGroups.map((g) => (
@@ -106,9 +132,9 @@ export function AppearanceSettingsClient({
                </option>
              ))}
        </select>
-        <div className="absolute right-4 top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground">
-          <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+        <div className="absolute right-5 top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground group-hover/select:text-foreground transition-colors">
+          <svg width="10" height="6" viewBox="0 0 10 6" fill="none">
+            <path d="M1 1L5 5L9 1" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </div>
      </div>
@@ -141,52 +167,116 @@ export function AppearanceSettingsClient({
  ]

  return (
-    <div className="space-y-8">
-      {/* Section label — architectural style */}
-      <p className="text-[11px] font-bold uppercase tracking-[0.2em] text-muted-foreground">
-        {t('appearance.description') || "Personnalisez l'interface"}
-      </p>
+    <motion.div
+      initial={{ opacity: 0, y: 10 }}
+      animate={{ opacity: 1, y: 0 }}
+      className="space-y-16 pb-20"
+    >
+      <div className="space-y-10">
+        <p className="text-[11px] font-bold uppercase tracking-[0.2em] text-muted-foreground">
+          {t('appearance.description') || "Personnalisez l'interface"}
+        </p>

-      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-        <SelectCard
-          icon={Palette}
-          title={t('settings.theme')}
-          description={t('appearance.selectTheme')}
-          value={theme}
-          optionGroups={themeOptionGroups}
-          onChange={handleThemeChange}
-        />
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+          {/* Accent Color Section */}
+          <div className="md:col-span-2 bg-white/40 dark:bg-white/5 border border-border rounded-3xl p-10 space-y-8 group transition-all duration-300 hover:shadow-xl hover:shadow-brand-accent/5">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-5">
+                <div className="p-3 bg-paper dark:bg-white/10 rounded-2xl border border-border group-hover:scale-110 transition-transform duration-300 shadow-sm" style={{ color: accentColor }}>
+                  <Palette size={20} />
+                </div>
+                <div className="space-y-0.5 text-left">
+                  <h4 className="text-base font-bold text-foreground">{t('appearance.accentColorTitle') || 'Couleur d\'accentuation'}</h4>
+                  <p className="text-[11px] text-muted-foreground leading-tight">{t('appearance.accentColorDescription') || 'Définissez la couleur principale de votre espace de travail'}</p>
+                </div>
+              </div>
+              <div className="flex items-center gap-3 bg-slate-50 dark:bg-black/20 px-4 py-2 rounded-xl border border-border/40">
+                <div className="w-4 h-4 rounded-full border border-border/60" style={{ backgroundColor: accentColor }} />
+                <span className="text-xs font-mono font-medium text-muted-foreground uppercase tracking-widest">{accentColor}</span>
+              </div>
+            </div>

-        <SelectCard
-          icon={Type}
-          title={t('profile.fontSize')}
-          description={t('profile.fontSizeDescription')}
-          value={fontSize}
-          options={[
-            { value: 'small', label: t('profile.fontSizeSmall') },
-            { value: 'medium', label: t('profile.fontSizeMedium') },
-            { value: 'large', label: t('profile.fontSizeLarge') },
-            { value: 'extra-large', label: t('profile.fontSizeExtraLarge') },
-          ]}
-          onChange={handleFontSizeChange}
-        />
+            <div className="flex flex-wrap gap-4">
+              {PRESET_COLORS.map((color) => (
+                <button
+                  key={color.value}
+                  onClick={() => handleAccentColorChange(color.value)}
+                  className={`relative w-12 h-12 rounded-2xl transition-all duration-300 hover:scale-110 flex items-center justify-center p-1 border-2 ${
+                    accentColor.toLowerCase() === color.value.toLowerCase()
+                      ? 'border-foreground shadow-lg'
+                      : 'border-transparent hover:border-muted-foreground/20'
+                  }`}
+                  title={color.name}
+                >
+                  <div
+                    className="w-full h-full rounded-xl shadow-inner"
+                    style={{ backgroundColor: color.value }}
+                  />
+                  {accentColor.toLowerCase() === color.value.toLowerCase() && (
+                    <motion.div
+                      layoutId="color-check"
+                      className="absolute inset-0 flex items-center justify-center text-white mix-blend-difference"
+                    >
+                      <Palette size={14} />
+                    </motion.div>
+                  )}
+                </button>
+              ))}

-        <SelectCard
-          icon={Type}
-          title={t('appearance.fontFamilyLabel') || 'Police'}
-          description={t('appearance.fontFamilyDescription') || "Choisissez la police de l'application"}
-          value={fontFamily}
-          options={[
-            { value: 'inter', label: 'Inter (défaut)' },
-            { value: 'playfair', label: 'Playfair Display' },
-            { value: 'jetbrains', label: 'JetBrains Mono' },
-            { value: 'system', label: t('appearance.fontSystem') || 'Système' },
-          ]}
-          onChange={handleFontFamilyChange}
-        />
+              <div className="h-12 w-px bg-border/40 mx-2" />

+              <div className="relative group/custom">
+                <input
+                  type="color"
+                  value={accentColor}
+                  onChange={(e) => handleAccentColorChange(e.target.value)}
+                  className="w-12 h-12 rounded-2xl cursor-pointer opacity-0 absolute inset-0 z-10"
+                />
+                <div className="w-12 h-12 rounded-2xl border-2 border-dashed border-muted-foreground/30 flex items-center justify-center text-muted-foreground transition-all group-hover/custom:border-foreground group-hover/custom:text-foreground">
+                  <Maximize size={16} />
+                </div>
+              </div>
+            </div>
+          </div>

+          <SelectCard
+            icon={Palette}
+            title={t('settings.theme')}
+            description={t('appearance.selectTheme')}
+            value={theme}
+            optionGroups={themeOptionGroups}
+            onChange={handleThemeChange}
+          />
+
+          <SelectCard
+            icon={Type}
+            title={t('profile.fontSize')}
+            description={t('profile.fontSizeDescription')}
+            value={fontSize}
+            options={[
+              { value: 'small', label: t('profile.fontSizeSmall') },
+              { value: 'medium', label: t('profile.fontSizeMedium') },
+              { value: 'large', label: t('profile.fontSizeLarge') },
+              { value: 'extra-large', label: t('profile.fontSizeExtraLarge') },
+            ]}
+            onChange={handleFontSizeChange}
+          />
+
+          <SelectCard
+            icon={Type}
+            title={t('appearance.fontFamilyLabel') || 'Police'}
+            description={t('appearance.fontFamilyDescription') || "Choisissez la police de l'application"}
+            value={fontFamily}
+            options={[
+              { value: 'inter', label: t('appearance.fontInterDefault') },
+              { value: 'playfair', label: t('appearance.fontPlayfairDisplay') },
+              { value: 'jetbrains', label: t('appearance.fontJetBrainsMono') },
+              { value: 'system', label: t('appearance.fontSystem') || 'Système' },
+            ]}
+            onChange={handleFontFamilyChange}
+          />
+        </div>
      </div>
-    </div>
+    </motion.div>
  )
 }
--- a/memento-note/app/(main)/settings/appearance/page.tsx
+++ b/memento-note/app/(main)/settings/appearance/page.tsx
@@ -20,6 +20,7 @@ export default async function AppearanceSettingsPage() {
      initialFontSize={aiSettings.fontSize}
      initialTheme={userSettings.theme}
      initialFontFamily={aiSettings.fontFamily || 'inter'}
+      initialAccentColor={userSettings.accentColor || '#A47148'}
    />
  )
 }