First commit

src/app/chat/chat.html

@@ -0,0 +1,38 @@
+@if (serviceManager.currentSession() == null) {
+  <main style="width: 100%; height: 100svh; display: flex; justify-content: center; align-items: center;">
+    <tui-loader size="xl"/>
+  </main>
+} @else {
+  <main id="layout">
+    <aside id="chatnav">
+      <aside>
+        <tui-segmented id="mode_switcher">
+          <button>
+            <tui-icon icon="@tui.message-circle"/>
+          </button>
+          <button>
+            <tui-icon icon="@tui.network"/>
+          </button>
+          <button>
+            <tui-icon icon="@tui.image"/>
+          </button>
+        </tui-segmented>
+
+        <button id="bottom_btn" tuiButton appearance="flat">
+          <tui-icon icon="@tui.cog"/>
+        </button>
+      </aside>
+
+      <main>
+        <app-dm-list [token]="serviceManager.currentSession()!.token" [userid]="serviceManager.currentSession()!.userData.userid"></app-dm-list>
+      </main>
+    </aside>
+
+    <main id="content">
+      <div id="content_tint">
+        {{serviceManager.currentSession()|json}}
+        <router-outlet/>
+      </div>
+    </main>
+  </main>
+}

src/app/chat/chat.scss

@@ -0,0 +1,54 @@
+#layout {
+  display: grid;
+  grid-template-columns: 20% 80%;
+  height: 100svh;
+
+  #chatnav {
+    display: grid;
+    grid-template-columns: 25% 75%;
+
+    aside {
+      padding: 15px;
+
+      #mode_switcher {
+        position: absolute;
+        top: 10%;
+        display: flex;
+        flex-direction: column;
+        width: 50px;
+        height: 150px;
+
+        &::before {
+          height: 50px;
+        }
+
+        button {
+          height: 50px;
+        }
+      }
+
+      #bottom_btn {
+        position: absolute;
+        bottom: 2%;
+        width: 50px;
+        height: 50px;
+      }
+    }
+
+    main {
+      padding: 25px;
+    }
+  }
+
+  #content {
+    width: 100%;
+    padding: 10px;
+
+    #content_tint {
+      height: 100%;
+      border-radius: 20px;
+      background: var(--tui-background-base-alt);
+      padding: 15px;
+    }
+  }
+}

src/app/chat/chat.spec.ts

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

src/app/chat/chat.ts

@@ -0,0 +1,34 @@
+import {Component, inject, OnInit} from '@angular/core';
+import {RouterOutlet} from '@angular/router';
+import {TuiSegmented} from '@taiga-ui/kit';
+import {TuiButton, TuiIcon, TuiLoader} from '@taiga-ui/core';
+import {SessionManager} from '@chatenium/chatenium-sdk/services/sessionManager';
+import {ServiceManager} from '../service-manager';
+import {IndexedDB} from '../storage/indexed-db';
+import {DmList} from './dm-list/dm-list';
+import {JsonPipe} from '@angular/common';
+
+@Component({
+  selector: 'app-chat',
+  imports: [
+    RouterOutlet,
+    TuiSegmented,
+    TuiIcon,
+    TuiButton,
+    TuiLoader,
+    DmList,
+    JsonPipe
+  ],
+  templateUrl: './chat.html',
+  styleUrl: './chat.scss',
+})
+export class Chat implements OnInit {
+  serviceManager = inject(ServiceManager)
+  indexedDb = inject(IndexedDB)
+
+  async ngOnInit() {
+    this.indexedDb.openDatabase().then(async () => {
+      this.serviceManager.currentSession.set(await this.serviceManager.sessionManager.loadPreferredSession())
+    })
+  }
+}

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

@@ -0,0 +1,3 @@
+@for (chat of chats(); track chat.chatid) {
+  {{chat.chatid}}
+}

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

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

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

@@ -0,0 +1,35 @@
+import {Component, inject, input, OnInit, signal} from '@angular/core';
+import {ChatService} from '@chatenium/chatenium-sdk/services/chatService';
+import {IndexedDB} from '../../storage/indexed-db';
+import {Chat} from '@chatenium/chatenium-sdk/domain/chatService.schema';
+import {JsonPipe} from '@angular/common';
+
+@Component({
+  selector: 'app-dm-list',
+  imports: [
+    JsonPipe
+  ],
+  templateUrl: './dm-list.html',
+  styleUrl: './dm-list.scss',
+})
+export class DmList implements OnInit {
+  userid = input<string>("")
+  token = input<string>("")
+
+  indexedDb = inject(IndexedDB)
+
+  service: ChatService | null = null
+  chats = signal<Chat[]>([])
+  chatsStatus = 0
+
+  async ngOnInit() {
+    this.service = new ChatService(this.userid(), this.token(), this.indexedDb.getApi(), () => {})
+    try {
+      this.chats.set(await this.service.get())
+      this.chatsStatus = 1
+    } catch (e) {
+      console.error(e)
+      this.chatsStatus = 2
+    }
+  }
+}