Refactor and code designing

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

@@ -5,10 +5,12 @@ import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideMinus, lucideSquare, lucideX, lucideChevronLeft, lucideHash, lucideMenu } from '@ng-icons/lucide';
 import { Router } from '@angular/router';
 import { selectCurrentRoom } from '../../store/rooms/rooms.selectors';
-import * as RoomsActions from '../../store/rooms/rooms.actions';
+import { RoomsActions } from '../../store/rooms/rooms.actions';
 import { selectCurrentUser } from '../../store/users/users.selectors';
 import { ServerDirectoryService } from '../../core/services/server-directory.service';
 import { WebRTCService } from '../../core/services/webrtc.service';
+import { PlatformService } from '../../core/services/platform.service';
+import { STORAGE_KEY_CURRENT_USER_ID } from '../../core/constants';
 
 @Component({
   selector: 'app-title-bar',
@@ -17,17 +19,24 @@ import { WebRTCService } from '../../core/services/webrtc.service';
   viewProviders: [provideIcons({ lucideMinus, lucideSquare, lucideX, lucideChevronLeft, lucideHash, lucideMenu })],
   templateUrl: './title-bar.component.html',
 })
+/**
+ * Electron-style title bar with window controls, navigation, and server menu.
+ */
 export class TitleBarComponent {
   private store = inject(Store);
   private serverDirectory = inject(ServerDirectoryService);
   private router = inject(Router);
   private webrtc = inject(WebRTCService);
+  private platform = inject(PlatformService);
+
+  isElectron = computed(() => this.platform.isElectron);
   showMenuState = computed(() => false);
 
   private currentUserSig = this.store.selectSignal(selectCurrentUser);
   username = computed(() => this.currentUserSig()?.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());
@@ -36,52 +45,61 @@ export class TitleBarComponent {
   private _showMenu = signal(false);
   showMenu = computed(() => this._showMenu());
 
+  /** Minimize the Electron window. */
   minimize() {
     const api = (window as any).electronAPI;
     if (api?.minimizeWindow) api.minimizeWindow();
   }
 
+  /** Maximize or restore the Electron window. */
   maximize() {
     const api = (window as any).electronAPI;
     if (api?.maximizeWindow) api.maximizeWindow();
   }
 
+  /** Close the Electron window. */
   close() {
     const api = (window as any).electronAPI;
     if (api?.closeWindow) api.closeWindow();
   }
 
+  /** Navigate to the login page. */
   goLogin() {
     this.router.navigate(['/login']);
   }
 
+  /** 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']);
   }
 
+  /** Toggle the server dropdown menu. */
   toggleMenu() {
     this._showMenu.set(!this._showMenu());
   }
 
+  /** 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'));
   }
 
+  /** Close the server dropdown menu. */
   closeMenu() {
     this._showMenu.set(false);
   }
 
+  /** Log out the current user, disconnect from signaling, and navigate to login. */
   logout() {
     this._showMenu.set(false);
     // Disconnect from signaling server – this broadcasts "user_left" to all
     // servers the user was a member of, so other users see them go offline.
     this.webrtc.disconnect();
     try {
-      localStorage.removeItem('metoyou_currentUserId');
+      localStorage.removeItem(STORAGE_KEY_CURRENT_USER_ID);
     } catch {}
     this.router.navigate(['/login']);
   }