revert: Dark mode

* revert: Dark mode

* Fix

packages/api/src/index.ts

@@ -1,11 +1,12 @@
 import { Elysia, t } from "elysia";
 import { cors } from "@elysiajs/cors";
-import { swagger, onAfterHandle } from "./swagger";
+import { swagger } from "@elysiajs/swagger";
 import { addTranscodeJob, addPackageJob } from "@mixwave/artisan/producer";
 import {
   LangCodeSchema,
   VideoCodecSchema,
   AudioCodecSchema,
+  scalarCustomCss,
 } from "@mixwave/shared";
 import { env } from "./env";
 import { getJob, getJobs, getJobLogs } from "./jobs";
@@ -16,7 +17,23 @@ export type App = typeof app;
 
 const app = new Elysia()
   .use(cors())
-  .use(swagger)
+  .use(
+    swagger({
+      documentation: {
+        info: {
+          title: "Mixwave API",
+          description:
+            "The Mixwave API is organized around REST, returns JSON-encoded responses " +
+            "and uses standard HTTP response codes and verbs.",
+          version: "1.0.0",
+        },
+      },
+      scalarConfig: {
+        hideDownloadButton: true,
+        customCss: scalarCustomCss,
+      },
+    }),
+  )
   .model({
     LangCode: LangCodeSchema,
     VideoCodec: VideoCodecSchema,
@@ -260,8 +277,6 @@ const app = new Elysia()
     },
   );
 
-app.onAfterHandle(onAfterHandle);
-
 app.on("stop", () => {
   process.exit(0);
 });

packages/dashboard/src/App.tsx

@@ -12,7 +12,6 @@ import { Suspense } from "react";
 import { Toaster } from "@/components/ui/toaster";
 import { PlayerPage } from "./pages/PlayerPage";
 import { StoragePage } from "./pages/StoragePage";
-import { ThemeProvider } from "@/components/ui/theme-provider";
 
 const queryClient = new QueryClient();
 
