feat: Theme engine

big changes

toju-app/src/app/features/settings/settings-modal/settings-modal.component.ts

@@ -5,6 +5,7 @@ import {
   signal,
   computed,
   effect,
+  untracked,
   HostListener,
   viewChild
 } from '@angular/core';
@@ -19,6 +20,7 @@ import {
   lucideDownload,
   lucideGlobe,
   lucideAudioLines,
+  lucidePalette,
   lucideSettings,
   lucideUsers,
   lucideBan,
@@ -43,6 +45,7 @@ import { PermissionsSettingsComponent } from './permissions-settings/permissions
 import { DebuggingSettingsComponent } from './debugging-settings/debugging-settings.component';
 import { UpdatesSettingsComponent } from './updates-settings/updates-settings.component';
 import { THIRD_PARTY_LICENSES, type ThirdPartyLicense } from './third-party-licenses';
+import { ThemeLibraryService, ThemeService } from '../../../domains/theme';
 
 @Component({
   selector: 'app-settings-modal',
@@ -70,6 +73,7 @@ import { THIRD_PARTY_LICENSES, type ThirdPartyLicense } from './third-party-lice
       lucideDownload,
       lucideGlobe,
       lucideAudioLines,
+      lucidePalette,
       lucideSettings,
       lucideUsers,
       lucideBan,
@@ -82,6 +86,8 @@ export class SettingsModalComponent {
   readonly modal = inject(SettingsModalService);
   private store = inject(Store);
   private webrtc = inject(RealtimeSessionFacade);
+  private theme = inject(ThemeService);
+  private themeLibrary = inject(ThemeLibraryService);
   readonly thirdPartyLicenses: readonly ThirdPartyLicense[] = THIRD_PARTY_LICENSES;
   private lastRequestedServerId: string | null = null;
 
@@ -93,11 +99,22 @@ export class SettingsModalComponent {
 
   isOpen = this.modal.isOpen;
   activePage = this.modal.activePage;
+  themeStudioFullscreen = this.modal.themeStudioFullscreen;
+  themeStudioMinimized = this.modal.themeStudioMinimized;
+  isThemeStudioFullscreen = computed(() => this.activePage() === 'theme' && this.themeStudioFullscreen());
+  activeThemeName = this.theme.activeThemeName;
+  savedThemesAvailable = this.themeLibrary.isAvailable;
+  savedThemes = this.themeLibrary.entries;
+  savedThemesBusy = this.themeLibrary.isBusy;
+  selectedSavedTheme = this.themeLibrary.selectedEntry;
 
   readonly globalPages: { id: SettingsPage; label: string; icon: string }[] = [
     { id: 'general',
       label: 'General',
       icon: 'lucideSettings' },
+    { id: 'theme',
+      label: 'Theme Studio',
+      icon: 'lucidePalette' },
     { id: 'network',
       label: 'Network',
       icon: 'lucideGlobe' },
@@ -220,6 +237,16 @@ export class SettingsModalComponent {
       this.animating.set(true);
     });
 
+    effect(() => {
+      if (!this.isOpen() || this.activePage() !== 'theme' || !this.savedThemesAvailable()) {
+        return;
+      }
+
+      untracked(() => {
+        void this.refreshSavedThemes();
+      });
+    });
+
     effect(() => {
       const server = this.selectedServer();
 
@@ -280,6 +307,11 @@ export class SettingsModalComponent {
       return;
     }
 
+    if (this.isThemeStudioFullscreen()) {
+      this.modal.minimizeThemeStudio();
+      return;
+    }
+
     if (this.isOpen()) {
       this.close();
     }
@@ -303,6 +335,40 @@ export class SettingsModalComponent {
     this.modal.navigate(page);
   }
 
+  openThemeStudio(): void {
+    this.modal.openThemeStudio();
+  }
+
+  async refreshSavedThemes(): Promise<void> {
+    await this.themeLibrary.refresh();
+    this.syncSavedThemeSelectionToActiveTheme();
+  }
+
+  async onSavedThemeSelect(event: Event): Promise<void> {
+    const select = event.target as HTMLSelectElement;
+    const fileName = select.value || null;
+
+    this.themeLibrary.select(fileName);
+
+    if (!fileName) {
+      return;
+    }
+
+    const applied = await this.themeLibrary.useSelectedTheme();
+
+    if (!applied) {
+      this.syncSavedThemeSelectionToActiveTheme();
+    }
+  }
+
+  async editSelectedSavedTheme(): Promise<void> {
+    const opened = await this.themeLibrary.openSelectedThemeInDraft();
+
+    if (opened) {
+      this.modal.openThemeStudio();
+    }
+  }
+
   onBackdropClick(): void {
     this.close();
   }
@@ -312,4 +378,16 @@ export class SettingsModalComponent {
 
     this.selectedServerId.set(select.value || null);
   }
+
+  restoreDefaultTheme(): void {
+    this.theme.resetToDefault('button');
+    this.syncSavedThemeSelectionToActiveTheme();
+    this.navigate('theme');
+  }
+
+  private syncSavedThemeSelectionToActiveTheme(): void {
+    const matchingTheme = this.savedThemes().find((entry) => entry.isValid && entry.themeName === this.activeThemeName()) ?? null;
+
+    this.themeLibrary.select(matchingTheme?.fileName ?? null);
+  }
 }