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

style: Consistent backdrop and create server in server-rail

Browse Source 
wider server rail with larger icons ans slightly animated.
This commit is contained in:
SocksOnHead
2026-06-05 02:34:02 +02:00
parent 2f6c52e73c
commit 9e1d75d038
34 changed files with 729 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
toju-app/src/app/features/servers/servers-rail/servers-rail.component.html
View File

@@ -1,9 +1,9 @@
<nav class="relative flex h-full min-w-14 flex-col items-center gap-2 border-r border-border bg-secondary/35 px-0 py-3 md:min-w-0 md:w-full">
<nav class="relative flex h-full min-w-16 flex-col items-center gap-2 border-r border-border bg-secondary/35 px-0 py-3 md:min-w-0 md:w-full">
<!-- Home / dashboard button -->
<button
appThemeNode="serversRailCreateButton"
type="button"
class="flex h-11 w-11 items-center justify-center overflow-hidden rounded-md bg-primary transition-colors hover:bg-primary/90 md:h-10 md:w-10"
class="flex h-12 w-12 items-center justify-center overflow-hidden rounded-2xl bg-primary transition-[border-radius,background-color] duration-150 ease-out hover:rounded-xl hover:bg-primary/90 active:rounded-lg md:h-11 md:w-11"
title="Dashboard"
(click)="goToDashboard()"
>
@@ -26,7 +26,7 @@
<button
type="button"
class="relative z-10 grid h-11 w-11 place-items-center overflow-hidden rounded-xl transition-colors hover:rounded-lg md:h-10 md:w-10"
class="relative z-10 grid h-12 w-12 place-items-center overflow-hidden rounded-xl transition-[border-radius,background-color] duration-150 ease-out hover:rounded-lg active:rounded-2xl md:h-11 md:w-11"
[ngClass]="
callAvatarUrls(call).length > 0
? 'bg-emerald-950 text-white shadow-sm hover:bg-emerald-900'
@@ -60,7 +60,7 @@
<ng-icon
name="lucidePhone"
class="relative z-10 h-[22px] w-[22px] drop-shadow md:h-5 md:w-5"
class="relative z-10 h-6 w-6 drop-shadow md:h-[22px] md:w-[22px]"
/>
</button>
</div>
@@ -82,7 +82,7 @@
<button
appThemeNode="serversRailItem"
type="button"
class="relative z-10 flex h-11 w-11 cursor-pointer flex-shrink-0 items-center justify-center border border-transparent transition-[border-radius,box-shadow,background-color] duration-100 hover:rounded-lg hover:bg-card md:h-10 md:w-10"
class="relative z-10 flex h-12 w-12 cursor-pointer flex-shrink-0 items-center justify-center border border-transparent transition-[border-radius,box-shadow,background-color] duration-150 ease-out hover:rounded-lg hover:bg-card active:rounded-2xl md:h-11 md:w-11"
[ngClass]="isSelectedRoom(room) ? 'rounded-lg ring-2 ring-primary/40 bg-primary/10' : 'rounded-xl bg-card'"
[title]="room.name"
[attr.aria-current]="isSelectedRoom(room) ? 'page' : null"
@@ -135,6 +135,29 @@
</button>
</div>
}
<!-- Separator between servers and create button -->
<div
aria-hidden="true"
class="my-0.5 h-px w-12 shrink-0 bg-border/70 md:w-11"
></div>
<!-- Create server -->
<div class="group/create relative flex w-full shrink-0 justify-center">
<button
type="button"
class="relative z-10 grid h-12 w-12 place-items-center rounded-xl bg-card text-emerald-500 transition-[border-radius,background-color,color] duration-150 ease-out hover:rounded-lg hover:bg-emerald-500 hover:text-white active:rounded-2xl md:h-11 md:w-11"
data-testid="server-rail-create"
title="Create a server"
aria-label="Create a server"
(click)="openCreateDialog()"
>
<ng-icon
name="lucidePlus"
class="h-6 w-6 md:h-[22px] md:w-[22px]"
/>
</button>
</div>
</div>
<div
@@ -235,3 +258,10 @@
(cancelled)="cancelLeave()"
/>
}
@if (showCreateDialog()) {
<app-create-server-dialog
(created)="closeCreateDialog()"
(cancelled)="closeCreateDialog()"
/>
}

15
toju-app/src/app/features/servers/servers-rail/servers-rail.component.ts
View File

@@ -13,7 +13,7 @@ import { FormsModule } from '@angular/forms';
import { Store } from '@ngrx/store';
import { NavigationEnd, Router } from '@angular/router';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucidePhone } from '@ng-icons/lucide';
import { lucidePhone, lucidePlus } from '@ng-icons/lucide';
import {
EMPTY,
Subject,
@@ -37,6 +37,7 @@ import { NotificationsFacade } from '../../../domains/notifications';
import { DirectCallService, DirectCallSession } from '../../../domains/direct-call';
import { DmRailComponent } from '../../../domains/direct-message/feature/dm-rail/dm-rail.component';
import { type ServerInfo, ServerDirectoryFacade } from '../../../domains/server-directory';
import { CreateServerDialogComponent } from '../../../domains/server-directory/feature/create-server-dialog/create-server-dialog.component';
import { ThemeNodeDirective } from '../../../domains/theme';
import { hasRoomBanForUser } from '../../../domains/access-control';
import {
@@ -56,12 +57,13 @@ const ACTIVATION_DEBOUNCE_MS = 150;
NgIcon,
ConfirmDialogComponent,
ContextMenuComponent,
CreateServerDialogComponent,
DmRailComponent,
LeaveServerDialogComponent,
ThemeNodeDirective,
UserBarComponent
],
viewProviders: [provideIcons({ lucidePhone })],
viewProviders: [provideIcons({ lucidePhone, lucidePlus })],
templateUrl: './servers-rail.component.html'
})
export class ServersRailComponent {
@@ -90,6 +92,7 @@ export class ServersRailComponent {
contextRoom = signal<Room | null>(null);
optimisticSelectedRoomId = signal<string | null>(null);
showLeaveConfirm = signal(false);
showCreateDialog = signal(false);
currentUser = this.store.selectSignal(selectCurrentUser);
onlineUsers = this.store.selectSignal(selectOnlineUsers);
bannedRoomLookup = signal<Record<string, boolean>>({});
@@ -257,6 +260,14 @@ export class ServersRailComponent {
this.router.navigate(['/dashboard']);
}
openCreateDialog(): void {
this.showCreateDialog.set(true);
}
closeCreateDialog(): void {
this.showCreateDialog.set(false);
}
joinSavedRoom(room: Room): void {
const targetRoom = this.savedRooms().find((savedRoom) => savedRoom.id === room.id) ?? room;
const currentUserId = localStorage.getItem('metoyou_currentUserId');