feat(tools): added favorite tool handling

src/components/FavoriteButton.vue

@@ -0,0 +1,40 @@
+<template>
+  <n-tooltip trigger="hover">
+    <template #trigger>
+      <n-button circle quaternary :type="buttonType" :style="{ opacity: isFavorite ? 1 : 0.2 }" @click="toggleFavorite">
+        <template #icon>
+          <n-icon :component="FavoriteFilled" />
+        </template>
+      </n-button>
+    </template>
+    {{ isFavorite ? 'Remove from favorites' : 'Add to favorites' }}
+  </n-tooltip>
+</template>
+
+<script setup lang="ts">
+import { FavoriteFilled } from '@vicons/material';
+import { useToolStore } from '@/tools/tools.store';
+import type { Tool } from '@/tools/tools.types';
+import { computed, toRefs } from 'vue';
+
+const toolStore = useToolStore();
+
+const props = defineProps<{ tool: Tool }>();
+const { tool } = toRefs(props);
+
+const isFavorite = computed(() => toolStore.isToolFavorite({ tool }));
+const buttonType = computed(() => (isFavorite.value ? 'primary' : 'default'));
+
+function toggleFavorite(event: MouseEvent) {
+  event.preventDefault();
+
+  if (toolStore.isToolFavorite({ tool })) {
+    toolStore.removeToolFromFavorites({ tool });
+    return;
+  }
+
+  toolStore.addToolToFavorites({ tool });
+}
+</script>
+
+<style scoped></style>

src/components/MenuIconItem.vue

@@ -6,11 +6,11 @@
 </template>
 
 <script setup lang="ts">
-import type { ITool } from '@/tools/tool';
+import type { Tool } from '@/tools/tools.types';
 import { useThemeVars } from 'naive-ui';
 import { toRefs } from 'vue';
 
-const props = defineProps<{ tool: ITool }>();
+const props = defineProps<{ tool: Tool }>();
 const { tool } = toRefs(props);
 
 const theme = useThemeVars();

src/components/SearchBar.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { useFuzzySearch } from '@/composable/fuzzySearch';
 import { tools } from '@/tools';
-import type { ITool } from '@/tools/tool';
+import type { Tool } from '@/tools/tools.types';
 import { SearchRound } from '@vicons/material';
 import { useMagicKeys, whenever } from '@vueuse/core';
 import { computed, h, ref } from 'vue';
@@ -17,7 +17,7 @@ const { searchResult } = useFuzzySearch({
   options: { keys: [{ name: 'name', weight: 2 }, 'description', 'keywords'] },
 });
 
-const toolToOption = (tool: ITool) => ({ label: tool.name, value: tool.path, tool });
+const toolToOption = (tool: Tool) => ({ label: tool.name, value: tool.path, tool });
 
 const options = computed(() => {
   if (queryString.value === '') {
@@ -47,7 +47,7 @@ whenever(keys.ctrl_k, () => {
   focusTarget.value.focus();
 });
 
-function renderOption({ tool }: { tool: ITool }) {
+function renderOption({ tool }: { tool: Tool }) {
   return h(SearchBarItem, { tool });
 }
 </script>

src/components/SearchBarItem.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import type { ITool } from '@/tools/tool';
+import type { Tool } from '@/tools/tools.types';
 import { toRefs } from 'vue';
 
-const props = defineProps<{ tool: ITool }>();
+const props = defineProps<{ tool: Tool }>();
 const { tool } = toRefs(props);
 </script>
 

src/components/ToolCard.vue

@@ -3,17 +3,21 @@
     <n-card class="tool-card">
       <n-space justify="space-between" align="center">
         <n-icon class="icon" size="40" :component="tool.icon" />
-        <n-tag
-          v-if="tool.isNew"
-          size="small"
-          class="badge-new"
-          round
-          type="success"
-          :bordered="false"
-          :color="{ color: theme.primaryColor, textColor: theme.tagColor }"
-        >
-          New
-        </n-tag>
+        <n-space align="center">
+          <n-tag
+            v-if="tool.isNew"
+            size="small"
+            class="badge-new"
+            round
+            type="success"
+            :bordered="false"
+            :color="{ color: theme.primaryColor, textColor: theme.tagColor }"
+          >
+            New
+          </n-tag>
+
+          <favorite-button :tool="tool" />
+        </n-space>
       </n-space>
       <n-h3 class="title">
         <n-ellipsis>{{ tool.name }}</n-ellipsis>
@@ -29,11 +33,12 @@
 </template>
 
 <script setup lang="ts">
-import type { ITool } from '@/tools/tool';
+import type { Tool } from '@/tools/tools.types';
 import { useThemeVars } from 'naive-ui';
 import { toRefs } from 'vue';
+import FavoriteButton from './FavoriteButton.vue';
 
-const props = defineProps<{ tool: ITool & { category: string } }>();
+const props = defineProps<{ tool: Tool & { category: string } }>();
 const { tool } = toRefs(props);
 const theme = useThemeVars();
 </script>