3.0 Beta 7

README.md

@@ -1,2 +1,2 @@
-# Chatenium On Web
+# Chatenium Nexum
-A modern web application for Chatenium compatible with a wide range of devices.
+The next generation Web application for Chatenium, built on modern standards powered by Chatenium SDK (TypeScript).

package-lock.json

@@ -16,7 +16,7 @@
         "@angular/platform-browser": "^21.2.0",
         "@angular/router": "^21.2.0",
         "@angular/service-worker": "^21.2.0",
-        "@chatenium/chatenium-sdk": "^1.1.8",
+        "@chatenium/chatenium-sdk": "^1.1.11",
         "@fortawesome/angular-fontawesome": "^4.0.0",
         "@fortawesome/free-brands-svg-icons": "^7.1.0",
         "@fortawesome/free-solid-svg-icons": "^7.1.0",
@@ -1011,9 +1011,9 @@
       }
     },
     "node_modules/@chatenium/chatenium-sdk": {
-      "version": "1.1.8",
+      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/@chatenium/chatenium-sdk/-/chatenium-sdk-1.1.8.tgz",
+      "resolved": "https://registry.npmjs.org/@chatenium/chatenium-sdk/-/chatenium-sdk-1.1.11.tgz",
-      "integrity": "sha512-UuPCr/NqZhLrT/lt8I1AM+UNFAdI00adtvvlu3BQgqCYPASoUpTJJ4HdMzJ+E0cb0pUS6DmN0Kv+w3vFQfRYwg==",
+      "integrity": "sha512-iwYHyED1AnGcWtyeVo+R1JfxVauuIC5FCX8Rk6RwF+ls/oUIg1aExFgvif2wc0qUyT9mla8ztBt+wBB/cTy4hA==",
       "dependencies": {
         "@faker-js/faker": "^10.4.0",
         "axios": "^1.14.0",

package.json

@@ -19,7 +19,7 @@
     "@angular/platform-browser": "^21.2.0",
     "@angular/router": "^21.2.0",
     "@angular/service-worker": "^21.2.0",
-    "@chatenium/chatenium-sdk": "^1.1.8",
+    "@chatenium/chatenium-sdk": "^1.1.11",
     "@fortawesome/angular-fontawesome": "^4.0.0",
     "@fortawesome/free-brands-svg-icons": "^7.1.0",
     "@fortawesome/free-solid-svg-icons": "^7.1.0",

public/i18n/en.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.0 Beta 5 (April 13, 2026)",
+  "version": "Chatenium Nexum 3.0 Beta 7 (April 15, 2026)",
   "ok": "Ok",
   "back": "Back",
   "aChatProgram": "A messaging platform that you can trust.",
@@ -8,14 +8,16 @@
   "independent": "Independent",
   "scrollDownForMore": "Scroll down for more",
   "whatIsChtn": "Chatenium is a chat platform aiming to provide a secure, well integrated fast chatting experience across any devices. You can create a new account for free and start chatting and broadcasting messages.",
+  "updating": "Updating...",
   "home": {
+    "soon": "Coming soon...",
     "chtn": "Chatenium ",
     "chtnIs": "Chatenium is ",
     "help": "Help",
     "blog": "Blog",
     "apiSpecs": "API specifications",
-    "adaptsToYou": "adapts to you",
+    "adaptsTo": "Chatenium adapts to ",
-    "adaptsToYouDesc": "We actively work on bringing Chatenium to every device, but not the fast way, the good way by developing a native application for each platform.",
+    "adaptsToYouDesc": "Choose your platform:",
     "chtnOnWeb": "Chatenium On Web",
     "chtnOnWebDesc": "Built for maximum compatibility. The Web will work on every device you have.",
     "chtnOnAndroid": "Chatenium On Android™",
@@ -104,9 +106,9 @@
     "changeLogDialog": {
       "label": "Chatenium has been updated",
       "changeLog": {
-        "1": "Started implementing Chatenium Pictures",
+        "1": "Added progress bar to files when uploading attachments",
-        "2": "Made small changes to the UI",
+        "2": "Bug fixes related to sending messages",
-        "3": "Minor bug fixes in message box"
+        "3": "Fixed scrolling issues when switching chats. Also now the scroll position is now saved"
       }
     },
     "chatnav": {

src/app/chat/chat.html

@@ -4,6 +4,7 @@
   <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"
@@ -57,7 +58,7 @@
 
       <main id="content">
         <div id="content_tint">
-          @if (router.url.startsWith("/chat/dm") && router.url.startsWith("/chat/picture")) {
+          @if (router.url.startsWith("/chat/dm") || router.url.startsWith("/chat/picture")) {
             <!-- To ensure data is loaded -->
             @defer (when serviceManager.chatsStatus() != LoadStatus.loading) {
               <router-outlet/>

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

@@ -1,7 +1,12 @@
 <button disabled tuiButton appearance="secondary" iconStart="@tui.mail-plus">
   {{"chat.chatnav.dmList.newChat"|translate}}
 </button>
-
+@if (serviceManager.chatsStatus() == LoadStatus.updating) {
+  <div id="loader">
+    <tui-loader />
+    {{"updating"|translate}}
+  </div>
+}
 @for (chat of serviceManager.chats(); track chat.chatid) {
   <button [class.enlarge]="breakpoint() == 'mobile'" tuiButton [appearance]="router.url == '/chat/dm/' + chat.chatid ? 'primary' : 'flat'" [routerLink]="'/chat/dm/' + chat.chatid">
     <oimg [src]="chat.pfp" height="35px" width="35px" [radius]="10"></oimg>

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

@@ -3,6 +3,14 @@
   flex-direction: column;
   gap: 5px;
 
+  #loader {
+    width: 100%;
+    display: flex;
+    justify-content: start;
+    padding: 5px;
+    gap: 5px;
+  }
+
   button {
     width: 100%;
     display: flex;

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

@@ -2,7 +2,7 @@ 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 {TUI_BREAKPOINT, TuiButton} from '@taiga-ui/core';
+import {TUI_BREAKPOINT, TuiButton, TuiLoader} from '@taiga-ui/core';
 import {Oimg} from '../elements/oimg/oimg';
 import {Router, RouterLink} from '@angular/router';
 import {TranslatePipe} from '@ngx-translate/core';
@@ -14,7 +14,8 @@ import {LoadStatus, ServiceManager} from '../../service-manager';
     TuiButton,
     Oimg,
     RouterLink,
-    TranslatePipe
+    TranslatePipe,
+    TuiLoader
   ],
   templateUrl: './dm-list.html',
   styleUrl: './dm-list.scss',
@@ -30,6 +31,12 @@ export class DmList implements OnInit {
 
   async ngOnInit() {
     this.serviceManager.chatService = new ChatService(this.userid(), this.token(), this.indexedDb.getApi(), () => {})
+    try {
+      this.serviceManager.chats.set(await this.serviceManager.chatService.getQuick())
+      this.serviceManager.chatsStatus.set(LoadStatus.updating)
+    } catch (e) {
+      console.warn(`Cache load failed: ${e}. Skipping cache load...`)
+    }
     try {
       this.serviceManager.chats.set(await this.serviceManager.chatService.get())
       this.serviceManager.chatsStatus.set(LoadStatus.loaded)
@@ -38,4 +45,6 @@ export class DmList implements OnInit {
       this.serviceManager.chatsStatus.set(LoadStatus.error)
     }
   }
+
+  protected readonly LoadStatus = LoadStatus;
 }

src/app/chat/dm/dm.html

@@ -20,7 +20,7 @@
       </div>
     </navbar>
 
-    <messages [messageBoxViewModel]="store.messageBox" [messages]="store.messages()" id="scrollContainer" (onDelete)="deleteMessage($event)"/>
+    <messages (scrollend)="handleMessagesScroll($event)" [messageBoxViewModel]="store.messageBox" [messages]="store.messages()" id="scrollContainer" (onDelete)="deleteMessage($event)"/>
 
     <message-box [viewModel]="store.messageBox"/>
   }

src/app/chat/dm/dm.ts

@@ -14,6 +14,8 @@ import {MessageBoxViewModel} from '../elements/message-box/message-box-viewmodel
 import {WebSocketHandler} from '@chatenium/chatenium-sdk/core/webSocketHandler';
 import {FileData, FileUploadProgressListener} from '@chatenium/chatenium-sdk/domain/fileUploadService.schema';
 import {Attachment} from '@chatenium/chatenium-sdk/domain/common.schema';
+import {MessagesViewModel} from '../elements/messages/messages-viewmodel';
+import {v4 as uuidv4} from 'uuid';
 
 @Component({
   selector: 'app-dm',
@@ -42,6 +44,7 @@ export class Dm implements OnInit {
 
   async sendMessage(message: string, files: FileDataWithPreview[] | null) {
     if (!files && message.trim() == "") return
+    this.scrollToBottom("smooth")
 
     const session = this.serviceManager.currentSession();
     if (session != null) {
@@ -66,8 +69,11 @@ export class Dm implements OnInit {
 
       let attachments: Attachment[] = []
       files?.forEach(file => {
-        const extraMetaData: Record<string, string> = {}
+        const extraMetaData: Record<string, any> = {}
         extraMetaData["thumbnailMetaData"] = file.videoThumbnail ?? ""
+        extraMetaData["progressShown"] = true
+        extraMetaData["totalChunks"] = 0
+        extraMetaData["uploadedChunks"] = 0
 
         attachments.push({
           fileName: file.name,
@@ -81,6 +87,7 @@ export class Dm implements OnInit {
         })
       })
 
+      const tempMsgId = uuidv4()
       this.store.messages.update(value => [...value, {
         message: message,
         chatid: this.chatid,
@@ -88,7 +95,7 @@ export class Dm implements OnInit {
         replyTo: "",
         author: session.userData.userid,
         seen: false,
-        msgid: "",
+        msgid: tempMsgId,
         forwardedFrom: "",
         isEdited: false,
         sent_at: {T: 0, I: 0},
@@ -98,14 +105,13 @@ export class Dm implements OnInit {
 
       this.scrollToBottom("smooth")
 
-      await this.store.service.sendMessage("", message, null, null, files, <FileUploadProgressListener>{
+      const respMessage = await this.store.service.sendMessage(tempMsgId, message, null, null, files, <FileUploadProgressListener>{
         fileProgressUpdate: (tempMsgId, fileId, allChunks, chunksDone) => {
           this.uploadProgressUpdate(tempMsgId, fileId, allChunks, chunksDone)
         }
       })
+      this.updateTempMessage(tempMsgId, respMessage)
     }
-
-    this.store.messageBox.message.set("")
   }
 
   async deleteMessage(messageId: string) {
@@ -125,15 +131,61 @@ export class Dm implements OnInit {
     setTimeout(() => {
       const scrollContainer = <HTMLDivElement>document.querySelector("#scrollContainer")
       scrollContainer.scroll({
-        top: scrollContainer.scrollHeight,
+        top: this.store.messagesVm.scrollBarStatus() == -1 ? scrollContainer.scrollHeight : this.store.messagesVm.scrollBarStatus(),
         left: 0,
         behavior: anim
       });
+
+      if (this.store.messagesVm.scrollBarStatus() == -1) {
+        this.store.messagesVm.scrollBarStatus.set(scrollContainer.scrollHeight)
+      }
     }, 0)
   }
 
+  handleMessagesScroll(e: any) {
+    this.store.messagesVm.scrollBarStatus.set(e.target.scrollTop)
+  }
+
   uploadProgressUpdate(tempMsgId: string, fileId: string, allChunks: number, chunksDone: number) {
-    console.log(fileId, allChunks, chunksDone)
+    console.log(tempMsgId, fileId, allChunks, chunksDone)
+    this.store.messages.update(messages =>
+      messages.map(m => {
+        if (m.msgid !== tempMsgId) return m;
+
+        return {
+          ...m,
+          files: m.files.map(f => {
+            if (f.fileId !== fileId) return f;
+            return {
+              ...f,
+              extraMetaData: {
+                ...f.extraMetaData,
+                totalChunks: allChunks,
+                uploadedChunks: chunksDone
+              }
+            };
+          })
+        };
+      })
+    );
+  }
+
+  updateTempMessage(tempMsgId: string, message: Message) {
+    this.store.messages.update(messages =>
+      messages.map(m => {
+        if (m.msgid !== tempMsgId) return m;
+
+        return {
+          ...m,
+          msgid: message.msgid,
+          sent_at: message.sent_at,
+          files: m.files.map(f => {
+            f.extraMetaData["progressShown"] = false
+            return f
+          })
+        };
+      })
+    );
   }
 
   // The chatid parameter ensures isolation
@@ -156,6 +208,7 @@ export class Dm implements OnInit {
     this.route.params.subscribe(async params => {
       const chatid = params['chatid'];
       this.chatid = chatid;
+      console.log(`Loading chat ${chatid}...`)
 
       const session = this.serviceManager.currentSession();
       const chatData = this.serviceManager.chats().find(c => c.chatid === chatid);
@@ -169,6 +222,7 @@ export class Dm implements OnInit {
           chatData: signal<Chat>(chatData),
           messages: signal<Message[]>([]),
           messageBox: new MessageBoxViewModel((msg, files) => this.sendMessage(msg, files)),
+          messagesVm: new MessagesViewModel(),
           wsListener: (action, data) => this.onWsListen(action, data, chatid),
         } as DmStorage;
 
@@ -183,11 +237,20 @@ export class Dm implements OnInit {
         this.serviceManager.dmServices()[chatid] = newStore;
 
         const currentStore = this.serviceManager.dmServices()[chatid];
-        const history = await currentStore.service.get();
+        try {
-        currentStore.messages.set(history);
+          const messagesCache = await currentStore.service.getQuick();
+          currentStore.messages.set(messagesCache);
+          this.scrollToBottom("instant")
+        } catch (e) {
+          console.warn(`Cache load failed: ${e}. Skipping cache load...`)
+        }
+        const messages = await currentStore.service.get();
+        currentStore.messages.set(messages);
         this.scrollToBottom("instant")
 
         await currentStore.service.joinWebSocketRoom();
+      } else {
+        this.scrollToBottom("instant")
       }
     });
   }

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

@@ -50,7 +50,7 @@
 </ng-template>
 
 <main>
-  <div id="message-box-extension" tuiAppearance="floating" [class.shown]="viewModel().editingMessage()">
+  <div id="message-box-extension" tuiAppearance="floating" [class.shown]="viewModel().editingMessage()" [class.fullWidth]="breakpoint() != 'desktopLarge'">
     <div id="content">
       @if (viewModel().editingMessage()) {
         <tui-icon icon="@tui.pencil"></tui-icon>
@@ -59,7 +59,7 @@
           <tui-icon icon="@tui.paperclip"></tui-icon>
           <span>{{"chat.elements.messageBox.attachments"|translate}}</span>
         } @else {
-          {{viewModel().editingMessage()!.message}}
+          <span style="width: 300px" tuiScrollable tuiFade>{{viewModel().editingMessage()!.message}}</span>
         }
       }
     </div>
@@ -80,12 +80,12 @@
       </button>
     </div>
     <div class="items-middle">
-      <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>
+      <textarea (keydown.enter)="viewModel().onMessageSend(message.value, null); viewModel().message.set(''); viewModel().editingMessage.set(null); handleEnterKeydown($event)" [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().message.set(''); viewModel().onMessageSend(message.value, null)">
+      <button [disabled]="message.value.trim() == ''" tuiButton appearance="flat" (click)="viewModel().onMessageSend(message.value, null); viewModel().message.set(''); viewModel().editingMessage.set(null);">
         <tui-icon icon="@tui.send"/>
       </button>
     </div>

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

@@ -67,6 +67,10 @@
       justify-content: center;
       height: 0;
 
+      &.fullWidth {
+        width: 100%;
+      }
+
       #content {
         padding-left: 10px;
         display: flex;

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

@@ -5,7 +5,7 @@ import {
   TuiButton,
   TuiDialog,
   TuiGroup,
-  TuiIcon,
+  TuiIcon, TuiScrollable,
   TuiScrollbarDirective,
   TuiTextfield
 } from '@taiga-ui/core';
@@ -17,7 +17,7 @@ import {v4 as uuidv4} from 'uuid';
 import {Masonry} from '../masonry/masonry';
 import {Oimg} from '../oimg/oimg';
 import {FileData} from '@chatenium/chatenium-sdk/domain/fileUploadService.schema';
-import {TuiTextarea, TuiTextareaComponent} from '@taiga-ui/kit';
+import {TuiFade, TuiTextarea, TuiTextareaComponent} from '@taiga-ui/kit';
 
 @Component({
   selector: 'message-box',
@@ -33,7 +33,9 @@ import {TuiTextarea, TuiTextareaComponent} from '@taiga-ui/kit';
     Oimg,
     Masonry,
     TuiTextfield,
-    TuiTextarea
+    TuiTextarea,
+    TuiScrollable,
+    TuiFade
   ],
   templateUrl: './message-box.html',
   styleUrl: './message-box.scss',

src/app/chat/elements/messages/messages-viewmodel.ts

@@ -0,0 +1,6 @@
+import {signal} from '@angular/core';
+
+export class MessagesViewModel {
+  // Saves scrolling state. First value initialized when scrolling to bottom on the message load
+  scrollBarStatus = signal<number>(-1)
+}

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

@@ -17,24 +17,47 @@
         <span class="message-text">{{ message.message }}</span>
         <masonry style="max-height: 300px">
           @for (file of filterExpressedMedia(message.files); track file) {
-            @if (file.type == "image") {
+            <div style="position:relative;">
-              <img [src]="file.path"
-                   style="width: 100%; height: 100%; max-height: 300px; object-fit: cover; border-radius: 25px"/>
-            } @else if (file.type == "video") {
               @if (file.extraMetaData && Object.keys(file.extraMetaData).length > 0) {
-                <video-player maxHeight="300px" maxWidth="300px" [src]="file.path"
+                @if (file.extraMetaData['progressShown']) {
-                              [thumbnailOverwrite]="file.extraMetaData['thumbnailMetaData']"></video-player>
+                  <tui-progress-circle
-              } @else {
+                    style="position: absolute; top: 0; right: 0; z-index: 10; transform: translate(-50%, -50%)"
-                <video-player maxHeight="300px" maxWidth="300px" [src]="file.path"></video-player>
+                    [max]="file.extraMetaData['totalChunks']"
+                    [value]="file.extraMetaData['uploadedChunks']"
+                  />
+                }
               }
-            }
+              @if (file.type == "image") {
+                <img [src]="file.path"
+                     style="width: 100%; height: 100%; max-height: 300px; object-fit: cover; border-radius: 25px"/>
+              } @else if (file.type == "video") {
+                @if (file.extraMetaData && Object.keys(file.extraMetaData).length > 0) {
+                  <video-player maxHeight="300px" maxWidth="300px" [src]="file.path"
+                                [thumbnailOverwrite]="file.extraMetaData['thumbnailMetaData']"></video-player>
+                } @else {
+                  <video-player maxHeight="300px" maxWidth="300px" [src]="file.path"></video-player>
+                }
+              }
+            </div>
           }
         </masonry>
 
         <div tuiGroup orientation="vertical" style="width: 100%">
           @for (file of filterNonExpressedMedia(message.files); track file) {
-            <div style="width: 100%; height: 50px; display: flex; align-items: center; padding: 0 10px; background: var(--tui-background-accent-1); gap: 5px">
+            <div style="width: 100%; height: 50px; display: flex; align-items: center; padding: 0 10px; background: var(--tui-background-base-alt); gap: 5px">
-              <tui-icon icon="@tui.file"/>
+              @if (file.extraMetaData && Object.keys(file.extraMetaData).length > 0) {
+                @if (file.extraMetaData['progressShown']) {
+                  <tui-progress-circle
+                    size="xs"
+                    [max]="file.extraMetaData['totalChunks']"
+                    [value]="file.extraMetaData['uploadedChunks']"
+                  />
+                } @else {
+                  <tui-icon icon="@tui.file"/>
+                }
+              } @else {
+                <tui-icon icon="@tui.file"/>
+              }
               <span>{{ file.fileName }}</span>
             </div>
           }

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

@@ -31,7 +31,7 @@
       }
 
       .bubble {
-        border-radius: 25px 10px 10px 10px !important;
+        border-radius: 10px 25px 10px 10px !important;
       }
     }
 
@@ -43,7 +43,7 @@
 
     &.chained_end {
       .bubble {
-        border-radius: 10px 10px 10px 25px !important;
+        border-radius: 10px 10px 25px 10px !important;
       }
     }
 

src/app/chat/elements/messages/messages.ts

@@ -18,6 +18,7 @@ import {TranslatePipe} from '@ngx-translate/core';
 import {MessageBoxViewModel} from '../message-box/message-box-viewmodel';
 import {FileDataWithPreview} from '../message-box/message-box';
 import {Attachment} from '@chatenium/chatenium-sdk/domain/common.schema';
+import {TuiProgressCircle} from '@taiga-ui/kit';
 
 @Component({
   selector: 'messages',
@@ -32,7 +33,8 @@ import {Attachment} from '@chatenium/chatenium-sdk/domain/common.schema';
     TranslatePipe,
     TuiDataListComponent,
     TuiGroup,
-    TuiIcon
+    TuiIcon,
+    TuiProgressCircle
   ],
   templateUrl: './messages.html',
   styleUrl: './messages.scss',

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

@@ -1,7 +1,12 @@
 <button disabled tuiButton appearance="secondary" iconStart="@tui.plus">
   {{ "chat.chatnav.networkList.newNetwork"|translate }}
 </button>
-
+@if (serviceManager.networksStatus() == LoadStatus.updating) {
+  <div id="loader">
+    <tui-loader />
+    {{"updating"|translate}}
+  </div>
+}
 @for (network of serviceManager.networks(); track network.networkId) {
   <button [class.enlarge]="breakpoint() == 'mobile'" tuiButton
           [appearance]="router.url.startsWith('/chat/network/' + network.networkId) ? 'primary' : 'flat'"

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

@@ -2,7 +2,7 @@ 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 {TUI_BREAKPOINT, TuiButton, TuiLoader} 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';
@@ -14,7 +14,8 @@ import {TranslatePipe} from '@ngx-translate/core';
     Oimg,
     TranslatePipe,
     TuiButton,
-    RouterLink
+    RouterLink,
+    TuiLoader
   ],
   templateUrl: './network-list.html',
   styleUrl: './network-list.scss',
@@ -30,6 +31,12 @@ export class NetworkList implements OnInit {
 
   async ngOnInit() {
     this.serviceManager.networkService = new NetworkService(this.userid(), this.token(), "", this.indexedDb.getApi(), () => {})
+    try {
+      this.serviceManager.networks.set(await this.serviceManager.networkService.getQuick())
+      this.serviceManager.networksStatus.set(LoadStatus.updating)
+    } catch (e) {
+      console.warn(`Cache load failed: ${e}. Skipping cache load...`)
+    }
     try {
       this.serviceManager.networks.set(await this.serviceManager.networkService.get())
       this.serviceManager.networksStatus.set(LoadStatus.loaded)
@@ -38,4 +45,6 @@ export class NetworkList implements OnInit {
       this.serviceManager.networksStatus.set(LoadStatus.error)
     }
   }
+
+  protected readonly LoadStatus = LoadStatus;
 }

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

@@ -25,7 +25,7 @@
       </div>
     </navbar>
 
-    <messages [messageBoxViewModel]="store!.messageBox" [messages]="store!.messages()" id="scrollContainer"
+    <messages (scrollend)="handleMessagesScroll($event)" [messageBoxViewModel]="store!.messageBox" [messages]="store!.messages()" id="scrollContainer"
               (onDelete)="deleteMessage($event)"/>
 
     <message-box [viewModel]="store!.messageBox"/>

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

@@ -12,6 +12,8 @@ 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';
+import {MessagesViewModel} from '../../../elements/messages/messages-viewmodel';
+import {v4 as uuidv4} from 'uuid';
 
 @Component({
   selector: 'app-text',
@@ -65,15 +67,16 @@ export class Text {
           }
         }
 
-        this.store.messageBox.editingMessage.set(null)
-        this.store.messageBox.message.set("")
         return
       }
 
       let attachments: Attachment[] = []
       files?.forEach(file => {
-        const extraMetaData: Record<string, string> = {}
+        const extraMetaData: Record<string, any> = {}
         extraMetaData["thumbnailMetaData"] = file.videoThumbnail ?? ""
+        extraMetaData["progressShown"] = true
+        extraMetaData["totalChunks"] = 0
+        extraMetaData["uploadedChunks"] = 0
 
         attachments.push({
           fileName: file.name,
@@ -87,6 +90,7 @@ export class Text {
         })
       })
 
+      const tempMsgId = uuidv4()
       this.store.messages.update(value => [...value, {
         author: {
           userid: session.userData.userid,
@@ -94,7 +98,7 @@ export class Text {
           username: session.userData.username,
           displayName: session.userData.displayName
         },
-        msgid: "",
+        msgid: tempMsgId,
         message: message,
         sent_at: {
           T: 0,
@@ -104,7 +108,7 @@ export class Text {
         channelId: "",
         networkId: "",
         categoryId: "",
-        files: [],
+        files: attachments,
         seen: false,
         replyTo: "",
         replyToId: "",
@@ -114,11 +118,12 @@ export class Text {
 
       this.scrollToBottom("smooth")
 
-      await this.store.service.sendMessage("", message, null, null, files, <FileUploadProgressListener>{
+      const respMessage = await this.store.service.sendMessage(tempMsgId, message, null, null, files, <FileUploadProgressListener>{
         fileProgressUpdate: (tempMsgId, fileId, allChunks, chunksDone) => {
           this.uploadProgressUpdate(tempMsgId, fileId, allChunks, chunksDone)
         }
       })
+      this.updateTempMessage(tempMsgId, respMessage)
     }
   }
 
@@ -138,19 +143,69 @@ export class Text {
 
   scrollToBottom(anim: 'instant' | 'smooth'): void {
     setTimeout(() => {
+      if (!this.store) {
+        return
+      }
       const scrollContainer = <HTMLDivElement>document.querySelector("#scrollContainer")
       scrollContainer.scroll({
-        top: scrollContainer.scrollHeight,
+        top: this.store.messagesVm.scrollBarStatus() == -1 ? scrollContainer.scrollHeight : this.store.messagesVm.scrollBarStatus(),
         left: 0,
         behavior: anim
       });
+
+      if (this.store.messagesVm.scrollBarStatus() == -1) {
+        this.store.messagesVm.scrollBarStatus.set(scrollContainer.scrollHeight)
+      }
     }, 0)
   }
 
-  uploadProgressUpdate(tempMsgId: string, fileId: string, allChunks: number, chunksDone: number) {
+  handleMessagesScroll(e: any) {
-    console.log(fileId, allChunks, chunksDone)
+    if (!this.store) return
+    this.store.messagesVm.scrollBarStatus.set(e.target.scrollTop)
   }
 
+  uploadProgressUpdate(tempMsgId: string, fileId: string, allChunks: number, chunksDone: number) {
+    if (!this.store) return
+    this.store.messages.update(messages =>
+      messages.map(m => {
+        if (m.msgid !== tempMsgId) return m;
+
+        return {
+          ...m,
+          files: m.files.map(f => {
+            if (f.fileId !== fileId) return f;
+            return {
+              ...f,
+              extraMetaData: {
+                ...f.extraMetaData,
+                totalChunks: allChunks,
+                uploadedChunks: chunksDone
+              }
+            };
+          })
+        };
+      })
+    );
+  }
+
+  updateTempMessage(tempMsgId: string, message: Message) {
+    if (!this.store) return
+    this.store.messages.update(messages =>
+      messages.map(m => {
+        if (m.msgid !== tempMsgId) return m;
+
+        return {
+          ...m,
+          msgid: message.msgid,
+          sent_at: message.sent_at,
+          files: m.files.map(f => {
+            f.extraMetaData["progressShown"] = false
+            return f
+          })
+        };
+      })
+    );
+  }
   // The chatid parameter ensures isolation
   onWsListen(action: string, message: string, networkId: string, channelId: string) {
     const data = JSON.parse(message);
@@ -205,6 +260,7 @@ export class Text {
           categoryData: signal(categoryData),
           channelData: signal(channelData),
           messages: signal<Message[]>([]),
+          messagesVm: new MessagesViewModel(),
           messageBox: new MessageBoxViewModel((msg, files) => this.sendMessage(msg, files)),
           wsListener: (action, data) => this.onWsListen(action, data, networkId, categoryId),
         } as TextChannelStorage;
@@ -222,11 +278,20 @@ export class Text {
         this.serviceManager.networkServices()[networkId].textChannels()[channelId] = newStore;
 
         const currentStore = this.serviceManager.networkServices()[networkId].textChannels()[channelId]
-        const history = await currentStore.service.get();
+        try {
-        currentStore.messages.set(history);
+          const messagesCache = await currentStore.service.getQuick();
+          currentStore.messages.set(messagesCache);
+          this.scrollToBottom("instant")
+        } catch (e) {
+          console.warn(`Cache load failed: ${e}. Skipping cache load...`)
+        }
+        const messages = await currentStore.service.get();
+        currentStore.messages.set(messages);
         this.scrollToBottom("instant")
 
         await currentStore.service.joinWebSocketRoom();
+      } else {
+        this.scrollToBottom("instant")
       }
     });
   }

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

@@ -30,6 +30,12 @@ export class PictureList implements OnInit {
 
   async ngOnInit() {
     this.serviceManager.chatService = new ChatService(this.userid(), this.token(), this.indexedDb.getApi(), () => {})
+    try {
+      this.serviceManager.chats.set(await this.serviceManager.chatService.getQuick())
+      this.serviceManager.chatsStatus.set(LoadStatus.updating)
+    } catch (e) {
+      console.warn(`Cache load failed: ${e}. Skipping cache load...`)
+    }
     try {
       this.serviceManager.chats.set(await this.serviceManager.chatService.get())
       this.serviceManager.chatsStatus.set(LoadStatus.loaded)

src/app/homepage/homepage.html

@@ -70,6 +70,11 @@
           {{'home.enterChtnOnWeb'|translate}}
         </button>
 
+        <button style="width: 350px" tuiButton appearance="secondary" (click)="openGit()">
+          <fa-icon [icon]="faGitAlt" style="font-size: 25px; display: flex; justify-content: center; width: 10px"></fa-icon>
+          Git
+        </button>
+
         <button style="width: 350px" appearance="secondary" (click)="openRoadmap()" tuiButton iconStart="@tui.chart-no-axes-gantt">
           Roadmap
         </button>
@@ -82,71 +87,6 @@
     </div>
   </section>
 
-  <section class="detailedFeature">
-    <div class="style">
-      <h1>{{ 'home.chtn'|translate }} <span style="color: var(--tui-status-negative)"><tui-icon icon="@tui.circle-gauge"></tui-icon>
-        {{ 'home.adaptsToYou'|translate }}</span></h1>
-      <p>{{ 'home.adaptsToYouDesc'|translate }}</p>
-
-      <div class="cardList">
-        <div tuiCardLarge>
-          <tui-icon icon="@tui.globe" style="font-size: 80px"></tui-icon>
-
-          <h2>{{ 'home.chtnOnWeb'|translate }}</h2>
-          <p>{{ 'home.chtnOnWebDesc'|translate }}</p>
-        </div>
-
-        <div tuiCardLarge>
-          <fa-icon [icon]="faAndroid"></fa-icon>
-
-          <h2>{{ 'home.chtnOnAndroid'|translate }}</h2>
-          <div tuiBadge>{{'home.openBeta'|translate}}</div>
-          <p>{{ 'home.chtnOnAndroidDesc'|translate }}</p>
-        </div>
-
-        <div tuiCardLarge>
-          <fa-icon [icon]="faApple"></fa-icon>
-
-          <h2>{{ 'home.chtnOnApple'|translate }}</h2>
-          <div tuiBadge>{{'home.openBeta'|translate}}</div>
-          <p>{{ 'home.chtnOnAppleDesc'|translate }}</p>
-        </div>
-
-        <div tuiCardLarge>
-          <fa-icon [icon]="faWindows"></fa-icon>
-
-          <h2>{{ 'home.chtnOnWindows'|translate }}</h2>
-          <div tuiBadge>{{'home.openBeta'|translate}}</div>
-          <p>{{ 'home.chtnOnWindowsDesc'|translate }}</p>
-        </div>
-
-        <div tuiCardLarge>
-          <fa-icon [icon]="faLinux"></fa-icon>
-
-          <h2>{{ 'home.chtnOnLinux'|translate }}</h2>
-          <div tuiBadge>{{'home.openBeta'|translate}}</div>
-          <p>{{ 'home.chtnOnLinuxDesc'|translate }}</p>
-        </div>
-
-        <div tuiCardLarge>
-          <fa-icon [icon]="faRecordVinyl"></fa-icon>
-
-          <h2>{{ 'home.chtnEcho'|translate }}</h2>
-          <div tuiBadge>{{'home.openBeta'|translate}}</div>
-          <p>{{ 'home.chtnEchoDesc'|translate }}</p>
-        </div>
-
-        <div tuiCardLarge>
-          <fa-icon [icon]="faDesktop"></fa-icon>
-
-          <h2>{{ 'home.chtnReson'|translate }}</h2>
-          <div tuiBadge>{{'home.openBeta'|translate}}</div>
-          <p>{{ 'home.chtnResonDesc'|translate }}</p>
-        </div>
-      </div>
-    </div>
-  </section>
-
   <section class="detailedFeature">
     <div class="style">
       <h1>{{ 'home.chtnIs'|translate }} <span style="color: var(--tui-status-positive)"><tui-icon icon="@tui.lock"></tui-icon>
@@ -192,48 +132,35 @@
     </div>
   </section>
 
-  <section class="detailedFeature" style="margin-bottom: 5%;">
+  <section class="detailedFeature" id="platformList" style="margin-bottom: 5%;">
     <div class="style">
-      <h1>{{ 'home.weAreExcitedFor'|translate }} <span style="color: var(--tui-status-negative)"><tui-icon icon="@tui.heart"></tui-icon>
+      <h1>{{ 'home.adaptsTo'|translate }} <span style="color: var(--tui-status-negative)"><tui-icon icon="@tui.heart"></tui-icon>
         {{ 'home.you'|translate }}</span></h1>
-      <p>{{ 'home.weAreExcitedForYouDesc'|translate }}</p>
+      <p>{{ 'home.adaptsToYouDesc'|translate }}</p>
 
       <div class="cardList">
-        <div tuiCardLarge>
+        <div class="disabled card">
-          <tui-icon icon="@tui.globe" style="font-size: 80px"></tui-icon>
+          <fa-icon [icon]="faLinux"></fa-icon>
-
+          <h2>Linux</h2>
-          <h2><a routerLink="/chat">{{ 'home.enterChtnOnWeb'|translate }}</a></h2>
+          <div tuiBadge appearance="accent">{{'home.soon'|translate}}</div>
-          <p>{{ 'home.enterChtnOnWebDesc'|translate }}</p>
         </div>
 
-        <div tuiCardLarge>
+        <div class="disabled card">
-          <fa-icon [icon]="faGooglePlay"></fa-icon>
+          <fa-icon [icon]="faGoogle"></fa-icon>
-
+          <h2>Google</h2>
-          <h2>{{ 'home.downloadChtnOnAndroid'|translate }}</h2>
+          <div tuiBadge appearance="accent">{{'home.soon'|translate}}</div>
-          <div tuiBadge>{{'home.openBeta'|translate}}</div>
-          <p>{{'home.openBetaDesc'|translate}}</p>
-
-          <button (click)="androidBetaTestDialogOpen = true" tuiButton iconStart="@tui.door-open">{{'home.requestAlphaAccess'|translate}}</button>
         </div>
 
-        <div tuiCardLarge>
+        <div class="disabled card">
-          <fa-icon [icon]="faAppStoreIos"></fa-icon>
+          <fa-icon [icon]="faApple"></fa-icon>
-
+          <h2>Apple</h2>
-          <h2>{{ 'home.downloadChtnOnApple'|translate }}</h2>
+          <div tuiBadge appearance="accent">{{'home.soon'|translate}}</div>
-          <div tuiBadge>{{'home.openBeta'|translate}}</div>
-          <p>{{'home.openBetaDesc'|translate}}</p>
-
-          <button (click)="appleBetaTestDialogOpen = true" tuiButton iconStart="@tui.door-open">{{'home.requestAlphaAccess'|translate}}</button>
         </div>
 
-        <div tuiCardLarge>
+        <div class="disabled card">
           <fa-icon [icon]="faMicrosoft"></fa-icon>
-
+          <h2>Microsoft</h2>
-          <h2>{{ 'home.downloadOnWindows'|translate }}</h2>
+          <div tuiBadge appearance="accent">{{'home.soon'|translate}}</div>
-          <div tuiBadge>{{'home.openBeta'|translate}}</div>
-          <p>{{'home.openBetaDesc'|translate}}</p>
-
-          <button (click)="msBetaTestDialogOpen = true" tuiButton iconStart="@tui.door-open">{{'home.requestAlphaAccess'|translate}}</button>
         </div>
       </div>
     </div>

src/app/homepage/homepage.scss

@@ -117,6 +117,35 @@ main {
       font-size: 20px;
     }
   }
+
+  #platformList {
+    .cardList {
+      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+
+      .card {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        gap: 10px;
+        aspect-ratio: 1/1;
+        background: var(--tui-background-base);
+        border-radius: 1.5rem;
+        cursor: pointer;
+
+        &.disabled {
+          pointer-events: none;
+          opacity: 0.5;
+        }
+
+        fa-icon {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+      }
+    }
+  }
 }
 
 .logo {

src/app/homepage/homepage.ts

@@ -8,7 +8,7 @@ import {FaIconComponent} from '@fortawesome/angular-fontawesome';
 import {
   faAndroid,
   faApple,
-  faAppStoreIos,
+  faAppStoreIos, faGitAlt, faGitee, faGoogle,
   faGooglePlay,
   faLinux,
   faMicrosoft,
@@ -97,6 +97,10 @@ export class Homepage {
     window.open('https://help.chatenium.hu/s/169154db-df3e-44cb-980d-2db1915ecdf8', '_blank')
   }
 
+  openGit() {
+    window.open('https://git.chatenium.hu', '_blank')
+  }
+
   openMsStore() {
     window.open('https://apps.microsoft.com/detail/9p1xq5vb62b0?ocid=webpdpshare', '_blank')
   }
@@ -150,4 +154,7 @@ export class Homepage {
   protected readonly faGooglePlay = faGooglePlay;
   protected readonly faAppStoreIos = faAppStoreIos;
   protected readonly faMicrosoft = faMicrosoft;
+  protected readonly faGoogle = faGoogle;
+  protected readonly faGitee = faGitee;
+  protected readonly faGitAlt = faGitAlt;
 }

src/app/service-manager.ts

@@ -16,6 +16,7 @@ import {Message as NetworkMessage} from '@chatenium/chatenium-sdk/domain/textCha
 import {PictureService} from '@chatenium/chatenium-sdk/services/pictureService';
 import {Album} from '@chatenium/chatenium-sdk/domain/pictureService.schema';
 import {PublicUserData} from '@chatenium/chatenium-sdk/domain/common.schema';
+import {MessagesViewModel} from './chat/elements/messages/messages-viewmodel';
 
 @Injectable({
   providedIn: 'root',
@@ -52,6 +53,7 @@ export enum LoadStatus {
 export interface DmStorage {
   service: DMService
   messages: WritableSignal<Message[]>
+  messagesVm: MessagesViewModel
   chatData: WritableSignal<Chat>
   messageBox: MessageBoxViewModel
   wsListener: (action: string, message: string) => void
@@ -73,6 +75,7 @@ export interface NetworkStorage {
 export interface TextChannelStorage {
   service: TextChannelServiceService
   messages: WritableSignal<NetworkMessage[]>
+  messagesVm: MessagesViewModel
   channelData: WritableSignal<NetworkChannel>
   categoryData: WritableSignal<NetworkCategory>
   messageBox: MessageBoxViewModel

src/environments/environment.development.ts

@@ -1,5 +1,5 @@
 export const environment = {
-  version: "3.0-beta5",
+  version: "3.0-beta7",
   api_url: "http://localhost:3000",
   cdn_url: "http://localhost:4000",
   ws_url: "ws://localhost:3000",

src/environments/environment.ts

@@ -1,5 +1,5 @@
 export const environment = {
-  version: "3.0-beta5",
+  version: "3.0-beta7",
   api_url: "https://api.chatenium.hu",
   cdn_url: "https://cdn.chatenium.hu",
   ws_url: "wss://api.chatenium.hu",