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