chore: update to Nuxt 3.10.2

app.vue

@@ -4,7 +4,7 @@ provideGlobalCommands()
 
 const route = useRoute()
 
-if (process.server && !route.path.startsWith('/settings')) {
+if (import.meta.server && !route.path.startsWith('/settings')) {
   const url = useRequestURL()
 
   useHead({

components/account/AccountHoverWrapper.vue

@@ -1,5 +1,9 @@
 <script setup lang="ts">
 import type { mastodon } from 'masto'
+import type { Ref } from 'vue'
+
+type WatcherType = [acc?: mastodon.v1.Account, h?: string, v?: boolean]
+type AccountType = mastodon.v1.Account | null | undefined | Ref<mastodon.v1.Account | null>
 
 defineOptions({
   inheritAttrs: false,
@@ -11,16 +15,61 @@ const props = defineProps<{
   disabled?: boolean
 }>()
 
-const account = computed(() => props.account || (props.handle ? useAccountByHandle(props.handle!) : undefined))
+const hoverCard = ref()
+const targetIsVisible = ref(false)
+const useAccount = ref<AccountType>(props.account)
+const account = computed(() => unref(useAccount.value))
+
+useIntersectionObserver(
+  hoverCard,
+  ([{ intersectionRatio }]) => {
+    targetIsVisible.value = intersectionRatio <= 0.75
+  },
+)
+
+watch(
+  () => [props.account, props.handle, targetIsVisible.value] satisfies WatcherType,
+  ([newAccount, newHandle, newVisible], oldProps) => {
+    if (newAccount) {
+      useAccount.value = newAccount
+      return
+    }
+
+    if (!newVisible)
+      return
+
+    if (newHandle) {
+      const [_oldAccount, oldHandle, _oldVisible] = oldProps ?? [undefined, undefined, false]
+      if (!oldHandle || newHandle !== oldHandle || !account.value) {
+        // @ts-expect-error just ignore
+        useAccount.value = useAccountByHandle(newHandle)
+      }
+
+      return
+    }
+
+    useAccount.value = undefined
+  }, { immediate: true, flush: 'post' },
+)
+
+// const account = computed(() => props.account || (props.handle ? useAccountByHandle(props.handle!) : undefined))
 const userSettings = useUserSettings()
 </script>
 
 <template>
-  <VMenu v-if="!disabled && account && !getPreferences(userSettings, 'hideAccountHoverCard')" placement="bottom-start" :delay="{ show: 500, hide: 100 }" v-bind="$attrs" :close-on-content-click="false">
-    <slot />
-    <template #popper>
-      <AccountHoverCard v-if="account" :account="account" />
-    </template>
-  </VMenu>
-  <slot v-else />
+  <div ref="hoverCard">
+    <VMenu
+      v-if="!disabled && account && !getPreferences(userSettings, 'hideAccountHoverCard')"
+      placement="bottom-start"
+      :delay="{ show: 500, hide: 100 }"
+      v-bind="$attrs"
+      :close-on-content-click="false"
+    >
+      <slot />
+      <template #popper>
+        <AccountHoverCard v-if="account" :account="account" />
+      </template>
+    </VMenu>
+    <slot v-else />
+  </div>
 </template>

components/account/AccountTabs.vue

@@ -4,8 +4,8 @@ import type { CommonRouteTabOption } from '../common/CommonRouteTabs.vue'
 const { t } = useI18n()
 const route = useRoute()
 
-const server = computedEager(() => route.params.server as string)
-const account = computedEager(() => route.params.account as string)
+const server = computed(() => route.params.server as string)
+const account = computed(() => route.params.account as string)
 
 const tabs = computed<CommonRouteTabOption[]>(() => [
   {

components/aria/AriaAnnouncer.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
+import type { LocaleObject } from '@nuxtjs/i18n'
 import type { AriaAnnounceType, AriaLive } from '~/composables/aria'
-import type { LocaleObject } from '#i18n'
 
 const router = useRouter()
 const { t, locale, locales } = useI18n()

components/common/CommonInputImage.vue

@@ -33,7 +33,7 @@ const previewImage = ref('')
 const imageSrc = computed<string>(() => previewImage.value || defaultImage.value)
 
 async function pickImage() {
-  if (process.server)
+  if (import.meta.server)
     return
   const image = await fileOpen({
     description: 'Image',

components/common/CommonPaginator.vue

@@ -94,8 +94,8 @@ defineExpose({ createEntry, removeEntry, updateEntry })
       </template>
       <template v-else>
         <slot
-          v-for="item, index of items"
-          v-bind="{ key: item[keyProp as keyof U] }"
+          v-for="(item, index) of items"
+          v-bind="{ key: (item as U)[keyProp as keyof U] }"
           :item="item as U"
           :older="items[index + 1] as U"
           :newer="items[index - 1] as U"

components/common/CommonRouteTabs.vue

@@ -60,9 +60,9 @@ useCommands(() => command
         <span ws-nowrap mxa sm:px2 sm:py3 py2 text-center text-secondary-light op50>{{ option.display }}</span>
       </div>
     </template>
-    <template v-if="moreOptions?.options?.length">
+    <template v-if="isHydrated && moreOptions?.options?.length">
       <CommonDropdown placement="bottom" flex cursor-pointer mx-1.25rem>
-        <CommonTooltip placement="top" :content="moreOptions.tooltip || t('action.more')">
+        <CommonTooltip placement="top" :content="isHydrated ? (moreOptions.tooltip || t('action.more')) : ''">
           <button
             cursor-pointer
             flex
@@ -74,7 +74,7 @@ useCommands(() => command
             op75
             px4
             group
-            :aria-label="t('action.more')"
+            :aria-label="isHydrated ? t('action.more') : ''"
             :class="moreOptions.match ? 'text-primary' : 'text-secondary'"
           >
             <span v-if="moreOptions.icon" :class="moreOptions.icon" text-sm me--1 block />
@@ -91,7 +91,7 @@ useCommands(() => command
               <span flex="~ row" gap-x-4 items-center :class="option.match ? 'text-primary' : ''">
                 <span v-if="option.icon" :class="[option.icon, option.match ? 'text-primary' : 'text.secondary']" text-md me--1 block />
                 <span v-else block>&#160;</span>
-                <span>{{ option.display }}</span>
+                <span>{{ isHydrated ? option.display : '' }}</span>
               </span>
             </CommonDropdownItem>
           </NuxtLink>

components/common/CommonTooltip.vue

@@ -10,6 +10,7 @@ defineProps<Props>()
 
 <template>
   <VTooltip
+    v-if="isHydrated"
     v-bind="$attrs"
     auto-hide
   >

components/common/dropdown/DropdownItem.vue

@@ -50,20 +50,20 @@ useCommand({
     flex gap-3 items-center cursor-pointer px4 py3
     select-none
     hover-bg-active
-    :aria-label="text"
+    :aria-label="isHydrated ? text : ''"
     @click="handleClick"
   >
     <div v-if="icon" :class="icon" />
     <div flex="~ col">
       <div text-15px>
         <slot>
-          {{ text }}
+          {{ isHydrated ? text : '' }}
         </slot>
       </div>
       <div text-3 text-secondary>
         <slot name="description">
           <p v-if="description">
-            {{ description }}
+            {{ isHydrated ? description : '' }}
           </p>
         </slot>
       </div>

components/modal/ModalMediaPreviewCarousel.vue

@@ -22,7 +22,7 @@ const slider = ref()
 const slide = ref()
 const image = ref()
 
-const reduceMotion = process.server ? ref(false) : useReducedMotion()
+const reduceMotion = import.meta.server ? ref(false) : useReducedMotion()
 const isInitialScrollDone = useTimeout(350)
 const canAnimate = computed(() => isInitialScrollDone.value && !reduceMotion.value)
 

components/search/SearchWidget.vue

@@ -4,6 +4,7 @@ const { accounts, hashtags, loading, statuses } = useSearch(query)
 const index = ref(0)
 
 const { t } = useI18n()
+
 const el = ref<HTMLElement>()
 const input = ref<HTMLInputElement>()
 const router = useRouter()

components/settings/SettingsItem.vue

@@ -46,7 +46,7 @@ useCommand({
     @click="to ? $scrollToTop() : undefined"
   >
     <div
-      w-full flex w-fit px5 py3 md:gap2 gap4 items-center
+      w-full flex px5 py3 md:gap2 gap4 items-center
       transition-250 group-hover:bg-active
       group-focus-visible:ring="2 current"
     >

components/settings/SettingsLanguage.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { ComputedRef } from 'vue'
-import type { LocaleObject } from '#i18n'
+import type { LocaleObject } from '@nuxtjs/i18n'
 
 const userSettings = useUserSettings()
 

components/status/StatusActionsMore.vue

@@ -88,7 +88,7 @@ async function deleteAndRedraft() {
   }) !== 'confirm')
     return
 
-  if (process.dev) {
+  if (import.meta.dev) {
     // eslint-disable-next-line no-alert
     const result = confirm('[DEV] Are you sure you want to delete and re-draft this post?')
     if (!result)

components/tiptap/TiptapEmojiList.vue

@@ -13,7 +13,7 @@ const { items, command } = defineProps<{
 }>()
 
 const emojis = computed(() => {
-  if (process.server)
+  if (import.meta.server)
     return []
 
   return items.map((item: CustomEmoji | Emoji) => {

composables/cache.ts

@@ -5,7 +5,7 @@ const cache = new LRUCache<string, any>({
   max: 1000,
 })
 
-if (process.dev && process.client)
+if (import.meta.dev && import.meta.client)
   // eslint-disable-next-line no-console
   console.log({ cache })
 

composables/command.ts

@@ -1,7 +1,7 @@
 import type { ComputedRef } from 'vue'
 import { defineStore } from 'pinia'
 import Fuse from 'fuse.js'
-import type { LocaleObject } from '#i18n'
+import type { LocaleObject } from '@nuxtjs/i18n'
 import type { SearchResult } from '~/composables/masto/search'
 
 // @unocss-include

composables/dialog.ts

@@ -56,7 +56,7 @@ export async function openPublishDialog(draftKey = 'dialog', draft?: Draft, over
     if (overwrite && !isEmptyDraft(currentUserDrafts.value[draftKey])) {
       // TODO overwrite warning
       // TODO don't overwrite, have a draft list
-      if (process.dev) {
+      if (import.meta.dev) {
         // eslint-disable-next-line no-alert
         const result = confirm('[DEV] Are you sure you overwrite draft content?')
         if (!result)
@@ -89,7 +89,7 @@ function restoreMediaPreviewFromState() {
   isMediaPreviewOpen.value = history.state?.mediaPreview ?? false
 }
 
-if (process.client) {
+if (import.meta.client) {
   window.addEventListener('popstate', restoreMediaPreviewFromState)
 
   restoreMediaPreviewFromState()

composables/emojis.ts

@@ -11,7 +11,7 @@ function getDefault(): CustomEmojisInfo {
   }
 }
 
-export const currentCustomEmojis = process.server
+export const currentCustomEmojis = import.meta.server
   ? computed(getDefault)
   : useUserLocalStorage(STORAGE_KEY_CUSTOM_EMOJIS, getDefault)
 

composables/idb/index.ts

@@ -21,7 +21,7 @@ export async function useAsyncIDBKeyval<T>(
 
   const data = (shallow ? shallowRef : ref)(initialValue) as Ref<T>
 
-  const rawInit: T = resolveUnref(initialValue)
+  const rawInit: T = toValue(initialValue)
 
   async function read() {
     if (!isIDBSupported)

composables/mask.ts

@@ -13,7 +13,7 @@ export function useMask(options: UseMaskOptions = {}) {
     getContainer = () => document.body,
     zIndex = 100,
   } = options
-  const wrapperEl = (process.server ? null : document.createElement('div')) as HTMLDivElement
+  const wrapperEl = (import.meta.server ? null : document.createElement('div')) as HTMLDivElement
 
   function show() {
     const container = getContainer()

composables/masto/masto.ts

@@ -99,7 +99,7 @@ export function useStreaming(
       stream.value = cb(streamingClient.value)
   })
 
-  if (process.client && !process.test)
+  if (import.meta.client && !process.test)
     useNuxtApp().$pageLifecycle.addFrozenListener(cleanup)
 
   tryOnBeforeUnmount(() => isActive.value = false)

composables/masto/publish.ts

@@ -94,7 +94,7 @@ export function usePublish(options: {
       ...(isGlitchEdition.value ? { 'content-type': 'text/markdown' } : {}),
     } as mastodon.rest.v1.CreateStatusParams
 
-    if (process.dev) {
+    if (import.meta.dev) {
       // eslint-disable-next-line no-console
       console.info({
         raw: draft.value.params.status,
@@ -249,7 +249,7 @@ export function useUploadMediaAttachment(draft: Ref<Draft>) {
   }
 
   async function pickAttachments() {
-    if (process.server)
+    if (import.meta.server)
       return
     const mimeTypes = currentInstance.value!.configuration?.mediaAttachments.supportedMimeTypes
     const files = await fileOpen({

composables/masto/statusDrafts.ts

@@ -4,7 +4,7 @@ import { STORAGE_KEY_DRAFTS } from '~/constants'
 import type { Draft, DraftMap } from '~/types'
 import type { Mutable } from '~/types/utils'
 
-export const currentUserDrafts = (process.server || process.test)
+export const currentUserDrafts = (import.meta.server || process.test)
   ? computed<DraftMap>(() => ({}))
   : useUserLocalStorage<DraftMap>(STORAGE_KEY_DRAFTS, () => ({}))
 

composables/masto/translate.ts

@@ -45,7 +45,7 @@ export const supportedTranslationCodes = [
 export function getLanguageCode() {
   let code = 'en'
   const getCode = (code: string) => code.replace(/-.*$/, '')
-  if (!process.server) {
+  if (import.meta.client) {
     const { locale } = useI18n()
     code = getCode(locale.value ? locale.value : navigator.language)
   }

composables/paginator.ts

@@ -13,7 +13,7 @@ export function usePaginator<T, P, U = T>(
   // so clone it
   const paginator = _paginator.clone()
 
-  const state = ref<PaginatorState>(isHydrated.value ? 'idle' : 'loading')
+  const state = shallowRef<PaginatorState>(isHydrated.value ? 'idle' : 'loading')
   const items = ref<U[]>([])
   const nextItems = ref<U[]>([])
   const prevItems = ref<T[]>([])
@@ -103,7 +103,7 @@ export function usePaginator<T, P, U = T>(
     bound.update()
   }
 
-  if (process.client) {
+  if (import.meta.client) {
     useIntervalFn(() => {
       bound.update()
     }, 1000)

composables/settings/definition.ts

@@ -56,7 +56,7 @@ export interface ThemeColors {
 }
 
 export function getDefaultLanguage(languages: string[]) {
-  if (process.server)
+  if (import.meta.server)
     return 'en-US'
   return matchLanguages(languages, navigator.languages) || 'en-US'
 }

composables/settings/storage.ts

@@ -1,14 +1,12 @@
 import type { Ref } from 'vue'
-import type { VueI18n } from 'vue-i18n'
-import type { LocaleObject } from 'vue-i18n-routing'
+import type { LocaleObject } from '@nuxtjs/i18n'
 import type { FontSize, OldFontSize, PreferencesSettings, UserSettings } from './definition'
 import { STORAGE_KEY_SETTINGS } from '~/constants'
 import { oldFontSizeMap } from '~~/constants/options'
 
 export function useUserSettings() {
-  const i18n = useNuxtApp().vueApp.config.globalProperties.$i18n as VueI18n
-  const { locales } = i18n
-  const supportLanguages = (locales as LocaleObject[]).map(locale => locale.code)
+  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