feat: Add deafen to pc, fix mobiel view, fix freeze on startup

toju-app/src/app/domains/server-directory/feature/find-servers/find-servers.component.html

@@ -28,24 +28,4 @@
   </div>
 </ng-template>
 
-@if (isMobile()) {
-  <swiper-container
-    class="block h-full min-h-0 w-full bg-background"
-    slides-per-view="1"
-    space-between="0"
-    initial-slide="0"
-    threshold="10"
-    resistance-ratio="0"
-  >
-    <swiper-slide class="block h-full w-full">
-      <div class="flex h-full w-full min-h-0 overflow-hidden">
-        <app-servers-rail class="block h-full shrink-0" />
-        <div class="flex min-h-0 flex-1 overflow-hidden border-l border-border">
-          <ng-container [ngTemplateOutlet]="pageContent" />
-        </div>
-      </div>
-    </swiper-slide>
-  </swiper-container>
-} @else {
-  <ng-container [ngTemplateOutlet]="pageContent" />
-}
+<ng-container [ngTemplateOutlet]="pageContent" />

toju-app/src/app/domains/server-directory/feature/find-servers/find-servers.component.spec.ts

@@ -14,7 +14,6 @@ import { Store } from '@ngrx/store';
 import { of } from 'rxjs';
 
 import { FindServersComponent } from './find-servers.component';
-import { ViewportService } from '../../../../core/platform';
 import { selectSavedRooms } from '../../../../store/rooms/rooms.selectors';
 import { ServerDirectoryFacade } from '../../application/facades/server-directory.facade';
 import type { ServerInfo } from '../../domain/models/server-directory.model';
@@ -32,7 +31,6 @@ interface HarnessOptions {
   saved?: Room[];
   featured?: ServerInfo[];
   trending?: ServerInfo[];
-  isMobile?: boolean;
 }
 
 function createHarness(options: HarnessOptions = {}) {
@@ -49,8 +47,7 @@ function createHarness(options: HarnessOptions = {}) {
     providers: [
       FindServersComponent,
       { provide: Store, useValue: store },
-      { provide: ServerDirectoryFacade, useValue: serverDirectory },
-      { provide: ViewportService, useValue: { isMobile: signal(options.isMobile ?? false) } }
+      { provide: ServerDirectoryFacade, useValue: serverDirectory }
     ]
   });
   const component = runInInjectionContext(injector, () => injector.get(FindServersComponent));
@@ -59,11 +56,6 @@ function createHarness(options: HarnessOptions = {}) {
 }
 
 describe('FindServersComponent', () => {
-  it('exposes the mobile viewport flag', () => {
-    expect(createHarness().component.isMobile()).toBe(false);
-    expect(createHarness({ isMobile: true }).component.isMobile()).toBe(true);
-  });
-
   it('builds featured and trending sections after init', () => {
     const { component } = createHarness({
       featured: [makeServer('f1')],

toju-app/src/app/domains/server-directory/feature/find-servers/find-servers.component.ts

@@ -1,6 +1,5 @@
 /* eslint-disable @typescript-eslint/member-ordering */
 import {
-  CUSTOM_ELEMENTS_SCHEMA,
   Component,
   computed,
   inject,
@@ -14,8 +13,6 @@ import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideArrowLeft } from '@ng-icons/lucide';
 
 import { ServerBrowserComponent, type ServerDiscoverySection } from '../server-browser/server-browser.component';
-import { ServersRailComponent } from '../../../../features/servers/servers-rail/servers-rail.component';
-import { ViewportService } from '../../../../core/platform';
 import { ServerDirectoryFacade } from '../../application/facades/server-directory.facade';
 import { selectSavedRooms } from '../../../../store/rooms/rooms.selectors';
 import type { Room } from '../../../../shared-kernel';
@@ -27,8 +24,7 @@ const RECENT_SERVER_LIMIT = 6;
 /**
  * Dedicated server-discovery page. Hosts the reusable {@link ServerBrowserComponent}
  * and feeds it featured, trending, and recently-active discovery sections. On mobile the
- * page is mounted inside a Swiper slide alongside the servers rail so the primary
- * navigation stays reachable, matching the chat-room and DM workspace layouts.
+ * global app-shell servers rail stays visible beside this page.
  */
 @Component({
   selector: 'app-find-servers',
@@ -37,19 +33,17 @@ const RECENT_SERVER_LIMIT = 6;
     CommonModule,
     RouterLink,
     NgIcon,
-    ServerBrowserComponent,
-    ServersRailComponent
+    ServerBrowserComponent
   ],
   viewProviders: [provideIcons({ lucideArrowLeft })],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  templateUrl: './find-servers.component.html'
+  templateUrl: './find-servers.component.html',
+  host: {
+    class: 'block h-full min-h-0 min-w-0 w-full overflow-hidden'
+  }
 })
 export class FindServersComponent implements OnInit {
   private store = inject(Store);
   private serverDirectory = inject(ServerDirectoryFacade);
-  private readonly viewport = inject(ViewportService);
-
-  readonly isMobile = this.viewport.isMobile;
   featured = signal<ServerInfo[]>([]);
   trending = signal<ServerInfo[]>([]);
   savedRooms = this.store.selectSignal(selectSavedRooms);