3.0 Beta 4

src/app/app.config.ts

@@ -1,16 +1,18 @@
 import {provideTaiga} from '@taiga-ui/core';
 import {ApplicationConfig, provideBrowserGlobalErrorListeners, isDevMode} from '@angular/core';
-import {provideRouter} from '@angular/router';
+import {provideRouter, withRouterConfig} from '@angular/router';
 
 import {routes} from './app.routes';
 import {provideTranslateService} from '@ngx-translate/core';
 import {provideTranslateHttpLoader} from '@ngx-translate/http-loader';
-import { provideServiceWorker } from '@angular/service-worker';
+import {provideServiceWorker} from '@angular/service-worker';
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideBrowserGlobalErrorListeners(),
-    provideRouter(routes),
+    provideRouter(routes, withRouterConfig({
+      paramsInheritanceStrategy: "always"
+    })),
     provideTaiga(),
     provideTranslateService({
       fallbackLang: "en",
@@ -19,9 +21,10 @@ export const appConfig: ApplicationConfig = {
         prefix: "/i18n/",
         suffix: ".json"
       })
-    }), provideServiceWorker('ngsw-worker.js', {
-            enabled: !isDevMode(),
-            registrationStrategy: 'registerWhenStable:30000'
-          })
+    }),
+    provideServiceWorker('ngsw-worker.js', {
+      enabled: !isDevMode(),
+      registrationStrategy: 'registerWhenStable:30000'
+    })
   ],
 };

src/app/app.routes.ts

@@ -7,6 +7,8 @@ import {authNeededGuard} from './guards/auth-needed-guard';
 import {Homepage} from './homepage/homepage';
 import {Privacy} from './privacy/privacy';
 import {TOS} from './tos/tos';
+import {Network} from './chat/network/network';
+import {Text} from './chat/network/channel/text/text';
 
 export const routes: Routes = [
   {path: '', component: Homepage},
@@ -16,6 +18,11 @@ export const routes: Routes = [
   {
     path: 'chat', component: Chat, canActivate: [authNeededGuard], children: [
       {path: 'dm/:chatid', component: Dm},
+      {
+        path: 'network/:networkId', component: Network, children: [
+          {path: ":categoryId/:channelId", component: Text}
+        ]
+      },
     ]
   },
 ];

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>

src/app/chat/chat.scss

@@ -61,7 +61,6 @@
       border-radius: 0 20px 20px 0;
       height: 100%;
       background: var(--tui-background-neutral-2);
-      padding: 15px;
     }
   }
 }

src/app/chat/chat.ts

@@ -11,6 +11,7 @@ import {WebSocketHandler} from '@chatenium/chatenium-sdk/core/webSocketHandler';
 import {TranslatePipe, TranslateService} from '@ngx-translate/core';
 import {environment} from '../../environments/environment';
 import {TuiTabBarComponent, TuiTabBarItem} from '@taiga-ui/addon-mobile';
