From d8d163dbd0ef0955e5b714d0039f88cf40c4fa02 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Wed, 28 Dec 2022 02:06:54 +0100
Subject: [PATCH] fix: rework setup to improve SSR compatibility

---
 app.vue                                       |  1 -
 components/common/dropdown/Dropdown.vue       |  3 +-
 components/main/MainContent.vue               |  2 +-
 components/nav/NavBottomMoreMenu.vue          |  7 +++-
 components/nav/NavFooter.vue                  |  5 +++
 .../publish/PublishEmojiPicker.client.vue     |  5 ++-
 ...rMode.client.vue => SettingsColorMode.vue} | 16 +++++---
 components/settings/SettingsFontSize.vue      |  4 +-
 components/user/UserSignIn.vue                |  8 ++--
 composables/command.ts                        |  5 ++-
 composables/dark.ts                           |  2 -
 composables/fontSize.ts                       | 39 ------------------
 composables/injections.ts                     | 14 +++++++
 composables/pwa/index.ts                      |  9 +---
 composables/setups.ts                         |  3 --
 composables/shiki.ts                          |  2 +-
 constants/index.ts                            |  4 +-
 constants/options.ts                          |  7 ++++
 constants/symbols.ts                          |  5 +++
 plugins/setup-color-mode.ts                   | 41 +++++++++++++++++++
 plugins/setup-font-size.ts                    | 25 +++++++++++
 types/index.ts                                |  3 ++
 22 files changed, 137 insertions(+), 73 deletions(-)
 rename components/settings/{SettingsColorMode.client.vue => SettingsColorMode.vue} (51%)
 delete mode 100644 composables/dark.ts
 delete mode 100644 composables/fontSize.ts
 create mode 100644 composables/injections.ts
 create mode 100644 constants/options.ts
 create mode 100644 constants/symbols.ts
 create mode 100644 plugins/setup-color-mode.ts
 create mode 100644 plugins/setup-font-size.ts

diff --git a/app.vue b/app.vue
index 01c46abe..2c926364 100644
--- a/app.vue
+++ b/app.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 setupI18n()
-setupFontSize()
 setupPageHeader()
 setupEmojis()
 provideGlobalCommands()
diff --git a/components/common/dropdown/Dropdown.vue b/components/common/dropdown/Dropdown.vue
index 21b88f01..8ed928c0 100644
--- a/components/common/dropdown/Dropdown.vue
+++ b/components/common/dropdown/Dropdown.vue
@@ -5,6 +5,7 @@ defineProps<{
 }>()
 
 const dropdown = $ref<any>()
