refactor: migrate to nuxt compatibilityVersion: 4 (#3298)

app/composables/settings/definition.ts

@@ -0,0 +1,102 @@
+import { DEFAULT_FONT_SIZE } from '~/constants'
+
+export type FontSize = `${number}px`
+
+// Temporary type for backward compatibility
+export type OldFontSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+
+export type ColorMode = 'light' | 'dark' | 'system'
+
+export type NavButtonName = 'home' | 'search' | 'notification' | 'mention' | 'favorite' | 'bookmark' | 'compose' | 'explore' | 'local' | 'federated' | 'list' | 'hashtag' | 'setting' | 'moreMenu'
+
+export interface PreferencesSettings {
+  hideAltIndicatorOnPosts: boolean
+  hideGifIndicatorOnPosts: boolean
+  hideBoostCount: boolean
+  hideReplyCount: boolean
+  hideFavoriteCount: boolean
+  hideFollowerCount: boolean
+  hideTranslation: boolean
+  hideUsernameEmojis: boolean
+  hideAccountHoverCard: boolean
+  hideTagHoverCard: boolean
+  hideNews: boolean
+  grayscaleMode: boolean
+  enableAutoplay: boolean
+  unmuteVideos: boolean
+  optimizeForLowPerformanceDevice: boolean
+  enableDataSaving: boolean
+  enablePinchToZoom: boolean
+  useStarFavoriteIcon: boolean
+  zenMode: boolean
+  experimentalVirtualScroller: boolean
+  experimentalGitHubCards: boolean
+  experimentalUserPicker: boolean
+  experimentalEmbeddedMedia: boolean
+}
+
+export interface UserSettings {
+  preferences: Partial<PreferencesSettings>
+  colorMode?: ColorMode
+  fontSize: FontSize
+  language: string
+  disabledTranslationLanguages: string[]
+  themeColors?: ThemeColors
+}
+
+export interface ThemeColors {
+  '--theme-color-name': string
+
+  '--c-primary': string
+  '--c-primary-active': string
+  '--c-primary-light': string
+  '--c-primary-fade': string
+  '--c-dark-primary': string
+  '--c-dark-primary-active': string
+  '--c-dark-primary-light': string
+  '--c-dark-primary-fade': string
+
+  '--rgb-primary': string
+  '--rgb-dark-primary': string
+}
+
+export function getDefaultLanguage(languages: string[]) {
+  if (import.meta.server)
+    return 'en-US'
+  return matchLanguages(languages, navigator.languages) || 'en-US'
+}
+
+export const DEFAULT__PREFERENCES_SETTINGS: PreferencesSettings = {
+  hideAltIndicatorOnPosts: false,
+  hideGifIndicatorOnPosts: false,
+  hideBoostCount: false,
+  hideReplyCount: false,
+  hideFavoriteCount: false,
+  hideFollowerCount: false,
+  hideTranslation: false,
+  hideUsernameEmojis: false,
+  hideAccountHoverCard: false,
+  hideTagHoverCard: false,
+  hideNews: false,
+  grayscaleMode: false,
+  enableAutoplay: true,
+  unmuteVideos: false,
+  optimizeForLowPerformanceDevice: false,
+  enableDataSaving: false,
+  enablePinchToZoom: false,
+  useStarFavoriteIcon: false,
+  zenMode: false,
+  experimentalVirtualScroller: true,
+  experimentalGitHubCards: true,
+  experimentalUserPicker: true,
+  experimentalEmbeddedMedia: false,
+}
+
+export function getDefaultUserSettings(locales: string[]): UserSettings {
+  return {
+    language: getDefaultLanguage(locales),
+    fontSize: DEFAULT_FONT_SIZE,
+    disabledTranslationLanguages: [],
+    preferences: DEFAULT__PREFERENCES_SETTINGS,
+  }
+}

app/composables/settings/index.ts

@@ -0,0 +1,2 @@
+export * from './definition'
+export * from './storage'

app/composables/settings/metadata.ts

@@ -0,0 +1,28 @@
+import type { Node } from 'ultrahtml'
+import { decode } from 'tiny-decode'
+import { parse, TEXT_NODE } from 'ultrahtml'
+
+export const maxAccountFieldCount = computed(() => isGlitchEdition.value ? 16 : 4)
+
+export function convertMetadata(metadata: string) {
+  try {
+    const tree = parse(metadata)
+    return (tree.children as Node[]).map(n => convertToText(n)).join('').trim()
+  }
+  catch (err) {
+    console.error(err)
+    return ''
+  }
+}
+
+function convertToText(input: Node): string {
+  let text = ''
+
+  if (input.type === TEXT_NODE)
+    return decode(input.value)
+
+  if ('children' in input)
+    text = (input.children as Node[]).map(n => convertToText(n)).join('')
+
+  return text
+}

app/composables/settings/storage.ts

@@ -0,0 +1,45 @@
+import type { LocaleObject } from '@nuxtjs/i18n'
+import type { Ref } from 'vue'
+import type { FontSize, OldFontSize, PreferencesSettings, UserSettings } from './definition'
+import { STORAGE_KEY_SETTINGS } from '~/constants'
+import { oldFontSizeMap } from '~/constants/options'
+
+export function useUserSettings() {
+  const { locales } = useNuxtApp().$i18n
+  const supportLanguages = (unref(locales) as LocaleObject[]).map(locale => locale.code)
+  const settingsStorage = useUserLocalStorage<UserSettings>(STORAGE_KEY_SETTINGS, () => getDefaultUserSettings(supportLanguages))
+
+  // Backward compatibility, font size was xs, sm, md, lg, xl before
+  if (settingsStorage.value.fontSize && !settingsStorage.value.fontSize.includes('px'))
+    settingsStorage.value.fontSize = oldFontSizeMap[settingsStorage.value.fontSize as OldFontSize] as FontSize
+
+  return settingsStorage
+}
+
+// TODO: refactor & simplify this
+
+export function usePreferences<T extends keyof PreferencesSettings>(name: T): Ref<PreferencesSettings[T]> {
+  const userSettings = useUserSettings()
+  return computed({
+    get() {
+      return getPreferences(userSettings.value, name)
+    },
+    set(value) {
+      userSettings.value.preferences[name] = value
+    },
+  })
+}
+
+export function getPreferences<T extends keyof PreferencesSettings>(userSettings: UserSettings, name: T): PreferencesSettings[T] {
+  const preference = userSettings?.preferences?.[name] ?? DEFAULT__PREFERENCES_SETTINGS[name]
+
+  if (name === 'enableAutoplay')
+    return getPreferences(userSettings, 'enableDataSaving') ? false : preference
+
+  return preference
+}
+
+export function togglePreferences(key: keyof PreferencesSettings) {
+  const flag = usePreferences(key)
+  flag.value = !flag.value
+}