src/modules/nostr-feed/components/SortTabs.vue

@@ -6,6 +6,13 @@
 
 import { computed } from 'vue'
 import { Flame, Clock, TrendingUp, Swords } from 'lucide-vue-next'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@/components/ui/select'
 import type { SortType, TimeRange } from '../types/submission'
 
 interface Props {
@@ -78,19 +85,23 @@ function selectTimeRange(range: TimeRange) {
     <!-- Time range dropdown (for top) -->
     <template v-if="showTimeDropdown">
       <span class="text-muted-foreground mx-1">·</span>
-      <select
-        :value="currentTimeRange"
-        class="bg-transparent text-sm text-muted-foreground hover:text-foreground cursor-pointer border-none outline-none"
-        @change="selectTimeRange(($event.target as HTMLSelectElement).value as TimeRange)"
+      <Select
+        :model-value="currentTimeRange"
+        @update:model-value="selectTimeRange($event as TimeRange)"
       >
-        <option
-          v-for="range in timeRangeOptions"
-          :key="range.id"
-          :value="range.id"
-        >
-          {{ range.label }}
-        </option>
-      </select>
+        <SelectTrigger class="h-auto w-auto gap-1 border-0 bg-transparent px-1 py-0.5 text-sm text-muted-foreground shadow-none hover:text-foreground focus:ring-0">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem
+            v-for="range in timeRangeOptions"
+            :key="range.id"
+            :value="range.id"
+          >
+            {{ range.label }}
+          </SelectItem>
+        </SelectContent>
+      </Select>
     </template>
   </div>
 </template>