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

app/components/tag/TagActionButton.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { mastodon } from 'masto'
+
+const { tag } = defineProps<{
+  tag: mastodon.v1.Tag
+}>()
+
+const emit = defineEmits<{
+  (event: 'change'): void
+}>()
+
+const { client } = useMasto()
+
+async function toggleFollowTag() {
+  // We save the state so be can do an optimistic UI update, but fallback to the previous state if the API call fails
+  const previousFollowingState = tag.following
+
+  // eslint-disable-next-line vue/no-mutating-props
+  tag.following = !tag.following
+
+  try {
+    if (previousFollowingState)
+      await client.value.v1.tags.$select(tag.name).unfollow()
+    else
+      await client.value.v1.tags.$select(tag.name).follow()
+
+    emit('change')
+  }
+  catch {
+    // eslint-disable-next-line vue/no-mutating-props
+    tag.following = previousFollowingState
+  }
+}
+</script>
+
+<template>
+  <button
+    rounded group focus:outline-none
+    hover:text-primary focus-visible:text-primary
+    :aria-label="tag.following ? $t('tag.unfollow_label', [tag.name]) : $t('tag.follow_label', [tag.name])"
+    @click="toggleFollowTag()"
+  >
+    <CommonTooltip placement="bottom" :content="tag.following ? $t('tag.unfollow') : $t('tag.follow')">
+      <div rounded-full p2 elk-group-hover="bg-orange/10" group-focus-visible="bg-orange/10" group-focus-visible:ring="2 current">
+        <div :class="[tag.following ? 'i-ri:star-fill' : 'i-ri:star-line']" />
+      </div>
+    </CommonTooltip>
+  </button>
+</template>

app/components/tag/TagCard.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import type { mastodon } from 'masto'
+
+const { tag } = defineProps<{
+  tag: mastodon.v1.Tag
+}>()
+
+const to = computed(() => {
+  const { hostname, pathname } = new URL(tag.url)
+  return `/${hostname}${pathname}`
+})
+
+const router = useRouter()
+
+function onclick(evt: MouseEvent | KeyboardEvent) {
+  const path = evt.composedPath() as HTMLElement[]
+  const el = path.find(el => ['A', 'BUTTON'].includes(el.tagName?.toUpperCase()))
+  const text = window.getSelection()?.toString()
+  if (!el && !text)
+    go(evt)
+}
+
+function go(evt: MouseEvent | KeyboardEvent) {
+  if (evt.metaKey || evt.ctrlKey)
+    window.open(to.value)
+  else
+    router.push(to.value)
+}
+</script>
+
+<template>
+  <div
+    block p4 hover:bg-active flex justify-between cursor-pointer flex-gap-2
+    @click="onclick"
+    @keydown.enter="onclick"
+  >
+    <div flex flex-gap-2>
+      <TagActionButton :tag="tag" />
+      <div>
+        <h4 flex items-center text-size-base leading-normal font-medium line-clamp-1 break-all ws-pre-wrap>
+          <bdi>
+            <span>#</span>
+            <span hover:underline>{{ tag.name }}</span>
+          </bdi>
+        </h4>
+        <CommonTrending v-if="tag.history" :history="tag.history" text-sm text-secondary line-clamp-1 ws-pre-wrap break-all />
+      </div>
+    </div>
+    <div v-if="tag.history" flex items-center>
+      <CommonTrendingCharts :history="tag.history" />
+    </div>
+  </div>
+</template>

app/components/tag/TagCardPaginator.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { mastodon } from 'masto'
+
+defineProps<{
+  paginator: mastodon.Paginator<mastodon.v1.Tag[], mastodon.DefaultPaginationParams>
+}>()
+</script>
+
+<template>
+  <CommonPaginator :paginator="paginator" key-prop="name">
+    <template #default="{ item }">
+      <TagCard :tag="item" border="b base" />
+    </template>
+    <template #loading>
+      <TagCardSkeleton border="b base" />
+      <TagCardSkeleton border="b base" />
+      <TagCardSkeleton border="b base" op50 />
+      <TagCardSkeleton border="b base" op50 />
+      <TagCardSkeleton border="b base" op25 />
+    </template>
+  </CommonPaginator>
+</template>

app/components/tag/TagCardSkeleton.vue

@@ -0,0 +1,11 @@
+<template>
+  <div p4 flex justify-between gap-4>
+    <div flex="~ col 1 gap-2">
+      <div flex class="skeleton-loading-bg" h-5 w-30 rounded />
+      <div flex class="skeleton-loading-bg" h-4 w-45 rounded />
+    </div>
+    <div flex items-center>
+      <div flex class="skeleton-loading-bg" h-9 w-15 rounded />
+    </div>
+  </div>
+</template>