forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
✨ kawaii logo toggle
AI SLOP 🤢😒 should be learning how to do this myself instead 👁️
+49
-5
+25
src/screens/Settings/AppearanceSettings.tsx
+25
src/screens/Settings/AppearanceSettings.tsx
···
14
14
type NativeStackScreenProps,
15
15
} from '#/lib/routes/types'
16
16
import {isNative} from '#/platform/detection'
17
+
import {useKawaiiMode, useSetKawaiiMode} from '#/state/preferences/kawaii'
17
18
import {useSetThemePrefs, useThemePrefs} from '#/state/shell'
18
19
import {SettingsListItem as AppIconSettingsListItem} from '#/screens/Settings/AppIconSettings/SettingsListItem'
19
20
import {type Alf, atoms as a, native, useAlf, useTheme} from '#/alf'
···
24
25
import {Moon_Stroke2_Corner0_Rounded as MoonIcon} from '#/components/icons/Moon'
25
26
import {Phone_Stroke2_Corner0_Rounded as PhoneIcon} from '#/components/icons/Phone'
26
27
import {Pizza_Stroke2_Corner0_Rounded as PizzaIcon} from '#/components/icons/Pizza'
28
+
import {Sparkle_Stroke2_Corner0_Rounded as SparkleIcon} from '#/components/icons/Sparkle'
27
29
import {TextSize_Stroke2_Corner0_Rounded as TextSize} from '#/components/icons/TextSize'
28
30
import {TitleCase_Stroke2_Corner0_Rounded as Aa} from '#/components/icons/TitleCase'
29
31
import * as Layout from '#/components/Layout'
···
40
42
const {colorMode, colorScheme, darkTheme, hue} = useThemePrefs()
41
43
const {setColorMode, setColorScheme, setDarkTheme, setHue} =
42
44
useSetThemePrefs()
45
+
46
+
const kawaiiMode = useKawaiiMode()
47
+
const setKawaiiMode = useSetKawaiiMode()
43
48
44
49
const onChangeAppearance = useCallback(
45
50
(value: 'light' | 'system' | 'dark') => {
···
237
242
value={fonts.scale}
238
243
onChange={onChangeFontScale}
239
244
/>
245
+
246
+
<SettingsList.Divider />
247
+
248
+
<SettingsList.Group contentContainerStyle={[a.gap_sm]}>
249
+
<SettingsList.ItemIcon icon={SparkleIcon} />
250
+
<SettingsList.ItemText>
251
+
<Trans>Logo</Trans>
252
+
</SettingsList.ItemText>
253
+
<Toggle.Item
254
+
name="kawaii_mode"
255
+
label={_(msg`Enable kawaii logo`)}
256
+
value={kawaiiMode}
257
+
onChange={value => setKawaiiMode(value)}
258
+
style={[a.w_full]}>
259
+
<Toggle.LabelText style={[a.flex_1]}>
260
+
<Trans>Enable kawaii logo</Trans>
261
+
</Toggle.LabelText>
262
+
<Toggle.Platform />
263
+
</Toggle.Item>
264
+
</SettingsList.Group>
240
265
241
266
{isNative && IS_INTERNAL && (
242
267
<>
+16
-1
src/state/preferences/kawaii.tsx
+16
-1
src/state/preferences/kawaii.tsx
···
43
43
}
44
44
}, [setStateWrapped])
45
45
46
-
return <stateContext.Provider value={state}>{children}</stateContext.Provider>
46
+
return (
47
+
<stateContext.Provider value={state}>
48
+
<setterContext.Provider value={setStateWrapped}>
49
+
{children}
50
+
</setterContext.Provider>
51
+
</stateContext.Provider>
52
+
)
47
53
}
48
54
49
55
export function useKawaiiMode() {
50
56
return React.useContext(stateContext)
51
57
}
58
+
59
+
const setterContext = React.createContext<(kawaii: boolean) => void>(
60
+
(_: boolean) => {},
61
+
)
62
+
setterContext.displayName = 'KawaiiSetterContext'
63
+
64
+
export function useSetKawaiiMode() {
65
+
return React.useContext(setterContext)
66
+
}
+8
-4
src/view/com/auth/SplashScreen.tsx
+8
-4
src/view/com/auth/SplashScreen.tsx
···
5
5
import {useLingui} from '@lingui/react'
6
6
7
7
import {useHaptics} from '#/lib/haptics'
8
+
import {useKawaiiMode} from '#/state/preferences/kawaii'
8
9
import {ErrorBoundary} from '#/view/com/util/ErrorBoundary'
9
10
import {CenteredView} from '#/view/com/util/Views'
10
11
import {Logo} from '#/view/icons/Logo'
···
26
27
27
28
const playHaptic = useHaptics()
28
29
const insets = useSafeAreaInsets()
30
+
const kawaii = useKawaiiMode()
29
31
30
32
return (
31
33
<CenteredView style={[a.h_full, a.flex_1]}>
···
35
37
style={[a.flex_1]}>
36
38
<ErrorBoundary>
37
39
<View style={[a.flex_1, a.justify_center, a.align_center]}>
38
-
<Logo width={92} fill="sky" />
40
+
<Logo width={kawaii ? 164 : 92} fill="sky" />
39
41
40
-
<View style={[a.pb_sm, a.pt_5xl]}>
41
-
<Logotype width={161} fill={t.atoms.text.color} />
42
-
</View>
42
+
{!kawaii && (
43
+
<View style={[a.pb_sm, a.pt_5xl]}>
44
+
<Logotype width={161} fill={t.atoms.text.color} />
45
+
</View>
46
+
)}
43
47
44
48
<Text
45
49
style={[