@@ -51,13 +50,11 @@ const router = createBrowserRouter([
 
 export function App() {
   return (
-    <ThemeProvider defaultTheme="light" storageKey="vite-ui-theme">
-      <QueryClientProvider client={queryClient}>
-        <Suspense>
-          <RouterProvider router={router} />
-        </Suspense>
-        <Toaster />
-      </QueryClientProvider>
-    </ThemeProvider>
+    <QueryClientProvider client={queryClient}>
+      <Suspense>
+        <RouterProvider router={router} />
+      </Suspense>
+      <Toaster />
+    </QueryClientProvider>
   );
 }

packages/dashboard/src/components/Editor.tsx

@@ -1,6 +1,5 @@
 import MonacoEditor from "@monaco-editor/react";
 import { useEffect, useState } from "react";
-import { useTheme } from "@/components/ui/theme-provider";
 import type { BeforeMount, OnChange, OnMount } from "@monaco-editor/react";
 
 type EditorProps = {
@@ -16,9 +15,6 @@ export function Editor({
   onSave,
   localStorageKey,
 }: EditorProps) {
-  const { theme } = useTheme();
-  const style = useMonacoStyle();
-
   const [defaultValue] = useState(() => {
     const localStorageValue = localStorageKey
       ? localStorage.getItem(localStorageKey)
@@ -58,14 +54,8 @@ export function Editor({
 
   return (
     <div className="h-full flex flex-col">
-      <div
-        className="border-b flex px-4"
-        style={{ height: "calc(3.5rem + 4px)" }}
-      >
-        <div className="flex items-center">{title}</div>
-      </div>
-      <div className="h-full relative">
-        {style}
+      <div className="flex h-14 items-center border-b px-4">{title}</div>
+      <div className="grow relative">
         <MonacoEditor
           className="absolute inset-0"
           defaultLanguage="json"
@@ -74,8 +64,8 @@ export function Editor({
           onMount={onMount}
           onChange={onChange}
           defaultPath="custom"
-          theme={theme === "dark" ? "vs-dark" : "light"}
           options={{
+            wordWrap: "on",
             minimap: {
               enabled: false,
             },
@@ -86,18 +76,3 @@ export function Editor({
     </div>
   );
 }
-
-function useMonacoStyle() {
-  const { theme } = useTheme();
-
-  if (theme === "dark") {
-    return (
-      <style>{`
-       .monaco-editor, .monaco-editor-background { background-color: inherit; }
-       .monaco-editor .margin { background-color: inherit; }  
-    `}</style>
-    );
-  }
-
-  return null;
-}

packages/dashboard/src/components/JobState.tsx

@@ -8,31 +8,18 @@ import type { Job } from "@/api";
 
 export function JobState({ state }: { state: Job["state"] }) {
   if (state === "completed") {
-    return createCircle(
-      "bg-emerald-200 text-emerald-800 dark:bg-emerald-400",
-      Check,
-    );
+    return createCircle("bg-emerald-200 text-emerald-800", Check);
   }
   if (state === "failed") {
-    return createCircle("bg-red-200 text-red-800 dark:bg-red-400", X);
+    return createCircle("bg-red-200 text-red-800", X);
   }
   if (state === "running") {
-    return createCircle(
-      "bg-blue-200 text-blue-800 dark:bg-blue-400",
-      Loader,
-      "animate-spin",
-    );
+    return createCircle("bg-blue-200 text-blue-800", Loader, "animate-spin");
   }
   if (state === "skipped") {
-    return createCircle(
-      "bg-gray-200 text-gray-800 dark:bg-gray-400",
-      CircleOff,
-    );
+    return createCircle("bg-gray-200 text-gray-800", CircleOff);
   }
-  return createCircle(
-    "bg-violet-200 text-violet-800 dark:bg-gray-400",
-    CircleDotDashed,
-  );
+  return createCircle("bg-violet-200 text-violet-800", CircleDotDashed);
 }
 
 function createCircle(

packages/dashboard/src/components/JsonHighlight.tsx

@@ -1,8 +1,10 @@
 import { useMemo } from "react";
 import { Light as SyntaxHighlighter } from "react-syntax-highlighter";
 import json from "react-syntax-highlighter/dist/esm/languages/hljs/json";
-import { useTheme } from "@/components/ui/theme-provider";
-import { styleLight, styleDark } from "@/lib/syntax-styles";
+import style from "react-syntax-highlighter/dist/esm/styles/hljs/stackoverflow-light";
+
+style["hljs"].padding = "1rem";
+delete style["hljs"].background;
 
 SyntaxHighlighter.registerLanguage("json", json);
 
@@ -11,8 +13,6 @@ type SyntaxHighlightProps = {
 };
 
 export function JsonHighlight({ json }: SyntaxHighlightProps) {
-  const { theme } = useTheme();
-
   const data = useMemo(() => {
     const parsed = JSON.parse(json);
     return JSON.stringify(parsed, null, 2);
@@ -21,7 +21,7 @@ export function JsonHighlight({ json }: SyntaxHighlightProps) {
   return (
     <SyntaxHighlighter
       className="rounded-md text-xs border border-border"
-      style={theme === "dark" ? styleDark : styleLight}
+      style={style}
       language="json"
     >
       {data}

packages/dashboard/src/components/Sidebar.tsx

@@ -5,7 +5,6 @@ import Rows3 from "lucide-react/icons/rows-3";
 import Sailboat from "lucide-react/icons/sailboat";
 import Play from "lucide-react/icons/play";
 import Box from "lucide-react/icons/box";
-import { ModeToggle } from "@/components/ui/mode-toggle";
 import { SidebarNavLink } from "./SidebarNavLink";
 
 export function Sidebar() {
@@ -41,9 +40,6 @@ export function Sidebar() {
           </SidebarNavLink>
         </nav>
       </div>
-      <div className="p-4 flex justify-end">
-        <ModeToggle />
-      </div>
     </div>
   );
 }