fix ui

src/App.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import SortDropdown from "./components/SortDropdown.vue";
 import { useBrowserAssistant } from "./features/browser-assistant/useBrowserAssistant";
 
 const {
@@ -109,14 +110,15 @@ const {
         <div class="content-scroll-area">
           <section v-if="activeSection === 'profiles'" class="content-section">
             <div class="sort-bar">
-              <label class="sort-control">
+              <SortDropdown
-                <span>Sort by</span>
+                v-model="profileSortKey"
-                <select v-model="profileSortKey">
+                label="Sort by"
-                  <option value="name">Name</option>
+                :options="[
-                  <option value="email">Email</option>
+                  { label: 'Name', value: 'name' },
-                  <option value="id">Profile ID</option>
+                  { label: 'Email', value: 'email' },
-                </select>
+                  { label: 'Profile ID', value: 'id' },
-              </label>
+                ]"
+              />
             </div>
 
             <div v-if="sortedProfiles.length" class="stack-list">
@@ -149,13 +151,14 @@ const {
 
           <section v-else-if="activeSection === 'extensions'" class="content-section">
             <div class="sort-bar">
-              <label class="sort-control">
+              <SortDropdown
-                <span>Sort by</span>
+                v-model="extensionSortKey"
-                <select v-model="extensionSortKey">
+                label="Sort by"
-                  <option value="name">Name</option>
+                :options="[
-                  <option value="id">Extension ID</option>
+                  { label: 'Name', value: 'name' },
-                </select>
+                  { label: 'Extension ID', value: 'id' },
-              </label>
+                ]"
+              />
             </div>
 
             <div v-if="sortedExtensions.length" class="stack-list">
@@ -212,13 +215,14 @@ const {
 
           <section v-else class="content-section">
             <div class="sort-bar">
-              <label class="sort-control">
+              <SortDropdown
-                <span>Sort by</span>
+                v-model="bookmarkSortKey"
-                <select v-model="bookmarkSortKey">
+                label="Sort by"
-                  <option value="title">Name</option>
+                :options="[
-                  <option value="url">URL</option>
+                  { label: 'Name', value: 'title' },
-                </select>
+                  { label: 'URL', value: 'url' },
-              </label>
+                ]"
+              />
             </div>
 
             <div v-if="sortedBookmarks.length" class="bookmark-list">

src/components/SortDropdown.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref } from "vue";
+
+type Option = {
+  label: string;
+  value: string;
+};
+
+const props = defineProps<{
+  label?: string;
+  modelValue: string;
+  options: Option[];
+}>();
+
+const emit = defineEmits<{
+  "update:modelValue": [value: string];
+}>();
+
+const open = ref(false);
+const root = ref<HTMLElement | null>(null);
+
+const selectedLabel = computed(
+  () =>
+    props.options.find((option) => option.value === props.modelValue)?.label ??
+    props.options[0]?.label ??
+    "",
+);
+
+function toggle() {
+  open.value = !open.value;
+}
+
+function select(value: string) {
+  emit("update:modelValue", value);
+  open.value = false;
+}
+
+function handleDocumentPointer(event: PointerEvent) {
+  if (!root.value) return;
+  const target = event.target;
+  if (target instanceof Node && !root.value.contains(target)) {
+    open.value = false;
+  }
+}
+
+if (typeof window !== "undefined") {
+  window.addEventListener("pointerdown", handleDocumentPointer);
+}
+
+onBeforeUnmount(() => {
+  if (typeof window !== "undefined") {
+    window.removeEventListener("pointerdown", handleDocumentPointer);
+  }
+});
+</script>
+
+<template>
+  <div ref="root" class="sort-dropdown">
+    <span v-if="label" class="sort-dropdown-label">{{ label }}</span>
+    <button
+      class="sort-dropdown-trigger"
+      :class="{ open }"
+      type="button"
+      @click="toggle"
+    >
+      <span>{{ selectedLabel }}</span>
+      <span class="sort-dropdown-caret" aria-hidden="true"></span>
+    </button>
+    <div v-if="open" class="sort-dropdown-menu">
+      <button
+        v-for="option in options"
+        :key="option.value"
+        class="sort-dropdown-option"
+        :class="{ active: option.value === modelValue }"
+        type="button"
+        @click="select(option.value)"
+      >
+        {{ option.label }}
+      </button>
+    </div>
+  </div>
+</template>

src/styles.css

