feat(tool): improved favorite tool management

src/layouts/base.layout.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { NIcon, useThemeVars, type MenuGroupOption } from 'naive-ui';
-import { h } from 'vue';
+import { computed, h } from 'vue';
 import { RouterLink, useRoute } from 'vue-router';
 import { Heart, Menu2, Home2 } from '@vicons/tabler';
 import { toolsByCategory } from '@/tools';
@@ -8,6 +8,7 @@ import { useStyleStore } from '@/stores/style.store';
 import { config } from '@/config';
 import MenuIconItem from '@/components/MenuIconItem.vue';
 import type { Tool } from '@/tools/tools.types';
+import { useToolStore } from '@/tools/tools.store';
 import SearchBar from '../components/SearchBar.vue';
 import HeroGradient from '../assets/hero-gradient.svg?component';
 import MenuLayout from '../components/MenuLayout.vue';
@@ -22,16 +23,25 @@ const commitSha = config.app.lastCommitSha.slice(0, 7);
 const makeLabel = (tool: Tool) => () => h(RouterLink, { to: tool.path }, { default: () => tool.name });
 const makeIcon = (tool: Tool) => () => h(MenuIconItem, { tool });
 
-const menuOptions: MenuGroupOption[] = toolsByCategory.map((category) => ({
-  label: category.name,
-  key: category.name,
-  type: 'group',
-  children: category.components.map((tool) => ({
-    label: makeLabel(tool),
-    icon: makeIcon(tool),
-    key: tool.name,
+const toolStore = useToolStore();
+
+const menuOptions = computed<MenuGroupOption[]>(() =>
+  [
+    ...(toolStore.favoriteTools.length > 0
+      ? [{ name: 'Your favorite tools', components: toolStore.favoriteTools }]
+      : []),
+    ...toolsByCategory,
+  ].map((category) => ({
+    label: category.name,
+    key: category.name,
+    type: 'group',
+    children: category.components.map((tool) => ({
+      label: makeLabel(tool),
+      icon: makeIcon(tool),
+      key: tool.name,
+    })),
   })),
-}));
+);
 </script>
 
 <template>
@@ -149,8 +159,7 @@ const menuOptions: MenuGroupOption[] = toolsByCategory.map((category) => ({
               :bordered="false"
             >
               Buy me a coffee
-
-              <n-icon v-if="!styleStore.isSmallScreen" :component="Heart" style="margin-left: 8px" size="20px" />
+              <n-icon v-if="!styleStore.isSmallScreen" :component="Heart" style="margin-left: 5px" />
             </n-button>
           </template>
           ❤ Support IT Tools development !

src/layouts/tool.layout.vue

@@ -3,22 +3,22 @@ import { useRoute } from 'vue-router';
 import { useHead } from '@vueuse/head';
 import type { HeadObject } from '@vueuse/head';
 import { computed } from 'vue';
-import { useThemeVars } from 'naive-ui';
+import FavoriteButton from '@/components/FavoriteButton.vue';
+import type { Tool } from '@/tools/tools.types';
 import BaseLayout from './base.layout.vue';
 
 const route = useRoute();
-const theme = useThemeVars();
 
 const head = computed<HeadObject>(() => ({
   title: `${route.meta.name} - IT Tools`,
   meta: [
     {
       name: 'description',
-      content: route.meta.description,
+      content: route.meta?.description as string,
     },
     {
       name: 'keywords',
-      content: route.meta.keywords,
+      content: ((route.meta.keywords ?? []) as string[]).join(','),
     },
   ],
 }));
@@ -29,22 +29,18 @@ useHead(head);
   <base-layout>
     <div class="tool-layout">
       <div class="tool-header">
-        <n-h1>
-          {{ route.meta.name }}
+        <n-space align="center" justify="space-between" :wrap="false">
+          <n-h1>
+            {{ route.meta.name }}
+          </n-h1>
 
-          <n-tag
-            v-if="route.meta.isNew"
-            round
-            type="success"
-            :bordered="false"
-            :color="{ color: theme.primaryColor, textColor: theme.tagColor }"
-          >
-            New tool
-          </n-tag>
-          <!-- <span class="new-tool-badge">New !</span> -->
-        </n-h1>
+          <div>
+            <favorite-button :tool="{name: route.meta.name} as Tool" />
+          </div>
+        </n-space>
 
         <div class="separator" />
+
         <div class="description">
           {{ route.meta.description }}
         </div>
@@ -92,6 +88,7 @@ useHead(head);
       width: 200px;
       height: 2px;
       background: rgb(161, 161, 161);
+      opacity: 0.2;
 
       margin: 10px 0;
     }

src/pages/Home.page.vue

@@ -12,58 +12,60 @@ useHead({ title: 'IT Tools - Handy online tools for developers' });
 
 <template>
   <div class="home-page">
-    <n-grid x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
-      <n-gi>
-        <colored-card title="You like it-tools?" :icon="Heart">
-          Give us a star on
-          <a
-            href="https://github.com/CorentinTh/it-tools"
-            rel="noopener"
-            target="_blank"
-            aria-label="IT-Tools' github repository"
-            >github</a
-          >
-          or follow us on
-          <a
-            href="https://twitter.com/ittoolsdottech"
-            rel="noopener"
-            target="_blank"
-            aria-label="IT-Tools' twitter account"
-            >twitter</a
-          >! Thank you
-          <n-icon :component="Heart" />
-        </colored-card>
-      </n-gi>
-    </n-grid>
+    <div class="grid-wrapper">
+      <n-grid x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
+        <n-gi>
+          <colored-card title="You like it-tools?" :icon="Heart">
+            Give us a star on
+            <a
+              href="https://github.com/CorentinTh/it-tools"
+              rel="noopener"
+              target="_blank"
+              aria-label="IT-Tools' github repository"
+              >github</a
+            >
+            or follow us on
+            <a
+              href="https://twitter.com/ittoolsdottech"
+              rel="noopener"
+              target="_blank"
+              aria-label="IT-Tools' twitter account"
+              >twitter</a
+            >! Thank you
+            <n-icon :component="Heart" />
+          </colored-card>
+        </n-gi>
+      </n-grid>
 
-    <transition name="height">
-      <div v-if="toolStore.favoriteTools.length > 0">
-        <n-h3>Your favorite tools</n-h3>
+      <transition name="height">
+        <div v-if="toolStore.favoriteTools.length > 0">
+          <n-h3>Your favorite tools</n-h3>
+          <n-grid x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
+            <n-gi v-for="tool in toolStore.favoriteTools" :key="tool.name">
+              <tool-card :tool="tool" />
+            </n-gi>
+          </n-grid>
+        </div>
+      </transition>
+
+      <div v-if="toolStore.newTools.length > 0">
+        <n-h3>Newest tools</n-h3>
         <n-grid x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
-          <n-gi v-for="tool in toolStore.favoriteTools" :key="tool.name">
+          <n-gi v-for="tool in toolStore.newTools" :key="tool.name">
             <tool-card :tool="tool" />
           </n-gi>
         </n-grid>
       </div>
-    </transition>
 
-    <div v-if="toolStore.newTools.length > 0">
-      <n-h3>Newest tools</n-h3>
+      <n-h3>All the tools</n-h3>
       <n-grid x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
-        <n-gi v-for="tool in toolStore.newTools" :key="tool.name">
-          <tool-card :tool="tool" />
+        <n-gi v-for="tool in toolStore.tools" :key="tool.name">
+          <transition>
+            <tool-card :tool="tool" />
+          </transition>
         </n-gi>
       </n-grid>
     </div>
-
-    <n-h3>All the tools</n-h3>
-    <n-grid x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
-      <n-gi v-for="tool in toolStore.tools" :key="tool.name">
-        <transition>
-          <tool-card :tool="tool" />
-        </transition>
-      </n-gi>
-    </n-grid>
   </div>
 </template>
 
@@ -72,8 +74,12 @@ useHead({ title: 'IT Tools - Handy online tools for developers' });
   padding-top: 50px;
 }
 
+.n-h3 {
+  margin-bottom: 10px;
+}
+
 ::v-deep(.n-grid) {
-  margin-bottom: 12px;
+  margin-bottom: 30px;
 }
 
 .height-enter-active,