feat(tools): added favorite tool handling

src/tools/index.ts

@@ -1,5 +1,4 @@
 import { LockOpen } from '@vicons/tabler';
-import type { ToolCategory } from './tool';
 
 import { tool as chmodCalculator } from './chmod-calculator';
 import { tool as mimeTypes } from './mime-types';
@@ -36,16 +35,15 @@ import { tool as tokenGenerator } from './token-generator';
 import { tool as urlEncoder } from './url-encoder';
 import { tool as urlParser } from './url-parser';
 import { tool as uuidGenerator } from './uuid-generator';
+import type { ToolCategory } from './tools.types';
 
 export const toolsByCategory: ToolCategory[] = [
   {
     name: 'Crypto',
-    icon: LockOpen,
     components: [tokenGenerator, hashText, bcrypt, uuidGenerator, cypher, bip39, hmacGenerator],
   },
   {
     name: 'Converter',
-    icon: LockOpen,
     components: [
       dateTimeConverter,
       baseConverter,
@@ -58,7 +56,6 @@ export const toolsByCategory: ToolCategory[] = [
   },
   {
     name: 'Web',
-    icon: LockOpen,
     components: [
       urlEncoder,
       htmlEntities,
@@ -72,27 +69,22 @@ export const toolsByCategory: ToolCategory[] = [
   },
   {
     name: 'Images',
-    icon: LockOpen,
     components: [qrCodeGenerator, svgPlaceholderGenerator],
   },
   {
     name: 'Development',
-    icon: LockOpen,
     components: [gitMemo, randomPortGenerator, crontabGenerator, jsonViewer, sqlPrettify, chmodCalculator],
   },
   {
     name: 'Math',
-    icon: LockOpen,
     components: [mathEvaluator, etaCalculator],
   },
   {
     name: 'Measurement',
-    icon: LockOpen,
     components: [chronometer],
   },
   {
     name: 'Text',
-    icon: LockOpen,
     components: [loremIpsumGenerator, textStatistics],
   },
 ];

src/tools/tool.ts

@@ -1,27 +1,10 @@
 import { config } from '@/config';
-import type { Component } from 'vue';
-
-export interface ITool {
-  name: string;
-  path: string;
-  description: string;
-  keywords: string[];
-  component: () => Promise<Component>;
-  icon: Component;
-  redirectFrom?: string[];
-  isNew: boolean;
-}
-
-export interface ToolCategory {
-  name: string;
-  icon: Component;
-  components: ITool[];
-}
+import type { Tool } from './tools.types';
 
 type WithOptional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
 
 export function defineTool(
-  tool: WithOptional<ITool, 'isNew'>,
+  tool: WithOptional<Tool, 'isNew'>,
   { newTools }: { newTools: string[] } = { newTools: config.tools.newTools },
 ) {
   const isNew = newTools.includes(tool.name);

src/tools/tools.store.ts

@@ -0,0 +1,44 @@
+import { get, useStorage, type MaybeRef } from '@vueuse/core';
+import { defineStore } from 'pinia';
+import type { Ref } from 'vue';
+import { toolsWithCategory } from './index';
+import type { Tool, ToolWithCategory } from './tools.types';
+
+export const useToolStore = defineStore('tools', {
+  state: () => ({
+    favoriteToolsName: useStorage('favoriteToolsName', []) as Ref<string[]>,
+  }),
+  getters: {
+    favoriteTools(state) {
+      return state.favoriteToolsName
+        .map((favoriteName) => toolsWithCategory.find(({ name }) => name === favoriteName))
+        .filter(Boolean) as ToolWithCategory[]; // cast because .filter(Boolean) does not remove undefined from type
+    },
+
+    notFavoriteTools(state): ToolWithCategory[] {
+      return toolsWithCategory.filter((tool) => !state.favoriteToolsName.includes(tool.name));
+    },
+
+    tools(): ToolWithCategory[] {
+      return toolsWithCategory;
+    },
+
+    newTools(): ToolWithCategory[] {
+      return this.tools.filter(({ isNew }) => isNew);
+    },
+  },
+
+  actions: {
+    addToolToFavorites({ tool }: { tool: MaybeRef<Tool> }) {
+      this.favoriteToolsName.push(get(tool).name);
+    },
+
+    removeToolFromFavorites({ tool }: { tool: MaybeRef<Tool> }) {
+      this.favoriteToolsName = this.favoriteToolsName.filter((name) => get(tool).name !== name);
+    },
+
+    isToolFavorite({ tool }: { tool: MaybeRef<Tool> }) {
+      return this.favoriteToolsName.includes(get(tool).name);
+    },
+  },
+});

src/tools/tools.types.ts

@@ -0,0 +1,19 @@
+import type { Component } from 'vue';
+
+export type Tool = {
+  name: string;
+  path: string;
+  description: string;
+  keywords: string[];
+  component: () => Promise<Component>;
+  icon: Component;
+  redirectFrom?: string[];
+  isNew: boolean;
+};
+
+export type ToolCategory = {
+  name: string;
+  components: Tool[];
+};
+
+export type ToolWithCategory = Tool & { category: string };