feat: search (#285)

components/search/SearchWidget.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+const query = ref('')
+const { accounts, hashtags, loading } = useSearch(query)
+const index = ref(0)
+
+const { t } = useI18n()
+const el = ref<HTMLElement>()
+const router = useRouter()
+const { focused } = useFocusWithin(el)
+
+const results = computed(() => {
+  if (query.value.length === 0)
+    return []
+
+  const results = [
+    ...hashtags.value.slice(0, 3).map(hashtag => ({ type: 'hashtag', hashtag, to: `/tags/${hashtag.name}` })),
+    ...accounts.value.map(account => ({ type: 'account', account, to: `/@${account.acct}` })),
+
+    // 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)
+
+const shift = (delta: number) => index.value = (index.value + delta % results.value.length + results.value.length) % results.value.length
+
+const activate = () => {
+  (document.activeElement as HTMLElement).blur()
+  const currentIndex = index.value
+  index.value = -1
+
+  if (query.value.length === 0)
+    return
+
+  // Disable until search page is implemented
+  // if (currentIndex === -1)
+  //   router.push(`/search?q=${query.value}`)
+
+  router.push(results.value[currentIndex].to)
+}
+</script>
+
+<template>
+  <div ref="el" relative px4 py2 group>
+    <div bg-base border="~ base" h10 rounded-full flex="~ row" items-center relative outline-primary outline-1 focus-within:outline transition-all transition-duration-500>
+      <div i-ri:search-2-line mx4 absolute pointer-events-none text-secondary mt="1px" />
+      <input
+        ref="input"
+        v-model="query"
+        h-full
+        pl-10
+        rounded-full
+        w-full
+        bg-transparent
+        outline="focus:none"
+        pr-4
+        :placeholder="`${t('nav_side.search')} Elk`"
+        pb="1px"
+        placeholder-text-secondary
+        @keydown.down.prevent="shift(1)"
+        @keydown.up.prevent="shift(-1)"
+        @keypress.enter="activate"
+      >
+    </div>
+    <!-- Results -->
+    <div p4 left-0 top-10 absolute w-full z10 group-focus-within="pointer-events-auto visible" invisible pointer-events-none>
+      <div w-full bg-base border="~ base" rounded max-h-100 overflow-auto py2>
+        <span v-if="query.length === 0" block text-center text-sm text-secondary>
+          {{ t('search.search_desc') }}
+        </span>
+        <template v-if="!loading">
+          <SearchResult v-for="(result, i) in results" :key="result.to" :active="index === parseInt(i.toString())" :result="result" :tabindex="focused ? 0 : -1" />
+        </template>
+        <div v-else>
+          <SearchResultSkeleton />
+          <SearchResultSkeleton />
+          <SearchResultSkeleton />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>