feat(desktop): add layouts themes and visualizer intensity

- Add layouts D, E, and F with matching window sizes
- Persist music visualizer intensity in settings
- Register aurora and ember themes in the desktop app
- Update the music visualizer to use the new intensity setting

Author: Skeptic-systems

apps/desktop/src-tauri/src/resize.rs

@@ -6,6 +6,8 @@ pub enum Layout {
     B,
     C,
     D,
+    E,
+    F,
     Settings,
     SearchSongs,
     AIDJ,
@@ -18,7 +20,9 @@ pub fn set_layout(window: WebviewWindow, layout: Layout) {
         Layout::A => LogicalSize { width: 500.0, height: 150.0 },
         Layout::B => LogicalSize { width: 400.0, height: 200.0 },
         Layout::C => LogicalSize { width: 400.0, height: 200.0 },
-        Layout::D => LogicalSize { width: 400.0, height: 200.0 },
+        Layout::D => LogicalSize { width: 520.0, height: 236.0 },
+        Layout::E => LogicalSize { width: 400.0, height: 424.0 },
+        Layout::F => LogicalSize { width: 620.0, height: 118.0 },
         Layout::Settings => LogicalSize { width: 800.0, height: 800.0 },
         Layout::SearchSongs => LogicalSize { width: 400.0, height: 600.0 },
         Layout::AIDJ => LogicalSize { width: 400.0, height: 600.0 },

apps/desktop/src-tauri/src/settings.rs

@@ -69,6 +69,8 @@ pub struct Settings {
     pub show_music_visualizer: bool,
     #[serde(default = "default_visualizer_color")]
     pub music_visualizer_color: String,
+    #[serde(default = "default_visualizer_intensity")]
+    pub music_visualizer_intensity: u8,
     #[serde(default)]
     pub last_played_track: Option<LastPlayedTrack>,
 }
@@ -89,6 +91,10 @@ fn default_visualizer_color() -> String {
     "theme".to_string()
 }
 
+fn default_visualizer_intensity() -> u8 {
+    100
+}
+
 #[derive(Serialize, Deserialize, Debug, Clone)]
 pub struct AIProviderConfig {
     pub provider: String,
@@ -111,6 +117,7 @@ impl Default for Settings {
             window_opacity: 100,
             show_music_visualizer: false,
             music_visualizer_color: "theme".into(),
+            music_visualizer_intensity: 100,
             last_played_track: None,
         }
     }

apps/desktop/src/hooks/useWindowLayout.ts

@@ -1,7 +1,17 @@
 import { invoke } from "@tauri-apps/api/core";
 import { useCallback } from "react";
 
-export type Layout = "A" | "B" | "C" | "D" | "Settings" | "SearchSongs" | "AIDJ" | "Volume";
+export type Layout =
+  | "A"
+  | "B"
+  | "C"
+  | "D"
+  | "E"
+  | "F"
+  | "Settings"
+  | "SearchSongs"
+  | "AIDJ"
+  | "Volume";
 
 export default function useWindowLayout() {
   const setLayout = useCallback(async (layout: Layout) => {

apps/desktop/src/lib/settingLib.ts

@@ -92,6 +92,7 @@ export type Settings = {
   window_opacity: number;
   show_music_visualizer: boolean;
   music_visualizer_color: string;
+  music_visualizer_intensity: number;
   last_played_track: LastPlayedTrack | null;
   provider_playback_cache: ProviderPlaybackCache | null;
   youtube_volume: number | null;
@@ -154,6 +155,7 @@ export async function readSettings(): Promise<Settings> {
       window_opacity: settings.window_opacity ?? 100,
       show_music_visualizer: settings.show_music_visualizer ?? false,
       music_visualizer_color: settings.music_visualizer_color ?? "theme",
+      music_visualizer_intensity: settings.music_visualizer_intensity ?? 100,
       last_played_track: settings.last_played_track ?? null,
       provider_playback_cache: settings.provider_playback_cache ?? null,
       youtube_volume: settings.youtube_volume ?? null,
@@ -172,6 +174,7 @@ export async function readSettings(): Promise<Settings> {
       window_opacity: 100,
       show_music_visualizer: false,
       music_visualizer_color: "theme",
+      music_visualizer_intensity: 100,
       last_played_track: null,
       provider_playback_cache: null,
       youtube_volume: null,

apps/desktop/src/loader/themeLoader.ts

@@ -1,8 +1,10 @@
+import aurora from "../themes/aurora.json" with { type: "json" };
 import bmw from "../themes/bmw.json" with { type: "json" };
 import catppuccin from "../themes/catppuccin.json" with { type: "json" };
 import chatgpt from "../themes/chatgpt.json" with { type: "json" };
 import dark from "../themes/dark.json" with { type: "json" };
 import dracula from "../themes/dracula.json" with { type: "json" };
+import ember from "../themes/ember.json" with { type: "json" };
 import light from "../themes/light.json" with { type: "json" };
 import milka from "../themes/milka.json" with { type: "json" };
 import youtube from "../themes/youtube.json" with { type: "json" };
@@ -108,6 +110,8 @@ export const THEMES: Record<string, ThemeConfig> = {
   bmw: transformTheme(bmw),
   youtube: transformTheme(youtube),
   chatgpt: transformTheme(chatgpt),
+  aurora: transformTheme(aurora),
+  ember: transformTheme(ember),
 };
 
 export function applyThemeConfig(t: ThemeConfig): void {

apps/desktop/src/themes/aurora.json

@@ -0,0 +1,55 @@
+{
+  "name": "aurora",
+
+  "panel": {
+    "background": "linear-gradient(160deg, rgba(9, 20, 24, 0.92) 0%, rgba(12, 26, 33, 0.92) 45%, rgba(17, 24, 39, 0.94) 100%)",
+    "borderRadius": 18,
+    "shadow": "0 18px 48px rgba(4, 12, 15, 0.7), 0 0 0 1px rgba(94, 234, 212, 0.08)"
+  },
+
+  "settings": {
+    "panelBg": "rgba(13, 27, 33, 0.6)",
+    "panelBorder": "rgba(94, 234, 212, 0.12)",
+    "text": "#E6FBF6",
+    "textMuted": "rgba(190, 227, 220, 0.68)",
+    "itemHover": "rgba(94, 234, 212, 0.08)",
+    "itemActive": "rgba(94, 234, 212, 0.16)",
+    "accent": "#5EEAD4"
+  },
+
+  "controls": {
+    "iconColor": "#B9F4E8",
+    "iconColorActive": "#FFFFFF",
+    "iconBackground": "transparent",
+    "iconBackgroundHover": "rgba(94, 234, 212, 0.1)"
+  },
+
+  "playbar": {
+    "trackBg": "rgba(148, 233, 218, 0.14)",
+    "trackFill": "linear-gradient(90deg, #34D399 0%, #22D3EE 52%, #A78BFA 100%)",
+    "thumbColor": "#ECFEFF",
+    "timeTextColor": "rgba(174, 224, 216, 0.8)"
+  },
+
+  "typography": {
+    "songTitle": {
+      "color": "#F2FFFB",
+      "weight": 600
+    },
+    "songArtist": {
+      "color": "#6EE7D2",
+      "weight": 400
+    }
+  },
+
+  "actions": {
+    "iconColor": "#A7F3E5",
+    "iconBackground": "rgba(94, 234, 212, 0.06)",
+    "iconBackgroundHover": "rgba(94, 234, 212, 0.14)"
+  },
+
+  "cover": {
+    "borderColor": "rgba(94, 234, 212, 0.35)",
+    "borderRadius": 12
+  }
+}

apps/desktop/src/themes/ember.json

@@ -0,0 +1,55 @@
+{
+  "name": "ember",
+
+  "panel": {
+    "background": "linear-gradient(155deg, rgba(28, 14, 16, 0.93) 0%, rgba(35, 17, 18, 0.93) 50%, rgba(23, 12, 17, 0.94) 100%)",
+    "borderRadius": 18,
+    "shadow": "0 18px 48px rgba(12, 4, 4, 0.72), 0 0 0 1px rgba(251, 146, 60, 0.09)"
+  },
+
+  "settings": {
+    "panelBg": "rgba(38, 19, 20, 0.6)",
+    "panelBorder": "rgba(251, 146, 60, 0.14)",
+    "text": "#FDEDE4",
+    "textMuted": "rgba(234, 200, 186, 0.68)",
+    "itemHover": "rgba(251, 146, 60, 0.09)",
+    "itemActive": "rgba(251, 146, 60, 0.17)",
+    "accent": "#FB923C"
+  },
+
+  "controls": {
+    "iconColor": "#F8C9A6",
+    "iconColorActive": "#FFFFFF",
+    "iconBackground": "transparent",
+    "iconBackgroundHover": "rgba(251, 146, 60, 0.12)"
+  },
+
+  "playbar": {
+    "trackBg": "rgba(251, 191, 160, 0.16)",
+    "trackFill": "linear-gradient(90deg, #F43F5E 0%, #FB923C 55%, #FBBF24 100%)",
+    "thumbColor": "#FFF7ED",
+    "timeTextColor": "rgba(245, 206, 184, 0.82)"
+  },
+
+  "typography": {
+    "songTitle": {
+      "color": "#FFF6EF",
+      "weight": 600
+    },
+    "songArtist": {
+      "color": "#FDBA74",
+      "weight": 400
+    }
+  },
+
+  "actions": {
+    "iconColor": "#FBCFA3",
+    "iconBackground": "rgba(251, 146, 60, 0.07)",
+    "iconBackgroundHover": "rgba(251, 146, 60, 0.16)"
+  },
+
+  "cover": {
+    "borderColor": "rgba(251, 146, 60, 0.38)",
+    "borderRadius": 12
+  }
+}