refactor(search): command palette design (#463)

src/components/SearchBar.vue

@@ -1,109 +0,0 @@
-<script lang="ts" setup>
-import { SearchRound } from '@vicons/material';
-import { useMagicKeys, whenever } from '@vueuse/core';
-import { NInput } from 'naive-ui';
-import { useRouter } from 'vue-router';
-import SearchBarItem from './SearchBarItem.vue';
-import type { Tool } from '@/tools/tools.types';
-import { tools } from '@/tools';
-import { useTracker } from '@/modules/tracker/tracker.services';
-import { useFuzzySearch } from '@/composable/fuzzySearch';
-
-const toolToOption = (tool: Tool) => ({ label: tool.name, value: tool.path, tool });
-
-const router = useRouter();
-const { tracker } = useTracker();
-
-const queryString = ref('');
-const inputEl = ref<HTMLElement>();
-const displayDropDown = ref(true);
-const isMac = computed(() => window.navigator.userAgent.toLowerCase().includes('mac'));
-
-const { searchResult } = useFuzzySearch({
-  search: queryString,
-  data: tools,
-  options: { keys: [{ name: 'name', weight: 2 }, 'description', 'keywords'] },
-});
-
-const options = computed(() => {
-  if (queryString.value === '') {
-    return tools.map(toolToOption);
-  }
-
-  return searchResult.value.map(toolToOption);
-});
-
-const keys = useMagicKeys({
-  passive: false,
-  onEventFired(e) {
-    if (e.ctrlKey && e.key === 'k' && e.type === 'keydown') {
-      e.preventDefault();
-    }
-
-    if (e.metaKey && e.key === 'k' && e.type === 'keydown') {
-      e.preventDefault();
-    }
-  },
-});
-
-whenever(keys.ctrl_k, claimFocus);
-whenever(keys.meta_k, claimFocus);
-whenever(keys.escape, releaseFocus);
-
-function renderOption({ tool }: { tool: Tool }) {
-  return h(SearchBarItem, { tool });
-}
-
-function onSelect(path: string) {
-  router.push(path);
-  queryString.value = '';
-}
-
-function claimFocus() {
-  displayDropDown.value = true;
-
-  inputEl.value?.focus();
-}
-
-function releaseFocus() {
-  displayDropDown.value = false;
-}
-
-function onFocus() {
-  tracker.trackEvent({ eventName: 'Search-bar focused' });
-  displayDropDown.value = true;
-}
-</script>
-
-<template>
-  <div class="search-bar">
-    <n-auto-complete
-      v-model:value="queryString"
-      :options="options"
-      :on-select="(value: string | number) => onSelect(String(value))"
-      :render-label="renderOption"
-      default-value="aa"
-      :get-show="() => displayDropDown"
-      :on-focus="onFocus"
-      @update:value="() => (displayDropDown = true)"
-    >
-      <template #default="{ handleInput, handleBlur, handleFocus, value: slotValue }">
-        <NInput
-          ref="inputEl"
-          round
-          clearable
-          :placeholder="`Search a tool (use ${isMac ? 'Cmd' : 'Ctrl'} + K to focus)`"
-          :value="slotValue"
-          :input-props="{ autocomplete: 'disabled' }"
-          @input="handleInput"
-          @focus="handleFocus"
-          @blur="handleBlur"
-        >
-          <template #prefix>
-            <n-icon :component="SearchRound" />
-          </template>
-        </NInput>
-      </template>
-    </n-auto-complete>
-  </div>
-</template>

src/components/SearchBarItem.vue

@@ -1,48 +0,0 @@
-<script lang="ts" setup>
-import type { Tool } from '@/tools/tools.types';
-
-const props = defineProps<{ tool: Tool }>();
-const { tool } = toRefs(props);
-</script>
-
-<template>
-  <div class="search-bar-item">
-    <n-icon class="icon" :component="tool.icon" />
-
-    <div>
-      <div class="name">
-        {{ tool.name }}
-      </div>
-      <div class="description">
-        {{ tool.description }}
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="less" scoped>
-.search-bar-item {
-  padding: 10px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-
-  .icon {
-    font-size: 30px;
-    margin-right: 10px;
-    opacity: 0.7;
-  }
-
-  .name {
-    font-weight: bold;
-    font-size: 15px;
-    line-height: 1;
-    margin-bottom: 5px;
-  }
-
-  .description {
-    opacity: 0.7;
-    line-height: 1;
-  }
-}
-</style>