feat(theme): add ThemeSelector component and update supported themes structure

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@auth/prisma-adapter": "^2.7.4",
+    "@monaco-editor/react": "^4.6.0",
     "@prisma/client": "^6.1.0",
     "@radix-ui/react-avatar": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.4",

src/app/(main)/components/theme-selector.tsx

@@ -0,0 +1,32 @@
+import {
+  Select,
+  SelectItem,
+  SelectValue,
+  SelectContent,
+  SelectTrigger,
+} from "@/components/ui/select";
+import { Palette } from "lucide-react";
+import { SUPPORTED_THEMES } from "@/constants/themes";
+import { useCodeEditorStore } from "@/store/useCodeEditorStore";
+
+export default function ThemeSelector() {
+  const { theme, setTheme } = useCodeEditorStore();
+
+  return (
+    <Select value={theme} onValueChange={setTheme}>
+      <SelectTrigger className="relative ps-9 w-40">
+        <div className="pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 group-has-[[disabled]]:opacity-50">
+          <Palette size={16} strokeWidth={2} aria-hidden="true" />
+        </div>
+        <SelectValue placeholder="Select Theme" />
+      </SelectTrigger>
+      <SelectContent>
+        {SUPPORTED_THEMES.map((theme) => (
+          <SelectItem key={theme.key} value={theme.value}>
+            <span className="truncate">{theme.label}</span>
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}

src/constants/themes.ts

@@ -3,13 +3,24 @@ import { Monaco } from "@monaco-editor/react";
 import { shikiToMonaco } from "@shikijs/monaco";
 import { SUPPORTED_LANGUAGES } from "./languages";
 
-export const SUPPORTED_THEMES = ["vitesse-dark", "vitesse-light"];
+export const SUPPORTED_THEMES = [
+  {
+    key: "vitesse-dark",
+    value: "vitesse-dark",
+    label: "Vitesse Dark",
+  },
+  {
+    key: "vitesse-light",
+    value: "vitesse-light",
+    label: "Vitesse Light",
+  },
+];
 
-export const DEFAULT_THEME = SUPPORTED_THEMES[0];
+export const DEFAULT_THEME = SUPPORTED_THEMES[0].value;
 
 export const highlightMonacoEditor = async (monaco: Monaco) => {
   const highlighter = await createHighlighter({
-    themes: SUPPORTED_THEMES,
+    themes: SUPPORTED_THEMES.map((theme) => theme.key),
     langs: SUPPORTED_LANGUAGES.map((lang) => lang.key),
   });