From 473e45c55bdad01de5da32405d56c1277c3b5383 Mon Sep 17 00:00:00 2001
From: arabcoders <admin@arabcoders.org>
Date: Mon, 8 Jun 2026 08:55:08 +0300
Subject: [PATCH] refactor: use list with filtering for preset menus

---
 ui/app/components/NewDownload.vue |  6 ++++--
 ui/app/components/PresetForm.vue  |  6 ++++--
 ui/app/components/Simple.vue      | 10 ++++------
 ui/app/components/TaskForm.vue    |  6 ++++--
 ui/app/components/TaskInspect.vue |  7 +++++--
 5 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/ui/app/components/NewDownload.vue b/ui/app/components/NewDownload.vue
index 39123242..d1d8f54d 100644
--- a/ui/app/components/NewDownload.vue
+++ b/ui/app/components/NewDownload.vue
@@ -103,15 +103,17 @@
                   />
 
                   <div class="min-w-0 flex-1">
-                    <USelect
+                    <USelectMenu
                       id="preset"
                       v-model="form.preset"
                       :items="presetItems"
                       value-key="value"
                       label-key="label"
+                      color="neutral"
                       class="w-full"
                       size="lg"
-                      :ui="{ base: 'w-full', content: 'min-w-[13rem]' }"
+                      :ui="{ content: 'min-w-[13rem]', item: 'pl-6' }"
+                      :search-input="{ placeholder: 'Search presets' }"
                       :disabled="addInProgress || hasFormatInConfig"
                       placeholder="Select preset"
                     />
diff --git a/ui/app/components/PresetForm.vue b/ui/app/components/PresetForm.vue
index bb6f6aa4..951ee1e3 100644
--- a/ui/app/components/PresetForm.vue
+++ b/ui/app/components/PresetForm.vue
@@ -30,15 +30,17 @@
             </span>
           </template>
 
-          <USelect
+          <USelectMenu
             v-model="selectedPreset"
             :items="importPresetItems"
             placeholder="Select a preset"
             value-key="value"
             label-key="label"
+            color="neutral"
             size="lg"
             class="w-full"
-            :ui="{ base: 'w-full' }"
+            :ui="{ content: 'min-w-[13rem]', item: 'pl-6' }"
+            :search-input="{ placeholder: 'Search presets' }"
             @update:model-value="() => void importExistingPreset()"
           />
         </UFormField>
diff --git a/ui/app/components/Simple.vue b/ui/app/components/Simple.vue
index 19e17b97..446366d5 100644
--- a/ui/app/components/Simple.vue
+++ b/ui/app/components/Simple.vue
@@ -122,15 +122,17 @@
                     </span>
                   </template>
 
-                  <USelect
+                  <USelectMenu
                     id="preset"
                     v-model="formPreset"
                     :items="presetItems"
                     value-key="value"
                     label-key="label"
+                    color="neutral"
                     size="lg"
                     class="w-full"
-                    :ui="selectUi"
+                    :ui="{ content: 'min-w-[13rem]', item: 'pl-6' }"
+                    :search-input="{ placeholder: 'Search presets' }"
                     :disabled="isFormDisabled"
                     placeholder="Select preset"
                   />
@@ -773,10 +775,6 @@ const urlInputUi = {
   base: 'bg-elevated/60 ring-default focus-visible:ring-primary',
 };
 
-const selectUi = {
-  base: 'w-full',
-};
-
 const historyPagination = computed(() => pagination.value);
 const historyIsLoading = computed(() => isLoading.value);
 const queueItems = computed<StoreItem[]>(() => Object.values(stateStore.queue));
diff --git a/ui/app/components/TaskForm.vue b/ui/app/components/TaskForm.vue
index 5f0c9c4f..1099cb8f 100644
--- a/ui/app/components/TaskForm.vue
+++ b/ui/app/components/TaskForm.vue
@@ -247,17 +247,19 @@
                   : undefined
               "
             >
-              <USelect
+              <USelectMenu
                 id="preset"
                 v-model="form.preset"
                 :items="presetItems"
                 value-key="value"
                 label-key="label"
+                color="neutral"
                 :disabled="addInProgress || hasFormatInConfig"
                 placeholder="Select preset"
                 size="lg"
                 class="w-full"
-                :ui="{ base: 'w-full' }"
+                :ui="{ content: 'min-w-[13rem]', item: 'pl-6' }"
+                :search-input="{ placeholder: 'Search presets' }"
               />
             </UTooltip>
           </UFormField>
diff --git a/ui/app/components/TaskInspect.vue b/ui/app/components/TaskInspect.vue
index ad46702d..184ef856 100644
--- a/ui/app/components/TaskInspect.vue
+++ b/ui/app/components/TaskInspect.vue
@@ -29,15 +29,18 @@
           :ui="fieldUi"
           description="Select a preset to apply its settings during inspection. In real scenario, the preset will be based on what is selected when creating the task."
         >
-          <USelect
+          <USelectMenu
             id="preset"
             v-model="preset"
             :items="presetItems"
             placeholder="Select a preset"
             value-key="value"
             label-key="label"
+            color="neutral"
             class="w-full"
-            :ui="inputUi"
+            size="lg"
+            :ui="{ content: 'min-w-[13rem]', item: 'pl-6' }"
+            :search-input="{ placeholder: 'Search presets' }"
             :disabled="loading"
           />
         </UFormField>