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

app/components/timeline/TimelineBlocks.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+const paginator = useMastoClient().v1.blocks.list()
+</script>
+
+<template>
+  <AccountPaginator :paginator="paginator" />
+</template>

app/components/timeline/TimelineBookmarks.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+const paginator = useMastoClient().v1.bookmarks.list()
+</script>
+
+<template>
+  <TimelinePaginator end-message="common.no_bookmarks" :paginator="paginator" />
+</template>

app/components/timeline/TimelineConversations.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+const paginator = useMastoClient().v1.conversations.list()
+</script>
+
+<template>
+  <ConversationPaginator :paginator="paginator" />
+</template>

app/components/timeline/TimelineDomainBlocks.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+const { client } = useMasto()
+const paginator = client.value.v1.domainBlocks.list()
+
+async function unblock(domain: string) {
+  await client.value.v1.domainBlocks.remove({ domain })
+}
+</script>
+
+<template>
+  <CommonPaginator :paginator="paginator">
+    <template #default="{ item }">
+      <CommonDropdownItem class="!cursor-auto">
+        {{ item }}
+        <template #actions>
+          <div i-ri:lock-unlock-line text-primary cursor-pointer @click="unblock(item)" />
+        </template>
+      </CommonDropdownItem>
+    </template>
+  </CommonPaginator>
+</template>

app/components/timeline/TimelineFavourites.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+const paginator = useMastoClient().v1.favourites.list()
+</script>
+
+<template>
+  <TimelinePaginator end-message="common.no_favourites" :paginator="paginator" />
+</template>

app/components/timeline/TimelineHome.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { mastodon } from 'masto'
+
+const { isSupported, effectiveType } = useNetwork()
+const isSlow = computed(() => isSupported.value && effectiveType.value && ['slow-2g', '2g', '3g'].includes(effectiveType.value))
+const limit = computed(() => isSlow.value ? 10 : 30)
+
+const paginator = useMastoClient().v1.timelines.home.list({ limit: limit.value })
+const stream = useStreaming(client => client.user.subscribe())
+function reorderAndFilter(items: mastodon.v1.Status[]) {
+  return reorderedTimeline(items, 'home')
+}
+
+let followedTags: mastodon.v1.Tag[] | undefined
+if (currentUser.value !== undefined) {
+  followedTags = (await useMasto().client.value.v1.followedTags.list({ limit: 0 }))
+}
+</script>
+
+<template>
+  <div>
+    <PublishWidgetList draft-key="home" />
+    <div h="1px" w-auto bg-border mb-3 />
+    <TimelinePaginator :followed-tags="followedTags" v-bind="{ paginator, stream }" :preprocess="reorderAndFilter" context="home" />
+  </div>
+</template>

app/components/timeline/TimelineMutes.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+const paginator = useMastoClient().v1.mutes.list()
+</script>
+
+<template>
+  <AccountPaginator :paginator="paginator" />
+</template>

app/components/timeline/TimelineNotifications.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { mastodon } from 'masto'
+import { STORAGE_KEY_LAST_ACCESSED_NOTIFICATION_ROUTE } from '~/constants'
+
+const { filter } = defineProps<{
+  filter?: mastodon.v1.NotificationType
+}>()
+
+const route = useRoute()
+const lastAccessedNotificationRoute = useLocalStorage(STORAGE_KEY_LAST_ACCESSED_NOTIFICATION_ROUTE, '')
+
+const options = { limit: 30, types: filter ? [filter] : [] }
+
+// Default limit is 20 notifications, and servers are normally caped to 30
+const paginator = useMastoClient().v1.notifications.list(options)
+const stream = useStreaming(client => client.user.notification.subscribe())
+
+lastAccessedNotificationRoute.value = route.path.replace(/\/notifications\/?/, '')
+
+const { clearNotifications } = useNotifications()
+onActivated(() => {
+  clearNotifications()
+  lastAccessedNotificationRoute.value = route.path.replace(/\/notifications\/?/, '')
+})
+</script>
+
+<template>
+  <NotificationPaginator v-bind="{ paginator, stream }" />
+</template>

