Add new settngs modal

src/app/features/server-search/server-search.component.ts

@@ -23,13 +23,21 @@ import {
 } from '../../store/rooms/rooms.selectors';
 import { Room } from '../../core/models';
 import { ServerInfo } from '../../core/models';
+import { SettingsModalService } from '../../core/services/settings-modal.service';
 
 @Component({
   selector: 'app-server-search',
   standalone: true,
   imports: [CommonModule, FormsModule, NgIcon],
   viewProviders: [
-    provideIcons({ lucideSearch, lucideUsers, lucideLock, lucideGlobe, lucidePlus, lucideSettings }),
+    provideIcons({
+      lucideSearch,
+      lucideUsers,
+      lucideLock,
+      lucideGlobe,
+      lucidePlus,
+      lucideSettings,
+    }),
   ],
   templateUrl: './server-search.component.html',
 })
@@ -40,6 +48,7 @@ import { ServerInfo } from '../../core/models';
 export class ServerSearchComponent implements OnInit {
   private store = inject(Store);
   private router = inject(Router);
+  private settingsModal = inject(SettingsModalService);
   private searchSubject = new Subject<string>();
 
   searchQuery = '';
@@ -63,11 +72,9 @@ export class ServerSearchComponent implements OnInit {
     this.store.dispatch(RoomsActions.loadRooms());
 
     // Setup debounced search
-    this.searchSubject
-      .pipe(debounceTime(300), distinctUntilChanged())
-      .subscribe((query) => {
-        this.store.dispatch(RoomsActions.searchServers({ query }));
-      });
+    this.searchSubject.pipe(debounceTime(300), distinctUntilChanged()).subscribe((query) => {
+      this.store.dispatch(RoomsActions.searchServers({ query }));
+    });
   }
 
   /** Emit a search query to the debounced search subject. */
@@ -82,14 +89,16 @@ export class ServerSearchComponent implements OnInit {
       this.router.navigate(['/login']);
       return;
     }
-    this.store.dispatch(RoomsActions.joinRoom({
-      roomId: server.id,
-      serverInfo: {
-        name: server.name,
-        description: server.description,
-        hostName: server.hostName,
-      }
-    }));
+    this.store.dispatch(
+      RoomsActions.joinRoom({
+        roomId: server.id,
+        serverInfo: {
+          name: server.name,
+          description: server.description,
+          hostName: server.hostName,
+        },
+      }),
+    );
   }
 
   /** Open the create-server dialog. */
@@ -119,15 +128,15 @@ export class ServerSearchComponent implements OnInit {
         topic: this.newServerTopic() || undefined,
         isPrivate: this.newServerPrivate(),
         password: this.newServerPrivate() ? this.newServerPassword() : undefined,
-      })
+      }),
     );
 
     this.closeCreateDialog();
   }
 
-  /** Navigate to the application settings page. */
+  /** Open the unified settings modal to the Network page. */
   openSettings(): void {
-    this.router.navigate(['/settings']);
+    this.settingsModal.open('network');
   }
 
   /** Join a previously saved room by converting it to a ServerInfo payload. */