Start implementing direct messaging and continued developing the chatnav

src/app/chat/dm/dm.html

@@ -0,0 +1,27 @@
+@defer (when store) {
+  <navbar>
+    <div class="items-left">
+       <oimg [src]="store.chatData.pfp" height="50px" width="50px" [radius]="15"></oimg>
+      <div class="chat-data">
+        @if (store.chatData.displayName == "") {
+          <span class="main-name">{{'@'+store.chatData.username}}</span>
+        } @else {
+          <span class="main-name">{{store.chatData.displayName}}</span>
+          <span class="alt-name">{{'@'+store.chatData.username}}</span>
+        }
+      </div>
+    </div>
+
+    <div class="items-right">
+      <button tuiButton appearance="flat">
+        <tui-icon icon="@tui.phone"/>
+      </button>
+    </div>
+  </navbar>
+
+  <main>
+
+  </main>
+
+  <message-box/>
+}

src/app/chat/dm/dm.scss

@@ -0,0 +1,33 @@
+:host {
+  height: 100%;
+  display: grid;
+  grid-template-rows: 70px minmax(0, 1fr) auto;
+
+  navbar {
+    .chat-data {
+      display: flex;
+      flex-direction: column;
+
+      .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/dm/dm.spec.ts

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

src/app/chat/dm/dm.ts

@@ -0,0 +1,56 @@
+import {Component, inject, OnInit} from '@angular/core';
+import {DmStorage, ServiceManager} from '../../service-manager';
+import {ActivatedRoute} from '@angular/router';
+import {DMService} from '@chatenium/chatenium-sdk/services/dmService';
+import {IndexedDB} from '../../storage/indexed-db';
+import {Navbar} from '../elements/navbar/navbar';
+import {Oimg} from '../elements/oimg/oimg';
+import {TuiButton, TuiIcon} from '@taiga-ui/core';
+import {MessageBox} from '../elements/message-box/message-box';
+
+@Component({
+  selector: 'app-dm',
+  imports: [
+    Navbar,
+    Oimg,
+    TuiButton,
+    TuiIcon,
+    MessageBox
+  ],
+  templateUrl: './dm.html',
+  styleUrl: './dm.scss',
+})
+export class Dm implements OnInit {
+  serviceManager = inject(ServiceManager)
+  route = inject(ActivatedRoute)
+  indexedDb = inject(IndexedDB)
+
+  chatid = ""
+
+  get store(): DmStorage {
+    return this.serviceManager.dmServices()[this.chatid]
+  }
+
+  ngOnInit() {
+    this.route.params.subscribe(params => {
+      const chatid = params['chatid']
+      this.chatid = chatid
+      console.log(this.serviceManager.chats())
+      const session = this.serviceManager.currentSession();
+      const chatData = this.serviceManager.chats().find(chat => chat.chatid == chatid)
+
+      if (!this.serviceManager.dmServices()[chatid] && session != null && chatData != null) {
+        this.serviceManager.dmServices()[chatid] = {
+          service: new DMService(
+            session.userData.userid,
+            session.token,
+            chatid,
+            this.indexedDb.getApi(),
+            () => {}
+          ),
+          chatData: chatData
+        }
+      }
+    })
+  }
+}