3.0 Beta 7

2026-04-15 17:35:55 +02:00
20 changed files with 261 additions and 145 deletions
--- a/README.md
+++ b/README.md
@@ -1,2 +1,2 @@
-# Chatenium On Web
-A modern web application for Chatenium compatible with a wide range of devices.
+# Chatenium Nexum
+The next generation Web application for Chatenium, built on modern standards powered by Chatenium SDK (TypeScript).
--- a/package-lock.json
+++ b/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.10",
+        "@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.10",
-      "resolved": "https://registry.npmjs.org/@chatenium/chatenium-sdk/-/chatenium-sdk-1.1.10.tgz",
-      "integrity": "sha512-FRVKyOzkKQ5wWFL/m3G731VXhvqo3IHpKFcseWfpX5TxBq6Kh9GxpjN8/JQgQ5X+KDES1Nrm4FqOHkVw5CVHyA==",
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@chatenium/chatenium-sdk/-/chatenium-sdk-1.1.11.tgz",
+      "integrity": "sha512-iwYHyED1AnGcWtyeVo+R1JfxVauuIC5FCX8Rk6RwF+ls/oUIg1aExFgvif2wc0qUyT9mla8ztBt+wBB/cTy4hA==",
      "dependencies": {
        "@faker-js/faker": "^10.4.0",
        "axios": "^1.14.0",
--- a/package.json
+++ b/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.10",
+    "@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",
--- a/public/i18n/en.json
+++ b/public/i18n/en.json
@@ -1,5 +1,5 @@
 {
-  "version": "3.0 Beta 6 (April 14, 2026)",
+  "version": "Chatenium Nexum 3.0 Beta 7 (April 15, 2026)",
  "ok": "Ok",
  "back": "Back",
  "aChatProgram": "A messaging platform that you can trust.",
@@ -10,13 +10,14 @@
  "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",
-    "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.",
+    "adaptsTo": "Chatenium adapts to ",
+    "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™",
@@ -105,8 +106,9 @@
    "changeLogDialog": {
      "label": "Chatenium has been updated",
      "changeLog": {
-        "1": "UI issue fixes in the message box",
-        "2": "Added caching to improve performance"
+        "1": "Added progress bar to files when uploading attachments",
+        "2": "Bug fixes related to sending messages",
+        "3": "Fixed scrolling issues when switching chats. Also now the scroll position is now saved"
      }
    },
    "chatnav": {
--- a/src/app/chat/chat.html
+++ b/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"
--- a/src/app/chat/dm/dm.html
+++ b/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"/>
  }
--- a/src/app/chat/dm/dm.ts
+++ b/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
@@ -170,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;

@@ -187,6 +240,7 @@ export class Dm implements OnInit {
        try {
          const messagesCache = await currentStore.service.getQuick();
          currentStore.messages.set(messagesCache);
+          this.scrollToBottom("instant")
        } catch (e) {
          console.warn(`Cache load failed: ${e}. Skipping cache load...`)
        }
@@ -195,6 +249,8 @@ export class Dm implements OnInit {
        this.scrollToBottom("instant")

        await currentStore.service.joinWebSocketRoom();
+      } else {
+        this.scrollToBottom("instant")
      }
    });
  }
--- a/src/app/chat/elements/message-box/message-box.html
+++ b/src/app/chat/elements/message-box/message-box.html
@@ -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>
--- a/src/app/chat/elements/messages/messages-viewmodel.ts
+++ b/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)
+}
--- a/src/app/chat/elements/messages/messages.html
+++ b/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") {
-              <img [src]="file.path"
-                   style="width: 100%; height: 100%; max-height: 300px; object-fit: cover; border-radius: 25px"/>
-            } @else if (file.type == "video") {
+            <div style="position:relative;">
              @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>
+                @if (file.extraMetaData['progressShown']) {
+                  <tui-progress-circle
+                    style="position: absolute; top: 0; right: 0; z-index: 10; transform: translate(-50%, -50%)"
+                    [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">
-              <tui-icon icon="@tui.file"/>
+            <div style="width: 100%; height: 50px; display: flex; align-items: center; padding: 0 10px; background: var(--tui-background-base-alt); gap: 5px">
+              @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>
          }
--- a/src/app/chat/elements/messages/messages.scss
+++ b/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;
      }
    }

