style: Consistent backdrop and create server in server-rail

wider server rail with larger icons ans slightly animated.
2026-06-05 02:34:02 +02:00
parent 2f6c52e73c
commit 9e1d75d038
34 changed files with 729 additions and 95 deletions
--- a/toju-app/src/app/features/servers/servers-rail/servers-rail.component.html
+++ b/toju-app/src/app/features/servers/servers-rail/servers-rail.component.html
@@ -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()"
+  />
+}
--- a/toju-app/src/app/features/servers/servers-rail/servers-rail.component.ts
+++ b/toju-app/src/app/features/servers/servers-rail/servers-rail.component.ts
@@ -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');
--- a/toju-app/src/app/features/settings/settings-modal/settings-modal.component.html
+++ b/toju-app/src/app/features/settings/settings-modal/settings-modal.component.html
@@ -2,7 +2,7 @@
@if (isOpen() && !isThemeStudioFullscreen()) {
  <!-- Backdrop (hidden on mobile where the modal is full-screen) -->
  <div
-    class="fixed inset-0 z-[90] hidden bg-black/80 backdrop-blur-sm transition-opacity duration-200 md:block"
+    class="fixed inset-0 z-[90] hidden bg-black/60 backdrop-blur-sm transition-opacity duration-200 md:block"
    [class.opacity-100]="animating()"
    [class.opacity-0]="!animating()"
    (click)="onBackdropClick()"
--- a/toju-app/src/app/features/shell/title-bar/title-bar.component.html
+++ b/toju-app/src/app/features/shell/title-bar/title-bar.component.html
@@ -272,10 +272,10 @@
 }

@if (requiredPluginRequirements().length > 0 && currentRoom()) {
-  <div
-    class="fixed inset-0 z-[80] bg-black/60"
-    role="presentation"
-  ></div>
+  <app-modal-backdrop
+    [zIndex]="80"
+    [dismissable]="false"
+  />
  <section
    class="fixed left-1/2 top-1/2 z-[81] flex max-h-[min(38rem,calc(100vh-2rem))] w-[min(32rem,calc(100vw-2rem))] -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-lg border border-border bg-card text-foreground shadow-2xl"
    role="dialog"
--- a/toju-app/src/app/features/shell/title-bar/title-bar.component.ts
+++ b/toju-app/src/app/features/shell/title-bar/title-bar.component.ts
@@ -41,7 +41,7 @@ import { ServerDirectoryFacade } from '../../../domains/server-directory';
 import { PlatformService } from '../../../core/platform';
 import { clearStoredCurrentUserId } from '../../../core/storage/current-user-storage';
 import { SettingsModalService } from '../../../core/services/settings-modal.service';
-import { LeaveServerDialogComponent } from '../../../shared';
+import { LeaveServerDialogComponent, ModalBackdropComponent } from '../../../shared';
 import { Room, type PluginRequirementSummary } from '../../../shared-kernel';
 import { VoiceWorkspaceService } from '../../../domains/voice-session';
 import { ThemeNodeDirective } from '../../../domains/theme';
@@ -59,7 +59,8 @@ import { getPluginInstallScope } from '../../../domains/plugins/domain/logic/plu
    CommonModule,
    NgIcon,
    LeaveServerDialogComponent,
-    ThemeNodeDirective
+    ThemeNodeDirective,
+    ModalBackdropComponent
  ],
  viewProviders: [
    provideIcons({ lucideMinus,