+import {NetworkList} from './network-list/network-list';
 
 @Component({
   selector: 'app-chat',
@@ -27,7 +28,8 @@ import {TuiTabBarComponent, TuiTabBarItem} from '@taiga-ui/addon-mobile';
     TuiDialog,
     TranslatePipe,
     TuiTabBarComponent,
-    TuiTabBarItem
+    TuiTabBarItem,
+    NetworkList
   ],
   templateUrl: './chat.html',
   styleUrl: './chat.scss',
@@ -51,7 +53,7 @@ export class Chat implements OnInit {
     {
       text: "chat.tabBar.tab2",
       icon: '@tui.network',
-      implemented: false,
+      implemented: true,
     },
     {
       text: "chat.tabBar.tab3",
@@ -68,6 +70,10 @@ export class Chat implements OnInit {
   changeLogOpen = signal(false)
 
   async ngOnInit() {
+    if (this.router.url.startsWith("/chat/network")) {
+      this.navigationActiveIndex = 1
+    }
+
     this.indexedDb.openDatabase().then(async () => {
       const session = await this.serviceManager.sessionManager.loadPreferredSession()
       this.serviceManager.currentSession.set(session)

src/app/chat/dm/dm.html

@@ -1,7 +1,7 @@
 <main [class.mobile]="breakpoint() == 'mobile'">
   @defer (when store) {
     <navbar backButtonDest="/chat">
-      <div class="items-left">
+      <div class="data">
         <oimg [src]="store.chatData().pfp" height="50px" width="50px" [radius]="15"></oimg>
         <div class="chat-data">
           @if (store.chatData().displayName == "") {

src/app/chat/dm/dm.scss

@@ -1,7 +1,8 @@
 main {
-  height: 95svh;
+  height: 98svh;
   display: grid;
   grid-template-rows: 70px minmax(0, 1fr) auto;
+  padding: 15px;
 
   &.mobile {
     height: 100svh;

src/app/chat/dm/dm.ts

@@ -163,8 +163,7 @@ export class Dm implements OnInit {
       const chatData = this.serviceManager.chats().find(c => c.chatid === chatid);
 
       if (!session || !chatData) {
-        console.warn(`Initialization deferred for ${chatid}: Session or ChatData missing.`);
-        return;
+        return
       }
 
       if (!this.serviceManager.dmServices()[chatid]) {

src/app/chat/elements/message-box/message-box.html

@@ -80,12 +80,12 @@
       </button>
     </div>
     <div class="items-middle">
-      <textarea (keydown.enter)="handleEnterKeydown($event); viewModel().onMessageSend(message.value, null)" [style]="'height:'+textareaHeight+'px;'" #message (input)="onTextAreaInput(message)" [(ngModel)]="viewModel().message"></textarea>
+      <textarea (keydown.enter)="viewModel().message.set(''); handleEnterKeydown($event); viewModel().onMessageSend(message.value, null)" [style]="'height:'+textareaHeight+'px;'" #message (input)="onTextAreaInput(message)" [(ngModel)]="viewModel().message"></textarea>
       <span class="placeholder"
             [class.hidden]="message.value != ''">{{ "chat.elements.messageBox.placeholder"|translate }}</span>
     </div>
     <div class="items-right">
-      <button [disabled]="message.value.trim() == ''" tuiButton appearance="flat" (click)="viewModel().onMessageSend(message.value, null)">
+      <button [disabled]="message.value.trim() == ''" tuiButton appearance="flat" (click)="viewModel().message.set(''); viewModel().onMessageSend(message.value, null)">
         <tui-icon icon="@tui.send"/>
       </button>
     </div>

src/app/chat/elements/message-box/message-box.ts

@@ -101,6 +101,7 @@ export class MessageBox {
 
   sendMessageWithCaption() {
     this.viewModel().onMessageSend(this.viewModel().message(), this.viewModel().files())
+    this.viewModel().message.set("")
     this.viewModel().files.set([])
     this.viewModel().dialogOpen.set(false)
   }

src/app/chat/elements/messages/messages.html

@@ -2,7 +2,10 @@
   @for (message of messages(); track message.msgid; let i = $index) {
     <div
       class="message"
-      [class.author]="message.author == serviceManager.currentSession()!.userData.userid"
+      [class.author]="
+        messageAsDm(message).author == serviceManager.currentSession()!.userData.userid ||
+        messageAsNetwork(message).author.userid == serviceManager.currentSession()!.userData.userid
+      "
       [class.chained_start]="isMessageStartOfChain(i)"
       [class.chained_middle]="isMessageMiddleInChain(i)"
       [class.chained_end]="isMessageEndOfChain(i)"

src/app/chat/elements/messages/messages.scss

@@ -9,6 +9,7 @@
   .message {
     display: flex;
     flex-direction: column;
+    align-items: start;
 
     &.author {
       align-items: end;

src/app/chat/elements/navbar/navbar.html

@@ -1,10 +1,13 @@
-<nav [class.mobile]="breakpoint() == 'mobile'">
-  @if (breakpoint() == "mobile") {
+<nav [class.includeBackButton]="breakpoint() == showBackButtonAt()" [class.mobile]="breakpoint() == 'mobile'" [class.alignCenter]="dataAlignment() == 'center'">
+  @if (breakpoint() == showBackButtonAt()) {
     <div>
       <button (click)="router.navigate([backButtonDest()])" tuiButton appearance="flat" iconStart="@tui.chevron-left">
         {{"back"|translate}}
       </button>
     </div>
   }
+  @if (dataAlignment() == "center" && breakpoint() != showBackButtonAt()) {
+    <div></div> <!-- filler to align data to center -->
+  }
   <ng-content></ng-content>
 </nav>

src/app/chat/elements/navbar/navbar.scss

@@ -2,18 +2,31 @@ nav {
   display: grid;
   grid-template-columns: 1fr 1fr;
 
-  &.mobile {
-    zoom: 0.85;
+  &.includeBackButton {
     grid-template-columns: 1fr 1fr 1fr;
 
-    ::ng-deep .items-left {
+    ::ng-deep .data {
       display: flex;
       justify-content: center;
       align-items: center;
     }
   }
 
-  ::ng-deep .items-right, ::ng-deep .items-left {
+  &.mobile {
+    zoom: 0.85;
+  }
+
+  &.alignCenter {
+    grid-template-columns: 1fr 1fr 1fr;
+
+    ::ng-deep .data {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+
+  ::ng-deep .items-right, ::ng-deep .data {
     display: flex;
     gap: 10px;
     align-items: center;

src/app/chat/elements/navbar/navbar.ts

@@ -22,4 +22,6 @@ export class Navbar {
   breakpoint = inject(TUI_BREAKPOINT)
   router = inject(Router)
   backButtonDest = input.required<string>()
+  showBackButtonAt = input<"desktopSmall"|"mobile">("mobile")
+  dataAlignment = input<"left"|"center">("left")
 }

src/app/chat/network-list/network-list.html

@@ -0,0 +1,14 @@
+<button disabled tuiButton appearance="secondary" iconStart="@tui.plus">
+  {{ "chat.chatnav.networkList.newNetwork"|translate }}
+</button>
+
+@for (network of serviceManager.networks(); track network.networkId) {
+  <button [class.enlarge]="breakpoint() == 'mobile'" tuiButton
+          [appearance]="router.url == '/chat/network/' + network.networkId ? 'primary' : 'flat'"
+          [routerLink]="'/chat/network/' + network.networkId">
+    <oimg [src]="network.picture" height="35px" width="35px" [radius]="10"></oimg>
+    <div class="info">
+      <span>{{ network.name }}</span>
+    </div>
+  </button>
+}

src/app/chat/network-list/network-list.scss

@@ -0,0 +1,28 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+
+  button {
+    width: 100%;
+    display: flex;
+    justify-content: start;
+    font-weight: 600;
+
+    &.enlarge {
+      height: 75px;
+    }
+
+    .info {
+      display: flex;
+      flex-direction: column;
+      text-align: start;
+
+      .latest_message {
+        margin-top: -5px;
+        font-size: 12px;
+        opacity: 50%;
+      }
+    }
+  }
+}

src/app/chat/network-list/network-list.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NetworkList } from './network-list';
+
+describe('NetworkList', () => {
+  let component: NetworkList;
+  let fixture: ComponentFixture<NetworkList>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [NetworkList],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(NetworkList);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/chat/network-list/network-list.ts

@@ -0,0 +1,41 @@
+import {Component, inject, input, OnInit} from '@angular/core';
+import {IndexedDB} from '../../storage/indexed-db';
+import {Router, RouterLink} from '@angular/router';
+import {LoadStatus, ServiceManager} from '../../service-manager';
+import {TUI_BREAKPOINT, TuiButton} from '@taiga-ui/core';
+import {ChatService} from '@chatenium/chatenium-sdk/services/chatService';
+import {NetworkService} from '@chatenium/chatenium-sdk/services/networkService';
+import {Oimg} from '../elements/oimg/oimg';
+import {TranslatePipe} from '@ngx-translate/core';
+
+@Component({
+  selector: 'network-list',
+  imports: [
+    Oimg,
+    TranslatePipe,
+    TuiButton,
+    RouterLink
+  ],
+  templateUrl: './network-list.html',
+  styleUrl: './network-list.scss',
+})
+export class NetworkList implements OnInit {
+  userid = input<string>("")
+  token = input<string>("")
+
+  indexedDb = inject(IndexedDB)
+  router = inject(Router)
+  serviceManager = inject(ServiceManager)
+  breakpoint = inject(TUI_BREAKPOINT)
+
+  async ngOnInit() {
+    this.serviceManager.networkService = new NetworkService(this.userid(), this.token(), "", this.indexedDb.getApi(), () => {})
+    try {
+      this.serviceManager.networks.set(await this.serviceManager.networkService.get())
+      this.serviceManager.networksStatus.set(LoadStatus.loaded)
+    } catch (e) {
+      console.error(e)
+      this.serviceManager.networksStatus.set(LoadStatus.error)
+    }
+  }
+}

src/app/chat/network/channel/text/text.html

@@ -0,0 +1,34 @@
+<main [class.mobile]="breakpoint() == 'mobile'">
+  @defer (when store) {
+    <navbar backButtonDest="/chat/network/{{networkId}}" showBackButtonAt="desktopSmall">
+      <div class="data">
+        <div class="chat-data">
+          @switch (store!.channelData().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 class="main-name">{{ store!.channelData().name }}</span>
+        </div>
+      </div>
+
+      <div class="items-right">
+        <button tuiButton appearance="flat" disabled>
+          <tui-icon icon="@tui.phone"/>
+        </button>
+      </div>
+    </navbar>
+
+    <messages [messageBoxViewModel]="store!.messageBox" [messages]="store!.messages()" id="scrollContainer"
+              (onDelete)="deleteMessage($event)"/>
+
+    <message-box [viewModel]="store!.messageBox"/>
+  }
+
+</main>

src/app/chat/network/channel/text/text.scss

@@ -0,0 +1,43 @@
+main {
+  height: 98svh;
+  display: grid;
+  grid-template-rows: 70px minmax(0, 1fr) auto;
+  padding: 15px;
+
+  &.mobile {
+    height: 100svh;
+    padding: 15px;
+  }
+
+  .mobile {
+    height: 5px;
+  }
+
+  navbar {
+    .chat-data {
+      display: flex;
+      justify-content: center;
+      gap: 5px;
+
+      .main-name {
+        font-size: 18px;
+        font-weight: bold;
+      }
+
+      .alt-name {
+        margin-top: -5px;
+        color: gray;
+        font-size: 12px;
+      }
+    }
+
+    .items-right {
+      margin-top: -10px;
+
+      button {
+        width: 35px;
+        height: 35px;
+      }
+    }
+  }
+}

src/app/chat/network/channel/text/text.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Text } from './text';
+
+describe('Text', () => {
+  let component: Text;
+  let fixture: ComponentFixture<Text>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [Text],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(Text);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/chat/network/channel/text/text.ts

@@ -0,0 +1,235 @@
+import {Component, inject, signal} from '@angular/core';
+import {DmStorage, ServiceManager, TextChannelStorage} from '../../../../service-manager';
+import {ActivatedRoute} from '@angular/router';
+import {IndexedDB} from '../../../../storage/indexed-db';
+import {TUI_BREAKPOINT, TuiButton, TuiIcon} from '@taiga-ui/core';
+import {FileDataWithPreview, MessageBox} from '../../../elements/message-box/message-box';
+import {Attachment} from '@chatenium/chatenium-sdk/domain/common.schema';
+import {FileUploadProgressListener} from '@chatenium/chatenium-sdk/domain/fileUploadService.schema';
+import {MessageBoxViewModel} from '../../../elements/message-box/message-box-viewmodel';
+import {TextChannelServiceService} from '@chatenium/chatenium-sdk/services/textChannelService';
+import {Message} from '@chatenium/chatenium-sdk/domain/textChannelService.schema';
+import {Messages} from '../../../elements/messages/messages';
+import {Navbar} from '../../../elements/navbar/navbar';
+import {Oimg} from '../../../elements/oimg/oimg';
+
+@Component({
+  selector: 'app-text',
+  imports: [
+    MessageBox,
+    Messages,
+    Navbar,
+    Oimg,
+    TuiButton,
+    TuiIcon
+  ],
+  templateUrl: './text.html',
+  styleUrl: './text.scss',
+})
+export class Text {
+  serviceManager = inject(ServiceManager)
+  route = inject(ActivatedRoute)
+  indexedDb = inject(IndexedDB)
+  breakpoint = inject(TUI_BREAKPOINT)
+
+  networkId = ""
+  channelId = ""
+  categoryId = ""
+
+  get store(): TextChannelStorage | null {
+    if (!this.serviceManager.networkServices()[this.networkId]) {
+      return null
+    }
+    return this.serviceManager.networkServices()[this.networkId].textChannels()[this.channelId]
+  }
+
+  async sendMessage(message: string, files: FileDataWithPreview[] | null) {
+    if (!this.store) return
+    if (!files && message.trim() == "") return
+
+    const session = this.serviceManager.currentSession();
+    if (session != null) {
+      const editedMessage = this.store.messageBox.editingMessage()
+      if (editedMessage) {
+        const storedMsg = this.store.messages().find(m => m.msgid == editedMessage.messageId)
+        const originalMessage: Message = JSON.parse(JSON.stringify(storedMsg))
+        if (storedMsg) {
+          storedMsg.message = message
+        }
+
+        try {
+          await this.store.service.editMessage(editedMessage.messageId, message)
+        } catch (e) {
+          if (storedMsg) {
+            storedMsg.message = originalMessage.message
+          }
+        }
+
+        this.store.messageBox.editingMessage.set(null)
+        this.store.messageBox.message.set("")
+        return
+      }
+
+      let attachments: Attachment[] = []
+      files?.forEach(file => {
+        const extraMetaData: Record<string, string> = {}
+        extraMetaData["thumbnailMetaData"] = file.videoThumbnail ?? ""
+
+        attachments.push({
+          fileName: file.name,
+          fileId: file.fileId,
+          type: file.type,
+          format: file.extension,
+          path: file.blob,
+          height: file.height,
+          width: file.width,
+          extraMetaData: extraMetaData
+        })
+      })
+
+      this.store.messages.update(value => [...value, {
+        author: {
+          userid: session.userData.userid,
+          pfp: session.userData.pfp,
+          username: session.userData.username,
+          displayName: session.userData.displayName
+        },
+        msgid: "",
+        message: message,
+        sent_at: {
+          T: 0,
+          I: 0
+        },
+        isEdited: false,
+        channelId: "",
+        networkId: "",
+        categoryId: "",
+        files: [],
+        seen: false,
+        replyTo: "",
+        replyToId: "",
+        forwardedFrom: "",
+        forwardedFromName: ""
+      }])
+
+      this.scrollToBottom("smooth")
+
+      await this.store.service.sendMessage("", message, null, null, files, <FileUploadProgressListener>{
+        fileProgressUpdate: (tempMsgId, fileId, allChunks, chunksDone) => {
+          this.uploadProgressUpdate(tempMsgId, fileId, allChunks, chunksDone)
+        }
+      })
+    }
+
+    this.store.messageBox.message.set("")
+  }
+
+  async deleteMessage(messageId: string) {
+    if (!this.store) return
+    const i = this.store.messages().findIndex(m => m.msgid == messageId)
+    if (i != -1) {
+      const originalMessage: Message = JSON.parse(JSON.stringify(this.store.messages()[i]))
+      this.store.messages().splice(i, 1)
+      try {
+        await this.store.service.deleteMessages([messageId])
+      } catch (e) {
+        this.store.messages().splice(i, 0, originalMessage)
+      }
+    }
+  }
+
+  scrollToBottom(anim: 'instant' | 'smooth'): void {
+    setTimeout(() => {
+      const scrollContainer = <HTMLDivElement>document.querySelector("#scrollContainer")
+      scrollContainer.scroll({
+        top: scrollContainer.scrollHeight,
+        left: 0,
+        behavior: anim
+      });
+    }, 0)
+  }
+
+  uploadProgressUpdate(tempMsgId: string, fileId: string, allChunks: number, chunksDone: number) {
+    console.log(fileId, allChunks, chunksDone)
+  }
+
+  // The chatid parameter ensures isolation
+  onWsListen(action: string, message: string, networkId: string, channelId: string) {
+    const data = JSON.parse(message);
+    if (data.channelId === channelId) {
+      const targetStore = this.serviceManager.networkServices()[networkId].textChannels()[channelId];
+      if (targetStore) {
+        switch (action) {
+          case "newMessage":
+            targetStore.messages.update(messages => [...messages, data]);
+            this.scrollToBottom("smooth")
+            break;
+        }
+      }
+    }
+  }
+
+  ngOnInit() {
+    this.route.params.subscribe(async params => {
+      const networkId = params['networkId'];
+      const categoryId = params['categoryId'];
+      const channelId = params['channelId'];
+      this.networkId = networkId;
+      this.categoryId = categoryId;
+      this.channelId = channelId;
+
+      const session = this.serviceManager.currentSession();
+      const networkData = this.serviceManager.networks().find(c => c.networkId === networkId);
+
+      if (!session || !networkData) {
+        console.warn("No network data")
+        return
+      }
+
+      const categoryData = networkData.categories.find(c => c.categoryId === categoryId);
+      if (!categoryData) {
+        console.warn("No category data")
+        return
+      }
+      const channelData = categoryData.channels.find(c => c.channelId === channelId);
+      if (!channelData) {
+        console.warn("No channel data")
+        return
+      }
+      if (!this.serviceManager.networkServices()[networkId]) {
+        console.warn("No networkService")
+        return
+      }
+      console.log(this.serviceManager.networkServices())
+      console.log(this.serviceManager.networkServices()[networkId])
+      if (!this.serviceManager.networkServices()[networkId].textChannels()[channelId]) {
+        const newStore = {
+          categoryData: signal(categoryData),
+          channelData: signal(channelData),
+          messages: signal<Message[]>([]),
+          messageBox: new MessageBoxViewModel((msg, files) => this.sendMessage(msg, files)),
+          wsListener: (action, data) => this.onWsListen(action, data, networkId, categoryId),
+        } as TextChannelStorage;
+
+        newStore.service = new TextChannelServiceService(
+          session.userData.userid,
+          session.token,
+          networkId,
+          categoryId,
+          channelId,
+          this.indexedDb.getApi(),
+          (action, data) => newStore.wsListener(action, data)
+        );
+
+        this.serviceManager.networkServices()[networkId].textChannels()[channelId] = newStore;
+
+        const currentStore = this.serviceManager.networkServices()[networkId].textChannels()[channelId]
+        const history = await currentStore.service.get();
+        currentStore.messages.set(history);
+        this.scrollToBottom("instant")
+
+        await currentStore.service.joinWebSocketRoom();
+      }
+    });
+  }
+}

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>
+}

src/app/chat/network/network.scss

@@ -0,0 +1,45 @@
+#layout {
+  overflow-y: scroll;
+  width: 100%;
+  height: 100%;
+  display: grid;
+  grid-template-columns: 0 100%;
+  overflow-x: hidden;
+  padding: 15px;
+  transition: 0.2s;
+
+  &.routerOutletActive {
+    overflow-y: hidden;
+    padding: 0;
+    grid-template-columns: 1fr 300px;
+
+    #router {
+      background: var(--tui-background-neutral-1-pressed);
+    }
+
+    main {
+      padding: 15px;
+    }
+  }
+
+  &.hideNetworkNav {
+    grid-template-columns: 1fr;
+
+    #network-data {
+      &.hidden {
+        display: none;
+      }
+    }
+  }
+
+  .category {
+    background: var(--tui-background-base-alt);
+    width: 100%;
+    padding: 15px;
+
+    .channel {
+      display: flex;
+      justify-content: start;
+    }
+  }
+}

src/app/chat/network/network.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Network } from './network';
+
+describe('Network', () => {
+  let component: Network;
+  let fixture: ComponentFixture<Network>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [Network],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(Network);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/chat/network/network.ts

@@ -0,0 +1,76 @@
+import {Component, inject, OnInit, signal} from '@angular/core';
+import {ActivatedRoute, RouterLink, RouterOutlet} from '@angular/router';
+import {Chat} from '@chatenium/chatenium-sdk/domain/chatService.schema';
+import {Message} from '@chatenium/chatenium-sdk/domain/dmService.schema';
+import {MessageBoxViewModel} from '../elements/message-box/message-box-viewmodel';
+import {DmStorage, NetworkStorage, ServiceManager} from '../../service-manager';
+import {DMService} from '@chatenium/chatenium-sdk/services/dmService';
+import {Network as NetworkData} from "@chatenium/chatenium-sdk/domain/networkService.schema"
+import {NetworkService} from '@chatenium/chatenium-sdk/services/networkService';
+import {IndexedDB} from '../../storage/indexed-db';
+import {Navbar} from '../elements/navbar/navbar';
+import {Oimg} from '../elements/oimg/oimg';
+import {TUI_BREAKPOINT, TuiButton, TuiGroup, TuiIcon} from '@taiga-ui/core';
+
+@Component({
+  selector: 'app-network',
+  imports: [
+    RouterOutlet,
+    Navbar,
+    Oimg,
+    TuiGroup,
+    TuiButton,
+    TuiIcon,
+    RouterLink
+  ],
+  templateUrl: './network.html',
+  styleUrl: './network.scss',
+})
+export class Network implements OnInit {
+  serviceManager = inject(ServiceManager)
+  route = inject(ActivatedRoute)
+  indexedDb = inject(IndexedDB)
+  breakpoint = inject(TUI_BREAKPOINT)
+
+  routerOutletActive = signal(false)
+
+  networkId = ""
+  get store() {
+    return this.serviceManager.networkServices()[this.networkId]
+  }
+
+  ngOnInit() {
+    this.route.params.subscribe(async params => {
+      console.log("Loading network...")
+      const networkId = params['networkId'];
+      this.networkId = networkId;
+
+      const session = this.serviceManager.currentSession();
+      const networkData = this.serviceManager.networks().find(c => c.networkId === networkId);
+
+      if (!session || !networkData) {
+        console.warn(`Initialization deferred for ${networkId}: Session or NetworkData missing.`);
+        return;
+      }
+
+      if (!this.serviceManager.networkServices()[networkId]) {
+        const newStore = {
+          networkData: signal<NetworkData>(networkData),
+          textChannels: signal({}),
+          wsListener: (action, data) => {
+          },
+        } as NetworkStorage;
+
+        newStore.service = new NetworkService(
+          session.userData.userid,
+          session.token,
+          networkId,
+          this.indexedDb.getApi(),
+          (action, data) => newStore.wsListener(action, data)
+        );
+
+        this.serviceManager.networkServices()[networkId] = newStore;
+      }
+    });
+  }
+}

src/app/service-manager.ts

@@ -9,6 +9,10 @@ import {Chat} from '@chatenium/chatenium-sdk/domain/chatService.schema';
 import {DMService} from '@chatenium/chatenium-sdk/services/dmService';
 import {Message} from '@chatenium/chatenium-sdk/domain/dmService.schema';
 import {MessageBoxViewModel} from './chat/elements/message-box/message-box-viewmodel';
+import {NetworkService} from '@chatenium/chatenium-sdk/services/networkService';
+import {Network, NetworkCategory, NetworkChannel} from '@chatenium/chatenium-sdk/domain/networkService.schema';
+import {TextChannelServiceService} from '@chatenium/chatenium-sdk/services/textChannelService';
+import {Message as NetworkMessage} from '@chatenium/chatenium-sdk/domain/textChannelService.schema';
 
 @Injectable({
   providedIn: 'root',
@@ -25,6 +29,12 @@ export class ServiceManager {
   chatsStatus = signal<LoadStatus>(LoadStatus.loading)
   chats = signal<Chat[]>([])
 
+  networkService: NetworkService | null = null // Initialized in network-list.ts
+  networksStatus = signal<LoadStatus>(LoadStatus.loading)
+  networks = signal<Network[]>([])
+  // Services for individual networks
+  networkServices = signal<Record<string, NetworkStorage>>({})
+
   dmServices = signal<Record<string, DmStorage>>({})
 }
 
@@ -42,3 +52,19 @@ export interface DmStorage {
   messageBox: MessageBoxViewModel
   wsListener: (action: string, message: string) => void
 }
+
+export interface NetworkStorage {
+  service: NetworkService
+  networkData: WritableSignal<Network>
+  wsListener: (action: string, message: string) => void
+  textChannels: WritableSignal<Record<string, TextChannelStorage>>
+}
+
+export interface TextChannelStorage {
+  service: TextChannelServiceService
+  messages: WritableSignal<NetworkMessage[]>
+  channelData: WritableSignal<NetworkChannel>
+  categoryData: WritableSignal<NetworkCategory>
+  messageBox: MessageBoxViewModel
+  wsListener: (action: string, message: string) => void
+}

src/app/storage/indexed-db.ts

@@ -6,7 +6,7 @@ import {DatabaseAPI} from '@chatenium/chatenium-sdk/storage/database';
   providedIn: 'root'
 })
 export class IndexedDB {
-  private dbVersion = 1
+  private dbVersion = 2
   private db: IDBDatabase | null = null
 
   getApi(): DatabaseAPI {
@@ -35,6 +35,7 @@ export class IndexedDB {
         db.createObjectStore('networks', { keyPath: 'id' })
         db.createObjectStore('files', { keyPath: 'id' })
         db.createObjectStore('messages', { keyPath: 'id' })
+        db.createObjectStore('networkmessages', { keyPath: 'id' })
       }
 
       request.onsuccess = (event: Event) => {