refactor(ux): consolidate BMAD skills, update design system, and clean up Prisma generated client

keep-notes/app/(main)/settings/appearance/appearance-form.tsx

@@ -10,12 +10,14 @@ import { useLanguage } from '@/lib/i18n'
 interface AppearanceSettingsFormProps {
     initialTheme: string
     initialFontSize: string
+    initialCardSizeMode?: string
 }
 
-export function AppearanceSettingsForm({ initialTheme, initialFontSize }: AppearanceSettingsFormProps) {
+export function AppearanceSettingsForm({ initialTheme, initialFontSize, initialCardSizeMode = 'variable' }: AppearanceSettingsFormProps) {
     const router = useRouter()
     const [theme, setTheme] = useState(initialTheme)
     const [fontSize, setFontSize] = useState(initialFontSize)
+    const [cardSizeMode, setCardSizeMode] = useState(initialCardSizeMode)
     const { t } = useLanguage()
 
     const handleThemeChange = async (value: string) => {
@@ -55,6 +57,12 @@ export function AppearanceSettingsForm({ initialTheme, initialFontSize }: Appear
         await updateAI({ fontSize: value as any })
     }
 
+    const handleCardSizeModeChange = async (value: string) => {
+        setCardSizeMode(value)
+        localStorage.setItem('card-size-mode', value)
+        await updateUser({ cardSizeMode: value as 'variable' | 'uniform' })
+    }
+
     return (
         <div className="space-y-6">
             <div>
@@ -102,6 +110,23 @@ export function AppearanceSettingsForm({ initialTheme, initialFontSize }: Appear
                     onChange={handleFontSizeChange}
                 />
             </SettingsSection>
+
+            <SettingsSection
+                title={t('settings.cardSizeMode')}
+                icon={<span className="text-2xl">📐</span>}
+                description={t('settings.cardSizeModeDescription')}
+            >
+                <SettingSelect
+                    label={t('settings.cardSizeMode')}
+                    description={t('settings.selectCardSizeMode')}
+                    value={cardSizeMode}
+                    options={[
+                        { value: 'variable', label: t('settings.cardSizeVariable') },
+                        { value: 'uniform', label: t('settings.cardSizeUniform') },
+                    ]}
+                    onChange={handleCardSizeModeChange}
+                />
+            </SettingsSection>
         </div>
     )
 }

keep-notes/app/(main)/settings/appearance/appearance-settings-client.tsx

@@ -11,13 +11,15 @@ interface AppearanceSettingsClientProps {
   initialFontSize: string
   initialTheme: string
   initialNotesViewMode: 'masonry' | 'tabs'
+  initialCardSizeMode?: 'variable' | 'uniform'
 }
 
-export function AppearanceSettingsClient({ initialFontSize, initialTheme, initialNotesViewMode }: AppearanceSettingsClientProps) {
+export function AppearanceSettingsClient({ initialFontSize, initialTheme, initialNotesViewMode, initialCardSizeMode = 'variable' }: AppearanceSettingsClientProps) {
   const { t } = useLanguage()
   const [theme, setTheme] = useState(initialTheme || 'light')
   const [fontSize, setFontSize] = useState(initialFontSize || 'medium')
   const [notesViewMode, setNotesViewMode] = useState<'masonry' | 'tabs'>(initialNotesViewMode)
+  const [cardSizeMode, setCardSizeMode] = useState<'variable' | 'uniform'>(initialCardSizeMode)
 
   const handleThemeChange = async (value: string) => {
     setTheme(value)
@@ -59,6 +61,14 @@ export function AppearanceSettingsClient({ initialFontSize, initialTheme, initia
     toast.success(t('settings.settingsSaved') || 'Saved')
   }
 
+  const handleCardSizeModeChange = async (value: string) => {
+    const mode = value === 'uniform' ? 'uniform' : 'variable'
+    setCardSizeMode(mode)
+    localStorage.setItem('card-size-mode', mode)
+    await updateUserSettings({ cardSizeMode: mode })
+    toast.success(t('settings.settingsSaved') || 'Saved')
+  }
+
   return (
     <div className="space-y-6">
       <div>
@@ -122,6 +132,23 @@ export function AppearanceSettingsClient({ initialFontSize, initialTheme, initia
           onChange={handleNotesViewChange}
         />
       </SettingsSection>
+
+      <SettingsSection
+        title={t('settings.cardSizeMode')}
+        icon={<span className="text-2xl">📐</span>}
+        description={t('settings.cardSizeModeDescription')}
+      >
+        <SettingSelect
+          label={t('settings.cardSizeMode')}
+          description={t('settings.selectCardSizeMode')}
+          value={cardSizeMode}
+          options={[
+            { value: 'variable', label: t('settings.cardSizeVariable') },
+            { value: 'uniform', label: t('settings.cardSizeUniform') },
+          ]}
+          onChange={handleCardSizeModeChange}
+        />
+      </SettingsSection>
     </div>
   )
 }

keep-notes/app/(main)/settings/appearance/page.tsx

@@ -20,6 +20,7 @@ export default async function AppearanceSettingsPage() {
       initialFontSize={aiSettings.fontSize}
       initialTheme={userSettings.theme}
       initialNotesViewMode={aiSettings.notesViewMode === 'masonry' ? 'masonry' : 'tabs'}
+      initialCardSizeMode={userSettings.cardSizeMode}
     />
   )
 }

keep-notes/app/(main)/settings/general/general-settings-client.tsx

@@ -12,7 +12,6 @@ interface GeneralSettingsClientProps {
     preferredLanguage: string
     emailNotifications: boolean
     desktopNotifications: boolean
-    anonymousAnalytics: boolean
   }
 }
 
@@ -22,7 +21,6 @@ export function GeneralSettingsClient({ initialSettings }: GeneralSettingsClient
   const [language, setLanguage] = useState(initialSettings.preferredLanguage || 'auto')
   const [emailNotifications, setEmailNotifications] = useState(initialSettings.emailNotifications ?? false)
   const [desktopNotifications, setDesktopNotifications] = useState(initialSettings.desktopNotifications ?? false)
-  const [anonymousAnalytics, setAnonymousAnalytics] = useState(initialSettings.anonymousAnalytics ?? false)
 
   const handleLanguageChange = async (value: string) => {
     setLanguage(value)
@@ -52,12 +50,6 @@ export function GeneralSettingsClient({ initialSettings }: GeneralSettingsClient
     toast.success(t('settings.settingsSaved') || 'Saved')
   }
 
-  const handleAnonymousAnalyticsChange = async (enabled: boolean) => {
-    setAnonymousAnalytics(enabled)
-    await updateAISettings({ anonymousAnalytics: enabled })
-    toast.success(t('settings.settingsSaved') || 'Saved')
-  }
-
   return (
     <div className="space-y-6">
       <div>
@@ -116,19 +108,6 @@ export function GeneralSettingsClient({ initialSettings }: GeneralSettingsClient
           onChange={handleDesktopNotificationsChange}
         />
       </SettingsSection>
-
-      <SettingsSection
-        title={t('settings.privacy')}
-        icon={<span className="text-2xl">🔒</span>}
-        description={t('settings.privacyDesc')}
-      >
-        <SettingToggle
-          label={t('settings.anonymousAnalytics')}
-          description={t('settings.anonymousAnalyticsDesc')}
-          checked={anonymousAnalytics}
-          onChange={handleAnonymousAnalyticsChange}
-        />
-      </SettingsSection>
     </div>
   )
 }