small stash-search refactoring

renderer/src/web/Config.ts

@@ -3,6 +3,7 @@ import isDeepEqual from 'fast-deep-equal'
 import { Host } from '@/web/background/IPC'
 import { HostConfig, ShortcutAction } from '@ipc/types'
 import type * as widget from './overlay/widgets'
+import type { StashSearchWidget } from './stash-search/widget'
 
 const _config = shallowRef<Config | null>(null)
 let _lastSavedConfig: Config | null = null
@@ -280,7 +281,7 @@ export const defaultConfig = (): Config => ({
         { id: 3, name: '', text: '"Cannot Leech Life"', hotkey: null },
         { id: 4, name: '', text: '"Cannot Leech Mana"', hotkey: null }
       ]
-    } as widget.StashSearchWidget,
+    } as StashSearchWidget,
     {
       wmId: 102,
       wmType: 'stash-search',
@@ -301,7 +302,7 @@ export const defaultConfig = (): Config => ({
         { id: 5, name: '', text: '"Map Device" "Rarity: Normal"', hotkey: null },
         { id: 6, name: '', text: 'Tane Laboratory', hotkey: null }
       ]
-    } as widget.StashSearchWidget,
+    } as StashSearchWidget,
     {
       wmId: 103,
       wmType: 'image-strip',
@@ -540,7 +541,7 @@ function upgradeConfig (_config: Config): Config {
 
   for (const widget of config.widgets) {
     if (widget.wmType === 'stash-search') {
-      (widget as widget.StashSearchWidget).enableHotkeys ??= true
+      (widget as StashSearchWidget).enableHotkeys ??= true
     }
   }
 
@@ -619,7 +620,7 @@ function getConfigForHost (): HostConfig {
   }
   for (const widget of config.widgets) {
     if (widget.wmType === 'stash-search') {
-      const stashSearch = widget as widget.StashSearchWidget
+      const stashSearch = widget as StashSearchWidget
       if (!stashSearch.enableHotkeys) continue
 
       for (const entry of stashSearch.entries) {

renderer/src/web/overlay/widgets.ts

@@ -71,17 +71,6 @@ export interface DelveGridWidget extends Widget {
   toggleKey: string | null
 }
 
-export interface StashSearchWidget extends Widget {
-  anchor: Anchor
-  enableHotkeys: boolean
-  entries: Array<{
-    id: number
-    name: string
-    text: string
-    hotkey: string | null
-  }>
-}
-
 export interface ImageStripWidget extends Widget {
   anchor: Anchor
   images: Array<{

renderer/src/web/stash-search/WidgetStashSearch.vue

@@ -7,11 +7,11 @@
           v-model="config.enableHotkeys">{{ t('stash_search.enable_keys') }}</ui-toggle>
       </div>
       <div class="flex flex-col gap-y-1 overflow-y-auto min-h-0">
-        <button v-for="entry in config.entries" :key="entry.id" @click="stashSearch(entry.text)"
-          class="leading-4 text-gray-100 p-2 rounded text-left bg-gray-800 whitespace-nowrap truncate shrink-0 max-w-sm">
-            {{ entry.name || entry.text }}
-            <span v-if="entry.hotkey && config.enableHotkeys"
-              class="text-center inline-block text-black bg-gray-400 rounded px-1">{{ entry.hotkey }}</span>
+        <button v-for="entry in config.entries" :key="entry.id"
+          @click="stashSearch(entry.text)" :class="$style.searchBtn">
+          <span>{{ entry.name || entry.text }}</span>
+          <span v-if="entry.hotkey && config.enableHotkeys"
+            :class="$style.hotkey">{{ entry.hotkey }}</span>
         </button>
       </div>
     </div>
@@ -23,7 +23,8 @@ import { inject, computed, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { MainProcess } from '@/web/background/IPC'
 import { pushHostConfig } from '@/web/Config'
-import type { WidgetManager, StashSearchWidget } from '../overlay/interfaces.js'
+import type { WidgetManager } from '../overlay/interfaces.js'
+import type { StashSearchWidget } from './widget.js'
 
 import Widget from '../overlay/Widget.vue'
 
@@ -63,3 +64,29 @@ watch(() => props.config.enableHotkeys, () => {
 
 const { t } = useI18n()
 </script>
+
+<style lang="postcss" module>
+.searchBtn {
+  flex-shrink: 0;
+  @apply rounded;
+  @apply max-w-sm;
+  @apply p-2 leading-4;
+  @apply text-gray-100 bg-gray-800;
+  text-align: left;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+
+  &:hover {
+    @apply bg-gray-700;
+  }
+}
+
+.hotkey {
+  text-align: center;
+  display: inline-block;
+  @apply text-black bg-gray-400;
+  @apply rounded;
+  @apply px-1 ml-1;
+}
+</style>

renderer/src/web/stash-search/stash-search-editor.vue

@@ -35,7 +35,7 @@ import { useI18n } from 'vue-i18n'
 import DndContainer from 'vuedraggable'
 import HotkeyInput from '../settings/HotkeyInput.vue'
 import { configProp, configModelValue } from '../settings/utils.js'
-import type { StashSearchWidget } from '@/web/overlay/interfaces'
+import type { StashSearchWidget } from './widget.js'
 
 export default defineComponent({
   name: 'stash_search.name',

renderer/src/web/stash-search/widget.ts

@@ -0,0 +1,12 @@
+import type { Widget, Anchor } from '../overlay/widgets.js'
+
+export interface StashSearchWidget extends Widget {
+  anchor: Anchor
+  enableHotkeys: boolean
+  entries: Array<{
+    id: number
+    name: string
+    text: string
+    hotkey: string | null
+  }>
+}