feat(command-palette): random tool action

src/modules/command-palette/command-palette.store.ts

@@ -8,10 +8,12 @@ import { useStyleStore } from '@/stores/style.store';
 import SunIcon from '~icons/mdi/white-balance-sunny';
 import GithubIcon from '~icons/mdi/github';
 import BugIcon from '~icons/mdi/bug-outline';
+import DiceIcon from '~icons/mdi/dice-5';
 
 export const useCommandPaletteStore = defineStore('command-palette', () => {
   const toolStore = useToolStore();
   const styleStore = useStyleStore();
+  const router = useRouter();
   const searchPrompt = ref('');
 
   const toolsOptions = toolStore.tools.map(tool => ({
@@ -23,6 +25,18 @@ export const useCommandPaletteStore = defineStore('command-palette', () => {
 
   const searchOptions: PaletteOption[] = [
     ...toolsOptions,
+    {
+      name: 'Random tool',
+      description: 'Get a random tool from the list.',
+      action: () => {
+        const { path } = _.sample(toolStore.tools)!;
+        router.push(path);
+      },
+      icon: DiceIcon,
+      category: 'Tools',
+      keywords: ['random', 'tool', 'pick', 'choose', 'select'],
+      closeOnSelect: true,
+    },
     {
       name: 'Toggle dark mode',
       description: 'Toggle dark mode on or off.',

src/modules/command-palette/command-palette.types.ts

@@ -10,4 +10,5 @@ export interface PaletteOption {
   category: string
   keywords?: string[]
   href?: string
+  closeOnSelect?: boolean
 }

src/modules/command-palette/command-palette.vue

@@ -76,21 +76,37 @@ function getOptionIndex(option: PaletteOption) {
 }
 
 function activateOption(option: PaletteOption) {
+  const { closeOnSelect } = option;
+
   if (option.action) {
     option.action();
+
+    if (closeOnSelect) {
+      close();
+    }
+
     return;
   }
 
+  const closeAfterNavigation = closeOnSelect || _.isUndefined(closeOnSelect);
+
   if (option.to) {
     router.push(option.to);
+
+    if (closeAfterNavigation) {
       close();
     }
+    return;
+  }
 
   if (option.href) {
     window.open(option.href, '_blank');
+
+    if (closeAfterNavigation) {
       close();
     }
   }
+}
 </script>
 
 <template>