✨ kawaii logo toggle

AI SLOP 🤢😒 should be learning how to do this myself instead 👁️

src/screens/Settings/AppearanceSettings.tsx

···
   type NativeStackScreenProps,
 } from '#/lib/routes/types'
 import {isNative} from '#/platform/detection'
+import {useKawaiiMode, useSetKawaiiMode} from '#/state/preferences/kawaii'
 import {useSetThemePrefs, useThemePrefs} from '#/state/shell'
 import {SettingsListItem as AppIconSettingsListItem} from '#/screens/Settings/AppIconSettings/SettingsListItem'
 import {type Alf, atoms as a, native, useAlf, useTheme} from '#/alf'
···
 import {Moon_Stroke2_Corner0_Rounded as MoonIcon} from '#/components/icons/Moon'
 import {Phone_Stroke2_Corner0_Rounded as PhoneIcon} from '#/components/icons/Phone'
 import {Pizza_Stroke2_Corner0_Rounded as PizzaIcon} from '#/components/icons/Pizza'
+import {Sparkle_Stroke2_Corner0_Rounded as SparkleIcon} from '#/components/icons/Sparkle'
 import {TextSize_Stroke2_Corner0_Rounded as TextSize} from '#/components/icons/TextSize'
 import {TitleCase_Stroke2_Corner0_Rounded as Aa} from '#/components/icons/TitleCase'
 import * as Layout from '#/components/Layout'
···
   const {colorMode, colorScheme, darkTheme, hue} = useThemePrefs()
   const {setColorMode, setColorScheme, setDarkTheme, setHue} =
     useSetThemePrefs()
+
+  const kawaiiMode = useKawaiiMode()
+  const setKawaiiMode = useSetKawaiiMode()
 
   const onChangeAppearance = useCallback(
     (value: 'light' | 'system' | 'dark') => {
···
                 value={fonts.scale}
                 onChange={onChangeFontScale}
               />
+
+              <SettingsList.Divider />
+
+              <SettingsList.Group contentContainerStyle={[a.gap_sm]}>
+                <SettingsList.ItemIcon icon={SparkleIcon} />
+                <SettingsList.ItemText>
+                  <Trans>Logo</Trans>
+                </SettingsList.ItemText>
+                <Toggle.Item
+                  name="kawaii_mode"
+                  label={_(msg`Enable kawaii logo`)}
+                  value={kawaiiMode}
+                  onChange={value => setKawaiiMode(value)}
+                  style={[a.w_full]}>
+                  <Toggle.LabelText style={[a.flex_1]}>
+                    <Trans>Enable kawaii logo</Trans>
+                  </Toggle.LabelText>
+                  <Toggle.Platform />
+                </Toggle.Item>
+              </SettingsList.Group>
 
               {isNative && IS_INTERNAL && (
                 <>

src/state/preferences/kawaii.tsx

···
     }
   }, [setStateWrapped])
 
-  return <stateContext.Provider value={state}>{children}</stateContext.Provider>
+  return (
+    <stateContext.Provider value={state}>
+      <setterContext.Provider value={setStateWrapped}>
+        {children}
+      </setterContext.Provider>
+    </stateContext.Provider>
+  )
 }
 
 export function useKawaiiMode() {
   return React.useContext(stateContext)
 }
+
+const setterContext = React.createContext<(kawaii: boolean) => void>(
+  (_: boolean) => {},
+)
+setterContext.displayName = 'KawaiiSetterContext'
+
+export function useSetKawaiiMode() {
+  return React.useContext(setterContext)
+}

src/view/com/auth/SplashScreen.tsx

···
 import {useLingui} from '@lingui/react'
 
 import {useHaptics} from '#/lib/haptics'
+import {useKawaiiMode} from '#/state/preferences/kawaii'
 import {ErrorBoundary} from '#/view/com/util/ErrorBoundary'
 import {CenteredView} from '#/view/com/util/Views'
 import {Logo} from '#/view/icons/Logo'
···
 
   const playHaptic = useHaptics()
   const insets = useSafeAreaInsets()
+  const kawaii = useKawaiiMode()
 
   return (
     <CenteredView style={[a.h_full, a.flex_1]}>
···
         style={[a.flex_1]}>
         <ErrorBoundary>
           <View style={[a.flex_1, a.justify_center, a.align_center]}>
-            <Logo width={92} fill="sky" />
+            <Logo width={kawaii ? 164 : 92} fill="sky" />
 
-            <View style={[a.pb_sm, a.pt_5xl]}>
-              <Logotype width={161} fill={t.atoms.text.color} />
-            </View>
+            {!kawaii && (
+              <View style={[a.pb_sm, a.pt_5xl]}>
+                <Logotype width={161} fill={t.atoms.text.color} />
+              </View>
+            )}
 
             <Text
               style={[