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

Rework design part 1

Browse Source
This commit is contained in:
SocksOnHead
2026-04-01 19:31:00 +02:00
parent fed270d28d
commit 65b9419869
15 changed files with 324 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
toju-app/src/app/features/room/rooms-side-panel/rooms-side-panel.component.html
View File

@@ -1,54 +1,45 @@
<!-- eslint-disable @angular-eslint/template/button-has-type, @angular-eslint/template/cyclomatic-complexity -->
<aside class="w-80 bg-card h-full flex flex-col">
<!-- Minimalistic header with tabs -->
<div class="border-b border-border">
<div class="flex items-center">
<!-- Tab buttons -->
<button
(click)="activeTab.set('channels')"
class="flex-1 flex items-center justify-center gap-1.5 px-3 py-3 text-sm transition-colors border-b-2"
[class.border-primary]="activeTab() === 'channels'"
[class.text-foreground]="activeTab() === 'channels'"
[class.border-transparent]="activeTab() !== 'channels'"
[class.text-muted-foreground]="activeTab() !== 'channels'"
[class.hover:text-foreground]="activeTab() !== 'channels'"
>
<ng-icon
name="lucideHash"
class="w-4 h-4"
/>
<span>Channels</span>
</button>
<button
(click)="activeTab.set('users')"
class="flex-1 flex items-center justify-center gap-1.5 px-3 py-3 text-sm transition-colors border-b-2"
[class.border-primary]="activeTab() === 'users'"
[class.text-foreground]="activeTab() === 'users'"
[class.border-transparent]="activeTab() !== 'users'"
[class.text-muted-foreground]="activeTab() !== 'users'"
[class.hover:text-foreground]="activeTab() !== 'users'"
>
<ng-icon
name="lucideUsers"
class="w-4 h-4"
/>
<span>Users</span>
<span class="text-xs px-1.5 py-0.5 rounded-full bg-primary/15 text-primary">{{ knownUserCount() }}</span>
</button>
</div>
<aside class="flex h-full min-h-0 flex-col bg-card">
<div class="border-b border-border px-3 py-3">
@if (panelMode() === 'channels') {
<div class="flex items-center gap-3">
<div class="grid h-9 w-9 place-items-center rounded-md bg-secondary text-sm font-semibold text-foreground">
{{ currentRoom()?.name?.charAt(0)?.toUpperCase() || '#' }}
</div>
<div class="min-w-0 flex-1">
<p class="truncate text-sm font-semibold text-foreground">{{ currentRoom()?.name || 'Server' }}</p>
<p class="truncate text-xs text-muted-foreground">{{ currentRoom()?.description || 'Choose a text channel or jump into voice.' }}</p>
</div>
</div>
} @else {
<div class="flex items-center gap-3">
<div class="grid h-9 w-9 place-items-center rounded-md bg-secondary text-muted-foreground">
<ng-icon
name="lucideUsers"
class="h-4 w-4"
/>
</div>
<div class="min-w-0 flex-1">
<p class="text-sm font-semibold text-foreground">{{ knownUserCount() }} members</p>
<p class="text-xs text-muted-foreground">{{ onlineRoomUsers().length + (currentUser() ? 1 : 0) }} online right now</p>
</div>
</div>
}
</div>
<!-- Channels View -->
@if (activeTab() === 'channels') {
@if (panelMode() === 'channels') {
<div class="flex-1 overflow-auto">
<!-- Text Channels -->
<div class="p-3">
<div class="flex items-center justify-between mb-2 px-1">
<h4 class="text-xs uppercase tracking-wide text-muted-foreground font-medium">Text Channels</h4>
<section class="px-2 py-3">
<div class="mb-2 flex items-center justify-between px-1">
<h4 class="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">Text Channels</h4>
@if (canManageChannels()) {
<button
(click)="createChannel('text')"
class="text-muted-foreground hover:text-foreground transition-colors"
class="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
title="Create Text Channel"
>
<ng-icon
@@ -58,15 +49,15 @@
</button>
}
</div>
<div class="space-y-0.5">
<div class="space-y-1">
@for (ch of textChannels(); track ch.id) {
<button
class="w-full px-2 py-1.5 text-sm rounded flex items-center gap-2 text-left transition-colors"
class="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm transition-colors"
[class.bg-secondary]="activeChannelId() === ch.id"
[class.text-foreground]="activeChannelId() === ch.id"
[class.font-medium]="activeChannelId() === ch.id"
[class.text-foreground/60]="activeChannelId() !== ch.id"
[class.hover:bg-secondary/60]="activeChannelId() !== ch.id"
[class.hover:bg-secondary/70]="activeChannelId() !== ch.id"
[class.hover:text-foreground/80]="activeChannelId() !== ch.id"
(click)="selectTextChannel(ch.id)"
(contextmenu)="openChannelContextMenu($event, ch)"
@@ -83,7 +74,7 @@
(keydown.escape)="cancelRename()"
(blur)="confirmRename($event)"
(input)="clearChannelNameError()"
class="flex-1 bg-secondary border border-border rounded px-1 py-0.5 text-sm text-foreground focus:outline-none focus:ring-1 focus:ring-primary"
class="flex-1 rounded-md border border-input bg-background px-2 py-1 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-primary"
(click)="$event.stopPropagation()"
/>
} @else {
@@ -98,16 +89,16 @@
</button>
}
</div>
</div>
</section>
<!-- Voice Channels -->
<div class="p-3 pt-0">
<div class="flex items-center justify-between mb-2 px-1">
<h4 class="text-xs uppercase tracking-wide text-muted-foreground font-medium">Voice Channels</h4>
<section class="border-t border-border px-2 py-3">
<div class="mb-2 flex items-center justify-between px-1">
<h4 class="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">Voice Channels</h4>
@if (canManageChannels()) {
<button
(click)="createChannel('voice')"
class="text-muted-foreground hover:text-foreground transition-colors"
class="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
title="Create Voice Channel"
>
<ng-icon
@@ -118,7 +109,7 @@
}
</div>
@if (!voiceEnabled()) {
<p class="text-sm text-muted-foreground px-2 py-2">Voice is disabled by host</p>
<p class="px-2 py-2 text-sm text-muted-foreground">Voice is disabled by host</p>
}
<div class="space-y-1">
@for (ch of voiceChannels(); track ch.id) {
@@ -132,10 +123,10 @@
(drop)="onVoiceChannelDrop($event, ch.id)"
>
<button
class="w-full px-2 py-1.5 text-sm rounded hover:bg-secondary/60 flex items-center justify-between text-left transition-colors"
class="flex w-full items-center justify-between rounded-md px-2 py-1.5 text-left text-sm transition-colors hover:bg-secondary/60"
(click)="joinVoice(ch.id)"
(contextmenu)="openChannelContextMenu($event, ch)"
[class.bg-secondary/40]="isCurrentRoom(ch.id)"
[class.bg-secondary]="isCurrentRoom(ch.id)"
[disabled]="!voiceEnabled()"
[title]="isCurrentRoom(ch.id) ? 'Open stream workspace' : 'Join voice channel'"
>
@@ -155,7 +146,7 @@
(keydown.escape)="cancelRename()"
(blur)="confirmRename($event)"
(input)="clearChannelNameError()"
class="flex-1 bg-secondary border border-border rounded px-1 py-0.5 text-sm text-foreground focus:outline-none focus:ring-1 focus:ring-primary"
class="flex-1 rounded-md border border-input bg-background px-2 py-1 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-primary"
(click)="$event.stopPropagation()"
/>
} @else {
@@ -173,10 +164,10 @@
</button>
<!-- Voice users connected to this channel -->
@if (voiceUsersInRoom(ch.id).length > 0) {
<div class="ml-5 mt-1 space-y-1">
<div class="ml-5 mt-1 space-y-1 border-l border-border pb-1 pl-2">
@for (u of voiceUsersInRoom(ch.id); track u.id) {
<div
class="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-secondary/40"
class="flex items-center gap-2 rounded-md px-2 py-1.5 transition-colors hover:bg-secondary/50"
[class.cursor-pointer]="canDragVoiceUser(u)"
[class.opacity-60]="draggedVoiceUserId() === (u.id || u.oderId)"
[draggable]="canDragVoiceUser(u)"
@@ -239,18 +230,18 @@
</div>
}
</div>
</div>
</section>
</div>
}
<!-- Users View -->
@if (activeTab() === 'users') {
<div class="flex-1 overflow-auto p-3">
@if (panelMode() === 'users') {
<div class="flex-1 overflow-auto px-2 py-3">
<!-- Current User (You) -->
@if (currentUser()) {
<div class="mb-4">
<h4 class="text-xs uppercase tracking-wide text-muted-foreground font-medium mb-2 px-1">You</h4>
<div class="flex items-center gap-2 px-2 py-1.5 rounded bg-secondary/30">
<div class="flex items-center gap-2 rounded-md bg-secondary/60 px-3 py-2">
<div class="relative">
<app-user-avatar
[name]="currentUser()?.displayName || '?'"
@@ -296,7 +287,7 @@
<div class="space-y-1">
@for (user of onlineRoomUsers(); track user.id) {
<div
class="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-secondary/40 group/user"
class="group/user flex items-center gap-2 rounded-md px-3 py-2 transition-colors hover:bg-secondary/50"
(contextmenu)="openUserContextMenu($event, user)"
>
<div class="relative">
@@ -354,7 +345,7 @@
<h4 class="text-xs uppercase tracking-wide text-muted-foreground font-medium mb-2 px-1">Offline - {{ offlineRoomMembers().length }}</h4>
<div class="space-y-1">
@for (member of offlineRoomMembers(); track member.oderId || member.id) {
<div class="flex items-center gap-2 px-2 py-1.5 rounded opacity-80">
<div class="flex items-center gap-2 rounded-md px-3 py-2 opacity-80">
<div class="relative">
<app-user-avatar
[name]="member.displayName"
@@ -392,15 +383,18 @@
}
<!-- Voice controls pinned to sidebar bottom (hidden when floating controls visible) -->
@if (voiceEnabled()) {
<div [class.invisible]="showFloatingControls()">
@if (panelMode() === 'channels' && showVoiceControls() && voiceEnabled()) {
<div
class="border-t border-border px-2 py-3"
[class.invisible]="showFloatingControls()"
>
<app-voice-controls />
</div>
}
</aside>
<!-- Channel context menu -->
@if (showChannelMenu()) {
@if (panelMode() === 'channels' && showChannelMenu()) {
<app-context-menu
[x]="channelMenuX()"
[y]="channelMenuY()"
@@ -440,7 +434,7 @@
}
<!-- User context menu (kick / role management) -->
@if (showUserMenu()) {
@if (panelMode() === 'users' && showUserMenu()) {
<app-context-menu
[x]="userMenuX()"
[y]="userMenuY()"
@@ -497,7 +491,7 @@
}
<!-- Per-user volume context menu -->
@if (showVolumeMenu()) {
@if (panelMode() === 'channels' && showVolumeMenu()) {
<app-user-volume-menu
[x]="volumeMenuX()"
[y]="volumeMenuY()"
@@ -508,7 +502,7 @@
}
<!-- Create channel dialog -->
@if (showCreateChannelDialog()) {
@if (panelMode() === 'channels' && showCreateChannelDialog()) {
<app-confirm-dialog
[title]="'Create ' + (createChannelType() === 'text' ? 'Text' : 'Voice') + ' Channel'"
confirmLabel="Create"
@@ -519,7 +513,7 @@
type="text"
[(ngModel)]="newChannelName"
placeholder="Channel name"
class="w-full px-3 py-2 bg-secondary rounded border border-border text-foreground focus:outline-none focus:ring-2 focus:ring-primary text-sm"
class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-primary"
[class.border-destructive]="!!channelNameError()"
(ngModelChange)="clearChannelNameError()"
(keydown.enter)="confirmCreateChannel()"