app/components/timeline/TimelinePaginator.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import type { mastodon } from 'masto'
+// @ts-expect-error missing types
+import { DynamicScrollerItem } from 'vue-virtual-scroller'
+import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
+
+const { account, buffer = 10, endMessage = true, followedTags = [] } = defineProps<{
+  paginator: mastodon.Paginator<mastodon.v1.Status[], mastodon.rest.v1.ListAccountStatusesParams>
+  stream?: mastodon.streaming.Subscription
+  context?: mastodon.v2.FilterContext
+  account?: mastodon.v1.Account
+  followedTags?: mastodon.v1.Tag[]
+  preprocess?: (items: mastodon.v1.Status[]) => mastodon.v1.Status[]
+  buffer?: number
+  endMessage?: boolean | string
+}>()
+
+const { formatNumber } = useHumanReadableNumber()
+const virtualScroller = usePreferences('experimentalVirtualScroller')
+
+const showOriginSite = computed(() =>
+  account && account.id !== currentUser.value?.account.id && getServerName(account) !== currentServer.value,
+)
+
+function getFollowedTag(status: mastodon.v1.Status): string | null {
+  const followedTagNames = followedTags.map(tag => tag.name)
+  const followedStatusTags = status.tags.filter(tag => followedTagNames.includes(tag.name))
+  return followedStatusTags.length > 0 ? followedStatusTags[0]?.name : null
+}
+</script>
+
+<template>
+  <CommonPaginator v-bind="{ paginator, stream, preprocess, buffer, endMessage }" :virtual-scroller="virtualScroller">
+    <template #updater="{ number, update }">
+      <button id="elk_show_new_items" py-4 border="b base" flex="~ col" p-3 w-full text-primary font-bold @click="update">
+        {{ $t('timeline.show_new_items', number, { named: { v: formatNumber(number) } }) }}
+      </button>
+    </template>
+    <template #default="{ item, older, newer, active }">
+      <template v-if="virtualScroller">
+        <DynamicScrollerItem :item="item" :active="active" tag="article">
+          <StatusCard :followed-tag="getFollowedTag(item)" :status="item" :context="context" :older="older" :newer="newer" />
+        </DynamicScrollerItem>
+      </template>
+      <template v-else>
+        <StatusCard :followed-tag="getFollowedTag(item)" :status="item" :context="context" :older="older" :newer="newer" />
+      </template>
+    </template>
+    <template v-if="context === 'account' " #done="{ items }">
+      <div
+        v-if="showOriginSite || items.length === 0"
+        p5 text-secondary text-center flex flex-col items-center gap1
+      >
+        <template v-if="showOriginSite">
+          <span italic>{{ $t('timeline.view_older_posts') }}</span>
+          <NuxtLink
+            :href="account!.url" target="_blank" external
+            flex="~ gap-1" items-center text-primary
+            hover="underline text-primary-active"
+          >
+            <div i-ri:external-link-fill />
+            {{ $t('menu.open_in_original_site') }}
+          </NuxtLink>
+        </template>
+        <span v-else-if="items.length === 0">{{ $t('timeline.no_posts') }}</span>
+      </div>
+    </template>
+  </CommonPaginator>
+</template>

app/components/timeline/TimelinePinned.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+const paginator = useMastoClient().v1.accounts.$select(currentUser.value!.account.id).statuses.list({ pinned: true })
+</script>
+
+<template>
+  <TimelinePaginator :paginator="paginator" />
+</template>

app/components/timeline/TimelinePublic.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { mastodon } from 'masto'
+
+const paginator = useMastoClient().v1.timelines.public.list({ limit: 30 })
+const stream = useStreaming(client => client.public.subscribe())
+function reorderAndFilter(items: mastodon.v1.Status[]) {
+  return reorderedTimeline(items, 'public')
+}
+
+let followedTags: mastodon.v1.Tag[] | undefined
+if (currentUser.value !== undefined) {
+  followedTags = (await useMasto().client.value.v1.followedTags.list({ limit: 0 }))
+}
+</script>
+
+<template>
+  <div>
+    <TimelinePaginator :followed-tags="followedTags" v-bind="{ paginator, stream }" :preprocess="reorderAndFilter" context="public" />
+  </div>
+</template>

app/components/timeline/TimelinePublicLocal.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { mastodon } from 'masto'
+
+const paginator = useMastoClient().v1.timelines.public.list({ limit: 30, local: true })
+const stream = useStreaming(client => client.public.local.subscribe())
+function reorderAndFilter(items: mastodon.v1.Status[]) {
+  return reorderedTimeline(items, 'public')
+}
+
+let followedTags: mastodon.v1.Tag[] | undefined
+if (currentUser.value !== undefined) {
+  followedTags = (await useMasto().client.value.v1.followedTags.list({ limit: 0 }))
+}
+</script>
+
+<template>
+  <div>
+    <TimelinePaginator :followed-tags="followedTags" v-bind="{ paginator, stream }" :preprocess="reorderAndFilter" context="public" />
+  </div>
+</template>

app/components/timeline/TimelineSkeleton.vue

@@ -0,0 +1,8 @@
+<template>
+  <div>
+    <StatusCardSkeleton border="b base" op50 />
+    <StatusCardSkeleton border="b base" op35 />
+    <StatusCardSkeleton border="b base" op25 />
+    <StatusCardSkeleton border="b base" op10 />
+  </div>
+</template>