fix ui

src/components/SortDropdown.vue

@@ -4,6 +4,7 @@ import { computed, onBeforeUnmount, ref } from "vue";
 type Option = {
   label: string;
   value: string;
+  iconSrc?: string | null;
 };
 
 const props = defineProps<{
@@ -63,7 +64,15 @@ onBeforeUnmount(() => {
       type="button"
       @click="toggle"
     >
-      <span>{{ selectedLabel }}</span>
+      <span class="sort-dropdown-trigger-label">
+        <img
+          v-if="options.find((option) => option.value === modelValue)?.iconSrc"
+          class="sort-dropdown-option-icon"
+          :src="options.find((option) => option.value === modelValue)?.iconSrc ?? undefined"
+          :alt="selectedLabel"
+        />
+        <span>{{ selectedLabel }}</span>
+      </span>
       <span class="sort-dropdown-caret" aria-hidden="true"></span>
     </button>
     <div v-if="open" class="sort-dropdown-menu">
@@ -75,7 +84,15 @@ onBeforeUnmount(() => {
         type="button"
         @click="select(option.value)"
       >
-        {{ option.label }}
+        <span class="sort-dropdown-option-content">
+          <img
+            v-if="option.iconSrc"
+            class="sort-dropdown-option-icon"
+            :src="option.iconSrc"
+            :alt="option.label"
+          />
+          <span>{{ option.label }}</span>
+        </span>
       </button>
     </div>
   </div>

src/components/config/ConfigurationView.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { computed, ref } from "vue";
+import SortDropdown from "../SortDropdown.vue";
 import { browserIconOptions, browserIconSrc } from "../../utils/icons";
 import type { BrowserConfigEntry, CreateCustomBrowserConfigInput } from "../../types/browser";
 
@@ -22,6 +24,16 @@ const emit = defineEmits<{
   createConfig: [];
   deleteConfig: [configId: string];
 }>();
+
+const formExpanded = ref(false);
+
+const iconOptions = computed(() =>
+  browserIconOptions.map((option) => ({
+    label: option.label,
+    value: option.key,
+    iconSrc: option.src,
+  })),
+);
 </script>
 
 <template>
@@ -32,12 +44,21 @@ const emit = defineEmits<{
       </div>
 
       <div class="config-form-card">
-        <div class="config-form-header">
-          <h3>Add Custom Browser</h3>
-          <p>Provide a name, executable path, and Chromium user data path.</p>
+        <div class="config-form-header collapsible">
+          <div>
+            <h3>Add Custom Browser</h3>
+            <p>Add a custom executable and Chromium user data path when needed.</p>
+          </div>
+          <button
+            class="secondary-button config-toggle-button"
+            type="button"
+            @click="formExpanded = !formExpanded"
+          >
+            {{ formExpanded ? "Collapse" : "Expand" }}
+          </button>
         </div>
-        <div class="config-form-layout">
-          <div class="config-form-fields">
+        <div v-if="formExpanded" class="config-form-fields compact">
+          <div class="config-inline-row">
             <label class="field-group">
               <span>Name</span>
               <input
@@ -47,61 +68,54 @@ const emit = defineEmits<{
               />
             </label>
             <label class="field-group">
-              <span>Executable Path</span>
-              <div class="path-input-row">
-                <input
-                  :value="createConfigForm.executablePath"
-                  placeholder="C:\Program Files\...\chrome.exe"
-                  @input="emit('updateExecutablePath', ($event.target as HTMLInputElement).value)"
-                />
-                <button class="secondary-button" type="button" @click="emit('pickExecutablePath')">
-                  Browse File
-                </button>
-              </div>
-            </label>
-            <label class="field-group">
-              <span>User Data Path</span>
-              <div class="path-input-row">
-                <input
-                  :value="createConfigForm.userDataPath"
-                  placeholder="C:\Users\...\User Data"
-                  @input="emit('updateUserDataPath', ($event.target as HTMLInputElement).value)"
-                />
-                <button class="secondary-button" type="button" @click="emit('pickUserDataPath')">
-                  Browse Folder
-                </button>
-              </div>
+              <span>Icon</span>
+              <SortDropdown
+                :model-value="createConfigForm.iconKey ?? 'chrome'"
+                :options="iconOptions"
+                @update:model-value="emit('updateIconKey', $event)"
+              />
             </label>
           </div>
-          <div class="config-form-side">
-            <label class="field-group">
-              <span>Icon</span>
-              <div class="icon-option-grid">
-                <button
-                  v-for="option in browserIconOptions"
-                  :key="option.key"
-                  class="icon-option-button"
-                  :class="{ active: createConfigForm.iconKey === option.key }"
-                  type="button"
-                  @click="emit('updateIconKey', option.key)"
-                >
-                  <img :src="option.src" :alt="option.label" />
-                  <span>{{ option.label }}</span>
-                </button>
-              </div>
-            </label>
-            <div class="config-form-actions">
-              <button
-                class="primary-button"
-                type="button"
-                :disabled="savingConfig"
-                @click="emit('createConfig')"
-              >
-                {{ savingConfig ? "Saving..." : "Add Config" }}
+          <label class="field-group">
+            <span>Executable Path</span>
+            <div class="path-input-row">
+              <input
+                :value="createConfigForm.executablePath"
+                placeholder="C:\Program Files\...\chrome.exe"
+                @input="emit('updateExecutablePath', ($event.target as HTMLInputElement).value)"
+              />
+              <button class="secondary-button" type="button" @click="emit('pickExecutablePath')">
+                Browse File
               </button>
             </div>
+          </label>
+          <label class="field-group">
+            <span>User Data Path</span>
+            <div class="path-input-row">
+              <input
+                :value="createConfigForm.userDataPath"
+                placeholder="C:\Users\...\User Data"
+                @input="emit('updateUserDataPath', ($event.target as HTMLInputElement).value)"
+              />
+              <button class="secondary-button" type="button" @click="emit('pickUserDataPath')">
+                Browse Folder
+              </button>
+            </div>
+          </label>
+          <div class="config-form-actions">
+            <button
+              class="primary-button"
+              type="button"
+              :disabled="savingConfig"
+              @click="emit('createConfig')"
+            >
+              {{ savingConfig ? "Saving..." : "Add Config" }}
+            </button>
           </div>
         </div>
+        <div v-else class="config-form-collapsed-note">
+          <span>Collapsed by default to keep this page focused on existing configs.</span>
+        </div>
       </div>
 
       <div v-if="configsLoading" class="empty-card">