feat: bump to latest vue 3.4.19 (#2607)

Co-authored-by: patak <matias.capeletto@gmail.com>

components/account/AccountHoverWrapper.vue

@@ -1,5 +1,8 @@
 <script setup lang="ts">
 import type { mastodon } from 'masto'
+import { fetchAccountByHandle } from '~/composables/cache'
+
+type WatcherType = [acc?: mastodon.v1.Account, h?: string, v?: boolean]
 
 defineOptions({
   inheritAttrs: false,
@@ -11,16 +14,55 @@ const props = defineProps<{
   disabled?: boolean
 }>()
 
-const account = computed(() => props.account || (props.handle ? useAccountByHandle(props.handle!) : undefined))
+const hoverCard = ref()
+const targetIsVisible = ref(false)
+const account = ref<mastodon.v1.Account | null | undefined>(props.account)
+
+useIntersectionObserver(
+  hoverCard,
+  ([{ intersectionRatio }]) => {
+    targetIsVisible.value = intersectionRatio <= 0.75
+  },
+)
+watch(
+  () => [props.account, props.handle, targetIsVisible.value] satisfies WatcherType,
+  ([newAccount, newHandle, newVisible], oldProps) => {
+    if (newAccount) {
+      account.value = newAccount
+      return
+    }
+
+    if (!newVisible)
+      return
+
+    if (newHandle) {
+      const [_oldAccount, oldHandle, _oldVisible] = oldProps ?? [undefined, undefined, false]
+      if (!oldHandle || newHandle !== oldHandle || !account.value) {
+        // new handle can be wrong: using server instead of webDomain
+        fetchAccountByHandle(newHandle).then((acc) => {
+          if (newHandle === props.handle)
+            account.value = acc
+        })
+      }
+
+      return
+    }
+
+    account.value = undefined
+  }, { immediate: true, flush: 'post' },
+)
+
 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 />
+  <span 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 />
+  </span>
 </template>

components/account/AccountTabs.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { CommonRouteTabOption } from '../common/CommonRouteTabs.vue'
+import type { CommonRouteTabOption } from '~/types'
 
 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/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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { RouteLocationRaw } from 'vue-router'
+import type { CommonRouteTabMoreOption, CommonRouteTabOption } from '~/types'
 
 const { options, command, replace, preventScrollTop = false, moreOptions } = defineProps<{
   options: CommonRouteTabOption[]
@@ -10,22 +10,6 @@ const { options, command, replace, preventScrollTop = false, moreOptions } = def
 }>()
 
 const { t } = useI18n()
-
-export interface CommonRouteTabOption {
-  to: RouteLocationRaw
-  display: string
-  disabled?: boolean
-  name?: string
-  icon?: string
-  hide?: boolean
-  match?: boolean
-}
-export interface CommonRouteTabMoreOption {
-  options: CommonRouteTabOption[]
-  icon?: string
-  tooltip?: string
-  match?: boolean
-}
 const router = useRouter()
 
 useCommands(() => command
@@ -60,7 +44,7 @@ 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')">
           <button

components/common/CommonTooltip.vue

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

components/magickeys/MagickeysKeyboardShortcuts.vue

@@ -24,7 +24,7 @@ interface ShortcutItemGroup {
 const isMac = useIsMac()
 const modifierKeyName = computed(() => isMac.value ? '⌘' : 'Ctrl')
 
-const shortcutItemGroups: ShortcutItemGroup[] = [
+const shortcutItemGroups = computed<ShortcutItemGroup[]>(() => [
   {
     name: t('magic_keys.groups.navigation.title'),
     items: [
@@ -79,7 +79,7 @@ const shortcutItemGroups: ShortcutItemGroup[] = [
     name: t('magic_keys.groups.media.title'),
     items: [],
   },
-]
+])
 </script>
 
 <template>