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

memento-note/components/settings/SettingsNav.tsx

@@ -2,16 +2,9 @@
 
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
-import { Settings, Sparkles, Palette, User, Database, Info, Key } from 'lucide-react'
-import { cn } from '@/lib/utils'
+import { Settings, Sparkles, Palette, User, Database, Info, Key, CreditCard } from 'lucide-react'
 import { useLanguage } from '@/lib/i18n'
-
-interface SettingsSection {
-  id: string
-  label: string
-  icon: React.ReactNode
-  href: string
-}
+import { motion } from 'motion/react'
 
 interface SettingsNavProps {
   className?: string
@@ -21,33 +14,37 @@ export function SettingsNav({ className }: SettingsNavProps) {
   const pathname = usePathname()
   const { t } = useLanguage()
 
-  const sections: SettingsSection[] = [
-    { id: 'general', label: t('generalSettings.title'), icon: <Settings className="h-4 w-4" />, href: '/settings/general' },
-    { id: 'ai', label: t('aiSettings.title'), icon: <Sparkles className="h-4 w-4" />, href: '/settings/ai' },
-    { id: 'appearance', label: t('appearance.title'), icon: <Palette className="h-4 w-4" />, href: '/settings/appearance' },
-    { id: 'profile', label: t('profile.title'), icon: <User className="h-4 w-4" />, href: '/settings/profile' },
-    { id: 'data', label: t('dataManagement.title'), icon: <Database className="h-4 w-4" />, href: '/settings/data' },
-    { id: 'mcp', label: t('mcpSettings.title'), icon: <Key className="h-4 w-4" />, href: '/settings/mcp' },
-    { id: 'about', label: t('about.title'), icon: <Info className="h-4 w-4" />, href: '/settings/about' },
+  const tabs = [
+    { id: 'general', label: t('generalSettings.title'), icon: <Settings size={14} />, href: '/settings/general' },
+    { id: 'ai', label: t('aiSettings.title'), icon: <Sparkles size={14} />, href: '/settings/ai' },
+    { id: 'billing', label: t('billing.title'), icon: <CreditCard size={14} />, href: '/settings/billing' },
+    { id: 'appearance', label: t('appearance.title'), icon: <Palette size={14} />, href: '/settings/appearance' },
+    { id: 'profile', label: t('profile.title'), icon: <User size={14} />, href: '/settings/profile' },
+    { id: 'data', label: t('dataManagement.title'), icon: <Database size={14} />, href: '/settings/data' },
+    { id: 'mcp', label: t('mcpSettings.title'), icon: <Key size={14} />, href: '/settings/mcp' },
+    { id: 'about', label: t('about.title'), icon: <Info size={14} />, href: '/settings/about' },
   ]
 
   const isActive = (href: string) => pathname === href || pathname.startsWith(href + '/')
 
   return (
-    <nav className={cn('flex items-center gap-6 border-b border-border/40', className)}>
-      {sections.map((section) => (
+    <nav className={`flex items-center gap-1 border-b border-border/40 pb-px ${className || ''}`}>
+      {tabs.map((tab) => (
         <Link
-          key={section.id}
-          href={section.href}
-          className={cn(
-            'flex items-center gap-2 pb-3 pt-4 text-[11px] font-bold uppercase tracking-[0.15em] transition-all whitespace-nowrap border-b-2',
-            isActive(section.href)
-              ? 'border-[#D4A373] text-ink'
-              : 'border-transparent text-muted-ink hover:text-ink'
-          )}
+          key={tab.id}
+          href={tab.href}
+          className="flex items-center gap-2.5 px-6 py-5 text-[10px] font-bold uppercase tracking-[0.18em] transition-all relative whitespace-nowrap text-concrete hover:text-ink/60"
+          style={{ color: isActive(tab.href) ? 'var(--ink)' : undefined }}
         >
-          {section.icon}
-          <span>{section.label}</span>
+          <span style={{ color: isActive(tab.href) ? 'var(--ink)' : 'var(--concrete)' }}>{tab.icon}</span>
+          {tab.label}
+          {isActive(tab.href) && (
+            <motion.div
+              layoutId="activeSettingsTabLine"
+              className="absolute bottom-0 left-0 right-0 h-0.5 bg-ink"
+              transition={{ type: 'spring', bounce: 0.1, duration: 0.8 }}
+            />
+          )}
         </Link>
       ))}
     </nav>