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