From 8f6a8e100e101b76fa1939a2baedf19e4a05facc Mon Sep 17 00:00:00 2001
From: ShareVB <sharevb@gmail.com>
Date: Wed, 1 Jan 2025 13:13:20 +0100
Subject: [PATCH] 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 #1430 (since there are many json related tools)
---
 src/modules/command-palette/command-palette.store.ts | 4 +++-
 src/modules/command-palette/command-palette.vue      | 6 +++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/modules/command-palette/command-palette.store.ts b/src/modules/command-palette/command-palette.store.ts
index 1022d26f..e75076b6 100644
--- 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
index bceef5cd..4b86cd26 100644
--- 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;