fix(Search tools): show more tools

In Search of tools, show up to 25 tools (configurable by VITE_MAX_SEARCH_RESULT) and show a scrollbar if needed Fix CorentinTh#1430 (since there are many json related tools)
sharevb · Jan 1, 2025 · 8f6a8e1 · 8f6a8e1
1 parent 08d977b
commit 8f6a8e1
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/src/modules/command-palette/command-palette.store.ts b/src/modules/command-palette/command-palette.store.ts
@@ -11,6 +11,8 @@ import BugIcon from '~icons/mdi/bug-outline';
 import DiceIcon from '~icons/mdi/dice-5';
 import InfoIcon from '~icons/mdi/information-outline';
 
+const maxSearchResultsPerCategory = import.meta.env.VITE_MAX_SEARCH_RESULT || 25;
+
 export const useCommandPaletteStore = defineStore('command-palette', () => {
   const toolStore = useToolStore();
   const styleStore = useStyleStore();
@@ -82,7 +84,7 @@ export const useCommandPaletteStore = defineStore('command-palette', () => {
   });
 
   const filteredSearchResult = computed(() =>
-    _.chain(searchResult.value).groupBy('category').mapValues(categoryOptions => _.take(categoryOptions, 5)).value());
+    _.chain(searchResult.value).groupBy('category').mapValues(categoryOptions => _.take(categoryOptions, maxSearchResultsPerCategory)).value());
 
   return {
     filteredSearchResult,

diff --git a/src/modules/command-palette/command-palette.vue b/src/modules/command-palette/command-palette.vue
@@ -124,7 +124,7 @@ function activateOption(option: PaletteOption) {
       </span>
     </c-button>
 
-    <c-modal v-model:open="isModalOpen" class="palette-modal" shadow-xl important:max-w-650px important:pa-12px @keydown="handleKeydown">
+    <c-modal v-model:open="isModalOpen" class="palette-modal" overflow-y-auto shadow-xl important:max-w-650px pretty-scrollbar important:pa-12px @keydown="handleKeydown">
       <c-input-text ref="inputRef" v-model:value="searchPrompt" raw-text placeholder="Type to search a tool or a command..." autofocus clearable />
 
       <div v-for="(options, category) in filteredSearchResult" :key="category">
@@ -147,6 +147,10 @@ function activateOption(option: PaletteOption) {
   }
 }
 
+::v-deep(.palette-modal) {
+  max-height: 80vh;
+}
+
 .c-modal--overlay {
   align-items: flex-start !important;
   padding-top: 80px;