From 31077dbd39a25eecd24a1dca0f8c9d1879265277 Mon Sep 17 00:00:00 2001
From: HsiangNianian <i@jyunko.cn>
Date: Thu, 15 Jan 2026 17:36:36 +0800
Subject: feat: Implement custom dropdown components for version selection in
 BottomBar and ModLoaderSelector, enhancing user interaction and UI
 consistency

---
 ui/src/lib/GameConsole.svelte | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

(limited to 'ui/src/lib/GameConsole.svelte')

diff --git a/ui/src/lib/GameConsole.svelte b/ui/src/lib/GameConsole.svelte
index 1b1ab53..bc5edbc 100644
--- a/ui/src/lib/GameConsole.svelte
+++ b/ui/src/lib/GameConsole.svelte
@@ -6,6 +6,8 @@
   import { invoke } from "@tauri-apps/api/core";
   import { open } from "@tauri-apps/plugin-shell";
   import { onMount, tick } from "svelte";
+  import CustomSelect from "../components/CustomSelect.svelte";
+  import { ChevronDown, Check } from 'lucide-svelte';
 
   let consoleElement: HTMLDivElement;
   let autoScroll = $state(true);
@@ -21,7 +23,10 @@
   let selectedSource = $state("all");
 
   // Get sorted sources for dropdown
-  let sortedSources = $derived([...logsState.sources].sort());
+  let sourceOptions = $derived([
+    { value: "all", label: "All Sources" },
+    ...[...logsState.sources].sort().map(s => ({ value: s, label: s }))
+  ]);
 
   // Derived filtered logs
   let filteredLogs = $derived(logsState.logs.filter((log) => {
@@ -151,15 +156,11 @@
         <h3 class="font-bold text-zinc-100 uppercase tracking-wider px-2">Console</h3>
         
         <!-- Source Dropdown -->
-        <select 
+        <CustomSelect
+            options={sourceOptions}
             bind:value={selectedSource}
-            class="bg-zinc-900 border border-zinc-700 rounded-md px-3 py-1.5 pr-8 text-zinc-300 text-xs focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500/30 cursor-pointer hover:border-zinc-600 transition-colors"
-        >
-            <option value="all">All Sources</option>
-            {#each sortedSources as source}
-                <option value={source}>{source}</option>
-            {/each}
-        </select>
+            class="w-36"
+        />
 
         <!-- Level Filters -->
         <div class="flex items-center bg-[#1e1e1e] rounded border border-[#3e3e42] overflow-hidden">
-- 
cgit v1.2.3-70-g09d2