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

app/components/search/SearchAccountInfo.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { mastodon } from 'masto'
+
+defineProps<{
+  account: mastodon.v1.Account
+}>()
+</script>
+
+<!-- TODO: reuse AccountInfo.vue -->
+
+<template>
+  <div flex gap-2 items-center>
+    <AccountAvatar w-10 h-10 :account="account" shrink-0 />
+    <div flex="~ col gap1" shrink h-full overflow-hidden leading-none>
+      <div flex="~" gap-2>
+        <AccountDisplayName :account="account" line-clamp-1 ws-pre-wrap break-all text-base />
+        <AccountLockIndicator v-if="account.locked" text-xs />
+        <AccountBotIndicator v-if="account.bot" text-xs />
+      </div>
+      <AccountHandle text-sm :account="account" text-secondary-light />
+    </div>
+  </div>
+</template>

app/components/search/SearchEmojiInfo.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+export interface SearchEmoji {
+  title: string
+  src: string
+}
+
+defineProps<{
+  emoji: SearchEmoji
+}>()
+</script>
+
+<template>
+  <div flex="~ gap3" items-center text-base>
+    <img
+      width="20"
+      height="20"
+      :src="emoji.src"
+      loading="lazy"
+    >
+    <span shrink overflow-hidden leading-none text-base><span text-secondary>:</span>{{ emoji.title }}<span text-secondary>:</span></span>
+  </div>
+</template>

app/components/search/SearchHashtagInfo.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { mastodon } from 'masto'
+
+const { hashtag } = defineProps<{
+  hashtag: mastodon.v1.Tag
+}>()
+
+const totalTrend = computed(() =>
+  hashtag.history?.reduce((total: number, item) => total + (Number(item.accounts) || 0), 0),
+)
+</script>
+
+<template>
+  <div flex flex-row items-center gap2 relative>
+    <div w-10 h-10 flex-none rounded-full bg-active flex place-items-center place-content-center>
+      <div i-ri:hashtag text-secondary text-lg />
+    </div>
+    <div flex flex-col>
+      <span>
+        {{ hashtag.name }}
+      </span>
+      <CommonTrending v-if="hashtag.history" :history="hashtag.history" text-xs text-secondary truncate />
+    </div>
+    <div v-if="totalTrend && hashtag.history" absolute left-15 right-0 top-0 bottom-4 op35 flex place-items-center place-content-center ml-auto>
+      <CommonTrendingCharts
+        :history="hashtag.history" :width="150" :height="20"
+        text-xs text-secondary h-full w-full
+      />
+    </div>
+  </div>
+</template>

app/components/search/SearchResult.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { SearchResult } from '~/composables/masto/search'
+
+defineProps<{
+  result: SearchResult
+  active: boolean
+}>()
+
+function onActivate() {
+  (document.activeElement as HTMLElement).blur()
+}
+</script>
+
+<template>
+  <CommonScrollIntoView
+    as="RouterLink"
+    hover:bg-active
+    :active="active"
+    :to="result.to" py2 block px2
+    :aria-selected="active"
+    :class="{ 'bg-active': active }"
+    @click="() => onActivate()"
+  >
+    <SearchHashtagInfo v-if="result.type === 'hashtag'" :hashtag="result.data" />
+    <SearchAccountInfo v-else-if="result.type === 'account'" :account="result.data" />
+    <StatusCard v-else-if="result.type === 'status'" :status="result.data" :actions="false" :show-reply-to="false" />
+    <!-- <div v-else-if="result.type === 'action'" text-center>
+      {{ result.action!.label }}
+    </div> -->
+  </CommonScrollIntoView>
+</template>

app/components/search/SearchResultSkeleton.vue

@@ -0,0 +1,13 @@
+<template>
+  <div flex flex-col gap-2 px-4 py-3>
+    <div flex gap-4>
+      <div>
+        <div w-12 h-12 rounded-full class="skeleton-loading-bg" />
+      </div>
+      <div flex="~ col 1 gap-2" pb2 min-w-0>
+        <div flex class="skeleton-loading-bg" h-5 w-20 rounded />
+        <div flex class="skeleton-loading-bg" h-4 w-full rounded />
+      </div>
+    </div>
+  </div>
+</template>

app/components/search/SearchWidget.vue

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+const query = ref('')
+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()
+const { focused } = useFocusWithin(el)
+
+defineExpose({
+  input,
+})
+
+const results = computed(() => {
+  if (query.value.length === 0)
+    return []
+
+  const results = [
+    ...hashtags.value.slice(0, 3),
+    ...accounts.value,
+    ...statuses.value,
+
+    // Disable until search page is implemented
+    // {
+    //   type: 'action',
+    //   to: `/search?q=${query.value}`,
+    //   action: {
+    //     label: `Search for ${query.value}`,
+    //   },
+    // },
+  ]
+
+  return results
+})
+
+// Reset index when results change
+watch([results, focused], () => index.value = -1)
+
+function shift(delta: number) {
+  return index.value = (index.value + delta % results.value.length + results.value.length) % results.value.length
+}
+
+function activate() {
+  const currentIndex = index.value
+
+  if (query.value.length === 0)
+    return
+
+  // Disable redirection until search page is implemented
+  if (currentIndex === -1) {
+    index.value = 0
+    // router.push(`/search?q=${query.value}`)
+    return
+  }
+
+  (document.activeElement as HTMLElement).blur()
+  index.value = -1
+
+  router.push(results.value[currentIndex].to)
+}
+</script>
+
+<template>
+  <div ref="el" relative group>
+    <div bg-base border="~ base" h10 ps-4 pe-1 rounded-3 flex="~ row" items-center relative focus-within:box-shadow-outline>
+      <div i-ri:search-2-line pointer-events-none text-secondary mt="1px" class="rtl-flip" />
+      <input
+        ref="input"
+        v-model="query"
+        h-full
+        rounded-3
+        w-full
+        bg-transparent
+        outline="focus:none"
+        ps-3
+        pe-1
+        ml-1
+        :placeholder="t('nav.search')"
+        pb="1px"
+        placeholder-text-secondary
+        @keydown.down.prevent="shift(1)"
+        @keydown.up.prevent="shift(-1)"
+        @keydown.esc.prevent="input?.blur()"
+        @keypress.enter="activate"
+      >
+      <button v-if="query.length" btn-action-icon text-secondary @click="query = ''; input?.focus()">
+        <span aria-hidden="true" class="i-ri:close-line" />
+      </button>
+    </div>
+    <!-- Results -->
+    <div left-0 top-11 absolute w-full z-10 group-focus-within="pointer-events-auto visible" invisible pointer-events-none>
+      <div w-full bg-base border="~ base" rounded-3 max-h-100 overflow-auto :class="results.length === 0 ? 'py2' : null">
+        <span v-if="query.trim().length === 0" block text-center text-sm text-secondary>
+          {{ t('search.search_desc') }}
+        </span>
+        <template v-else-if="!loading">
+          <template v-if="results.length > 0">
+            <SearchResult
+              v-for="(result, i) in results" :key="result.id"
+              :active="index === parseInt(i.toString())"
+              :result="result"
+              :tabindex="focused ? 0 : -1"
+            />
+          </template>
+          <span v-else block text-center text-sm text-secondary>
+            {{ t('search.search_empty') }}
+          </span>
+        </template>
+        <div v-else>
+          <SearchResultSkeleton />
+          <SearchResultSkeleton />
+          <SearchResultSkeleton />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>