3.0 Beta 4

src/app/chat/network/network.html

@@ -0,0 +1,44 @@
+@defer(when store) {
+  <div id="layout" [class.routerOutletActive]="routerOutletActive()" [class.hideNetworkNav]="routerOutletActive() && breakpoint() == 'desktopSmall'">
+    <div id="router">
+      <router-outlet (activate)="routerOutletActive.set(true)" (deactivate)="routerOutletActive.set(false)"></router-outlet>
+    </div>
+    <div id="network-data">
+      <navbar backButtonDest="/chat" dataAlignment="center">
+        <div class="data">
+          <oimg [src]="store.networkData().picture" height="50px" width="50px" [radius]="15"></oimg>
+          <h2>{{store.networkData().name}}</h2>
+        </div>
+
+        <div class="items-right"></div>
+      </navbar>
+
+      <main tuiGroup orientation="vertical" style="width: 100%">
+        @for (category of store.networkData().categories; track category) {
+          <div class="category">
+            <h2>{{category.name}}</h2>
+
+            <div tuiGroup orientation="vertical" style="width: 100%">
+              @for (channel of category.channels; track channel) {
+                <button tuiButton class="channel" appearance="secondary" [disabled]="channel.type != 'message'" [routerLink]="'/chat/network/'+store.networkData().networkId+'/'+category.categoryId+'/'+channel.channelId">
+                  @switch (channel.type) {
+                    @case ("message") {
+                      <tui-icon icon="@tui.hash"></tui-icon>
+                    }
+                    @case ("broadcast") {
+                      <tui-icon icon="@tui.radio"></tui-icon>
+                    }
+                    @case ("voice") {
+                      <tui-icon icon="@tui.audio-lines"></tui-icon>
+                    }
+                  }
+                  <span>{{channel.name}}</span>
+                </button>
+              }
+            </div>
+          </div>
+        }
+      </main>
+    </div>
+  </div>
+}