public-repos/it-tools
5
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix(Search tools): show more tools

Browse Source 
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)
This commit is contained in:
ShareVB 2025-01-01 13:13:20 +01:00
parent 08d977b8cd
commit 8f6a8e100e
2 changed files with 8 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/modules/command-palette/command-palette.store.ts
View File

@ -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,

6
src/modules/command-palette/command-palette.vue
View File

@ -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;