myxelium/Toju
1
0
Fork 0
Code Issues 12 Pull Requests Actions Packages Projects 2 Releases 25 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

58
toju-app/src/app/features/room/chat-room/chat-room.component.html
View File

@@ -1,29 +1,50 @@
<div class="flex h-full flex-col bg-background">
@if (currentRoom()) {
<!-- Main Content -->
<div class="flex min-h-0 flex-1 overflow-hidden">
<aside class="flex min-h-0 w-[17rem] shrink-0 overflow-hidden border-r border-border bg-card">
<div
class="grid min-h-0 flex-1 overflow-hidden"
[ngStyle]="roomLayoutStyles()"
>
<aside
appThemeNode="chatRoomChannelsPanel"
class="flex min-h-0 overflow-hidden border-r border-border bg-card"
[ngStyle]="channelsPanelLayoutStyles()"
>
<app-rooms-side-panel
panelMode="channels"
class="block h-full w-full"
/>
</aside>
<!-- Chat Area -->
<main class="relative min-h-0 min-w-0 flex-1 overflow-hidden bg-background">
<main
appThemeNode="chatRoomMainPanel"
class="relative min-h-0 min-w-0 overflow-hidden bg-background"
[ngStyle]="mainPanelLayoutStyles()"
>
@if (!isVoiceWorkspaceExpanded()) {
@if (hasTextChannels()) {
<div class="h-full overflow-hidden">
<app-chat-messages />
</div>
} @else {
<div class="flex h-full items-center justify-center px-6">
<div
appThemeNode="chatRoomEmptyState"
class="flex h-full items-center justify-center px-6"
>
<div class="max-w-md text-center text-muted-foreground">
<div
data-theme-slot="icon"
class="theme-icon-slot mx-auto mb-4 h-14 w-14 items-center justify-center rounded-3xl border border-border/70 bg-secondary/70 bg-center bg-cover bg-no-repeat text-sm font-semibold uppercase tracking-[0.18em] text-foreground"
></div>
<ng-icon
name="lucideHash"
class="mx-auto mb-4 h-16 w-16 opacity-30"
/>
<h2 class="mb-2 text-xl font-medium text-foreground">No text channels</h2>
<h2
data-theme-slot="text"
class="mb-2 text-xl font-medium text-foreground"
>
No text channels
</h2>
<p class="text-sm">There are no existing text channels currently.</p>
</div>
</div>
@@ -33,7 +54,11 @@
<app-voice-workspace />
</main>
<aside class="flex min-h-0 w-[17rem] shrink-0 overflow-hidden border-l border-border bg-card">
<aside
appThemeNode="chatRoomMembersPanel"
class="flex min-h-0 overflow-hidden border-l border-border bg-card"
[ngStyle]="membersPanelLayoutStyles()"
>
<app-rooms-side-panel
panelMode="users"
[showVoiceControls]="false"
@@ -42,14 +67,25 @@
</aside>
</div>
} @else {
<!-- No Room Selected -->
<div class="flex flex-1 items-center justify-center bg-background px-6">
<div
appThemeNode="chatRoomEmptyState"
class="flex flex-1 items-center justify-center bg-background px-6"
>
<div class="text-center text-muted-foreground">
<div
data-theme-slot="icon"
class="theme-icon-slot mx-auto mb-4 h-14 w-14 items-center justify-center rounded-3xl border border-border/70 bg-secondary/70 bg-center bg-cover bg-no-repeat text-sm font-semibold uppercase tracking-[0.18em] text-foreground"
></div>
<ng-icon
name="lucideHash"
class="mx-auto mb-4 h-16 w-16 opacity-30"
/>
<h2 class="mb-2 text-xl font-medium">No room selected</h2>
<h2
data-theme-slot="text"
class="mb-2 text-xl font-medium"
>
No room selected
</h2>
<p class="text-sm">Select or create a room to start chatting</p>
</div>
</div>

12
toju-app/src/app/features/room/chat-room/chat-room.component.ts
View File

@@ -29,6 +29,10 @@ import {
import { SettingsModalService } from '../../../core/services/settings-modal.service';
import { selectIsCurrentUserAdmin } from '../../../store/users/users.selectors';
import { VoiceWorkspaceService } from '../../../domains/voice-session';
import {
ThemeNodeDirective,
ThemeService
} from '../../../domains/theme';
@Component({
selector: 'app-chat-room',
@@ -38,7 +42,8 @@ import { VoiceWorkspaceService } from '../../../domains/voice-session';
NgIcon,
ChatMessagesComponent,
VoiceWorkspaceComponent,
RoomsSidePanelComponent
RoomsSidePanelComponent,
ThemeNodeDirective
],
viewProviders: [
provideIcons({
@@ -59,6 +64,7 @@ import { VoiceWorkspaceService } from '../../../domains/voice-session';
export class ChatRoomComponent {
private readonly store = inject(Store);
private readonly settingsModal = inject(SettingsModalService);
private readonly theme = inject(ThemeService);
private voiceWorkspace = inject(VoiceWorkspaceService);
showMenu = signal(false);
showAdminPanel = signal(false);
@@ -68,6 +74,10 @@ export class ChatRoomComponent {
textChannels = this.store.selectSignal(selectTextChannels);
isVoiceWorkspaceExpanded = this.voiceWorkspace.isExpanded;
hasTextChannels = computed(() => this.textChannels().length > 0);
roomLayoutStyles = computed(() => this.theme.getLayoutContainerStyles('roomLayout'));
channelsPanelLayoutStyles = computed(() => this.theme.getLayoutItemStyles('chatRoomChannelsPanel'));
mainPanelLayoutStyles = computed(() => this.theme.getLayoutItemStyles('chatRoomMainPanel'));
membersPanelLayoutStyles = computed(() => this.theme.getLayoutItemStyles('chatRoomMembersPanel'));
/** Open the settings modal to the Server admin page for the current room. */
toggleAdminPanel() {

2
toju-app/src/app/features/room/voice-workspace/voice-workspace.component.html
View File

@@ -2,6 +2,7 @@
<div class="absolute inset-0">
@if (showExpanded()) {
<section
appThemeNode="voiceWorkspace"
class="pointer-events-auto absolute inset-0 bg-background/95 backdrop-blur-xl"
(mouseenter)="onWorkspacePointerMove()"
(mousemove)="onWorkspacePointerMove()"
@@ -276,6 +277,7 @@
@if (showMiniWindow()) {
<div
appThemeNode="voiceWorkspace"
class="pointer-events-auto absolute z-20 w-[20rem] select-none overflow-hidden rounded-[1.75rem] border border-white/10 bg-card/95 shadow-2xl backdrop-blur-xl"
[style.left.px]="miniPosition().left"
[style.top.px]="miniPosition().top"

4
toju-app/src/app/features/room/voice-workspace/voice-workspace.component.ts
View File

@@ -50,6 +50,7 @@ import { ScreenShareQualityDialogComponent, UserAvatarComponent } from '../../..
import { VoiceWorkspacePlaybackService } from './voice-workspace-playback.service';
import { VoiceWorkspaceStreamTileComponent } from './voice-workspace-stream-tile.component';
import { VoiceWorkspaceStreamItem } from './voice-workspace.models';
import { ThemeNodeDirective } from '../../../domains/theme';
@Component({
selector: 'app-voice-workspace',
@@ -59,7 +60,8 @@ import { VoiceWorkspaceStreamItem } from './voice-workspace.models';
NgIcon,
ScreenShareQualityDialogComponent,
VoiceWorkspaceStreamTileComponent,
UserAvatarComponent
UserAvatarComponent,
ThemeNodeDirective
],
viewProviders: [
provideIcons({

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

132
toju-app/src/app/features/shell/title-bar.component.html
View File

@@ -1,17 +1,38 @@
<div
class="fixed left-16 right-0 top-0 z-50 flex h-10 items-center justify-between border-b border-border bg-card px-4 select-none"
appThemeNode="titleBar"
class="relative z-50 flex h-10 w-full items-center justify-between border-b border-border bg-card px-4 select-none"
style="-webkit-app-region: drag"
>
<div
class="flex items-center gap-2 min-w-0 relative"
style="-webkit-app-region: no-drag"
>
<span
data-theme-slot="icon"
class="theme-icon-slot h-6 w-6 shrink-0 items-center justify-center rounded-xl border border-border/70 bg-secondary/70 bg-center bg-cover bg-no-repeat text-[10px] font-semibold uppercase tracking-[0.16em] text-foreground"
></span>
@if (inRoom()) {
<ng-icon
name="lucideHash"
class="w-5 h-5 text-muted-foreground"
/>
<span class="truncate text-sm font-semibold text-foreground">{{ roomContextTitle() }}</span>
<span
data-theme-slot="text"
class="flex min-w-0 items-center gap-2 text-sm font-semibold text-foreground"
>
<span class="truncate">{{ roomName() }}</span>
@if (isVoiceWorkspaceExpanded()) {
<span class="shrink-0 text-muted-foreground">/</span>
<span class="truncate">{{ connectedVoiceChannelName() }}</span>
} @else if (textChannels().length > 0) {
<span class="shrink-0 text-muted-foreground">/</span>
<span class="flex min-w-0 items-center gap-1 text-foreground">
<ng-icon
name="lucideHash"
class="h-4 w-4 shrink-0 text-muted-foreground"
/>
<span class="truncate">{{ activeTextChannelName() }}</span>
</span>
}
</span>
@if (showRoomCompatibilityNotice()) {
<span class="inline-flex items-center gap-1 rounded bg-destructive/15 px-2 py-0.5 text-xs text-destructive">
@@ -36,7 +57,11 @@
}
} @else {
<div class="flex items-center gap-2 min-w-0">
<span class="text-sm text-muted-foreground truncate">{{ username() }} | {{ serverName() }}</span>
<span
data-theme-slot="text"
class="text-sm text-muted-foreground truncate"
>{{ username() }} | {{ serverName() }}</span
>
<span
class="text-xs px-2 py-0.5 rounded bg-destructive/15 text-destructive"
[class.hidden]="!isReconnecting()"
@@ -59,57 +84,62 @@
Login
</button>
<button
type="button"
(click)="toggleMenu()"
class="ml-2 rounded-md p-2 transition-colors hover:bg-secondary"
title="Menu"
>
<ng-icon
name="lucideMenu"
class="w-5 h-5 text-muted-foreground"
/>
</button>
<!-- Anchored dropdown under the menu button -->
@if (showMenu()) {
<div class="absolute right-0 top-full z-50 mt-2 w-64 rounded-md border border-border bg-popover p-1 shadow-lg">
@if (inRoom()) {
<button
type="button"
(click)="createInviteLink()"
[disabled]="creatingInvite()"
class="w-full rounded-md px-3 py-2 text-left text-sm text-foreground transition-colors hover:bg-secondary disabled:cursor-not-allowed disabled:opacity-60"
<div class="relative">
<button
type="button"
(click)="toggleMenu()"
class="grid h-8 w-8 place-items-center rounded-md transition-colors hover:bg-secondary"
title="Menu"
>
<ng-icon
name="lucideMenu"
class="h-4 w-4 text-muted-foreground"
/>
</button>
@if (showMenu()) {
<div
class="absolute right-0 top-full z-50 mt-2 w-64 rounded-md border border-border bg-popover p-1 shadow-lg"
style="-webkit-app-region: no-drag"
>
@if (inRoom()) {
<button
type="button"
(click)="createInviteLink()"
[disabled]="creatingInvite()"
class="w-full rounded-md px-3 py-2 text-left text-sm text-foreground transition-colors hover:bg-secondary disabled:cursor-not-allowed disabled:opacity-60"
>
@if (creatingInvite()) {
Creating Invite Link…
} @else {
Create Invite Link
}
</button>
<button
type="button"
(click)="leaveServer()"
class="w-full rounded-md px-3 py-2 text-left text-sm text-foreground transition-colors hover:bg-secondary"
>
Leave Server
</button>
}
<div
class="px-3 py-2 text-xs leading-5 text-muted-foreground"
[class.hidden]="!inviteStatus()"
>
@if (creatingInvite()) {
Creating Invite Link…
} @else {
Create Invite Link
}
</button>
{{ inviteStatus() }}
</div>
<div class="mx-2 my-1 h-px bg-border"></div>
<button
type="button"
(click)="leaveServer()"
(click)="logout()"
class="w-full rounded-md px-3 py-2 text-left text-sm text-foreground transition-colors hover:bg-secondary"
>
Leave Server
Logout
</button>
}
<div
class="px-3 py-2 text-xs leading-5 text-muted-foreground"
[class.hidden]="!inviteStatus()"
>
{{ inviteStatus() }}
</div>
<div class="mx-2 my-1 h-px bg-border"></div>
<button
type="button"
(click)="logout()"
class="w-full rounded-md px-3 py-2 text-left text-sm text-foreground transition-colors hover:bg-secondary"
>
Logout
</button>
</div>
}
}
</div>
@if (isElectron()) {
<button
type="button"

21
toju-app/src/app/features/shell/title-bar.component.ts
View File

@@ -37,6 +37,7 @@ import { STORAGE_KEY_CURRENT_USER_ID } from '../../core/constants';
import { LeaveServerDialogComponent } from '../../shared';
import { Room } from '../../shared-kernel';
import { VoiceWorkspaceService } from '../../domains/voice-session';
import { ThemeNodeDirective } from '../../domains/theme';
@Component({
selector: 'app-title-bar',
@@ -44,7 +45,8 @@ import { VoiceWorkspaceService } from '../../domains/voice-session';
imports: [
CommonModule,
NgIcon,
LeaveServerDialogComponent
LeaveServerDialogComponent,
ThemeNodeDirective
],
viewProviders: [
provideIcons({ lucideMinus,
@@ -109,23 +111,6 @@ export class TitleBarComponent {
return voiceChannel?.name || 'Voice Lounge';
});
roomContextTitle = computed(() => {
const room = this.currentRoom();
if (!room) {
return '';
}
if (this.isVoiceWorkspaceExpanded()) {
return `${room.name} / ${this.connectedVoiceChannelName()}`;
}
if (this.textChannels().length === 0) {
return room.name;
}
return `${room.name} / #${this.activeTextChannelName()}`;
});
roomContextMeta = computed(() => {
if (!this.currentRoom()) {
return '';