Imrpove chat with gifs, videos, music player, redesigns and improved filesharing errors

src/app/features/shell/title-bar.component.html

@@ -134,3 +134,12 @@
     style="-webkit-app-region: no-drag"
   ></div>
 }
+
+@if (showLeaveConfirm() && currentRoom()) {
+  <app-leave-server-dialog
+    [room]="currentRoom()!"
+    [currentUser]="currentUser() ?? null"
+    (confirmed)="confirmLeave($event)"
+    (cancelled)="cancelLeave()"
+  />
+}

src/app/features/shell/title-bar.component.ts

@@ -24,11 +24,16 @@ import { ServerDirectoryService } from '../../core/services/server-directory.ser
 import { WebRTCService } from '../../core/services/webrtc.service';
 import { PlatformService } from '../../core/services/platform.service';
 import { STORAGE_KEY_CURRENT_USER_ID } from '../../core/constants';
+import { LeaveServerDialogComponent } from '../../shared';
 
 @Component({
   selector: 'app-title-bar',
   standalone: true,
-  imports: [CommonModule, NgIcon],
+  imports: [
+    CommonModule,
+    NgIcon,
+    LeaveServerDialogComponent
+  ],
   viewProviders: [
     provideIcons({ lucideMinus,
       lucideSquare,
@@ -52,18 +57,19 @@ export class TitleBarComponent {
   isElectron = computed(() => this.platform.isElectron);
   showMenuState = computed(() => false);
 
-  private currentUserSig = this.store.selectSignal(selectCurrentUser);
-  username = computed(() => this.currentUserSig()?.displayName || 'Guest');
+  currentUser = this.store.selectSignal(selectCurrentUser);
+  username = computed(() => this.currentUser()?.displayName || 'Guest');
   serverName = computed(() => this.serverDirectory.activeServer()?.name || 'No Server');
   isConnected = computed(() => this.webrtc.isConnected());
   isReconnecting = computed(() => !this.webrtc.isConnected() && this.webrtc.hasEverConnected());
-  isAuthed = computed(() => !!this.currentUserSig());
-  private currentRoomSig = this.store.selectSignal(selectCurrentRoom);
-  inRoom = computed(() => !!this.currentRoomSig());
-  roomName = computed(() => this.currentRoomSig()?.name || '');
-  roomDescription = computed(() => this.currentRoomSig()?.description || '');
+  isAuthed = computed(() => !!this.currentUser());
+  currentRoom = this.store.selectSignal(selectCurrentRoom);
+  inRoom = computed(() => !!this.currentRoom());
+  roomName = computed(() => this.currentRoom()?.name || '');
+  roomDescription = computed(() => this.currentRoom()?.description || '');
   private _showMenu = signal(false);
   showMenu = computed(() => this._showMenu());
+  showLeaveConfirm = signal(false);
 
   /** Minimize the Electron window. */
   minimize() {
@@ -94,11 +100,18 @@ export class TitleBarComponent {
     this.router.navigate(['/login']);
   }
 
+  /** Open the unified leave-server confirmation dialog. */
+  private openLeaveConfirm() {
+    this._showMenu.set(false);
+
+    if (this.currentRoom()) {
+      this.showLeaveConfirm.set(true);
+    }
+  }
+
   /** Leave the current room and navigate back to the server search. */
   onBack() {
-    // Leave room to ensure header switches to user/server view
-    this.store.dispatch(RoomsActions.leaveRoom());
-    this.router.navigate(['/search']);
+    this.openLeaveConfirm();
   }
 
   /** Toggle the server dropdown menu. */
@@ -108,9 +121,29 @@ export class TitleBarComponent {
 
   /** Leave the current server and navigate to the servers list. */
   leaveServer() {
-    this._showMenu.set(false);
-    this.store.dispatch(RoomsActions.leaveRoom());
-    window.dispatchEvent(new CustomEvent('navigate:servers'));
+    this.openLeaveConfirm();
+  }
+
+  /** Confirm the unified leave action and remove the server locally. */
+  confirmLeave(result: { nextOwnerKey?: string }) {
+    const roomId = this.currentRoom()?.id;
+
+    this.showLeaveConfirm.set(false);
+
+    if (!roomId)
+      return;
+
+    this.store.dispatch(RoomsActions.forgetRoom({
+      roomId,
+      nextOwnerKey: result.nextOwnerKey
+    }));
+
+    this.router.navigate(['/search']);
+  }
+
+  /** Cancel the leave-server confirmation dialog. */
+  cancelLeave() {
+    this.showLeaveConfirm.set(false);
   }
 
   /** Close the server dropdown menu. */