3.0 Beta 7

3.0 Beta 6
3.0 Beta 5
2026-04-15 17:35:55 +02:00 · 2026-04-14 17:51:02 +02:00 · 2026-04-13 15:14:24 +02:00 · 2026-04-12 17:40:51 +02:00
45 changed files with 792 additions and 178 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/angular.json
+++ b/angular.json
@@ -42,12 +42,12 @@
                {
                  "type": "initial",
                  "maximumWarning": "500kB",
-                  "maximumError": "1MB"
+                  "maximumError": "100MB"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "4kB",
-                  "maximumError": "8kB"
+                  "maximumError": "100MB"
                }
              ],
              "outputHashing": "all",
--- 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.7",
+        "@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.7",
-      "resolved": "https://registry.npmjs.org/@chatenium/chatenium-sdk/-/chatenium-sdk-1.1.7.tgz",
-      "integrity": "sha512-8stVVjKwwWZvUfVeWzSK1WGIiSt95Yxr80nfltZSDmqMKQaEA1sL9/2V6pobM4mCs9nzjUQQiniEPVQ0uxPXAg==",
+      "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.7",
+    "@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 4 (April 11, 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",
-    "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™",
@@ -104,11 +106,15 @@
    "changeLogDialog": {
      "label": "Chatenium has been updated",
      "changeLog": {
-        "1": "Added support for text channels inside networks",
-        "2": "Bug fixes in message box"
+        "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": {
+      "pictureList": {
+        "myPictures": "My pictures"
+      },
      "dmList": {
        "newChat": "Start new chat",
        "messageBox": {
@@ -121,6 +127,11 @@
        "newNetwork": "Start new network"
      }
    },
+    "pictures": {
+      "albumList": {
+        "noAlbum": "This user has no albums published"
+      }
+    },
    "elements": {
      "messageBox": {
        "editMessageLabel": "Editing message: ",
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -9,6 +9,7 @@ import {Privacy} from './privacy/privacy';
 import {TOS} from './tos/tos';
 import {Network} from './chat/network/network';
 import {Text} from './chat/network/channel/text/text';
+import {See} from './chat/picture/see/see';

 export const routes: Routes = [
  {path: '', component: Homepage},
@@ -18,6 +19,7 @@ export const routes: Routes = [
  {
    path: 'chat', component: Chat, canActivate: [authNeededGuard], children: [
      {path: 'dm/:chatid', component: Dm},
+      {path: 'picture/:uploaderId', component: See},
      {
        path: 'network/:networkId', component: Network, children: [
          {path: ":categoryId/:channelId", component: Text}
--- 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"
@@ -27,7 +28,7 @@
            <button>
              <tui-icon icon="@tui.network"/>
            </button>
-            <button disabled style="pointer-events: none; opacity: 0.5">
+            <button>
              <tui-icon icon="@tui.image"/>
            </button>
          </tui-segmented>
@@ -47,13 +48,17 @@
              <network-list [token]="serviceManager.currentSession()!.token"
                            [userid]="serviceManager.currentSession()!.userData.userid"></network-list>
            }
+            @case (2) {
+              <app-picture-list [token]="serviceManager.currentSession()!.token"
+                            [userid]="serviceManager.currentSession()!.userData.userid"></app-picture-list>
+            }
          }
        </main>
      </aside>

      <main id="content">
        <div id="content_tint">
-          @if (router.url.startsWith("/chat/dm")) {
+          @if (router.url.startsWith("/chat/dm") || router.url.startsWith("/chat/picture")) {
            <!-- To ensure data is loaded -->
            @defer (when serviceManager.chatsStatus() != LoadStatus.loading) {
              <router-outlet/>
--- a/src/app/chat/chat.ts
+++ b/src/app/chat/chat.ts
@@ -12,6 +12,7 @@ import {TranslatePipe, TranslateService} from '@ngx-translate/core';
 import {environment} from '../../environments/environment';
 import {TuiTabBarComponent, TuiTabBarItem} from '@taiga-ui/addon-mobile';
 import {NetworkList} from './network-list/network-list';
+import {PictureList} from './picture-list/picture-list';

@Component({
  selector: 'app-chat',
@@ -29,7 +30,8 @@ import {NetworkList} from './network-list/network-list';
    TranslatePipe,
    TuiTabBarComponent,
    TuiTabBarItem,
-    NetworkList
+    NetworkList,
+    PictureList
  ],
  templateUrl: './chat.html',
  styleUrl: './chat.scss',
@@ -72,6 +74,8 @@ export class Chat implements OnInit {
  async ngOnInit() {
    if (this.router.url.startsWith("/chat/network")) {
      this.navigationActiveIndex = 1
+    } else if (this.router.url.startsWith("/chat/picture")) {
+      this.navigationActiveIndex = 2
    }

    this.indexedDb.openDatabase().then(async () => {
--- a/src/app/chat/dm-list/dm-list.html
+++ b/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>
--- a/src/app/chat/dm-list/dm-list.scss
+++ b/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;
--- a/src/app/chat/dm-list/dm-list.spec.ts
+++ b/src/app/chat/dm-list/dm-list.spec.ts
@@ -2,7 +2,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';

 import { DmList } from './dm-list';

-describe('DmList', () => {
+describe('PictureList', () => {
  let component: DmList;
  let fixture: ComponentFixture<DmList>;

--- a/src/app/chat/dm-list/dm-list.ts
+++ b/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;
 }
--- 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) {
@@ -61,15 +64,16 @@ export class Dm implements OnInit {
          }
        }

-        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,
@@ -83,6 +87,7 @@ export class Dm implements OnInit {
        })
      })

+      const tempMsgId = uuidv4()
      this.store.messages.update(value => [...value, {
        message: message,
        chatid: this.chatid,
@@ -90,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},
@@ -100,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) {
@@ -127,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
@@ -158,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);
@@ -171,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;

@@ -185,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();
-        currentStore.messages.set(history);
+        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/chat/elements/masonry/masonry.scss
+++ b/src/app/chat/elements/masonry/masonry.scss
@@ -1,9 +1,8 @@
 :host {
  display: grid;
-  gap: 4px;
  height: 100%;

-  img {
+  ::ng-deep img {
    display: block;
    height: 100%;
    width: 100%;
--- a/src/app/chat/elements/message-box/message-box.html
+++ b/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>
--- a/src/app/chat/elements/message-box/message-box.scss
+++ b/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;
--- a/src/app/chat/elements/message-box/message-box.ts
+++ b/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',
@@ -104,6 +106,7 @@ export class MessageBox {
    this.viewModel().message.set("")
    this.viewModel().files.set([])
    this.viewModel().dialogOpen.set(false)
+    this.viewModel().editingMessage.set(null)
  }

  handleEnterKeydown(e: any) {
--- 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,6 +17,16 @@
        <span class="message-text">{{ message.message }}</span>
        <masonry style="max-height: 300px">
          @for (file of filterExpressedMedia(message.files); track file) {
+            <div style="position:relative;">
+              @if (file.extraMetaData && Object.keys(file.extraMetaData).length > 0) {
+                @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"/>
@@ -28,13 +38,26 @@
                  <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">
+              @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/elements/oimg/oimg.scss
+++ b/src/app/chat/elements/oimg/oimg.scss
@@ -0,0 +1,3 @@
+img {
+  display: block;
+}
--- a/src/app/chat/network-list/network-list.html
+++ b/src/app/chat/network-list/network-list.html
@@ -1,10 +1,15 @@
 <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 == '/chat/network/' + network.networkId ? 'primary' : 'flat'"
+          [appearance]="router.url.startsWith('/chat/network/' + network.networkId) ? 'primary' : 'flat'"
          [routerLink]="'/chat/network/' + network.networkId">
    <oimg [src]="network.picture" height="35px" width="35px" [radius]="10"></oimg>
    <div class="info">
--- a/src/app/chat/network-list/network-list.ts
+++ b/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;
 }
--- 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,14 +118,13 @@ 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)
    }
-
-    this.store.messageBox.message.set("")
  }

  async deleteMessage(messageId: string) {
@@ -140,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);
@@ -207,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;
@@ -224,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();
-        currentStore.messages.set(history);
+        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/chat/network/network.html
+++ b/src/app/chat/network/network.html
@@ -20,7 +20,7 @@

            <div tuiGroup orientation="vertical" style="width: 100%">
              @for (channel of category.channels; track channel) {
-                <button tuiButton class="channel" appearance="secondary" [disabled]="channel.type != 'message'" [routerLink]="'/chat/network/'+store.networkData().networkId+'/'+category.categoryId+'/'+channel.channelId">
+                <button tuiButton class="channel" [appearance]="router.url.endsWith(channel.channelId) ? 'primary' : 'secondary'" [disabled]="channel.type != 'message'" [routerLink]="'/chat/network/'+store.networkData().networkId+'/'+category.categoryId+'/'+channel.channelId">
                  @switch (channel.type) {
                    @case ("message") {
                      <tui-icon icon="@tui.hash"></tui-icon>
--- a/src/app/chat/network/network.scss
+++ b/src/app/chat/network/network.scss
@@ -14,7 +14,7 @@
    grid-template-columns: 1fr 300px;

    #router {
-      background: var(--tui-background-neutral-1-pressed);
+      background: var(--tui-background-neutral-1);
    }

    main {
--- a/src/app/chat/network/network.ts
+++ b/src/app/chat/network/network.ts
@@ -1,5 +1,5 @@
 import {Component, inject, OnInit, signal} from '@angular/core';
-import {ActivatedRoute, RouterLink, RouterOutlet} from '@angular/router';
+import {ActivatedRoute, Router, RouterLink, RouterOutlet} from '@angular/router';
 import {Chat} from '@chatenium/chatenium-sdk/domain/chatService.schema';
 import {Message} from '@chatenium/chatenium-sdk/domain/dmService.schema';
 import {MessageBoxViewModel} from '../elements/message-box/message-box-viewmodel';
@@ -31,6 +31,7 @@ export class Network implements OnInit {
  route = inject(ActivatedRoute)
  indexedDb = inject(IndexedDB)
  breakpoint = inject(TUI_BREAKPOINT)
+  router = inject(Router)

  routerOutletActive = signal(false)

--- a/src/app/chat/picture-list/picture-list.html
+++ b/src/app/chat/picture-list/picture-list.html
@@ -0,0 +1,16 @@
+<button (click)="router.navigate(['/chat/picture/'+serviceManager.currentSession()!.userData.userid])" tuiButton [appearance]="router.url == '/chat/picture/' + serviceManager.currentSession()!.userData.userid ? 'primary' : 'secondary'" iconStart="@tui.user">
+  {{"chat.chatnav.pictureList.myPictures"|translate}}
+</button>
+
+@for (chat of serviceManager.chats(); track chat.chatid) {
+  <button [class.enlarge]="breakpoint() == 'mobile'" tuiButton [appearance]="router.url == '/chat/picture/' + chat.userid ? 'primary' : 'flat'" [routerLink]="'/chat/picture/' + chat.userid">
+    <oimg [src]="chat.pfp" height="35px" width="35px" [radius]="10"></oimg>
+    <div class="info">
+      @if (chat.displayName == "") {
+        <span>{{'@'+chat.username}}</span>
+      } @else {
+        <span>{{chat.displayName}}</span>
+      }
+    </div>
+  </button>
+}
--- a/src/app/chat/picture-list/picture-list.scss
+++ b/src/app/chat/picture-list/picture-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%;
+      }
+    }
+  }
+}
--- a/src/app/chat/picture-list/picture-list.spec.ts
+++ b/src/app/chat/picture-list/picture-list.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PictureList } from './picture-list';
+
+describe('PictureList', () => {
+  let component: PictureList;
+  let fixture: ComponentFixture<PictureList>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PictureList],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(PictureList);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/chat/picture-list/picture-list.ts
+++ b/src/app/chat/picture-list/picture-list.ts
@@ -0,0 +1,47 @@
+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 {Oimg} from '../elements/oimg/oimg';
+import {Router, RouterLink} from '@angular/router';
+import {TranslatePipe} from '@ngx-translate/core';
+import {LoadStatus, ServiceManager} from '../../service-manager';
+
+@Component({
+  selector: 'app-picture-list',
+  imports: [
+    TuiButton,
+    Oimg,
+    RouterLink,
+    TranslatePipe
+  ],
+  templateUrl: './picture-list.html',
+  styleUrl: './picture-list.scss',
+})
+export class PictureList implements OnInit {
+  userid = input<string>("")
+  token = input<string>("")
+
+  indexedDb = inject(IndexedDB)
+  router = inject(Router)
+  serviceManager = inject(ServiceManager)
+  breakpoint = inject(TUI_BREAKPOINT)
+
+  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)
+    } catch (e) {
+      console.error(e)
+      this.serviceManager.chatsStatus.set(LoadStatus.error)
+    }
+  }
+}
--- a/src/app/chat/picture/see/see.html
+++ b/src/app/chat/picture/see/see.html
@@ -0,0 +1,61 @@
+<ng-template [(tuiDialog)]="viewerOpen">
+  <oimg [src]="viewedPicture!.path" height="100%" width="100%" [radius]="0"></oimg>
+</ng-template>
+
+<main>
+  @defer (when store) {
+    <navbar backButtonDest="/chat">
+      <div class="data">
+        <oimg [src]="store.uploaderData().pfp" height="50px" width="50px" [radius]="15"></oimg>
+        <div class="uploader-data">
+          @if (!store.uploaderData().displayName) {
+            <span class="main-name">{{'@'+store.uploaderData().username}}</span>
+          } @else {
+            <span class="main-name">{{store.uploaderData().displayName}}</span>
+            <span class="alt-name">{{'@'+store.uploaderData().username}}</span>
+          }
+        </div>
+      </div>
+
+      <div class="items-right">
+      </div>
+    </navbar>
+
+    <main>
+      @if (openedAlbum) {
+        <div style="display: flex; align-items: center; gap: 10px">
+          <button tuiButton appearance="flat" iconStart="@tui.chevron-left" (click)="exitAlbum()"></button>
+          <h1 style="padding: 0; margin: 0">{{openedAlbum.name}}</h1>
+        </div>
+
+        <div id="pictureList">
+          @for (picture of openedAlbum.images; track picture) {
+            <oimg (click)="viewPicture(picture)" [src]="picture.path" height="200px" width="200px" [radius]="25" objectFit="none"></oimg>
+          }
+        </div>
+      } @else {
+        @if (store.albums().length == 0) {
+          <tui-block-status style="height: 300px">
+            <tui-icon icon="@tui.frown" tuiSlot="top" style="font-size: 150px"></tui-icon>
+            <h4>{{"chat.pictures.albumList.noAlbum"|translate}}</h4>
+          </tui-block-status>
+        } @else {
+          <div id="albumList">
+            @for (album of store.albums(); track album) {
+              <div class="album" (click)="enterAlbum(album.albumId)">
+                <masonry [maxColSize]="3" style="height: 300px; pointer-events: none;">
+                  @for (file of album.images; track file) {
+                    <img [src]="file.path+'_thumbnail.png'" style="filter: blur(5px)"/>
+                  }
+                </masonry>
+                <div class="album-name">
+                  <h2>{{album.name}}</h2>
+                </div>
+              </div>
+            }
+          </div>
+        }
+      }
+    </main>
+  }
+</main>
--- a/src/app/chat/picture/see/see.scss
+++ b/src/app/chat/picture/see/see.scss
@@ -0,0 +1,85 @@
+main {
+  height: 98svh;
+  display: grid;
+  grid-template-rows: 70px minmax(0, 1fr) auto;
+  padding: 15px;
+
+  navbar {
+    .uploader-data {
+      display: flex;
+      flex-direction: column;
+
+      .main-name {
+        font-size: 18px;
+        font-weight: bold;
+      }
+
+      .alt-name {
+        margin-top: -5px;
+        color: gray;
+        font-size: 12px;
+      }
+    }
+
+    .items-right {
+      margin-top: -10px;
+
+      button {
+        width: 35px;
+        height: 35px;
+      }
+    }
+  }
+
+  #albumList {
+    display: flex;
+    gap: 10px;
+    flex-wrap: wrap;
+    align-content: flex-start;
+
+    .album {
+      width: 300px;
+      height: 300px;
+      background: var(--tui-background-base-alt);
+      border: 2px solid var(--tui-border-normal);
+      border-radius: 30px;
+      overflow: hidden;
+      position: relative;
+      cursor: pointer;
+
+      .album-name {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        background: color-mix(in srgb, var(--tui-background-base) 50%, transparent);
+        padding: 10px;
+        font-size: 18px;
+        font-weight: bold;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        h2 {
+          padding: 0;
+          margin: 0;
+        }
+      }
+    }
+  }
+
+  #pictureList {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    align-content: flex-start;
+    overflow-y: scroll;
+
+    oimg {
+      background: var(--tui-background-base-alt);
+      height: 200px;
+      border-radius: 25px;
+      cursor: pointer;
+    }
+  }
+}
--- a/src/app/chat/picture/see/see.spec.ts
+++ b/src/app/chat/picture/see/see.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { See } from './see';
+
+describe('See', () => {
+  let component: See;
+  let fixture: ComponentFixture<See>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [See],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(See);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/chat/picture/see/see.ts
+++ b/src/app/chat/picture/see/see.ts
@@ -0,0 +1,133 @@
+import {Component, inject, signal} from '@angular/core';
+import {DmStorage, PictureStorage, ServiceManager} from '../../../service-manager';
+import {ActivatedRoute, Router} from '@angular/router';
+import {IndexedDB} from '../../../storage/indexed-db';
+import {TUI_BREAKPOINT, TuiButton, TuiDialog, TuiIcon} from '@taiga-ui/core';
+import {PictureService} from '@chatenium/chatenium-sdk/services/pictureService';
+import {Navbar} from '../../elements/navbar/navbar';
+import {Oimg} from '../../elements/oimg/oimg';
+import {Masonry} from '../../elements/masonry/masonry';
+import {Album, Image} from '@chatenium/chatenium-sdk/domain/pictureService.schema';
+import {pictureHandlers} from '@chatenium/chatenium-sdk/mocks/handlers/picture.http';
+import {TuiBlockStatusComponent} from '@taiga-ui/layout';
+import {TranslatePipe} from '@ngx-translate/core';
+import {TuiBadgedContentDirective} from '@taiga-ui/kit';
+
+@Component({
+  selector: 'app-see',
+  imports: [
+    Navbar,
+    Oimg,
+    TuiButton,
+    TuiIcon,
+    Masonry,
+    TuiDialog,
+    TuiBlockStatusComponent,
+    TranslatePipe,
+    TuiBadgedContentDirective
+  ],
+  templateUrl: './see.html',
+  styleUrl: './see.scss',
+})
+export class See {
+  serviceManager = inject(ServiceManager)
+  route = inject(ActivatedRoute)
+  indexedDb = inject(IndexedDB)
+  breakpoint = inject(TUI_BREAKPOINT)
+  router = inject(Router)
+
+  uploaderId = ""
+  openedAlbum: Album | null = null
+
+  viewedPicture: Image | null = null
+  get viewerOpen() {
+    return this.viewedPicture != null
+  }
+  set viewerOpen(_: any) {
+    this.viewedPicture = null
+    this.router.navigate([], {
+      queryParams: { pictureId: null },
+      queryParamsHandling: "merge"
+    })
+  }
+
+  get store(): PictureStorage {
+    return this.serviceManager.pictureServices()[this.uploaderId]
+  }
+
+  enterAlbum(albumId: string) {
+    this.router.navigate([], {
+      queryParams: { albumId: albumId },
+      queryParamsHandling: "merge"
+    })
+  }
+
+  exitAlbum() {
+    this.openedAlbum = null
+    this.router.navigate([], {
+      queryParams: { albumId: null },
+      queryParamsHandling: "merge"
+    })
+  }
+
+  viewPicture(picture: Image) {
+    this.viewedPicture = picture
+    this.router.navigate([], {
+      queryParams: { pictureId: picture.imageId },
+      queryParamsHandling: "merge"
+    })
+  }
+
+  ngOnInit() {
+    this.route.params.subscribe(async params => {
+      const uploaderId = params['uploaderId'];
+      this.uploaderId = uploaderId;
+
+      const session = this.serviceManager.currentSession();
+      if (!session) {
+        return
+      }
+
+      if (!this.serviceManager.pictureServices()[uploaderId]) {
+        const newService = new PictureService(
+          session.token,
+          uploaderId,
+          session.userData.userid,
+          this.indexedDb.getApi(),
+        );
+
+        const uploaderInfo = await newService.get()
+
+        this.serviceManager.pictureServices.update(services => ({
+          ...services,
+          [uploaderId]: {
+            albums: signal(uploaderInfo.pictures),
+            uploaderData: signal(uploaderInfo.userData),
+            service: newService,
+          } as PictureStorage
+        }));
+
+        // Show album
+        this.route.queryParams.subscribe(params => {
+          const albumId = params['albumId'];
+          if (albumId) {
+            const album = uploaderInfo.pictures.find(a => a.albumId === albumId)
+            if (album) {
+              this.openedAlbum = album
+
+              const pictureId = params['pictureId'];
+              if (pictureId) {
+                const picture = album.images.find(img => img.imageId === pictureId)
+                if (picture) {
+                  this.viewedPicture = picture
+                }
+              }
+            }
+          }
+        })
+      }
+    });
+  }
+
+  protected readonly pictureHandlers = pictureHandlers;
+}
--- 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
@@ -13,6 +13,10 @@ import {NetworkService} from '@chatenium/chatenium-sdk/services/networkService';
 import {Network, NetworkCategory, NetworkChannel} from '@chatenium/chatenium-sdk/domain/networkService.schema';
 import {TextChannelServiceService} from '@chatenium/chatenium-sdk/services/textChannelService';
 import {Message as NetworkMessage} from '@chatenium/chatenium-sdk/domain/textChannelService.schema';
+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',
@@ -25,7 +29,7 @@ export class ServiceManager {
  sessionManager = new SessionManager(this.database.getApi(), this.keyring.getApi(), this.keyValue.getApi())
  currentSession = signal<Session | null>(null)

-  chatService: ChatService | null = null // Initialized in dm-list.ts
+  chatService: ChatService | null = null // Initialized in picture-list.ts
  chatsStatus = signal<LoadStatus>(LoadStatus.loading)
  chats = signal<Chat[]>([])

@@ -36,6 +40,7 @@ export class ServiceManager {
  networkServices = signal<Record<string, NetworkStorage>>({})

  dmServices = signal<Record<string, DmStorage>>({})
+  pictureServices = signal<Record<string, PictureStorage>>({})
 }

 export enum LoadStatus {
@@ -48,11 +53,18 @@ export enum LoadStatus {
 export interface DmStorage {
  service: DMService
  messages: WritableSignal<Message[]>
+  messagesVm: MessagesViewModel
  chatData: WritableSignal<Chat>
  messageBox: MessageBoxViewModel
  wsListener: (action: string, message: string) => void
 }

+export interface PictureStorage {
+  service: PictureService
+  albums: WritableSignal<Album[]>
+  uploaderData: WritableSignal<PublicUserData>
+}
+
 export interface NetworkStorage {
  service: NetworkService
  networkData: WritableSignal<Network>
@@ -63,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/app/storage/indexed-db.ts
+++ b/src/app/storage/indexed-db.ts
@@ -6,7 +6,7 @@ import {DatabaseAPI} from '@chatenium/chatenium-sdk/storage/database';
  providedIn: 'root'
 })
 export class IndexedDB {
-  private dbVersion = 2
+  private dbVersion = 3
  private db: IDBDatabase | null = null

  getApi(): DatabaseAPI {
@@ -36,6 +36,7 @@ export class IndexedDB {
        db.createObjectStore('files', { keyPath: 'id' })
        db.createObjectStore('messages', { keyPath: 'id' })
        db.createObjectStore('networkmessages', { keyPath: 'id' })
+        db.createObjectStore('pictures', { keyPath: 'id' })
      }

      request.onsuccess = (event: Event) => {
--- a/src/environments/environment.development.ts
+++ b/src/environments/environment.development.ts
@@ -1,5 +1,5 @@
 export const environment = {
-  version: "3.0-beta4",
+  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-beta4",
+  version: "3.0-beta7",
  api_url: "https://api.chatenium.hu",
  cdn_url: "https://cdn.chatenium.hu",
  ws_url: "wss://api.chatenium.hu",
Author	SHA1	Message	Date
chatenium	a0a6fdaf55	3.0 Beta 7	2026-04-15 17:35:55 +02:00
chatenium	0dc1e15e59	3.0 Beta 6	2026-04-14 17:51:02 +02:00
chatenium	931ac91526	3.0 Beta 5	2026-04-13 15:14:24 +02:00
chatenium	c56b0aab8a	Started implementing Chatenium Pictures	2026-04-12 17:40:51 +02:00