+const colorMode = useColorModeRef()
 
 provide(dropdownContextKey, {
   hide: () => dropdown.hide(),
@@ -12,7 +13,7 @@ provide(dropdownContextKey, {
 </script>
 
 <template>
-  <VDropdown v-bind="$attrs" ref="dropdown" :class="{ dark: isDark }" :placement="placement || 'auto'">
+  <VDropdown v-bind="$attrs" ref="dropdown" :class="colorMode" :placement="placement || 'auto'">
     <slot />
     <template #popper="scope">
       <slot name="popper" v-bind="scope" />
diff --git a/components/main/MainContent.vue b/components/main/MainContent.vue
index 704556db..26975e9c 100644
--- a/components/main/MainContent.vue
+++ b/components/main/MainContent.vue
@@ -12,7 +12,7 @@ defineProps<{
     >
       <div flex justify-between px5 py4>
         <div flex gap-3 items-center overflow-hidden>
-          <NuxtLink v-if="back" flex="~ gap1" items-center btn-text p-0 @click="$router.go(-1)">
+          <NuxtLink v-show="back" flex="~ gap1" items-center btn-text p-0 @click="$router.go(-1)">
             <div i-ri:arrow-left-line />
           </NuxtLink>
           <div truncate>
diff --git a/components/nav/NavBottomMoreMenu.vue b/components/nav/NavBottomMoreMenu.vue
index 82983be2..ab45b763 100644
--- a/components/nav/NavBottomMoreMenu.vue
+++ b/components/nav/NavBottomMoreMenu.vue
@@ -6,6 +6,7 @@ const emits = defineEmits<{
   (event: 'update:modelValue', value: boolean): void
 }>()
 const visible = useVModel(props, 'modelValue', emits, { passive: true })
+const colorMode = useColorModeRef()
 
 function changeShow() {
   visible.value = !visible.value
@@ -22,6 +23,10 @@ function clickEvent(mouse: MouseEvent) {
   }
 }
 
+function toggleDark() {
+  colorMode.value = colorMode.value === 'dark' ? 'light' : 'dark'
+}
+
 watch(visible, (val) => {
   if (val && typeof document !== 'undefined')
     document.addEventListener('click', clickEvent)
@@ -79,7 +84,7 @@ onBeforeUnmount(() => {
               @click="toggleDark()"
             >
               <span class="i-ri:sun-line dark:i-ri:moon-line flex-shrink-0 text-xl mr-4 !align-middle" />
-              {{ !isDark ? $t('menu.toggle_theme.dark') : $t('menu.toggle_theme.light') }}
+              {{ colorMode === 'light' ? $t('menu.toggle_theme.dark') : $t('menu.toggle_theme.light') }}
             </button>
             <NuxtLink
               flex flex-row items-center
diff --git a/components/nav/NavFooter.vue b/components/nav/NavFooter.vue
index 414e3490..c3e144a1 100644
--- a/components/nav/NavFooter.vue
+++ b/components/nav/NavFooter.vue
@@ -5,6 +5,11 @@ const timeAgoOptions = useTimeAgoOptions()
 
 const buildTimeDate = new Date(buildInfo.time)
 const buildTimeAgo = useTimeAgo(buildTimeDate, timeAgoOptions)
+
+const colorMode = useColorModeRef()
+function toggleDark() {
+  colorMode.value = colorMode.value === 'dark' ? 'light' : 'dark'
+}
 </script>
 
 <template>
diff --git a/components/publish/PublishEmojiPicker.client.vue b/components/publish/PublishEmojiPicker.client.vue
index 1e80c1ee..858d9f74 100644
--- a/components/publish/PublishEmojiPicker.client.vue
+++ b/components/publish/PublishEmojiPicker.client.vue
@@ -9,12 +9,13 @@ const emit = defineEmits<{
 
 const el = $ref<HTMLElement>()
 let picker = $ref<Picker>()
+const colorMode = useColorModeRef()
 
 async function openEmojiPicker() {
   await updateCustomEmojis()
   if (picker) {
     picker.update({
-      theme: isDark.value ? 'dark' : 'light',
+      theme: colorMode.value,
       custom: customEmojisData.value,
     })
   }
@@ -28,7 +29,7 @@ async function openEmojiPicker() {
           ? emit('select', native)
           : emit('selectCustom', { src, alt, 'data-emoji-id': name })
       },
-      theme: isDark.value ? 'dark' : 'light',
+      theme: colorMode.value,
       custom: customEmojisData.value,
     })
   }
diff --git a/components/settings/SettingsColorMode.client.vue b/components/settings/SettingsColorMode.vue
similarity index 51%
rename from components/settings/SettingsColorMode.client.vue
rename to components/settings/SettingsColorMode.vue
index 59d947e5..7edae8b3 100644
--- a/components/settings/SettingsColorMode.client.vue
+++ b/components/settings/SettingsColorMode.vue
@@ -1,6 +1,10 @@
 <script setup lang="ts">
-function setDark(v: boolean) {
-  isDark.value = v
+import type { ColorMode } from '~/types'
+
+const colorMode = useColorModeRef()
+
+function setColorMode(mode: ColorMode) {
+  colorMode.value = mode
 }
 </script>
 
@@ -8,16 +12,16 @@ function setDark(v: boolean) {
   <div flex="~ gap4" w-full>
     <button
       btn-text flex-1 flex="~ gap-1 center" p4 border="~ base rounded" bg-base
-      :class="isDark ? 'pointer-events-none' : 'filter-saturate-0'"
-      @click="setDark(true)"
+      :class="colorMode === 'dark' ? 'pointer-events-none' : 'filter-saturate-0'"
+      @click="setColorMode('dark')"
     >
       <div i-ri:moon-line />
       Dark Mode
     </button>
     <button
       btn-text flex-1 flex="~ gap-1 center" p4 border="~ base rounded" bg-base
-      :class="!isDark ? 'pointer-events-none' : 'filter-saturate-0'"
-      @click="setDark(false)"
+      :class="colorMode === 'light' ? 'pointer-events-none' : 'filter-saturate-0'"
+      @click="setColorMode('light')"
     >
       <div i-ri:sun-line />
       Light Mode
diff --git a/components/settings/SettingsFontSize.vue b/components/settings/SettingsFontSize.vue
index 86676810..89971b20 100644
--- a/components/settings/SettingsFontSize.vue
+++ b/components/settings/SettingsFontSize.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import type { FontSize } from '~/composables/fontSize'
+import type { FontSize } from '~/types'
 
 const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as FontSize[]
-const fontSize = getFontSize()
+const fontSize = useFontSizeRef()
 </script>
 
 <template>
diff --git a/components/user/UserSignIn.vue b/components/user/UserSignIn.vue
index 915f9282..75a23563 100644
--- a/components/user/UserSignIn.vue
+++ b/components/user/UserSignIn.vue
@@ -121,13 +121,13 @@ onMounted(async () => {
           text-left z-10 shadow of-auto
         >
           <div
-            v-for="server, idx in filteredServers"
-            :key="server"
-            :value="server"
+            v-for="name, idx in filteredServers"
+            :key="name"
+            :value="name"
             px-2 py1 font-mono
             :class="autocompleteIndex === idx ? 'text-primary font-bold' : null"
           >
-            {{ server }}
+            {{ name }}
           </div>
         </div>
       </div>
diff --git a/composables/command.ts b/composables/command.ts
index a859682b..b0115c4a 100644
--- a/composables/command.ts
+++ b/composables/command.ts
@@ -206,6 +206,7 @@ export const provideGlobalCommands = () => {
   const { locales } = useI18n() as { locales: ComputedRef<LocaleObject[]> }
   const users = useUsers()
   const masto = useMasto()
+  const colorMode = useColorModeRef()
 
   useCommand({
     scope: 'Actions',
@@ -225,10 +226,10 @@ export const provideGlobalCommands = () => {
     scope: 'Preferences',
 
     name: () => t('command.toggle_dark_mode'),
-    icon: () => isDark.value ? 'i-ri:sun-line' : 'i-ri:moon-line',
+    icon: () => colorMode.value === 'light' ? 'i-ri:sun-line' : 'i-ri:moon-line',
 
     onActivate() {
-      toggleDark()
+      colorMode.value = colorMode.value === 'light' ? 'dark' : 'light'
     },
   })
 
diff --git a/composables/dark.ts b/composables/dark.ts
deleted file mode 100644
index a2a21dd1..00000000
--- a/composables/dark.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export const isDark = useDark()
-export const toggleDark = useToggle(isDark)
diff --git a/composables/fontSize.ts b/composables/fontSize.ts
deleted file mode 100644
index ecf31f9f..00000000
--- a/composables/fontSize.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import type { InjectionKey, Ref } from 'vue'
-import { STORAGE_KEY_FONT_SIZE } from '~/constants'
-
-const InjectionKeyFontSize = Symbol('fontSize') as InjectionKey<Ref<FontSize>>
-const DEFAULT = 'md'
-
-export type FontSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
-
-export function getFontSize() {
-  return inject(InjectionKeyFontSize)!
-}
-
-const fontSizeMap = {
-  xs: '13px',
-  sm: '14px',
-  md: '15px',
-  lg: '16px',
-  xl: '17px',
-}
-
-export async function setupFontSize() {
-  const fontSize = useCookie<FontSize>(STORAGE_KEY_FONT_SIZE, { default: () => DEFAULT })
-  getCurrentInstance()?.appContext.app.provide(InjectionKeyFontSize, fontSize)
-
-  if (!process.server) {
-    watchEffect(() => {
-      document.documentElement.style.setProperty('--font-size', fontSizeMap[fontSize.value || DEFAULT])
-    })
-  }
-  else {
-    useHead({
-      style: [
-        {
-          innerHTML: `:root { --font-size: ${fontSizeMap[fontSize.value || DEFAULT]}; }`,
-        },
-      ],
-    })
-  }
-}
diff --git a/composables/injections.ts b/composables/injections.ts
new file mode 100644
index 00000000..8357a2a3
--- /dev/null
+++ b/composables/injections.ts
@@ -0,0 +1,14 @@
+import { InjectionKeyColorMode, InjectionKeyFontSize } from '~/constants/symbols'
+
+export function useFontSizeRef() {
+  return inject(InjectionKeyFontSize)!
+}
+
+export function useColorModeRef() {
+  return inject(InjectionKeyColorMode)!
+}
+
+export function toggleColorMode() {
+  const colorMode = useColorModeRef()
+  colorMode.value = colorMode.value === 'light' ? 'dark' : 'light'
+}
diff --git a/composables/pwa/index.ts b/composables/pwa/index.ts
index 64269202..95cacb65 100644
--- a/composables/pwa/index.ts
+++ b/composables/pwa/index.ts
@@ -1,15 +1,10 @@
 import { useRegisterSW } from 'virtual:pwa-register/vue'
 
-export const usePWA = () => {
+export function usePWA() {
   const online = useOnline()
 
-  useHead({
-    meta: [{ id: 'theme-color', name: 'theme-color', content: computed(() => isDark.value ? '#111111' : '#ffffff') }],
-  })
-
   const {
-    needRefresh,
-    updateServiceWorker,
+    needRefresh, updateServiceWorker,
   } = useRegisterSW({
     immediate: true,
     onRegisteredSW(swUrl, r) {
diff --git a/composables/setups.ts b/composables/setups.ts
index 38446fc5..d44d14be 100644
--- a/composables/setups.ts
+++ b/composables/setups.ts
@@ -45,9 +45,6 @@ export function setupPageHeader() {
     titleTemplate: title => `${title ? `${title} | ` : ''}${APP_NAME}${isDev ? ' (dev)' : isPreview ? ' (preview)' : ''}`,
     link,
   })
-
-  // eslint-disable-next-line no-unused-expressions
-  isDark.value
 }
 
 export async function setupI18n() {
diff --git a/composables/shiki.ts b/composables/shiki.ts
index 6d4f6977..82e34457 100644
--- a/composables/shiki.ts
+++ b/composables/shiki.ts
@@ -44,7 +44,7 @@ export function useHightlighter(lang: Lang) {
 }
 
 export function useShikiTheme() {
-  return isDark.value ? 'vitesse-dark' : 'vitesse-light'
+  return useColorModeRef().value ? 'vitesse-dark' : 'vitesse-light'
 }
 
 export function highlightCode(code: string, lang: Lang) {
diff --git a/constants/index.ts b/constants/index.ts
index 4209515a..2150c99c 100644
--- a/constants/index.ts
+++ b/constants/index.ts
@@ -11,7 +11,6 @@ export const STORAGE_KEY_NOTIFY_TAB = 'elk-notify-tab'
 export const STORAGE_KEY_FIRST_VISIT = 'elk-first-visit'
 export const STORAGE_KEY_ZEN_MODE = 'elk-zenmode'
 export const STORAGE_KEY_LANG = 'elk-lang'
-export const STORAGE_KEY_FONT_SIZE = 'elk-font-size'
 export const STORAGE_KEY_FEATURE_FLAGS = 'elk-feature-flags'
 export const STORAGE_KEY_CUSTOM_EMOJIS = 'elk-custom-emojis'
 export const STORAGE_KEY_HIDE_EXPLORE_POSTS_TIPS = 'elk-hide-explore-posts-tips'
@@ -20,4 +19,7 @@ export const STORAGE_KEY_HIDE_EXPLORE_TAGS_TIPS = 'elk-hide-explore-tags-tips'
 export const STORAGE_KEY_NOTIFICATION = 'elk-notification'
 export const STORAGE_KEY_NOTIFICATION_POLICY = 'elk-notification-policy'
 
+export const COOKIE_KEY_FONT_SIZE = 'elk-font-size'
+export const COOKIE_KEY_COLOR_MODE = 'elk-color-mode'
+
 export const HANDLED_MASTO_URLS = /^(https?:\/\/)?([\w\d-]+\.)+\w+\/(@[@\w\d-\.]+)(\/objects)?(\/\d+)?$/
diff --git a/constants/options.ts b/constants/options.ts
new file mode 100644
index 00000000..b8db8cce
--- /dev/null
+++ b/constants/options.ts
@@ -0,0 +1,7 @@
+export const fontSizeMap = {
+  xs: '13px',
+  sm: '14px',
+  md: '15px',
+  lg: '16px',
+  xl: '17px',
+}
diff --git a/constants/symbols.ts b/constants/symbols.ts
new file mode 100644
index 00000000..ab495798
--- /dev/null
+++ b/constants/symbols.ts
@@ -0,0 +1,5 @@
+import type { InjectionKey, Ref } from 'vue'
+import type { ColorMode, FontSize } from '~/types'
+
+export const InjectionKeyFontSize = Symbol('font-size') as InjectionKey<Ref<FontSize>>
+export const InjectionKeyColorMode = Symbol('color-mode') as InjectionKey<Ref<ColorMode>>
diff --git a/plugins/setup-color-mode.ts b/plugins/setup-color-mode.ts
new file mode 100644
index 00000000..f757f17b
--- /dev/null
+++ b/plugins/setup-color-mode.ts
@@ -0,0 +1,41 @@
+import type { ColorMode } from '~/types'
+import { InjectionKeyColorMode } from '~/constants/symbols'
+import { COOKIE_KEY_COLOR_MODE } from '~/constants'
+
+export default defineNuxtPlugin((nuxt) => {
+  const cookieColorMode = useCookie<ColorMode | null>(COOKIE_KEY_COLOR_MODE, { default: () => null })
+
+  const preferColorMode = process.server ? computed(() => 'light') : usePreferredColorScheme()
+  const colorMode = computed<ColorMode>({
+    get() {
+      return cookieColorMode.value || preferColorMode.value as ColorMode
+    },
+    set(value) {
+      cookieColorMode.value = value
+    },
+  })
+
+  nuxt.vueApp.provide(InjectionKeyColorMode, colorMode)
+
+  if (process.server) {
+    useHead({
+      htmlAttrs: {
+        class: colorMode,
+      },
+    })
+  }
+  else {
+    watchEffect(() => {
+      document.documentElement.classList.toggle('dark', colorMode.value === 'dark')
+      document.documentElement.classList.toggle('light', colorMode.value === 'light')
+    })
+  }
+
+  useHead({
+    meta: [{
+      id: 'theme-color',
+      name: 'theme-color',
+      content: computed(() => colorMode.value === 'dark' ? '#111111' : '#ffffff'),
+    }],
+  })
+})
diff --git a/plugins/setup-font-size.ts b/plugins/setup-font-size.ts
new file mode 100644
index 00000000..73f55617
--- /dev/null
+++ b/plugins/setup-font-size.ts
@@ -0,0 +1,25 @@
+import type { FontSize } from '~/types'
+import { InjectionKeyFontSize } from '~/constants/symbols'
+import { COOKIE_KEY_FONT_SIZE } from '~/constants'
+import { fontSizeMap } from '~/constants/options'
+
+export default defineNuxtPlugin((nuxt) => {
+  const DEFAULT = 'md'
+  const cookieFontSize = useCookie<FontSize>(COOKIE_KEY_FONT_SIZE, { default: () => DEFAULT })
+  nuxt.vueApp.provide(InjectionKeyFontSize, cookieFontSize)
+
+  if (!process.server) {
+    watchEffect(() => {
+      document.documentElement.style.setProperty('--font-size', fontSizeMap[cookieFontSize.value || DEFAULT])
+    })
+  }
+  else {
+    useHead({
+      style: [
+        {
+          innerHTML: `:root { --font-size: ${fontSizeMap[cookieFontSize.value || DEFAULT]}; }`,
+        },
+      ],
+    })
+  }
+})
diff --git a/types/index.ts b/types/index.ts
index 383d27e2..67c2962e 100644
--- a/types/index.ts
+++ b/types/index.ts
@@ -72,3 +72,6 @@ export interface BuildInfo {
   time: number
   branch: string
 }
+
+export type FontSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+export type ColorMode = 'light' | 'dark'