--- a/src/app/chat/elements/messages/messages.ts
+++ b/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',
--- a/src/app/chat/network/channel/text/text.html
+++ b/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"/>
--- a/src/app/chat/network/channel/text/text.ts
+++ b/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) {
-    console.log(fileId, allChunks, chunksDone)
+  handleMessagesScroll(e: any) {
+    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;
@@ -225,13 +281,17 @@ export class Text {
        try {
          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")
      }
    });
  }
--- a/src/app/homepage/homepage.html
+++ b/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>
-          <tui-icon icon="@tui.globe" style="font-size: 80px"></tui-icon>
-
-          <h2><a routerLink="/chat">{{ 'home.enterChtnOnWeb'|translate }}</a></h2>
-          <p>{{ 'home.enterChtnOnWebDesc'|translate }}</p>
+        <div class="disabled card">
+          <fa-icon [icon]="faLinux"></fa-icon>
+          <h2>Linux</h2>
+          <div tuiBadge appearance="accent">{{'home.soon'|translate}}</div>
        </div>

-        <div tuiCardLarge>
-          <fa-icon [icon]="faGooglePlay"></fa-icon>
-
-          <h2>{{ 'home.downloadChtnOnAndroid'|translate }}</h2>
-          <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 class="disabled card">
+          <fa-icon [icon]="faGoogle"></fa-icon>
+          <h2>Google</h2>
+          <div tuiBadge appearance="accent">{{'home.soon'|translate}}</div>
        </div>

-        <div tuiCardLarge>
-          <fa-icon [icon]="faAppStoreIos"></fa-icon>
-
-          <h2>{{ 'home.downloadChtnOnApple'|translate }}</h2>
-          <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 class="disabled card">
+          <fa-icon [icon]="faApple"></fa-icon>
+          <h2>Apple</h2>
+          <div tuiBadge appearance="accent">{{'home.soon'|translate}}</div>
        </div>

-        <div tuiCardLarge>
+        <div class="disabled card">
          <fa-icon [icon]="faMicrosoft"></fa-icon>
-
-          <h2>{{ 'home.downloadOnWindows'|translate }}</h2>
-          <div tuiBadge>{{'home.openBeta'|translate}}</div>
-          <p>{{'home.openBetaDesc'|translate}}</p>
-
-          <button (click)="msBetaTestDialogOpen = true" tuiButton iconStart="@tui.door-open">{{'home.requestAlphaAccess'|translate}}</button>
+          <h2>Microsoft</h2>
+          <div tuiBadge appearance="accent">{{'home.soon'|translate}}</div>
        </div>
      </div>
    </div>
--- a/src/app/homepage/homepage.scss
+++ b/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 {
--- a/src/app/homepage/homepage.ts
+++ b/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;
 }
--- a/src/app/service-manager.ts
+++ b/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
--- a/src/environments/environment.development.ts
+++ b/src/environments/environment.development.ts
@@ -1,5 +1,5 @@
 export const environment = {
-  version: "3.0-beta6",
+  version: "3.0-beta7",
  api_url: "http://localhost:3000",
  cdn_url: "http://localhost:4000",
  ws_url: "ws://localhost:3000",
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -1,5 +1,5 @@
 export const environment = {
-  version: "3.0-beta6",
+  version: "3.0-beta7",
  api_url: "https://api.chatenium.hu",
  cdn_url: "https://cdn.chatenium.hu",
  ws_url: "wss://api.chatenium.hu",