From 74ce584eff7a2886f778df4364007f12b1512b5e Mon Sep 17 00:00:00 2001
From: Patrick Mulligan <patjmulligan@protonmail.com>
Date: Thu, 1 Jan 2026 20:57:43 +0100
Subject: [PATCH] fix(nostr-feed): Use shadcn-vue Select for time range
 dropdown
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace native HTML select with themed Select component for proper
dark mode support.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../nostr-feed/components/SortTabs.vue        | 35 ++++++++++++-------
 1 file changed, 23 insertions(+), 12 deletions(-)

diff --git a/src/modules/nostr-feed/components/SortTabs.vue b/src/modules/nostr-feed/components/SortTabs.vue
index ff9bb3c..e825b4b 100644
--- a/src/modules/nostr-feed/components/SortTabs.vue
+++ b/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>