3.0 Beta 4

src/app/chat/chat.html

@@ -4,7 +4,6 @@
   <ul>
     <li>{{ "chat.changeLogDialog.changeLog.1"|translate }}</li>
     <li>{{ "chat.changeLogDialog.changeLog.2"|translate }}</li>
-    <li>{{ "chat.changeLogDialog.changeLog.3"|translate }}</li>
   </ul>
 
   <button tuiButton iconStart="@tui.check"
@@ -21,11 +20,11 @@
     <main id="layout" tuiGroup [collapsed]="true">
       <aside id="chatnav">
         <aside>
-          <tui-segmented id="mode_switcher">
+          <tui-segmented id="mode_switcher" [(activeItemIndex)]="navigationActiveIndex">
             <button>
               <tui-icon icon="@tui.message-circle"/>
             </button>
-            <button disabled style="pointer-events: none; opacity: 0.5">
+            <button>
               <tui-icon icon="@tui.network"/>
             </button>
             <button disabled style="pointer-events: none; opacity: 0.5">
@@ -39,14 +38,31 @@
         </aside>
 
         <main>
-          <app-dm-list [token]="serviceManager.currentSession()!.token"
-                       [userid]="serviceManager.currentSession()!.userData.userid"></app-dm-list>
+          @switch (navigationActiveIndex) {
+            @case (0) {
+              <app-dm-list [token]="serviceManager.currentSession()!.token"
+                           [userid]="serviceManager.currentSession()!.userData.userid"></app-dm-list>
+            }
+            @case (1) {
+              <network-list [token]="serviceManager.currentSession()!.token"
+                            [userid]="serviceManager.currentSession()!.userData.userid"></network-list>
+            }
+          }
         </main>
       </aside>
 
       <main id="content">
         <div id="content_tint">
-          @defer (when serviceManager.chatsStatus() != LoadStatus.loading) {
+          @if (router.url.startsWith("/chat/dm")) {
+            <!-- To ensure data is loaded -->
+            @defer (when serviceManager.chatsStatus() != LoadStatus.loading) {
+              <router-outlet/>
+            }
+          } @else if (router.url.startsWith("/chat/network")) {
+            @defer (when serviceManager.networksStatus() != LoadStatus.loading) {
+              <router-outlet/>
+            }
+          } @else {
             <router-outlet/>
           }
         </div>
@@ -62,6 +78,10 @@
                 <app-dm-list [token]="serviceManager.currentSession()!.token"
                              [userid]="serviceManager.currentSession()!.userData.userid"></app-dm-list>
               }
+              @case (1) {
+                <network-list [token]="serviceManager.currentSession()!.token"
+                              [userid]="serviceManager.currentSession()!.userData.userid"></network-list>
+              }
             }
           </div>
 
@@ -82,7 +102,16 @@
         </div>
       }
 
-      @defer (when serviceManager.chatsStatus() != LoadStatus.loading) {
+      @if (router.url.startsWith("/chat/dm")) {
+        <!-- To ensure data is loaded -->
+        @defer (when serviceManager.chatsStatus() != LoadStatus.loading) {
+          <router-outlet (activate)="routerOutletActive.set(true)" (deactivate)="routerOutletActive.set(false)"/>
+        }
+      } @else if (router.url.startsWith("/chat/network")) {
+        @defer (when serviceManager.networksStatus() != LoadStatus.loading) {
+          <router-outlet (activate)="routerOutletActive.set(true)" (deactivate)="routerOutletActive.set(false)"/>
+        }
+      } @else {
         <router-outlet (activate)="routerOutletActive.set(true)" (deactivate)="routerOutletActive.set(false)"/>
       }
     </main>