Add kawaii mode (#3773)

.github/workflows/golang-test-lint.yml

···
         uses: actions/setup-go@v3
         with:
           go-version: '1.21'
-      - name: Dummy JS File
-        run: touch bskyweb/static/js/blah.js
+      - name: Dummy Static Files
+        run: touch bskyweb/static/js/blah.js && touch bskyweb/static/media/blah.txt
       - name: Check
         run: cd bskyweb/ && make check
       - name: Build (binary)
···
         uses: actions/setup-go@v3
         with:
           go-version: '1.21'
-      - name: Dummy JS File
-        run: touch bskyweb/static/js/blah.js
+      - name: Dummy Static Files
+        run: touch bskyweb/static/js/blah.js && touch bskyweb/static/media/blah.txt
       - name: Lint
         run: cd bskyweb/ &&  make lint

Dockerfile.embedr

···
 
 # hack around issue with empty directory and go:embed
 RUN touch bskyweb/static/js/empty.txt
+RUN touch bskyweb/static/media/empty.txt
 
 #
 # Generate the embedr Go binary.

bskyweb/.gitignore

···
 static/js/*.map
 static/js/*.js.LICENSE.txt
 static/js/empty.txt
+static/media/*.png
+static/media/empty.txt
 templates/scripts.html
 templates/*-embed.html
 static/embed/*.html

bskyweb/cmd/bskyweb/server.go

···
 
 			// Cache javascript and images files for 1 week, which works because
 			// they're always versioned (e.g. /static/js/main.64c14927.js)
-			if strings.HasPrefix(path, "/static/js/") || strings.HasPrefix(path, "/static/images/") {
+			if strings.HasPrefix(path, "/static/js/") || strings.HasPrefix(path, "/static/images/") || strings.HasPrefix(path, "/static/media/") {
 				maxAge = 7 * (60 * 60 * 24) // 1 week
 			}
 

package.json

···
     "web": "expo start --web",
     "use-build-number": "./scripts/useBuildNumberEnv.sh",
     "use-build-number-with-bump": "./scripts/useBuildNumberEnvWithBump.sh",
-    "build-web": "expo export:web && node ./scripts/post-web-build.js && cp -v ./web-build/static/js/*.* ./bskyweb/static/js/",
+    "build-web": "expo export:web && node ./scripts/post-web-build.js && cp -v ./web-build/static/js/*.* ./bskyweb/static/js/ && cp -v ./web-build/static/media/*.png ./bskyweb/static/media/",
     "build-all": "yarn intl:build && yarn use-build-number-with-bump eas build --platform all",
     "build-ios": "yarn use-build-number-with-bump eas build -p ios",
     "build-android": "yarn use-build-number-with-bump eas build -p android",

src/state/persisted/index.ts

···
 import EventEmitter from 'eventemitter3'
+
+import BroadcastChannel from '#/lib/broadcast'
 import {logger} from '#/logger'
-import {defaults, Schema} from '#/state/persisted/schema'
 import {migrate} from '#/state/persisted/legacy'
+import {defaults, Schema} from '#/state/persisted/schema'
 import * as store from '#/state/persisted/store'
-import BroadcastChannel from '#/lib/broadcast'
-
-export type {Schema, PersistedAccount} from '#/state/persisted/schema'
+export type {PersistedAccount, Schema} from '#/state/persisted/schema'
 export {defaults} from '#/state/persisted/schema'
 
 const broadcast = new BroadcastChannel('BSKY_BROADCAST_CHANNEL')

src/state/persisted/schema.ts

···
   pdsAddressHistory: z.array(z.string()).optional(),
   disableHaptics: z.boolean().optional(),
   disableAutoplay: z.boolean().optional(),
+  kawaii: z.boolean().optional(),
 })
 export type Schema = z.infer<typeof schema>
 
···
   pdsAddressHistory: [],
   disableHaptics: false,
   disableAutoplay: prefersReducedMotion,
+  kawaii: false,
 }

src/state/preferences/index.tsx

···
 import {Provider as ExternalEmbedsProvider} from './external-embeds-prefs'
 import {Provider as HiddenPostsProvider} from './hidden-posts'
 import {Provider as InAppBrowserProvider} from './in-app-browser'
+import {Provider as KawaiiProvider} from './kawaii'
 import {Provider as LanguagesProvider} from './languages'
 
 export {
···
             <InAppBrowserProvider>
               <DisableHapticsProvider>
                 <AutoplayProvider>
-                  <DmServiceUrlProvider>{children}</DmServiceUrlProvider>
+                  <DmServiceUrlProvider>
+                    <KawaiiProvider>{children}</KawaiiProvider>
+                  </DmServiceUrlProvider>
                 </AutoplayProvider>
               </DisableHapticsProvider>
             </InAppBrowserProvider>

src/state/preferences/kawaii.tsx

···
+import React from 'react'
+
+import {isWeb} from '#/platform/detection'
+import * as persisted from '#/state/persisted'
+
+type StateContext = persisted.Schema['kawaii']
+
+const stateContext = React.createContext<StateContext>(
+  persisted.defaults.kawaii,
+)
+
+export function Provider({children}: React.PropsWithChildren<{}>) {
+  const [state, setState] = React.useState(persisted.get('kawaii'))
+
+  const setStateWrapped = React.useCallback(
+    (kawaii: persisted.Schema['kawaii']) => {
+      setState(kawaii)
+      persisted.write('kawaii', kawaii)
+    },
+    [setState],
+  )
+
+  React.useEffect(() => {
+    return persisted.onUpdate(() => {
+      setState(persisted.get('kawaii'))
+    })
+  }, [setStateWrapped])
+
+  React.useEffect(() => {
+    // dumb and stupid but it's web only so just refresh the page if you want to change it
+
+    if (isWeb) {
+      const kawaii = new URLSearchParams(window.location.search).get('kawaii')
+      switch (kawaii) {
+        case 'true':
+          setStateWrapped(true)
+          break
+        case 'false':
+          setStateWrapped(false)
+          break
+      }
+    }
+  }, [setStateWrapped])
+
+  return <stateContext.Provider value={state}>{children}</stateContext.Provider>
+}
+
+export function useKawaiiMode() {
+  return React.useContext(stateContext)
+}

src/view/com/auth/SplashScreen.web.tsx

···
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
+import {useKawaiiMode} from '#/state/preferences/kawaii'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {Logo} from '#/view/icons/Logo'
 import {Logotype} from '#/view/icons/Logotype'
···
   const {_} = useLingui()
   const t = useTheme()
   const {isTabletOrMobile: isMobileWeb} = useWebMediaQueries()
+
+  const kawaii = useKawaiiMode()
 
   return (
     <>
···
           ]}>
           <ErrorBoundary>
             <View style={[a.justify_center, a.align_center]}>
-              <Logo width={92} fill="sky" />
+              <Logo width={kawaii ? 300 : 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={[

src/view/com/home/HomeHeaderLayout.web.tsx

···
 import {usePalette} from 'lib/hooks/usePalette'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {Logo} from '#/view/icons/Logo'
+import {useKawaiiMode} from '../../../state/preferences/kawaii'
 import {Link} from '../util/Link'
 import {HomeHeaderLayoutMobile} from './HomeHeaderLayoutMobile'
 
···
   const {hasSession} = useSession()
   const {_} = useLingui()
 
+  const kawaii = useKawaiiMode()
+
   return (
     <>
       {hasSession && (
-        <View style={[pal.view, pal.border, styles.bar, styles.topBar]}>
+        <View
+          style={[
+            pal.view,
+            pal.border,
+            styles.bar,
+            styles.topBar,
+            kawaii && {paddingTop: 4, paddingBottom: 0},
+          ]}>
           <Link
             href="/settings/following-feed"
             hitSlop={10}
···
               style={pal.textLight as FontAwesomeIconStyle}
             />
           </Link>
-          <Logo width={28} />
+          <Logo width={kawaii ? 60 : 28} />
           <Link
             href="/settings/saved-feeds"
             hitSlop={10}

src/view/icons/Logo.tsx

···
 import React from 'react'
 import {StyleSheet, TextProps} from 'react-native'
 import Svg, {
-  Path,
   Defs,
   LinearGradient,
+  Path,
+  PathProps,
   Stop,
   SvgProps,
-  PathProps,
 } from 'react-native-svg'
+import {Image} from 'expo-image'
 
 import {colors} from '#/lib/styles'
+import {useKawaiiMode} from '#/state/preferences/kawaii'
 
 const ratio = 57 / 64
 
···
   const _fill = gradient ? 'url(#sky)' : fill || styles?.color || colors.blue3
   // @ts-ignore it's fiiiiine
   const size = parseInt(rest.width || 32)
+
+  const isKawaii = useKawaiiMode()
+
+  if (isKawaii) {
+    return (
+      <Image
+        source={
+          size > 100
+            ? require('../../../assets/kawaii.png')
+            : require('../../../assets/kawaii_smol.png')
+        }
+        accessibilityLabel="Bluesky"
+        accessibilityHint=""
+        accessibilityIgnoresInvertColors
+        style={[{height: size, aspectRatio: 1.4}]}
+      />
+    )
+  }
+
   return (
     <Svg
       fill="none"

src/view/shell/Drawer.tsx

···
 import {StackActions, useNavigation} from '@react-navigation/native'
 
 import {emitSoftReset} from '#/state/events'
+import {useKawaiiMode} from '#/state/preferences/kawaii'
 import {useUnreadNotifications} from '#/state/queries/notifications/unread'
 import {useProfileQuery} from '#/state/queries/profile'
 import {SessionAccount, useSession} from '#/state/session'
···
   const {isAtHome, isAtSearch, isAtFeeds, isAtNotifications, isAtMyProfile} =
     useNavigationTabState()
   const {hasSession, currentAccount} = useSession()
+  const kawaii = useKawaiiMode()
 
   // events
   // =
···
               href="https://bsky.social/about/support/privacy-policy"
               text={_(msg`Privacy Policy`)}
             />
+            {kawaii && (
+              <Text type="md" style={pal.textLight}>
+                Logo by{' '}
+                <TextLink
+                  type="md"
+                  href="/profile/sawaratsuki.bsky.social"
+                  text="@sawaratsuki.bsky.social"
+                  style={pal.link}
+                />
+              </Text>
+            )}
           </View>
 
           <View style={styles.smallSpacer} />

src/view/shell/desktop/RightNav.tsx

···
 import React from 'react'
 import {StyleSheet, View} from 'react-native'
-import {usePalette} from 'lib/hooks/usePalette'
-import {DesktopSearch} from './Search'
-import {DesktopFeeds} from './Feeds'
-import {Text} from 'view/com/util/text/Text'
-import {TextLink} from 'view/com/util/Link'
-import {FEEDBACK_FORM_URL, HELP_DESK_URL} from 'lib/constants'
-import {s} from 'lib/styles'
-import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
+import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import {msg} from '@lingui/macro'
+
+import {useKawaiiMode} from '#/state/preferences/kawaii'
 import {useSession} from '#/state/session'
+import {FEEDBACK_FORM_URL, HELP_DESK_URL} from 'lib/constants'
+import {usePalette} from 'lib/hooks/usePalette'
+import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
+import {s} from 'lib/styles'
+import {TextLink} from 'view/com/util/Link'
+import {Text} from 'view/com/util/text/Text'
+import {DesktopFeeds} from './Feeds'
+import {DesktopSearch} from './Search'
 
 export function DesktopRightNav({routeName}: {routeName: string}) {
   const pal = usePalette('default')
   const {_} = useLingui()
   const {hasSession, currentAccount} = useSession()
+
+  const kawaii = useKawaiiMode()
 
   const {isTablet} = useWebMediaQueries()
   if (isTablet) {
···
               text={_(msg`Help`)}
             />
           </View>
+          {kawaii && (
+            <Text type="md" style={[pal.textLight, {marginTop: 12}]}>
+              Logo by{' '}
+              <TextLink
+                type="md"
+                href="/profile/sawaratsuki.bsky.social"
+                text="@sawaratsuki.bsky.social"
+                style={pal.link}
+              />
+            </Text>
+          )}
         </View>
       </View>
     </View>