From 462eb4b2247c3ade49a3b388d82ff31bb123d5d6 Mon Sep 17 00:00:00 2001
From: DuroCodes <davidwright13503@gmail.com>
Date: Mon, 21 Apr 2025 18:21:58 -0400
Subject: [PATCH] feat: hoverable dropdowns

---
 src/components/header.tsx            | 2 ++
 src/components/monaco-editor.tsx     | 3 +--
 src/components/searchable-select.tsx | 3 +++
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/header.tsx b/src/components/header.tsx
index 5929632..8da0f3d 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -33,6 +33,7 @@ export function Header() {
           placeholder="language"
           value={language}
           onValueChange={setLanguage}
+          onPreview={setLanguage}
           className="w-full sm:w-40"
         />
         <SearchableSelect
@@ -43,6 +44,7 @@ export function Header() {
           placeholder="theme"
           value={theme}
           onValueChange={setTheme}
+          onPreview={setTheme}
           className="w-full sm:w-52"
         />
       </div>
diff --git a/src/components/monaco-editor.tsx b/src/components/monaco-editor.tsx
index ef77cda..6bb4255 100644
--- a/src/components/monaco-editor.tsx
+++ b/src/components/monaco-editor.tsx
@@ -41,8 +41,7 @@ export function MonacoEditor() {
         tsx: "react",
       });
 
-      // TODO: find a better way to do this
-      setTimeout(() => setIsLoading(false), 100);
+      setIsLoading(false);
     } catch (error) {
       console.error("Failed to initialize editor:", error);
       setIsLoading(false);
diff --git a/src/components/searchable-select.tsx b/src/components/searchable-select.tsx
index 8905900..d7d3605 100644
--- a/src/components/searchable-select.tsx
+++ b/src/components/searchable-select.tsx
@@ -24,6 +24,7 @@ interface SearchableSelectProps {
   emptyMessage?: string;
   value?: string;
   onValueChange?: (value: string) => void;
+  onPreview?: (value: string) => void;
   disabled?: boolean;
   className?: string;
 }
@@ -35,6 +36,7 @@ export function SearchableSelect({
   emptyMessage = "no results found",
   value,
   onValueChange,
+  onPreview,
   disabled = false,
   className,
 }: SearchableSelectProps) {
@@ -103,6 +105,7 @@ export function SearchableSelect({
                       "bg-accent text-accent-foreground",
                   )}
                   onClick={() => handleSelect(option.value)}
+                  onMouseEnter={() => onPreview?.(option.value)}
                 >
                   {option.label}
                 </div>