@if (store.chatData().displayName == "") {
diff --git a/src/app/chat/dm/dm.scss b/src/app/chat/dm/dm.scss
index 9d2c8dd..598f4fe 100644
--- a/src/app/chat/dm/dm.scss
+++ b/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;
diff --git a/src/app/chat/dm/dm.ts b/src/app/chat/dm/dm.ts
index 16d046e..37e348e 100644
--- a/src/app/chat/dm/dm.ts
+++ b/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]) {
diff --git a/src/app/chat/elements/message-box/message-box.html b/src/app/chat/elements/message-box/message-box.html
index 255e113..b7ee41c 100644
--- a/src/app/chat/elements/message-box/message-box.html
+++ b/src/app/chat/elements/message-box/message-box.html
@@ -80,12 +80,12 @@
-
+
{{ "chat.elements.messageBox.placeholder"|translate }}
-
diff --git a/src/app/chat/elements/message-box/message-box.ts b/src/app/chat/elements/message-box/message-box.ts
index ec3cf33..3715264 100644
--- a/src/app/chat/elements/message-box/message-box.ts
+++ b/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)
}
diff --git a/src/app/chat/elements/messages/messages.html b/src/app/chat/elements/messages/messages.html
index c4c8d8e..31c5867 100644
--- a/src/app/chat/elements/messages/messages.html
+++ b/src/app/chat/elements/messages/messages.html
@@ -2,7 +2,10 @@
@for (message of messages(); track message.msgid; let i = $index) {
- @if (breakpoint() == "mobile") {
+
diff --git a/src/app/chat/elements/navbar/navbar.scss b/src/app/chat/elements/navbar/navbar.scss
index 82a78b4..89cae16 100644
--- a/src/app/chat/elements/navbar/navbar.scss
+++ b/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;
diff --git a/src/app/chat/elements/navbar/navbar.ts b/src/app/chat/elements/navbar/navbar.ts
index e536427..6cb52f3 100644
--- a/src/app/chat/elements/navbar/navbar.ts
+++ b/src/app/chat/elements/navbar/navbar.ts
@@ -22,4 +22,6 @@ export class Navbar {
breakpoint = inject(TUI_BREAKPOINT)
router = inject(Router)
backButtonDest = input.required
()
+ showBackButtonAt = input<"desktopSmall"|"mobile">("mobile")
+ dataAlignment = input<"left"|"center">("left")
}
diff --git a/src/app/chat/network-list/network-list.html b/src/app/chat/network-list/network-list.html
new file mode 100644
index 0000000..9ba0f74
--- /dev/null
+++ b/src/app/chat/network-list/network-list.html
@@ -0,0 +1,14 @@
+
+
+@for (network of serviceManager.networks(); track network.networkId) {
+
+}
diff --git a/src/app/chat/network-list/network-list.scss b/src/app/chat/network-list/network-list.scss
new file mode 100644
index 0000000..22667f0
--- /dev/null
+++ b/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%;
+ }
+ }
+ }
+}
diff --git a/src/app/chat/network-list/network-list.spec.ts b/src/app/chat/network-list/network-list.spec.ts
new file mode 100644
index 0000000..84178ac
--- /dev/null
+++ b/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;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [NetworkList],
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(NetworkList);
+ component = fixture.componentInstance;
+ await fixture.whenStable();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/chat/network-list/network-list.ts b/src/app/chat/network-list/network-list.ts
new file mode 100644
index 0000000..9c4073b
--- /dev/null
+++ b/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("")
+ token = input("")
+
+ 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)
+ }
+ }
+}
diff --git a/src/app/chat/network/channel/text/text.html b/src/app/chat/network/channel/text/text.html
new file mode 100644
index 0000000..c14871f
--- /dev/null
+++ b/src/app/chat/network/channel/text/text.html
@@ -0,0 +1,34 @@
+
+ @defer (when store) {
+
+
+
+ @switch (store!.channelData().type) {
+ @case ("message") {
+
+ }
+ @case ("broadcast") {
+
+ }
+ @case ("voice") {
+
+ }
+ }
+ {{ store!.channelData().name }}
+
+
+
+
+
+
+
+
+
+ }
+
+
diff --git a/src/app/chat/network/channel/text/text.scss b/src/app/chat/network/channel/text/text.scss
new file mode 100644
index 0000000..2965716
--- /dev/null
+++ b/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;
+ }
+ }
+ }
+}
diff --git a/src/app/chat/network/channel/text/text.spec.ts b/src/app/chat/network/channel/text/text.spec.ts
new file mode 100644
index 0000000..540ea23
--- /dev/null
+++ b/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;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [Text],
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(Text);
+ component = fixture.componentInstance;
+ await fixture.whenStable();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/chat/network/channel/text/text.ts b/src/app/chat/network/channel/text/text.ts
new file mode 100644
index 0000000..3122b38
--- /dev/null
+++ b/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 = {}
+ 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, {
+ 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 = 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([]),
+ 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();
+ }
+ });
+ }
+}
diff --git a/src/app/chat/network/network.html b/src/app/chat/network/network.html
new file mode 100644
index 0000000..a914bb4
--- /dev/null
+++ b/src/app/chat/network/network.html
@@ -0,0 +1,44 @@
+@defer(when store) {
+
+
+
+
+
+
+
+
+
{{store.networkData().name}}
+
+
+
+
+
+
+ @for (category of store.networkData().categories; track category) {
+
+
{{category.name}}
+
+
+ @for (channel of category.channels; track channel) {
+
+ }
+
+
+
+