myxelium/Toju
1
0
Fork 0
Code Issues 14 Pull Requests Actions Packages Projects 2 Releases 33 Wiki Activity

feat: Theme engine

Browse Source 
big changes
This commit is contained in:
SocksOnHead
2026-04-02 00:08:38 +02:00
parent 65b9419869
commit bbb6deb0a2
48 changed files with 6150 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
toju-app/src/app/features/settings/settings-modal/settings-modal.component.html
View File

@@ -1,5 +1,5 @@
<!-- eslint-disable @angular-eslint/template/cyclomatic-complexity -->
@if (isOpen()) {
@if (isOpen() && !isThemeStudioFullscreen()) {
<!-- Backdrop -->
<div
class="fixed inset-0 z-[90] bg-black/80 backdrop-blur-sm transition-opacity duration-200"
@@ -16,7 +16,8 @@
<!-- Modal -->
<div class="fixed inset-0 z-[91] flex items-center justify-center p-4 pointer-events-none">
<div
class="pointer-events-auto relative bg-card border border-border rounded-xl shadow-2xl w-full max-w-4xl h-[min(680px,85vh)] flex overflow-hidden transition-all duration-200"
class="pointer-events-auto relative flex w-full max-w-4xl overflow-hidden rounded-xl border border-border bg-card shadow-2xl transition-all duration-200"
style="height: min(680px, 85vh)"
[class.scale-100]="animating()"
[class.opacity-100]="animating()"
[class.scale-95]="!animating()"
@@ -29,7 +30,7 @@
tabindex="-1"
>
<!-- Side Navigation -->
<nav class="w-52 flex-shrink-0 bg-secondary/40 border-r border-border flex flex-col">
<nav class="flex w-52 flex-shrink-0 flex-col border-r border-border bg-secondary/40">
<div class="p-4 border-b border-border">
<h2 class="text-lg font-semibold text-foreground">Settings</h2>
</div>
@@ -99,7 +100,15 @@
}
</div>
<div class="mt-auto border-t border-border px-4 py-3">
<div class="mt-auto space-y-3 border-t border-border px-4 py-3">
<button
type="button"
(click)="restoreDefaultTheme()"
class="w-full rounded-lg border border-destructive/25 bg-destructive/10 px-3 py-2 text-left text-xs font-medium text-destructive transition-colors hover:bg-destructive/15"
>
Restore default theme
</button>
<button
type="button"
(click)="openThirdPartyLicenses()"
@@ -122,6 +131,9 @@
@case ('network') {
Network
}
@case ('theme') {
Theme Studio
}
@case ('notifications') {
Notifications
}
@@ -148,16 +160,18 @@
}
}
</h3>
<button
(click)="close()"
type="button"
class="p-2 hover:bg-secondary rounded-lg transition-colors text-muted-foreground hover:text-foreground"
>
<ng-icon
name="lucideX"
class="w-5 h-5"
/>
</button>
<div class="flex items-center gap-2">
<button
(click)="close()"
type="button"
class="p-2 hover:bg-secondary rounded-lg transition-colors text-muted-foreground hover:text-foreground"
>
<ng-icon
name="lucideX"
class="w-5 h-5"
/>
</button>
</div>
</div>
<!-- Scrollable Content Area -->
@@ -169,6 +183,74 @@
@case ('network') {
<app-network-settings />
}
@case ('theme') {
<div class="mx-auto flex h-full max-w-3xl items-center justify-center">
<div class="w-full rounded-[1.5rem] border border-border bg-card/90 p-6 shadow-sm">
<div class="flex flex-wrap items-start justify-between gap-4">
<div>
<p class="text-xs font-semibold uppercase tracking-[0.18em] text-primary">Active Theme</p>
<h4 class="mt-2 text-xl font-semibold text-foreground">{{ activeThemeName() }}</h4>
</div>
@if (themeStudioMinimized()) {
<span class="rounded-full border border-primary/25 bg-primary/10 px-3 py-1 text-xs font-semibold text-primary">Minimized</span>
}
</div>
@if (savedThemesAvailable()) {
<div class="mt-5">
<label class="text-[11px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">Saved Theme</label>
<div class="mt-2 flex flex-wrap gap-2">
<select
class="min-w-[16rem] flex-1 rounded-full border border-border bg-background px-3 py-2 text-sm font-medium text-foreground outline-none transition-colors focus:border-primary/40 focus:ring-2 focus:ring-primary/15"
[value]="selectedSavedTheme()?.fileName || ''"
[disabled]="savedThemesBusy() && savedThemes().length === 0"
(change)="onSavedThemeSelect($event)"
>
<option value="">{{ savedThemes().length > 0 ? 'Choose saved theme' : 'No saved themes' }}</option>
@for (savedTheme of savedThemes(); track savedTheme.fileName) {
<option
[value]="savedTheme.fileName"
[disabled]="!savedTheme.isValid"
>
{{ savedTheme.themeName }}
</option>
}
</select>
<button
type="button"
(click)="editSelectedSavedTheme()"
[disabled]="!selectedSavedTheme()?.isValid || (savedThemesBusy() && savedThemes().length === 0)"
class="inline-flex items-center rounded-full border border-border bg-background px-3 py-2 text-sm font-medium text-foreground transition-colors hover:bg-secondary disabled:cursor-not-allowed disabled:opacity-60"
>
Edit In Studio
</button>
</div>
</div>
}
<div class="mt-5 flex flex-wrap gap-2">
<button
type="button"
(click)="openThemeStudio()"
class="inline-flex items-center rounded-full bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground transition-colors hover:bg-primary/90"
>
{{ themeStudioMinimized() ? 'Re-open Theme Studio' : 'Open Theme Studio' }}
</button>
<button
type="button"
(click)="restoreDefaultTheme()"
class="inline-flex items-center rounded-full border border-destructive/25 bg-destructive/10 px-3 py-2 text-sm font-medium text-destructive transition-colors hover:bg-destructive/15"
>
Restore Default
</button>
</div>
</div>
</div>
}
@case ('notifications') {
<app-notifications-settings />
}

78
toju-app/src/app/features/settings/settings-modal/settings-modal.component.ts
View File

@@ -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);
}
}