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

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>
   )
 }