Aurora SpotiRip desktop and web app

- Spotify playlist, library, album and artist browsing with in-app playback - Song, playlist and album downloads via spotdl with YouTube and Bandcamp fallbacks - Electron desktop app (castLabs Widevine) with a permanent sidebar layout - Linux and Windows packaging scripts
2026-09-25 23:20:57 -05:00
commit 3178b8f4f7
204 changed files with 26045 additions and 0 deletions
@@ -0,0 +1,92 @@
+"use client";
+
+import React from "react";
+import { Sun, Moon, SunMoon } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "./DropdownMenu";
+import { Button } from "./Button";
+import { useThemeMode, ThemeMode } from "../helpers/themeMode";
+import styles from "./ThemeModeSwitch.module.css";
+
+export interface ThemeModeSwitchProps {
+  className?: string;
+}
+
+export const ThemeModeSwitch = ({ className }: ThemeModeSwitchProps) => {
+  const { mode, switchToLightMode, switchToDarkMode, switchToAutoMode } =
+    useThemeMode();
+
+  const applyThemeMode = (newMode: ThemeMode) => {
+    switch (newMode) {
+      case "light":
+        switchToLightMode();
+        break;
+      case "dark":
+        switchToDarkMode();
+        break;
+      case "auto":
+        switchToAutoMode();
+        break;
+    }
+  };
+
+  const getThemeIcon = () => {
+    switch (mode) {
+      case "light":
+        return <Sun className={styles.icon} />;
+      case "dark":
+        return <Moon className={styles.icon} />;
+      case "auto":
+        return <SunMoon className={styles.icon} />;
+      default:
+        return <Sun className={styles.icon} />;
+    }
+  };
+
+  return (
+    <div className={`${styles.container} ${className || ""}`}>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon-md"
+            aria-label={`Current theme: ${mode}. Click to change theme`}
+            className={styles.themeButton}
+          >
+            {getThemeIcon()}
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuItem
+            className={mode === "light" ? styles.activeItem : ""}
+            onClick={() => applyThemeMode("light")}
+          >
+            <Sun size={16} className={styles.menuIcon} />
+            Light
+            {mode === "light" && <span className={styles.checkmark}>✓</span>}
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            className={mode === "dark" ? styles.activeItem : ""}
+            onClick={() => applyThemeMode("dark")}
+          >
+            <Moon size={16} className={styles.menuIcon} />
+            Dark
+            {mode === "dark" && <span className={styles.checkmark}>✓</span>}
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            className={mode === "auto" ? styles.activeItem : ""}
+            onClick={() => applyThemeMode("auto")}
+          >
+            <SunMoon size={16} className={styles.menuIcon} />
+            Auto
+            {mode === "auto" && <span className={styles.checkmark}>✓</span>}
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+};