@@ -295,22 +295,100 @@ button {
   margin-bottom: 12px;
 }
 
-.sort-control {
+.sort-dropdown {
   display: inline-flex;
   align-items: center;
   gap: 8px;
+  position: relative;
+}
+
+.sort-dropdown-label {
   color: var(--muted);
   font-size: 0.84rem;
 }
 
-.sort-control select {
+.sort-dropdown-trigger {
-  min-width: 132px;
+  display: inline-flex;
-  padding: 7px 28px 7px 10px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+  min-width: 152px;
+  padding: 7px 10px;
   border: 1px solid rgba(148, 163, 184, 0.26);
   border-radius: 10px;
-  background: rgba(255, 255, 255, 0.9);
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(241, 245, 249, 0.92));
   color: var(--text);
-  outline: none;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
+  cursor: pointer;
+  transition:
+    border-color 160ms ease,
+    box-shadow 160ms ease,
+    background 160ms ease;
+}
+
+.sort-dropdown-trigger:hover {
+  border-color: rgba(100, 116, 139, 0.36);
+}
+
+.sort-dropdown-trigger.open {
+  border-color: rgba(47, 111, 237, 0.42);
+  box-shadow:
+    0 0 0 3px rgba(47, 111, 237, 0.12),
+    inset 0 1px 0 rgba(255, 255, 255, 0.8);
+}
+
+.sort-dropdown-caret {
+  width: 10px;
+  height: 10px;
+  flex-shrink: 0;
+  border-right: 1.8px solid #64748b;
+  border-bottom: 1.8px solid #64748b;
+  transform: rotate(45deg) translateY(-1px);
+  transition: transform 160ms ease;
+}
+
+.sort-dropdown-trigger.open .sort-dropdown-caret {
+  transform: rotate(-135deg) translate(-2px, -2px);
+}
+
+.sort-dropdown-menu {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  z-index: 30;
+  min-width: 100%;
+  padding: 6px;
+  border: 1px solid rgba(148, 163, 184, 0.22);
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.98);
+  box-shadow:
+    0 20px 40px rgba(15, 23, 42, 0.14),
+    inset 0 1px 0 rgba(255, 255, 255, 0.75);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+}
+
+.sort-dropdown-option {
+  display: block;
+  width: 100%;
+  padding: 10px 12px;
+  border-radius: 10px;
+  text-align: left;
+  color: var(--text);
+  background: transparent;
+  cursor: pointer;
+  transition:
+    background 140ms ease,
+    color 140ms ease;
+}
+
+.sort-dropdown-option:hover {
+  background: rgba(241, 245, 249, 0.92);
+}
+
+.sort-dropdown-option.active {
+  color: #fff;
+  background: linear-gradient(135deg, #213f75, #325ca8);
 }
 
 .section-tabs {
@@ -516,6 +594,36 @@ button {
   align-self: stretch;
 }
 
+.browser-nav,
+.content-scroll-area {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(100, 116, 139, 0.42) transparent;
+}
+
+.browser-nav::-webkit-scrollbar,
+.content-scroll-area::-webkit-scrollbar {
+  width: 10px;
+}
+
+.browser-nav::-webkit-scrollbar-track,
+.content-scroll-area::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.browser-nav::-webkit-scrollbar-thumb,
+.content-scroll-area::-webkit-scrollbar-thumb {
+  border: 3px solid transparent;
+  border-radius: 999px;
+  background: linear-gradient(180deg, rgba(148, 163, 184, 0.72), rgba(100, 116, 139, 0.58));
+  background-clip: padding-box;
+}
+
+.browser-nav::-webkit-scrollbar-thumb:hover,
+.content-scroll-area::-webkit-scrollbar-thumb:hover {
+  background: linear-gradient(180deg, rgba(100, 116, 139, 0.82), rgba(71, 85, 105, 0.72));
+  background-clip: padding-box;
+}
+
 .state-panel.error {
   background: linear-gradient(180deg, rgba(254, 242, 242, 0.92), rgba(255, 255, 255, 0.86));
 }
@@ -545,14 +653,13 @@ button {
     justify-content: stretch;
   }
 
-  .sort-control {
+  .sort-dropdown {
     width: 100%;
-    justify-content: space-between;
   }
 
-  .sort-control select {
+  .sort-dropdown-trigger {
     min-width: 0;
-    width: 160px;
+    width: 100%;
   }
 
   .profile-card,