feat: hoverable dropdowns

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>

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);

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>