3.0 Beta 7

README.md

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

angular.json

@@ -42,15 +42,16 @@
                 {
                   "type": "initial",
                   "maximumWarning": "500kB",
-                  "maximumError": "1MB"
+                  "maximumError": "100MB"
                 },
                 {
                   "type": "anyComponentStyle",
                   "maximumWarning": "4kB",
-                  "maximumError": "8kB"
+                  "maximumError": "100MB"
                 }
               ],
-              "outputHashing": "all"
+              "outputHashing": "all",
+              "serviceWorker": "ngsw-config.json"
             },
             "development": {
               "optimization": false,

ngsw-config.json

@@ -0,0 +1,30 @@
+{
+  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
+  "index": "/index.html",
+  "assetGroups": [
+    {
+      "name": "app",
+      "installMode": "prefetch",
+      "resources": {
+        "files": [
+          "/favicon.ico",
+          "/index.csr.html",
+          "/index.html",
+          "/manifest.webmanifest",
+          "/*.css",
+          "/*.js"
+        ]
+      }
+    },
+    {
+      "name": "assets",
+      "installMode": "lazy",
+      "updateMode": "prefetch",
+      "resources": {
+        "files": [
+          "/**/*.(svg|cur|jpg|jpeg|png|apng|webp|avif|gif|otf|ttf|woff|woff2)"
+        ]
+      }
+    }
+  ]
+}

package-lock.json

@@ -15,7 +15,8 @@
         "@angular/forms": "^21.2.0",
         "@angular/platform-browser": "^21.2.0",
         "@angular/router": "^21.2.0",
-        "@chatenium/chatenium-sdk": "^1.1.5",
+        "@angular/service-worker": "^21.2.0",
+        "@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",
@@ -276,13 +277,13 @@
       }
     },
     "node_modules/@angular-devkit/architect": {
-      "version": "0.2102.6",
+      "version": "0.2102.7",
-      "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.2102.6.tgz",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.2102.7.tgz",
-      "integrity": "sha512-h4qybKypR7OuwcTHPQI1zRm7abXgmPiV49vI2UeMtVVY/GKzru9gMexcYmWabzEyBY8w6VSfWjV2X+eit2EhDQ==",
+      "integrity": "sha512-4K/5hln9iaPEt3F/NyYqncNLvYpzSjRslEkHl2xIgZwQsIFHEvhnDRBYj2/oatURQhBqO/Yu15z/icVOYLxuTg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@angular-devkit/core": "21.2.6",
+        "@angular-devkit/core": "21.2.7",
         "rxjs": "7.8.2"
       },
       "bin": {
@@ -295,9 +296,9 @@
       }
     },
     "node_modules/@angular-devkit/core": {
-      "version": "21.2.6",
+      "version": "21.2.7",
-      "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-21.2.6.tgz",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-21.2.7.tgz",
-      "integrity": "sha512-u5gPTAY7MC02uACQE39xxiFcm1hslF+ih/f2borMWnhER0JNTpHjLiLRXFkq7or7+VVHU30zfhK4XNAuO4WTIg==",
+      "integrity": "sha512-DONYY5u4IENO2qpd23mODaE4JI2EIohWV1kuJnsU9HIcm5wN714QB2z9WY/s4gLfUiAMIUu/8lpnW/0kOQZAnQ==",
       "devOptional": true,
       "license": "MIT",
       "dependencies": {
@@ -323,13 +324,13 @@
       }
     },
     "node_modules/@angular-devkit/schematics": {
-      "version": "21.2.6",
+      "version": "21.2.7",
-      "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-21.2.6.tgz",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-21.2.7.tgz",
-      "integrity": "sha512-hk2duJlPJyiMaI9MVWA5XpmlpD9C4n8qgquV/MJ7/n+ZRSwW3w1ndL5qUmA1ki+4Da54v/Rc8Wt5tUS955+93w==",
+      "integrity": "sha512-LYAjjUI1qM7pR/sd0yYt8OLA6ljOOXjcfzV40I5XQNmhAxq90YYS5xwMcixOmWX+z5zvCYGvPXvJGWjzio6SUg==",
       "devOptional": true,
       "license": "MIT",
       "dependencies": {
-        "@angular-devkit/core": "21.2.6",
+        "@angular-devkit/core": "21.2.7",
         "jsonc-parser": "3.3.1",
         "magic-string": "0.30.21",
         "ora": "9.3.0",
@@ -342,14 +343,14 @@
       }
     },
     "node_modules/@angular/build": {
-      "version": "21.2.6",
+      "version": "21.2.7",
-      "resolved": "https://registry.npmjs.org/@angular/build/-/build-21.2.6.tgz",
+      "resolved": "https://registry.npmjs.org/@angular/build/-/build-21.2.7.tgz",
-      "integrity": "sha512-PJltYl9/INfz8nZ/KHf39nqlmt3c9PR0jJaZt6hhCPENyAf4PwQpm28erkJmbOYO864goIuws41lduYXyDqQ0Q==",
+      "integrity": "sha512-FpSkFqpsJtdN1cROekVYkmeV1QepdP+/d7fyYQEuNmlOlyqXSDh9qJmy4iL9VNbAU0rk+vFCtYM86rO7Pt9cSw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@ampproject/remapping": "2.3.0",
-        "@angular-devkit/architect": "0.2102.6",
+        "@angular-devkit/architect": "0.2102.7",
         "@babel/core": "7.29.0",
         "@babel/helper-annotate-as-pure": "7.27.3",
         "@babel/helper-split-export-declaration": "7.24.7",
@@ -373,7 +374,7 @@
         "source-map-support": "0.5.21",
         "tinyglobby": "0.2.15",
         "undici": "7.24.4",
-        "vite": "7.3.1",
+        "vite": "7.3.2",
         "watchpack": "2.5.1"
       },
       "engines": {
@@ -392,7 +393,7 @@
         "@angular/platform-browser": "^21.0.0",
         "@angular/platform-server": "^21.0.0",
         "@angular/service-worker": "^21.0.0",
-        "@angular/ssr": "^21.2.6",
+        "@angular/ssr": "^21.2.7",
         "karma": "^6.4.0",
         "less": "^4.2.0",
         "ng-packagr": "^21.0.0",
@@ -442,9 +443,9 @@
       }
     },
     "node_modules/@angular/cdk": {
-      "version": "21.2.5",
+      "version": "21.2.6",
-      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-21.2.5.tgz",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-21.2.6.tgz",
-      "integrity": "sha512-F1sVqMAGYoiJNYYaR2cerqTo7IqpxQ3ZtMDxR3rtB0rSSd5UPOIQoqpsfSd6uH8FVnuzKaBII8Mg6YrjClFsng==",
+      "integrity": "sha512-1PBzFf+um/VZ1dFF6cT72Zsq+9C/ZWF9m5dP0uHJgo4psX3yMBoZlZu5YomBiAQ/ePSkqCuryv1vrelK+yd3Mw==",
       "license": "MIT",
       "dependencies": {
         "parse5": "^8.0.0",
@@ -458,19 +459,19 @@
       }
     },
     "node_modules/@angular/cli": {
-      "version": "21.2.6",
+      "version": "21.2.7",
-      "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-21.2.6.tgz",
+      "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-21.2.7.tgz",
-      "integrity": "sha512-I5DOFcIT1HKymyy2f78fjgD0Iv6jG46GbBZ/VxejcnhjubFpuN4CwPdugXf9rIDs8KZQqBzDBFUbq11vnk8h0A==",
+      "integrity": "sha512-N/wj8fFRB718efIFYpwnYfy+MecZREZXsUNMTVndFLH6T0jCheb9PVetR6jsyZp6h46USNPOmJYJ/9255lME+Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@angular-devkit/architect": "0.2102.6",
+        "@angular-devkit/architect": "0.2102.7",
-        "@angular-devkit/core": "21.2.6",
+        "@angular-devkit/core": "21.2.7",
-        "@angular-devkit/schematics": "21.2.6",
+        "@angular-devkit/schematics": "21.2.7",
         "@inquirer/prompts": "7.10.1",
         "@listr2/prompt-adapter-inquirer": "3.0.5",
         "@modelcontextprotocol/sdk": "1.26.0",
-        "@schematics/angular": "21.2.6",
+        "@schematics/angular": "21.2.7",
         "@yarnpkg/lockfile": "1.1.0",
         "algoliasearch": "5.48.1",
         "ini": "6.0.0",
@@ -493,9 +494,9 @@
       }
     },
     "node_modules/@angular/common": {
-      "version": "21.2.7",
+      "version": "21.2.8",
-      "resolved": "https://registry.npmjs.org/@angular/common/-/common-21.2.7.tgz",
+      "resolved": "https://registry.npmjs.org/@angular/common/-/common-21.2.8.tgz",
-      "integrity": "sha512-YFdnU5z8JloJjLYa52OyCOULQhqEE/ym7vKfABySWDsiVXZr9FNmKMeZi/lUcg7ZO22UbBihqW9a9D6VSHOo+g==",
+      "integrity": "sha512-ZvgcxsLPkSG0B1jc2ZXshAWIFBoQ0U9uwIX/zG/RGcfMpoKyEDNAebli6FTIpxIlz/35rtBNV7EGPhinjPTJFQ==",
       "license": "MIT",
       "dependencies": {
         "tslib": "^2.3.0"
@@ -504,14 +505,14 @@
         "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
       },
       "peerDependencies": {
-        "@angular/core": "21.2.7",
+        "@angular/core": "21.2.8",
         "rxjs": "^6.5.3 || ^7.4.0"
       }
     },
     "node_modules/@angular/compiler": {
-      "version": "21.2.7",
+      "version": "21.2.8",
-      "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-21.2.7.tgz",
+      "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-21.2.8.tgz",
-      "integrity": "sha512-4J0Nl5gGmr5SKgR3FHK4J6rdG0aP5zAsY3AJU8YXH+D98CeNTjQUD8XHsdD2cTwo08V5mDdFa5VCsREpMPJ5gQ==",
+      "integrity": "sha512-Il9KlT6qX8rWmun5jY6wMLx56bCQZpOVIFEyHM4ai2wmxvbqyxgRFKDs4iMRNn1h04Tgupl6cKSqP9lecIvH6w==",
       "license": "MIT",
       "dependencies": {
         "tslib": "^2.3.0"
@@ -521,9 +522,9 @@
       }
     },
     "node_modules/@angular/compiler-cli": {
-      "version": "21.2.7",
+      "version": "21.2.8",
-      "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-21.2.7.tgz",
+      "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-21.2.8.tgz",
-      "integrity": "sha512-r76vKBM7Wu0N8PTeec7340Gtv1wC7IBQGJOQnukshPgzaabgNKxmUiChGxi+RJNo/Tsdiw9ZfddcBgBjq79ZIg==",
+      "integrity": "sha512-S0W+6QazCsn/4xWZu0V5VmU9zmKIlqFR2FJSsAQUPReVmpA40SuQSP6A/cyMVIMYaHvO/cAXSHJVgpxBzBSL/Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -544,7 +545,7 @@
         "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
       },
       "peerDependencies": {
-        "@angular/compiler": "21.2.7",
+        "@angular/compiler": "21.2.8",
         "typescript": ">=5.9 <6.1"
       },
       "peerDependenciesMeta": {
@@ -554,9 +555,9 @@
       }
     },
     "node_modules/@angular/core": {
-      "version": "21.2.7",
+      "version": "21.2.8",
-      "resolved": "https://registry.npmjs.org/@angular/core/-/core-21.2.7.tgz",
+      "resolved": "https://registry.npmjs.org/@angular/core/-/core-21.2.8.tgz",
-      "integrity": "sha512-4bnskeRNNOZMn3buVw47Zz9Py4B8AZgYHe5xBEMOY5/yrldb7OFje5gWCWls23P18FKwhl+Xx1hgnOEPSs29gw==",
+      "integrity": "sha512-hI7n4t8qgFJaVV55LIaNuzcdP+/IeuqQRu3huSLo47Gf6uZAD0Acj4Ye9SC8YNmhUu5/RiImngm9NOlcI2oCJA==",
       "license": "MIT",
       "dependencies": {
         "tslib": "^2.3.0"
@@ -565,7 +566,7 @@
         "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
       },
       "peerDependencies": {
-        "@angular/compiler": "21.2.7",
+        "@angular/compiler": "21.2.8",
         "rxjs": "^6.5.3 || ^7.4.0",
         "zone.js": "~0.15.0 || ~0.16.0"
       },
@@ -579,9 +580,9 @@
       }
     },
     "node_modules/@angular/forms": {
-      "version": "21.2.7",
+      "version": "21.2.8",
-      "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-21.2.7.tgz",
+      "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-21.2.8.tgz",
-      "integrity": "sha512-YD/h07cdEeAUs41ysTk6820T0lG/XiQmFiq02d3IsiHYI5Vaj2pg9Ti1wWZYEBM//hVAPTzV0dwdV7Q1Gxju1w==",
+      "integrity": "sha512-tyQAHjfMHcqETRkKQaZHjYqIK9W8uRenPpY2DF/Jl+S7CwcaX4T8t8TKgzvTynNzQW9QGiLg0pqVosVMKzBXJg==",
       "license": "MIT",
       "dependencies": {
         "@standard-schema/spec": "^1.0.0",
@@ -591,16 +592,16 @@
         "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
       },
       "peerDependencies": {
-        "@angular/common": "21.2.7",
+        "@angular/common": "21.2.8",
-        "@angular/core": "21.2.7",
+        "@angular/core": "21.2.8",
-        "@angular/platform-browser": "21.2.7",
+        "@angular/platform-browser": "21.2.8",
         "rxjs": "^6.5.3 || ^7.4.0"
       }
     },
     "node_modules/@angular/platform-browser": {
-      "version": "21.2.7",
+      "version": "21.2.8",
-      "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-21.2.7.tgz",
+      "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-21.2.8.tgz",
-      "integrity": "sha512-nklVhstRZL4wpYg9Cyae/Eyfa7LMpgb0TyD/F//qCuohhM8nM7F+O0ekykGD6H+I34jsvqx6yLS7MicndWVz7Q==",
+      "integrity": "sha512-4fwmGf7GCuIsjFqx1gqqWC92YjlN9SmGJO17TPPsOm5zUOnDx+h3Bj9XjdXxlcBtugTb2xHk6Auqyv3lzWGlkw==",
       "license": "MIT",
       "dependencies": {
         "tslib": "^2.3.0"
@@ -609,9 +610,9 @@
         "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
       },
       "peerDependencies": {
-        "@angular/animations": "21.2.7",
+        "@angular/animations": "21.2.8",
-        "@angular/common": "21.2.7",
+        "@angular/common": "21.2.8",
-        "@angular/core": "21.2.7"
+        "@angular/core": "21.2.8"
       },
       "peerDependenciesMeta": {
         "@angular/animations": {
@@ -620,9 +621,9 @@
       }
     },
     "node_modules/@angular/router": {
-      "version": "21.2.7",
+      "version": "21.2.8",
-      "resolved": "https://registry.npmjs.org/@angular/router/-/router-21.2.7.tgz",
+      "resolved": "https://registry.npmjs.org/@angular/router/-/router-21.2.8.tgz",
-      "integrity": "sha512-Ina6XgtpvXT1OsLAomURHJGQDOkIVGrguWAOZ7+gOjsJEjUfpxTktFter+/K59KMC2yv6yneLvYSn3AswTYx7A==",
+      "integrity": "sha512-KSlUbFHHKY84G6iKlB2FDMmh+lLmGjmpyT1p/kx8qZm1BuxJGOOU+oNgkCfaPJT1R2/muDXuxQ51uc/la6y28g==",
       "license": "MIT",
       "dependencies": {
         "tslib": "^2.3.0"
@@ -631,16 +632,35 @@
         "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
       },
       "peerDependencies": {
-        "@angular/common": "21.2.7",
+        "@angular/common": "21.2.8",
-        "@angular/core": "21.2.7",
+        "@angular/core": "21.2.8",
-        "@angular/platform-browser": "21.2.7",
+        "@angular/platform-browser": "21.2.8",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
+    "node_modules/@angular/service-worker": {
+      "version": "21.2.8",
+      "resolved": "https://registry.npmjs.org/@angular/service-worker/-/service-worker-21.2.8.tgz",
+      "integrity": "sha512-r0hE9Xm50HhIQUXfpi6Bl8Omp5uluKoj04EgY8uvK5cVO7wWlC9PJ52Gmc59K3e1Qj6pBPMX9AxykQeIlTZH+g==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "bin": {
+        "ngsw-config": "ngsw-config.js"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      },
+      "peerDependencies": {
+        "@angular/core": "21.2.8",
         "rxjs": "^6.5.3 || ^7.4.0"
       }
     },
     "node_modules/@asamuzakjp/css-color": {
-      "version": "5.1.8",
+      "version": "5.1.10",
-      "resolved": "https://registry.npmjs.org/@asamuzakjp/css-color/-/css-color-5.1.8.tgz",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/css-color/-/css-color-5.1.10.tgz",
-      "integrity": "sha512-OISPR9c2uPo23rUdvfEQiLPjoMLOpEeLNnP5iGkxr6tDDxJd3NjD+6fxY0mdaMbIPUjFGL4HFOJqLvow5q4aqQ==",
+      "integrity": "sha512-02OhhkKtgNRuicQ/nF3TRnGsxL9wp0r3Y7VlKWyOHHGmGyvXv03y+PnymU8FKFJMTjIr1Bk8U2g1HWSLrpAHww==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -668,9 +688,9 @@
       }
     },
     "node_modules/@asamuzakjp/dom-selector/node_modules/lru-cache": {
-      "version": "11.3.2",
+      "version": "11.3.3",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.3.2.tgz",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.3.3.tgz",
-      "integrity": "sha512-wgWa6FWQ3QRRJbIjbsldRJZxdxYngT/dO0I5Ynmlnin8qy7tC6xYzbcJjtN4wHLXtkbVwHzk0C+OejVw1XM+DQ==",
+      "integrity": "sha512-JvNw9Y81y33E+BEYPr0U7omo+U9AySnsMsEiXgwT6yqd31VQWTLNQqmT4ou5eqPFUrTfIDFta2wKhB1hyohtAQ==",
       "dev": true,
       "license": "BlueOak-1.0.0",
       "engines": {
@@ -991,9 +1011,9 @@
       }
     },
     "node_modules/@chatenium/chatenium-sdk": {
-      "version": "1.1.5",
+      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/@chatenium/chatenium-sdk/-/chatenium-sdk-1.1.5.tgz",
+      "resolved": "https://registry.npmjs.org/@chatenium/chatenium-sdk/-/chatenium-sdk-1.1.11.tgz",
-      "integrity": "sha512-seEsxlRk96WHsE4h6oPPa5nGZioePIZpB5qk0Xs3CaKNbVJKH02/Q5HW2PIi6DHw+djAENWu5zVXIic+9DrqZw==",
+      "integrity": "sha512-iwYHyED1AnGcWtyeVo+R1JfxVauuIC5FCX8Rk6RwF+ls/oUIg1aExFgvif2wc0qUyT9mla8ztBt+wBB/cTy4hA==",
       "dependencies": {
         "@faker-js/faker": "^10.4.0",
         "axios": "^1.14.0",
@@ -2969,9 +2989,9 @@
       }
     },
     "node_modules/@npmcli/agent/node_modules/lru-cache": {
-      "version": "11.3.2",
+      "version": "11.3.3",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.3.2.tgz",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.3.3.tgz",
-      "integrity": "sha512-wgWa6FWQ3QRRJbIjbsldRJZxdxYngT/dO0I5Ynmlnin8qy7tC6xYzbcJjtN4wHLXtkbVwHzk0C+OejVw1XM+DQ==",
+      "integrity": "sha512-JvNw9Y81y33E+BEYPr0U7omo+U9AySnsMsEiXgwT6yqd31VQWTLNQqmT4ou5eqPFUrTfIDFta2wKhB1hyohtAQ==",
       "dev": true,
       "license": "BlueOak-1.0.0",
       "engines": {
@@ -3022,9 +3042,9 @@
       }
     },
     "node_modules/@npmcli/git/node_modules/lru-cache": {
-      "version": "11.3.2",
+      "version": "11.3.3",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.3.2.tgz",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.3.3.tgz",
-      "integrity": "sha512-wgWa6FWQ3QRRJbIjbsldRJZxdxYngT/dO0I5Ynmlnin8qy7tC6xYzbcJjtN4wHLXtkbVwHzk0C+OejVw1XM+DQ==",
+      "integrity": "sha512-JvNw9Y81y33E+BEYPr0U7omo+U9AySnsMsEiXgwT6yqd31VQWTLNQqmT4ou5eqPFUrTfIDFta2wKhB1hyohtAQ==",
       "dev": true,
       "license": "BlueOak-1.0.0",
       "engines": {
@@ -4088,14 +4108,14 @@
       ]
     },
     "node_modules/@schematics/angular": {
-      "version": "21.2.6",
+      "version": "21.2.7",
-      "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-21.2.6.tgz",
+      "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-21.2.7.tgz",
-      "integrity": "sha512-KpLD8R2S762jbLdNEepE+b7KjhVOKPFHHdgNqhPv0NiGLdsvXSOx1e63JvFacoCZdmP7n3/gwmyT/utcVvnsag==",
+      "integrity": "sha512-aqEj3RyBtmH+41HZvrbfrpCo0e+0NzwyQyNSC/wLDShVqoidBtPbEdHU1FZ4+ni41da7rI3F12gUuAHws27kMA==",
       "devOptional": true,
       "license": "MIT",
       "dependencies": {
-        "@angular-devkit/core": "21.2.6",
+        "@angular-devkit/core": "21.2.7",
-        "@angular-devkit/schematics": "21.2.6",
+        "@angular-devkit/schematics": "21.2.7",
         "jsonc-parser": "3.3.1"
       },
       "engines": {
@@ -4472,23 +4492,6 @@
         "path-browserify": "^1.0.1"
       }
     },
-    "node_modules/@ts-morph/common/node_modules/balanced-match": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "license": "MIT",
-      "optional": true
-    },
-    "node_modules/@ts-morph/common/node_modules/brace-expansion": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.3.tgz",
-      "integrity": "sha512-MCV/fYJEbqx68aE58kv2cA/kiky1G8vux3OR6/jbS+jIMe/6fJWa0DTzJU7dqijOWYwHi1t29FlfYI9uytqlpA==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "balanced-match": "^1.0.0"
-      }
-    },
     "node_modules/@ts-morph/common/node_modules/minimatch": {
       "version": "9.0.9",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.9.tgz",
@@ -4529,6 +4532,45 @@
         "node": "^20.17.0 || >=22.9.0"
       }
     },
+    "node_modules/@tufjs/models/node_modules/balanced-match": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
+      "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "18 || 20 || >=22"
+      }
+    },
+    "node_modules/@tufjs/models/node_modules/brace-expansion": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.5.tgz",
+      "integrity": "sha512-VZznLgtwhn+Mact9tfiwx64fA9erHH/MCXEUfB/0bX/6Fz6ny5EGTXYltMocqg4xFAQZtnO3DHWWXi8RiuN7cQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^4.0.2"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      }
+    },
+    "node_modules/@tufjs/models/node_modules/minimatch": {
+      "version": "10.2.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.5.tgz",
+      "integrity": "sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "brace-expansion": "^5.0.5"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/@tybys/wasm-util": {
       "version": "0.10.1",
       "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz",
@@ -4599,16 +4641,16 @@
       }
     },
     "node_modules/@vitest/expect": {
-      "version": "4.1.3",
+      "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-4.1.3.tgz",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-4.1.4.tgz",
-      "integrity": "sha512-CW8Q9KMtXDGHj0vCsqui0M5KqRsu0zm0GNDW7Gd3U7nZ2RFpPKSCpeCXoT+/+5zr1TNlsoQRDEz+LzZUyq6gnQ==",
+      "integrity": "sha512-iPBpra+VDuXmBFI3FMKHSFXp3Gx5HfmSCE8X67Dn+bwephCnQCaB7qWK2ldHa+8ncN8hJU8VTMcxjPpyMkUjww==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@standard-schema/spec": "^1.1.0",
         "@types/chai": "^5.2.2",
-        "@vitest/spy": "4.1.3",
+        "@vitest/spy": "4.1.4",
-        "@vitest/utils": "4.1.3",
+        "@vitest/utils": "4.1.4",
         "chai": "^6.2.2",
         "tinyrainbow": "^3.1.0"
       },
@@ -4617,13 +4659,13 @@
       }
     },
     "node_modules/@vitest/mocker": {
-      "version": "4.1.3",
+      "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-4.1.3.tgz",
+      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-4.1.4.tgz",
-      "integrity": "sha512-XN3TrycitDQSzGRnec/YWgoofkYRhouyVQj4YNsJ5r/STCUFqMrP4+oxEv3e7ZbLi4og5kIHrZwekDJgw6hcjw==",
+      "integrity": "sha512-R9HTZBhW6yCSGbGQnDnH3QHfJxokKN4KB+Yvk9Q1le7eQNYwiCyKxmLmurSpFy6BzJanSLuEUDrD+j97Q+ZLPg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/spy": "4.1.3",
+        "@vitest/spy": "4.1.4",
         "estree-walker": "^3.0.3",
         "magic-string": "^0.30.21"
       },
@@ -4644,9 +4686,9 @@
       }
     },
     "node_modules/@vitest/pretty-format": {
-      "version": "4.1.3",
+      "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.1.3.tgz",
+      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.1.4.tgz",
-      "integrity": "sha512-hYqqwuMbpkkBodpRh4k4cQSOELxXky1NfMmQvOfKvV8zQHz8x8Dla+2wzElkMkBvSAJX5TRGHJAQvK0TcOafwg==",
+      "integrity": "sha512-ddmDHU0gjEUyEVLxtZa7xamrpIefdEETu3nZjWtHeZX4QxqJ7tRxSteHVXJOcr8jhiLoGAhkK4WJ3WqBpjx42A==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -4657,13 +4699,13 @@
       }
     },
     "node_modules/@vitest/runner": {
-      "version": "4.1.3",
+      "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-4.1.3.tgz",
+      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-4.1.4.tgz",
-      "integrity": "sha512-VwgOz5MmT0KhlUj40h02LWDpUBVpflZ/b7xZFA25F29AJzIrE+SMuwzFf0b7t4EXdwRNX61C3B6auIXQTR3ttA==",
+      "integrity": "sha512-xTp7VZ5aXP5ZJrn15UtJUWlx6qXLnGtF6jNxHepdPHpMfz/aVPx+htHtgcAL2mDXJgKhpoo2e9/hVJsIeFbytQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/utils": "4.1.3",
+        "@vitest/utils": "4.1.4",
         "pathe": "^2.0.3"
       },
       "funding": {
@@ -4671,14 +4713,14 @@
       }
     },
     "node_modules/@vitest/snapshot": {
-      "version": "4.1.3",
+      "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-4.1.3.tgz",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-4.1.4.tgz",
-      "integrity": "sha512-9l+k/J9KG5wPJDX9BcFFzhhwNjwkRb8RsnYhaT1vPY7OufxmQFc9sZzScRCPTiETzl37mrIWVY9zxzmdVeJwDQ==",
+      "integrity": "sha512-MCjCFgaS8aZz+m5nTcEcgk/xhWv0rEH4Yl53PPlMXOZ1/Ka2VcZU6CJ+MgYCZbcJvzGhQRjVrGQNZqkGPttIKw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/pretty-format": "4.1.3",
+        "@vitest/pretty-format": "4.1.4",
-        "@vitest/utils": "4.1.3",
+        "@vitest/utils": "4.1.4",
         "magic-string": "^0.30.21",
         "pathe": "^2.0.3"
       },
@@ -4687,9 +4729,9 @@
       }
     },
     "node_modules/@vitest/spy": {
-      "version": "4.1.3",
+      "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-4.1.3.tgz",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-4.1.4.tgz",
-      "integrity": "sha512-ujj5Uwxagg4XUIfAUyRQxAg631BP6e9joRiN99mr48Bg9fRs+5mdUElhOoZ6rP5mBr8Bs3lmrREnkrQWkrsTCw==",
+      "integrity": "sha512-XxNdAsKW7C+FLydqFJLb5KhJtl3PGCMmYwFRfhvIgxJvLSXhhVI1zM8f1qD3Zg7RCjTSzDVyct6sghs9UEgBEQ==",
       "dev": true,
       "license": "MIT",
       "funding": {
@@ -4697,13 +4739,13 @@
       }
     },
     "node_modules/@vitest/utils": {
-      "version": "4.1.3",
+      "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-4.1.3.tgz",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-4.1.4.tgz",
-      "integrity": "sha512-Pc/Oexse/khOWsGB+w3q4yzA4te7W4gpZZAvk+fr8qXfTURZUMj5i7kuxsNK5mP/dEB6ao3jfr0rs17fHhbHdw==",
+      "integrity": "sha512-13QMT+eysM5uVGa1rG4kegGYNp6cnQcsTc67ELFbhNLQO+vgsygtYJx2khvdt4gVQqSSpC/KT5FZZxUpP3Oatw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/pretty-format": "4.1.3",
+        "@vitest/pretty-format": "4.1.4",
         "convert-source-map": "^2.0.0",
         "tinyrainbow": "^3.1.0"
       },
@@ -4909,9 +4951,9 @@
       "license": "MIT"
     },
     "node_modules/axios": {
-      "version": "1.14.0",
+      "version": "1.15.0",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.14.0.tgz",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.15.0.tgz",
-      "integrity": "sha512-3Y8yrqLSwjuzpXuZ0oIYZ/XGgLwUIBU3uLvbcpb0pidD9ctpShJd43KSlEEkVQg6DS0G9NKyzOvBfUtDKEyHvQ==",
+      "integrity": "sha512-wWyJDlAatxk30ZJer+GeCWS209sA42X+N5jU2jy6oHTp7ufw8uzUTVFBX9+wTfAlhiJXGS0Bq7X6efruWjuK9Q==",
       "license": "MIT",
       "dependencies": {
         "follow-redirects": "^1.15.11",
@@ -4920,19 +4962,16 @@
       }
     },
     "node_modules/balanced-match": {
-      "version": "4.0.4",
+      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "dev": true,
       "license": "MIT",
-      "engines": {
+      "optional": true
-        "node": "18 || 20 || >=22"
-      }
     },
     "node_modules/baseline-browser-mapping": {
-      "version": "2.10.16",
+      "version": "2.10.18",
-      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.16.tgz",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.18.tgz",
-      "integrity": "sha512-Lyf3aK28zpsD1yQMiiHD4RvVb6UdMoo8xzG2XzFIfR9luPzOpcBlAsT/qfB1XWS1bxWT+UtE4WmQgsp297FYOA==",
+      "integrity": "sha512-VSnGQAOLtP5mib/DPyg2/t+Tlv65NTBz83BJBJvmLVHHuKJVaDOBvJJykiT5TR++em5nfAySPccDZDa4oSrn8A==",
       "dev": true,
       "license": "Apache-2.0",
       "bin": {
@@ -5006,16 +5045,13 @@
       "license": "ISC"
     },
     "node_modules/brace-expansion": {
-      "version": "5.0.5",
+      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.5.tgz",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.1.0.tgz",
-      "integrity": "sha512-VZznLgtwhn+Mact9tfiwx64fA9erHH/MCXEUfB/0bX/6Fz6ny5EGTXYltMocqg4xFAQZtnO3DHWWXi8RiuN7cQ==",
+      "integrity": "sha512-TN1kCZAgdgweJhWWpgKYrQaMNHcDULHkWwQIspdtjV4Y5aurRdZpjAqn6yX3FPqTA9ngHCc4hJxMAMgGfve85w==",
-      "dev": true,
       "license": "MIT",
+      "optional": true,
       "dependencies": {
-        "balanced-match": "^4.0.2"
+        "balanced-match": "^1.0.0"
-      },
-      "engines": {
-        "node": "18 || 20 || >=22"
       }
     },
     "node_modules/braces": {
@@ -5105,9 +5141,9 @@
       }
     },
     "node_modules/cacache/node_modules/lru-cache": {
-      "version": "11.3.2",
+      "version": "11.3.3",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.3.2.tgz",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.3.3.tgz",
-      "integrity": "sha512-wgWa6FWQ3QRRJbIjbsldRJZxdxYngT/dO0I5Ynmlnin8qy7tC6xYzbcJjtN4wHLXtkbVwHzk0C+OejVw1XM+DQ==",
+      "integrity": "sha512-JvNw9Y81y33E+BEYPr0U7omo+U9AySnsMsEiXgwT6yqd31VQWTLNQqmT4ou5eqPFUrTfIDFta2wKhB1hyohtAQ==",
       "dev": true,
       "license": "BlueOak-1.0.0",
       "engines": {
@@ -5539,9 +5575,9 @@
       }
     },
     "node_modules/cssstyle/node_modules/lru-cache": {
-      "version": "11.3.2",
+      "version": "11.3.3",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.3.2.tgz",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.3.3.tgz",
-      "integrity": "sha512-wgWa6FWQ3QRRJbIjbsldRJZxdxYngT/dO0I5Ynmlnin8qy7tC6xYzbcJjtN4wHLXtkbVwHzk0C+OejVw1XM+DQ==",
+      "integrity": "sha512-JvNw9Y81y33E+BEYPr0U7omo+U9AySnsMsEiXgwT6yqd31VQWTLNQqmT4ou5eqPFUrTfIDFta2wKhB1hyohtAQ==",
       "dev": true,
       "license": "BlueOak-1.0.0",
       "engines": {
@@ -5698,9 +5734,9 @@
       "license": "MIT"
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.334",
+      "version": "1.5.335",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.334.tgz",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.335.tgz",
-      "integrity": "sha512-mgjZAz7Jyx1SRCwEpy9wefDS7GvNPazLthHg8eQMJ76wBdGQQDW33TCrUTvQ4wzpmOrv2zrFoD3oNufMdyMpog==",
+      "integrity": "sha512-q9n5T4BR4Xwa2cwbrwcsDJtHD/enpQ5S1xF1IAtdqf5AAgqDFmR/aakqH3ChFdqd/QXJhS3rnnXFtexU7rax6Q==",
       "dev": true,
       "license": "ISC"
     },
@@ -6343,6 +6379,45 @@
       "dev": true,
       "license": "BSD-2-Clause"
     },
+    "node_modules/glob/node_modules/balanced-match": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
+      "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "18 || 20 || >=22"
+      }
+    },
+    "node_modules/glob/node_modules/brace-expansion": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.5.tgz",
+      "integrity": "sha512-VZznLgtwhn+Mact9tfiwx64fA9erHH/MCXEUfB/0bX/6Fz6ny5EGTXYltMocqg4xFAQZtnO3DHWWXi8RiuN7cQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^4.0.2"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      }
+    },
+    "node_modules/glob/node_modules/minimatch": {
+      "version": "10.2.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.5.tgz",
+      "integrity": "sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "brace-expansion": "^5.0.5"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/gopd": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
@@ -6440,9 +6515,9 @@
       }
     },
     "node_modules/hosted-git-info/node_modules/lru-cache": {
-      "version": "11.3.2",
+      "version": "11.3.3",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.3.2.tgz",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.3.3.tgz",
-      "integrity": "sha512-wgWa6FWQ3QRRJbIjbsldRJZxdxYngT/dO0I5Ynmlnin8qy7tC6xYzbcJjtN4wHLXtkbVwHzk0C+OejVw1XM+DQ==",
+      "integrity": "sha512-JvNw9Y81y33E+BEYPr0U7omo+U9AySnsMsEiXgwT6yqd31VQWTLNQqmT4ou5eqPFUrTfIDFta2wKhB1hyohtAQ==",
       "dev": true,
       "license": "BlueOak-1.0.0",
       "engines": {
@@ -6581,6 +6656,45 @@
         "node": "^20.17.0 || >=22.9.0"
       }
     },
+    "node_modules/ignore-walk/node_modules/balanced-match": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
+      "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "18 || 20 || >=22"
+      }
+    },
+    "node_modules/ignore-walk/node_modules/brace-expansion": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.5.tgz",
+      "integrity": "sha512-VZznLgtwhn+Mact9tfiwx64fA9erHH/MCXEUfB/0bX/6Fz6ny5EGTXYltMocqg4xFAQZtnO3DHWWXi8RiuN7cQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^4.0.2"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      }
+    },
+    "node_modules/ignore-walk/node_modules/minimatch": {
+      "version": "10.2.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.5.tgz",
+      "integrity": "sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "brace-expansion": "^5.0.5"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/image-size": {
       "version": "0.5.5",
       "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz",
@@ -7324,16 +7438,16 @@
       }
     },
     "node_modules/minimatch": {
-      "version": "10.2.5",
+      "version": "10.0.1",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.5.tgz",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.0.1.tgz",
-      "integrity": "sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg==",
+      "integrity": "sha512-ethXTt3SGGR+95gudmqJ1eNhRO7eGEGIgYA9vnPatK4/etz2MEVDno5GMCibdMTuBMyElzIlgxMna3K94XDIDQ==",
-      "dev": true,
+      "license": "ISC",
-      "license": "BlueOak-1.0.0",
+      "optional": true,
       "dependencies": {
-        "brace-expansion": "^5.0.5"
+        "brace-expansion": "^2.0.1"
       },
       "engines": {
-        "node": "18 || 20 || >=22"
+        "node": "20 || >=22"
       },
       "funding": {
         "url": "https://github.com/sponsors/isaacs"
@@ -7649,12 +7763,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/msw/node_modules/path-to-regexp": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.3.0.tgz",
-      "integrity": "sha512-Yhpw4T9C6hPpgPeA28us07OJeqZ5EzQTkbfwuhsUg0c237RomFoETJgmp2sa3F/41gfLE6G5cqcYwznmeEeOlQ==",
-      "license": "MIT"
-    },
     "node_modules/msw/node_modules/string-width": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
@@ -7745,17 +7853,10 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/multimatch/node_modules/balanced-match": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "license": "MIT",
-      "optional": true
-    },
     "node_modules/multimatch/node_modules/brace-expansion": {
-      "version": "1.1.13",
+      "version": "1.1.14",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.13.tgz",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.14.tgz",
-      "integrity": "sha512-9ZLprWS6EENmhEOpjCYW2c8VkmOvckIJZfkr7rBW6dObmfgJ/L1GpSYW5Hpo9lDz4D1+n0Ckz8rU7FwHDQiG/w==",
+      "integrity": "sha512-MWPGfDxnyzKU7rNOW9SP/c50vi3xrmrua/+6hfPbCS2ABNWfx24vPidzvC7krjU/RTo235sV776ymlsMtGKj8g==",
       "license": "MIT",
       "optional": true,
       "dependencies": {
@@ -7864,39 +7965,6 @@
         "tslib": "^2.7.0"
       }
     },
-    "node_modules/ng-morph/node_modules/balanced-match": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "license": "MIT",
-      "optional": true
-    },
-    "node_modules/ng-morph/node_modules/brace-expansion": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.3.tgz",
-      "integrity": "sha512-MCV/fYJEbqx68aE58kv2cA/kiky1G8vux3OR6/jbS+jIMe/6fJWa0DTzJU7dqijOWYwHi1t29FlfYI9uytqlpA==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "balanced-match": "^1.0.0"
-      }
-    },
-    "node_modules/ng-morph/node_modules/minimatch": {
-      "version": "10.0.1",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.0.1.tgz",
-      "integrity": "sha512-ethXTt3SGGR+95gudmqJ1eNhRO7eGEGIgYA9vnPatK4/etz2MEVDno5GMCibdMTuBMyElzIlgxMna3K94XDIDQ==",
-      "license": "ISC",
-      "optional": true,
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": "20 || >=22"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/ngx-cookie-service": {
       "version": "21.3.1",
       "resolved": "https://registry.npmjs.org/ngx-cookie-service/-/ngx-cookie-service-21.3.1.tgz",
@@ -8398,9 +8466,9 @@
       }
     },
     "node_modules/path-scurry/node_modules/lru-cache": {
-      "version": "11.3.2",
+      "version": "11.3.3",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.3.2.tgz",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.3.3.tgz",
-      "integrity": "sha512-wgWa6FWQ3QRRJbIjbsldRJZxdxYngT/dO0I5Ynmlnin8qy7tC6xYzbcJjtN4wHLXtkbVwHzk0C+OejVw1XM+DQ==",
+      "integrity": "sha512-JvNw9Y81y33E+BEYPr0U7omo+U9AySnsMsEiXgwT6yqd31VQWTLNQqmT4ou5eqPFUrTfIDFta2wKhB1hyohtAQ==",
       "dev": true,
       "license": "BlueOak-1.0.0",
       "engines": {
@@ -8408,15 +8476,10 @@
       }
     },
     "node_modules/path-to-regexp": {
-      "version": "8.4.2",
+      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-8.4.2.tgz",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.3.0.tgz",
-      "integrity": "sha512-qRcuIdP69NPm4qbACK+aDogI5CBDMi1jKe0ry5rSQJz8JVLsC7jV8XpiJjGRLLol3N+R5ihGYcrPLTno6pAdBA==",
+      "integrity": "sha512-Yhpw4T9C6hPpgPeA28us07OJeqZ5EzQTkbfwuhsUg0c237RomFoETJgmp2sa3F/41gfLE6G5cqcYwznmeEeOlQ==",
-      "dev": true,
+      "license": "MIT"
-      "license": "MIT",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
-      }
     },
     "node_modules/pathe": {
       "version": "2.0.3",
@@ -8542,9 +8605,9 @@
       }
     },
     "node_modules/prettier": {
-      "version": "3.8.1",
+      "version": "3.8.2",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.8.1.tgz",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.8.2.tgz",
-      "integrity": "sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg==",
+      "integrity": "sha512-8c3mgTe0ASwWAJK+78dpviD+A8EqhndQPUBpNUIPt6+xWlIigCwfN01lWr9MAede4uqXGTEKeQWTvzb3vjia0Q==",
       "dev": true,
       "license": "MIT",
       "bin": {
@@ -8623,9 +8686,9 @@
       }
     },
     "node_modules/qs": {
-      "version": "6.15.0",
+      "version": "6.15.1",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.15.0.tgz",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.15.1.tgz",
-      "integrity": "sha512-mAZTtNCeetKMH+pSjrb76NAM8V9a05I9aBZOHztWy/UqcJdQYNsf59vrRKWnojAT9Y+GbIvoTBC++CPHqpDBhQ==",
+      "integrity": "sha512-6YHEFRL9mfgcAvql/XhwTvf5jKcOiiupt2FiJxHkiX1z4j7WL8J/jRHYLluORvc1XxB5rV20KoeK00gVJamspg==",
       "dev": true,
       "license": "BSD-3-Clause",
       "dependencies": {
@@ -8870,6 +8933,17 @@
         "node": ">= 18"
       }
     },
+    "node_modules/router/node_modules/path-to-regexp": {
+      "version": "8.4.2",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-8.4.2.tgz",
+      "integrity": "sha512-qRcuIdP69NPm4qbACK+aDogI5CBDMi1jKe0ry5rSQJz8JVLsC7jV8XpiJjGRLLol3N+R5ihGYcrPLTno6pAdBA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -9096,14 +9170,14 @@
       }
     },
     "node_modules/side-channel-list": {
-      "version": "1.0.0",
+      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.1.tgz",
-      "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
+      "integrity": "sha512-mjn/0bi/oUURjc5Xl7IaWi/OJJJumuoJFQJfDDyO46+hBWsfaVM65TBHq2eoZBhzl9EchxOijpkbRC8SVBQU0w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0",
-        "object-inspect": "^1.13.3"
+        "object-inspect": "^1.13.4"
       },
       "engines": {
         "node": ">= 0.4"
@@ -9726,9 +9800,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "7.3.1",
+      "version": "7.3.2",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.2.tgz",
-      "integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==",
+      "integrity": "sha512-Bby3NOsna2jsjfLVOHKes8sGwgl4TT0E6vvpYgnAYDIF/tie7MRaFthmKuHx1NSXjiTueXH3do80FMQgvEktRg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -9801,19 +9875,19 @@
       }
     },
     "node_modules/vitest": {
-      "version": "4.1.3",
+      "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/vitest/-/vitest-4.1.3.tgz",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-4.1.4.tgz",
-      "integrity": "sha512-DBc4Tx0MPNsqb9isoyOq00lHftVx/KIU44QOm2q59npZyLUkENn8TMFsuzuO+4U2FUa9rgbbPt3udrP25GcjXw==",
+      "integrity": "sha512-tFuJqTxKb8AvfyqMfnavXdzfy3h3sWZRWwfluGbkeR7n0HUev+FmNgZ8SDrRBTVrVCjgH5cA21qGbCffMNtWvg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/expect": "4.1.3",
+        "@vitest/expect": "4.1.4",
-        "@vitest/mocker": "4.1.3",
+        "@vitest/mocker": "4.1.4",
-        "@vitest/pretty-format": "4.1.3",
+        "@vitest/pretty-format": "4.1.4",
-        "@vitest/runner": "4.1.3",
+        "@vitest/runner": "4.1.4",
-        "@vitest/snapshot": "4.1.3",
+        "@vitest/snapshot": "4.1.4",
-        "@vitest/spy": "4.1.3",
+        "@vitest/spy": "4.1.4",
-        "@vitest/utils": "4.1.3",
+        "@vitest/utils": "4.1.4",
         "es-module-lexer": "^2.0.0",
         "expect-type": "^1.3.0",
         "magic-string": "^0.30.21",
@@ -9841,12 +9915,12 @@
         "@edge-runtime/vm": "*",
         "@opentelemetry/api": "^1.9.0",
         "@types/node": "^20.0.0 || ^22.0.0 || >=24.0.0",
-        "@vitest/browser-playwright": "4.1.3",
+        "@vitest/browser-playwright": "4.1.4",
-        "@vitest/browser-preview": "4.1.3",
+        "@vitest/browser-preview": "4.1.4",
-        "@vitest/browser-webdriverio": "4.1.3",
+        "@vitest/browser-webdriverio": "4.1.4",
-        "@vitest/coverage-istanbul": "4.1.3",
+        "@vitest/coverage-istanbul": "4.1.4",
-        "@vitest/coverage-v8": "4.1.3",
+        "@vitest/coverage-v8": "4.1.4",
-        "@vitest/ui": "4.1.3",
+        "@vitest/ui": "4.1.4",
         "happy-dom": "*",
         "jsdom": "*",
         "vite": "^6.0.0 || ^7.0.0 || ^8.0.0"

package.json

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

public/i18n/en.json

@@ -1,20 +1,23 @@
 {
-  "version": "3.0 Beta 2 (2026.04.10)",
+  "version": "Chatenium Nexum 3.0 Beta 7 (April 15, 2026)",
   "ok": "Ok",
+  "back": "Back",
   "aChatProgram": "A messaging platform that you can trust.",
   "fast": "Fast",
   "secure": "Secure",
   "independent": "Independent",
   "scrollDownForMore": "Scroll down for more",
   "whatIsChtn": "Chatenium is a chat platform aiming to provide a secure, well integrated fast chatting experience across any devices. You can create a new account for free and start chatting and broadcasting messages.",
+  "updating": "Updating...",
   "home": {
+    "soon": "Coming soon...",
     "chtn": "Chatenium ",
     "chtnIs": "Chatenium is ",
     "help": "Help",
     "blog": "Blog",
     "apiSpecs": "API specifications",
-    "adaptsToYou": "adapts to you",
+    "adaptsTo": "Chatenium adapts to ",
-    "adaptsToYouDesc": "We actively work on bringing Chatenium to every device, but not the fast way, the good way by developing a native application for each platform.",
+    "adaptsToYouDesc": "Choose your platform:",
     "chtnOnWeb": "Chatenium On Web",
     "chtnOnWebDesc": "Built for maximum compatibility. The Web will work on every device you have.",
     "chtnOnAndroid": "Chatenium On Android™",
@@ -94,14 +97,24 @@
     }
   },
   "chat": {
+    "tabBar": {
+      "tab1": "Chats",
+      "tab2": "Networks",
+      "tab3": "Pictures",
+      "tab4": "Settings"
+    },
     "changeLogDialog": {
       "label": "Chatenium has been updated",
       "changeLog": {
-        "1": "UI changes and bug fixes in the video player",
+        "1": "Added progress bar to files when uploading attachments",
-        "2": "UI overflow fix in chat navigation bar"
+        "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": {
@@ -109,6 +122,14 @@
             "you": "You: "
           }
         }
+      },
+      "networkList": {
+        "newNetwork": "Start new network"
+      }
+    },
+    "pictures": {
+      "albumList": {
+        "noAlbum": "This user has no albums published"
       }
     },
     "elements": {

public/manifest.webmanifest

@@ -0,0 +1,57 @@
+{
+  "name": "Chatenium",
+  "short_name": "Chtn",
+  "display": "standalone",
+  "scope": "./",
+  "start_url": "./",
+  "icons": [
+    {
+      "src": "icons/icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "icons/icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "icons/icon-128x128.png",
+      "sizes": "128x128",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "icons/icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "icons/icon-152x152.png",
+      "sizes": "152x152",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "icons/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "icons/icon-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "icons/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable any"
+    }
+  ]
+}

src/app/app.config.ts

@@ -1,15 +1,18 @@
 import {provideTaiga} from '@taiga-ui/core';
-import {ApplicationConfig, provideBrowserGlobalErrorListeners} from '@angular/core';
+import {ApplicationConfig, provideBrowserGlobalErrorListeners, isDevMode} from '@angular/core';
-import {provideRouter} from '@angular/router';
+import {provideRouter, withRouterConfig} from '@angular/router';
 
 import {routes} from './app.routes';
 import {provideTranslateService} from '@ngx-translate/core';
 import {provideTranslateHttpLoader} from '@ngx-translate/http-loader';
+import {provideServiceWorker} from '@angular/service-worker';
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideBrowserGlobalErrorListeners(),
-    provideRouter(routes),
+    provideRouter(routes, withRouterConfig({
+      paramsInheritanceStrategy: "always"
+    })),
     provideTaiga(),
     provideTranslateService({
       fallbackLang: "en",
@@ -18,6 +21,10 @@ export const appConfig: ApplicationConfig = {
         prefix: "/i18n/",
         suffix: ".json"
       })
+    }),
+    provideServiceWorker('ngsw-worker.js', {
+      enabled: !isDevMode(),
+      registrationStrategy: 'registerWhenStable:30000'
     })
   ],
 };

src/app/app.routes.ts

@@ -7,6 +7,9 @@ import {authNeededGuard} from './guards/auth-needed-guard';
 import {Homepage} from './homepage/homepage';
 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},
@@ -16,6 +19,12 @@ 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}
+        ]
+      },
     ]
   },
 ];

src/app/chat/chat.html

@@ -1,11 +1,15 @@
-<ng-template [(tuiDialog)]="changeLogOpen" [tuiDialogOptions]="{closable: false, dismissible: false, label: 'chat.changeLogDialog.label'|translate}">
+<ng-template [(tuiDialog)]="changeLogOpen"
-  <h3>{{"version"|translate}}</h3>
+             [tuiDialogOptions]="{closable: false, dismissible: false, label: 'chat.changeLogDialog.label'|translate}">
+  <h3>{{ "version"|translate }}</h3>
   <ul>
-    <li>{{"chat.changeLogDialog.changeLog.1"|translate}}</li>
+    <li>{{ "chat.changeLogDialog.changeLog.1"|translate }}</li>
-    <li>{{"chat.changeLogDialog.changeLog.2"|translate}}</li>
+    <li>{{ "chat.changeLogDialog.changeLog.2"|translate }}</li>
+    <li>{{ "chat.changeLogDialog.changeLog.3"|translate }}</li>
   </ul>
 
-  <button tuiButton iconStart="@tui.check" (click)="localStorage.setItem('changeLogLastRead', environment.version); changeLogOpen.set(false)">{{"ok"|translate}}</button>
+  <button tuiButton iconStart="@tui.check"
+          (click)="localStorage.setItem('changeLogLastRead', environment.version); changeLogOpen.set(false)">{{ "ok"|translate }}
+  </button>
 </ng-template>
 
 @if (serviceManager.currentSession() == null) {
@@ -13,37 +17,108 @@
     <tui-loader size="xl"/>
   </main>
 } @else {
-  <main id="layout" tuiGroup [collapsed]="true">
+  @if (breakpoint() != "mobile") {
-    <aside id="chatnav">
+    <main id="layout" tuiGroup [collapsed]="true">
-      <aside>
+      <aside id="chatnav">
-        <tui-segmented id="mode_switcher">
+        <aside>
-          <button>
+          <tui-segmented id="mode_switcher" [(activeItemIndex)]="navigationActiveIndex">
-            <tui-icon icon="@tui.message-circle"/>
+            <button>
-          </button>
+              <tui-icon icon="@tui.message-circle"/>
-          <button disabled style="pointer-events: none; opacity: 0.5">
+            </button>
-            <tui-icon icon="@tui.network"/>
+            <button>
-          </button>
+              <tui-icon icon="@tui.network"/>
-          <button disabled style="pointer-events: none; opacity: 0.5">
+            </button>
-            <tui-icon icon="@tui.image"/>
+            <button>
-          </button>
+              <tui-icon icon="@tui.image"/>
-        </tui-segmented>
+            </button>
+          </tui-segmented>
 
-        <button id="bottom_btn" tuiButton appearance="flat" disabled>
+          <button id="bottom_btn" tuiButton appearance="flat" disabled>
-          <tui-icon icon="@tui.cog"/>
+            <tui-icon icon="@tui.cog"/>
-        </button>
+          </button>
+        </aside>
+
+        <main>
+          @switch (navigationActiveIndex) {
+            @case (0) {
+              <app-dm-list [token]="serviceManager.currentSession()!.token"
+                           [userid]="serviceManager.currentSession()!.userData.userid"></app-dm-list>
+            }
+            @case (1) {
+              <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>
+      <main id="content">
-        <app-dm-list [token]="serviceManager.currentSession()!.token" [userid]="serviceManager.currentSession()!.userData.userid"></app-dm-list>
+        <div id="content_tint">
+          @if (router.url.startsWith("/chat/dm") || router.url.startsWith("/chat/picture")) {
+            <!-- To ensure data is loaded -->
+            @defer (when serviceManager.chatsStatus() != LoadStatus.loading) {
+              <router-outlet/>
+            }
+          } @else if (router.url.startsWith("/chat/network")) {
+            @defer (when serviceManager.networksStatus() != LoadStatus.loading) {
+              <router-outlet/>
+            }
+          } @else {
+            <router-outlet/>
+          }
+        </div>
       </main>
-    </aside>
-
-    <main id="content">
-      <div id="content_tint">
-        @defer (when serviceManager.chatsStatus() != LoadStatus.loading) {
-          <router-outlet/>
-        }
-      </div>
     </main>
-  </main>
+  } @else {
+    <main id="layout_mobile">
+      @if (!routerOutletActive()) {
+        <div id="navigation">
+          <div id="navigation_content">
+            @switch (navigationActiveIndex) {
+              @case (0) {
+                <app-dm-list [token]="serviceManager.currentSession()!.token"
+                             [userid]="serviceManager.currentSession()!.userData.userid"></app-dm-list>
+              }
+              @case (1) {
+                <network-list [token]="serviceManager.currentSession()!.token"
+                              [userid]="serviceManager.currentSession()!.userData.userid"></network-list>
+              }
+            }
+          </div>
+
+          <nav tuiTabBar [(activeItemIndex)]="navigationActiveIndex">
+            @for (item of tabBarItems; track item; let i = $index) {
+              <button
+                [disabled]="!item.implemented"
+                [class.disabled]="!item.implemented"
+                tuiTabBarItem
+                type="button"
+                [icon]="item.icon"
+                (click)="navigationActiveIndex = i"
+              >
+                {{ item.text | translate }}
+              </button>
+            }
+          </nav>
+        </div>
+      }
+
+      @if (router.url.startsWith("/chat/dm")) {
+        <!-- To ensure data is loaded -->
+        @defer (when serviceManager.chatsStatus() != LoadStatus.loading) {
+          <router-outlet (activate)="routerOutletActive.set(true)" (deactivate)="routerOutletActive.set(false)"/>
+        }
+      } @else if (router.url.startsWith("/chat/network")) {
+        @defer (when serviceManager.networksStatus() != LoadStatus.loading) {
+          <router-outlet (activate)="routerOutletActive.set(true)" (deactivate)="routerOutletActive.set(false)"/>
+        }
+      } @else {
+        <router-outlet (activate)="routerOutletActive.set(true)" (deactivate)="routerOutletActive.set(false)"/>
+      }
+    </main>
+  }
 }

src/app/chat/chat.scss

@@ -61,7 +61,26 @@
       border-radius: 0 20px 20px 0;
       height: 100%;
       background: var(--tui-background-neutral-2);
-      padding: 15px;
+    }
+  }
+}
+
+#layout_mobile {
+  height: 93svh;
+
+  #navigation {
+    height: 100%;
+    grid-template-rows: 1fr 50px;
+
+    button {
+      &.disabled {
+        opacity: 0.5;
+      }
+    }
+
+    #navigation_content {
+      height: 100%;
+      padding: 20px;
     }
   }
 }

src/app/chat/chat.ts

@@ -1,15 +1,18 @@
-import {Component, inject, OnInit, signal} from '@angular/core';
+import {Component, computed, inject, OnInit, signal} from '@angular/core';
-import {RouterOutlet} from '@angular/router';
+import {isActive, IsActiveMatchOptions, Router, RouterOutlet} from '@angular/router';
 import {TuiSegmented} from '@taiga-ui/kit';
-import {TuiAppearance, TuiButton, TuiDialog, TuiGroup, TuiIcon, TuiLoader} from '@taiga-ui/core';
+import {TUI_BREAKPOINT, TuiAppearance, TuiButton, TuiDialog, TuiGroup, TuiIcon, TuiLoader} from '@taiga-ui/core';
 import {SessionManager} from '@chatenium/chatenium-sdk/services/sessionManager';
 import {LoadStatus, ServiceManager} from '../service-manager';
 import {IndexedDB} from '../storage/indexed-db';
 import {DmList} from './dm-list/dm-list';
 import {JsonPipe} from '@angular/common';
 import {WebSocketHandler} from '@chatenium/chatenium-sdk/core/webSocketHandler';
-import {TranslatePipe} from '@ngx-translate/core';
+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',
@@ -24,7 +27,11 @@ import {environment} from '../../environments/environment';
     TuiAppearance,
     TuiGroup,
     TuiDialog,
-    TranslatePipe
+    TranslatePipe,
+    TuiTabBarComponent,
+    TuiTabBarItem,
+    NetworkList,
+    PictureList
   ],
   templateUrl: './chat.html',
   styleUrl: './chat.scss',
@@ -32,10 +39,45 @@ import {environment} from '../../environments/environment';
 export class Chat implements OnInit {
   serviceManager = inject(ServiceManager)
   indexedDb = inject(IndexedDB)
+  breakpoint = inject(TUI_BREAKPOINT)
+  router = inject(Router)
+
+  routerOutletActive = signal(false)
+
+  navigationActiveIndex = 0
+  // Mobile navigation //
+  protected readonly tabBarItems = [
+    {
+      text: "chat.tabBar.tab1",
+      icon: '@tui.message-circle',
+      implemented: true,
+    },
+    {
+      text: "chat.tabBar.tab2",
+      icon: '@tui.network',
+      implemented: true,
+    },
+    {
+      text: "chat.tabBar.tab3",
+      icon: '@tui.image',
+      implemented: false,
+    },
+    {
+      text: "chat.tabBar.tab4",
+      icon: '@tui.cog',
+      implemented: false,
+    }
+  ];
 
   changeLogOpen = signal(false)
 
   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 () => {
       const session = await this.serviceManager.sessionManager.loadPreferredSession()
       this.serviceManager.currentSession.set(session)

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

@@ -1,9 +1,14 @@
-<button tuiButton appearance="secondary" iconStart="@tui.mail-plus">
+<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 tuiButton [appearance]="router.url == '/chat/dm/' + chat.chatid ? 'primary' : 'flat'" [routerLink]="'/chat/dm/' + 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>
     <div class="info">
       @if (chat.displayName == "") {

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

@@ -3,12 +3,24 @@
   flex-direction: column;
   gap: 5px;
 
+  #loader {
+    width: 100%;
+    display: flex;
+    justify-content: start;
+    padding: 5px;
+    gap: 5px;
+  }
+
   button {
     width: 100%;
     display: flex;
     justify-content: start;
     font-weight: 600;
 
+    &.enlarge {
+      height: 75px;
+    }
+
     .info {
       display: flex;
       flex-direction: column;

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>;
 

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 {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',
@@ -26,9 +27,16 @@ export class DmList implements OnInit {
   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)
@@ -37,4 +45,6 @@ export class DmList implements OnInit {
       this.serviceManager.chatsStatus.set(LoadStatus.error)
     }
   }
+
+  protected readonly LoadStatus = LoadStatus;
 }

src/app/chat/dm/dm.html

@@ -1,25 +1,28 @@
-@defer (when store) {
+<main [class.mobile]="breakpoint() == 'mobile'">
-  <navbar>
+  @defer (when store) {
-    <div class="items-left">
+    <navbar backButtonDest="/chat">
-       <oimg [src]="store.chatData().pfp" height="50px" width="50px" [radius]="15"></oimg>
+      <div class="data">
-      <div class="chat-data">
+        <oimg [src]="store.chatData().pfp" height="50px" width="50px" [radius]="15"></oimg>
-        @if (store.chatData().displayName == "") {
+        <div class="chat-data">
-          <span class="main-name">{{'@'+store.chatData().username}}</span>
+          @if (store.chatData().displayName == "") {
-        } @else {
+            <span class="main-name">{{'@'+store.chatData().username}}</span>
-          <span class="main-name">{{store.chatData().displayName}}</span>
+          } @else {
-          <span class="alt-name">{{'@'+store.chatData().username}}</span>
+            <span class="main-name">{{store.chatData().displayName}}</span>
-        }
+            <span class="alt-name">{{'@'+store.chatData().username}}</span>
+          }
+        </div>
       </div>
-    </div>
 
-    <div class="items-right">
+      <div class="items-right">
-      <button tuiButton appearance="flat" disabled>
+        <button tuiButton appearance="flat" disabled>
-        <tui-icon icon="@tui.phone"/>
+          <tui-icon icon="@tui.phone"/>
-      </button>
+        </button>
-    </div>
+      </div>
-  </navbar>
+    </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"/>
+    <message-box [viewModel]="store.messageBox"/>
-}
+  }
+
+</main>

src/app/chat/dm/dm.scss

@@ -1,7 +1,17 @@
-:host {
+main {
-  height: 95svh;
+  height: 98svh;
   display: grid;
   grid-template-rows: 70px minmax(0, 1fr) auto;
+  padding: 15px;
+
+  &.mobile {
+    height: 100svh;
+    padding: 15px;
+  }
+
+  .mobile {
+    height: 5px;
+  }
 
   navbar {
     .chat-data {

src/app/chat/dm/dm.ts

@@ -5,7 +5,7 @@ import {DMService} from '@chatenium/chatenium-sdk/services/dmService';
 import {IndexedDB} from '../../storage/indexed-db';
 import {Navbar} from '../elements/navbar/navbar';
 import {Oimg} from '../elements/oimg/oimg';
-import {TuiButton, TuiIcon} from '@taiga-ui/core';
+import {TUI_BREAKPOINT, TuiButton, TuiIcon} from '@taiga-ui/core';
 import {FileDataWithPreview, MessageBox} from '../elements/message-box/message-box';
 import {Messages} from '../elements/messages/messages';
 import {Chat} from '@chatenium/chatenium-sdk/domain/chatService.schema';
@@ -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',
@@ -32,6 +34,7 @@ export class Dm implements OnInit {
   serviceManager = inject(ServiceManager)
   route = inject(ActivatedRoute)
   indexedDb = inject(IndexedDB)
+  breakpoint = inject(TUI_BREAKPOINT)
 
   chatid = ""
 
@@ -41,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) {
@@ -60,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,
@@ -82,6 +87,7 @@ export class Dm implements OnInit {
         })
       })
 
+      const tempMsgId = uuidv4()
       this.store.messages.update(value => [...value, {
         message: message,
         chatid: this.chatid,
@@ -89,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},
@@ -99,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) {
@@ -126,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
@@ -157,13 +208,13 @@ 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);
 
       if (!session || !chatData) {
-        console.warn(`Initialization deferred for ${chatid}: Session or ChatData missing.`);
+        return
-        return;
       }
 
       if (!this.serviceManager.dmServices()[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();
+        try {
-        currentStore.messages.set(history);
+          const messagesCache = await currentStore.service.getQuick();
+          currentStore.messages.set(messagesCache);
+          this.scrollToBottom("instant")
+        } catch (e) {
+          console.warn(`Cache load failed: ${e}. Skipping cache load...`)
+        }
+        const messages = await currentStore.service.get();
+        currentStore.messages.set(messages);
         this.scrollToBottom("instant")
 
         await currentStore.service.joinWebSocketRoom();
+      } else {
+        this.scrollToBottom("instant")
       }
     });
   }

src/app/chat/elements/masonry/masonry.scss

@@ -1,9 +1,8 @@
 :host {
   display: grid;
-  gap: 4px;
   height: 100%;
 
-  img {
+  ::ng-deep img {
     display: block;
     height: 100%;
     width: 100%;

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>
@@ -68,7 +68,7 @@
       <tui-icon icon="@tui.x"/>
     </button>
   </div>
-  <div id="message-box" [style]="'border-radius:'+messageBoxRadius+'px;'">
+  <div id="message-box" [style]="'border-radius:'+messageBoxRadius+'px;'" [class.fullWidth]="breakpoint() != 'desktopLarge'">
     <div class="items-left">
       <button tuiButton appearance="flat" (click)="uplInput.click()">
         <tui-icon icon="@tui.file-up"/>
@@ -80,12 +80,12 @@
       </button>
     </div>
     <div class="items-middle">
-      <textarea (keydown.enter)="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().onMessageSend(message.value, null)">
+      <button [disabled]="message.value.trim() == ''" tuiButton appearance="flat" (click)="viewModel().onMessageSend(message.value, null); viewModel().message.set(''); viewModel().editingMessage.set(null);">
         <tui-icon icon="@tui.send"/>
       </button>
     </div>

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

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

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

@@ -1,10 +1,11 @@
 import {ChangeDetectorRef, Component, HostListener, inject, input} from '@angular/core';
 import {
+  TUI_BREAKPOINT,
   TuiAppearance,
   TuiButton,
   TuiDialog,
   TuiGroup,
-  TuiIcon,
+  TuiIcon, TuiScrollable,
   TuiScrollbarDirective,
   TuiTextfield
 } from '@taiga-ui/core';
@@ -16,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',
@@ -32,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',
@@ -40,6 +43,7 @@ import {TuiTextarea, TuiTextareaComponent} from '@taiga-ui/kit';
 export class MessageBox {
   viewModel = input.required<MessageBoxViewModel>()
 
+  breakpoint = inject(TUI_BREAKPOINT)
   cdr = inject(ChangeDetectorRef)
 
   textareaHeight = 25
@@ -99,8 +103,10 @@ export class MessageBox {
 
   sendMessageWithCaption() {
     this.viewModel().onMessageSend(this.viewModel().message(), this.viewModel().files())
+    this.viewModel().message.set("")
     this.viewModel().files.set([])
     this.viewModel().dialogOpen.set(false)
+    this.viewModel().editingMessage.set(null)
   }
 
   handleEnterKeydown(e: any) {

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

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

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

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

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

@@ -4,10 +4,12 @@
   flex-direction: column;
   gap: 2px;
   overflow-y: scroll;
+  overflow-x: hidden;
 
   .message {
     display: flex;
     flex-direction: column;
+    align-items: start;
 
     &.author {
       align-items: end;
@@ -29,7 +31,7 @@
       }
 
       .bubble {
-        border-radius: 25px 10px 10px 10px !important;
+        border-radius: 10px 25px 10px 10px !important;
       }
     }
 
@@ -41,7 +43,7 @@
 
     &.chained_end {
       .bubble {
-        border-radius: 10px 10px 10px 25px !important;
+        border-radius: 10px 10px 25px 10px !important;
       }
     }
 

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

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

src/app/chat/elements/navbar/navbar.html

@@ -1,3 +1,13 @@
-<nav>
+<nav [class.includeBackButton]="breakpoint() == showBackButtonAt()" [class.mobile]="breakpoint() == 'mobile'" [class.alignCenter]="dataAlignment() == 'center'">
+  @if (breakpoint() == showBackButtonAt()) {
+    <div>
+      <button (click)="router.navigate([backButtonDest()])" tuiButton appearance="flat" iconStart="@tui.chevron-left">
+        {{"back"|translate}}
+      </button>
+    </div>
+  }
+  @if (dataAlignment() == "center" && breakpoint() != showBackButtonAt()) {
+    <div></div> <!-- filler to align data to center -->
+  }
   <ng-content></ng-content>
 </nav>

src/app/chat/elements/navbar/navbar.scss

@@ -2,7 +2,31 @@ nav {
   display: grid;
   grid-template-columns: 1fr 1fr;
 
-  ::ng-deep .items-right, ::ng-deep .items-left {
+  &.includeBackButton {
+    grid-template-columns: 1fr 1fr 1fr;
+
+    ::ng-deep .data {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+
+  &.mobile {
+    zoom: 0.85;
+  }
+
+  &.alignCenter {
+    grid-template-columns: 1fr 1fr 1fr;
+
+    ::ng-deep .data {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+
+  ::ng-deep .items-right, ::ng-deep .data {
     display: flex;
     gap: 10px;
     align-items: center;

src/app/chat/elements/navbar/navbar.ts

@@ -1,9 +1,27 @@
-import { Component } from '@angular/core';
+import {Component, inject, input} from '@angular/core';
+import {TUI_BREAKPOINT, TuiButton} from '@taiga-ui/core';
+import {TuiAppBarComponent} from '@taiga-ui/layout';
+import {TuiPlatform} from '@taiga-ui/cdk';
+import {NgTemplateOutlet} from '@angular/common';
+import {TranslatePipe} from '@ngx-translate/core';
+import {Router} from '@angular/router';
 
 @Component({
   selector: 'navbar',
-  imports: [],
+  imports: [
+    TuiAppBarComponent,
+    TuiPlatform,
+    NgTemplateOutlet,
+    TuiButton,
+    TranslatePipe
+  ],
   templateUrl: './navbar.html',
   styleUrl: './navbar.scss',
 })
-export class Navbar {}
+export class Navbar {
+  breakpoint = inject(TUI_BREAKPOINT)
+  router = inject(Router)
+  backButtonDest = input.required<string>()
+  showBackButtonAt = input<"desktopSmall"|"mobile">("mobile")
+  dataAlignment = input<"left"|"center">("left")
+}

src/app/chat/elements/oimg/oimg.scss

@@ -0,0 +1,3 @@
+img {
+  display: block;
+}

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

@@ -0,0 +1,19 @@
+<button disabled tuiButton appearance="secondary" iconStart="@tui.plus">
+  {{ "chat.chatnav.networkList.newNetwork"|translate }}
+</button>
+@if (serviceManager.networksStatus() == LoadStatus.updating) {
+  <div id="loader">
+    <tui-loader />
+    {{"updating"|translate}}
+  </div>
+}
+@for (network of serviceManager.networks(); track network.networkId) {
+  <button [class.enlarge]="breakpoint() == 'mobile'" tuiButton
+          [appearance]="router.url.startsWith('/chat/network/' + network.networkId) ? 'primary' : 'flat'"
+          [routerLink]="'/chat/network/' + network.networkId">
+    <oimg [src]="network.picture" height="35px" width="35px" [radius]="10"></oimg>
+    <div class="info">
+      <span>{{ network.name }}</span>
+    </div>
+  </button>
+}

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

@@ -0,0 +1,28 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+
+  button {
+    width: 100%;
+    display: flex;
+    justify-content: start;
+    font-weight: 600;
+
+    &.enlarge {
+      height: 75px;
+    }
+
+    .info {
+      display: flex;
+      flex-direction: column;
+      text-align: start;
+
+      .latest_message {
+        margin-top: -5px;
+        font-size: 12px;
+        opacity: 50%;
+      }
+    }
+  }
+}

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

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

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

@@ -0,0 +1,50 @@
+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, 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';
+import {TranslatePipe} from '@ngx-translate/core';
+
+@Component({
+  selector: 'network-list',
+  imports: [
+    Oimg,
+    TranslatePipe,
+    TuiButton,
+    RouterLink,
+    TuiLoader
+  ],
+  templateUrl: './network-list.html',
+  styleUrl: './network-list.scss',
+})
+export class NetworkList 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.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)
+    } catch (e) {
+      console.error(e)
+      this.serviceManager.networksStatus.set(LoadStatus.error)
+    }
+  }
+
+  protected readonly LoadStatus = LoadStatus;
+}

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

@@ -0,0 +1,34 @@
+<main [class.mobile]="breakpoint() == 'mobile'">
+  @defer (when store) {
+    <navbar backButtonDest="/chat/network/{{networkId}}" showBackButtonAt="desktopSmall">
+      <div class="data">
+        <div class="chat-data">
+          @switch (store!.channelData().type) {
+            @case ("message") {
+              <tui-icon icon="@tui.hash"></tui-icon>
+            }
+            @case ("broadcast") {
+              <tui-icon icon="@tui.radio"></tui-icon>
+            }
+            @case ("voice") {
+              <tui-icon icon="@tui.audio-lines"></tui-icon>
+            }
+          }
+          <span class="main-name">{{ store!.channelData().name }}</span>
+        </div>
+      </div>
+
+      <div class="items-right">
+        <button tuiButton appearance="flat" disabled>
+          <tui-icon icon="@tui.phone"/>
+        </button>
+      </div>
+    </navbar>
+
+    <messages (scrollend)="handleMessagesScroll($event)" [messageBoxViewModel]="store!.messageBox" [messages]="store!.messages()" id="scrollContainer"
+              (onDelete)="deleteMessage($event)"/>
+
+    <message-box [viewModel]="store!.messageBox"/>
+  }
+
+</main>

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

@@ -0,0 +1,43 @@
+main {
+  height: 98svh;
+  display: grid;
+  grid-template-rows: 70px minmax(0, 1fr) auto;
+  padding: 15px;
+
+  &.mobile {
+    height: 100svh;
+    padding: 15px;
+  }
+
+  .mobile {
+    height: 5px;
+  }
+
+  navbar {
+    .chat-data {
+      display: flex;
+      justify-content: center;
+      gap: 5px;
+
+      .main-name {
+        font-size: 18px;
+        font-weight: bold;
+      }
+
+      .alt-name {
+        margin-top: -5px;
+        color: gray;
+        font-size: 12px;
+      }
+    }
+
+    .items-right {
+      margin-top: -10px;
+
+      button {
+        width: 35px;
+        height: 35px;
+      }
+    }
+  }
+}

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

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

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

@@ -0,0 +1,298 @@
+import {Component, inject, signal} from '@angular/core';
+import {DmStorage, ServiceManager, TextChannelStorage} from '../../../../service-manager';
+import {ActivatedRoute} from '@angular/router';
+import {IndexedDB} from '../../../../storage/indexed-db';
+import {TUI_BREAKPOINT, TuiButton, TuiIcon} from '@taiga-ui/core';
+import {FileDataWithPreview, MessageBox} from '../../../elements/message-box/message-box';
+import {Attachment} from '@chatenium/chatenium-sdk/domain/common.schema';
+import {FileUploadProgressListener} from '@chatenium/chatenium-sdk/domain/fileUploadService.schema';
+import {MessageBoxViewModel} from '../../../elements/message-box/message-box-viewmodel';
+import {TextChannelServiceService} from '@chatenium/chatenium-sdk/services/textChannelService';
+import {Message} from '@chatenium/chatenium-sdk/domain/textChannelService.schema';
+import {Messages} from '../../../elements/messages/messages';
+import {Navbar} from '../../../elements/navbar/navbar';
+import {Oimg} from '../../../elements/oimg/oimg';
+import {MessagesViewModel} from '../../../elements/messages/messages-viewmodel';
+import {v4 as uuidv4} from 'uuid';
+
+@Component({
+  selector: 'app-text',
+  imports: [
+    MessageBox,
+    Messages,
+    Navbar,
+    Oimg,
+    TuiButton,
+    TuiIcon
+  ],
+  templateUrl: './text.html',
+  styleUrl: './text.scss',
+})
+export class Text {
+  serviceManager = inject(ServiceManager)
+  route = inject(ActivatedRoute)
+  indexedDb = inject(IndexedDB)
+  breakpoint = inject(TUI_BREAKPOINT)
+
+  networkId = ""
+  channelId = ""
+  categoryId = ""
+
+  get store(): TextChannelStorage | null {
+    if (!this.serviceManager.networkServices()[this.networkId]) {
+      return null
+    }
+    return this.serviceManager.networkServices()[this.networkId].textChannels()[this.channelId]
+  }
+
+  async sendMessage(message: string, files: FileDataWithPreview[] | null) {
+    if (!this.store) return
+    if (!files && message.trim() == "") return
+
+    const session = this.serviceManager.currentSession();
+    if (session != null) {
+      const editedMessage = this.store.messageBox.editingMessage()
+      if (editedMessage) {
+        const storedMsg = this.store.messages().find(m => m.msgid == editedMessage.messageId)
+        const originalMessage: Message = JSON.parse(JSON.stringify(storedMsg))
+        if (storedMsg) {
+          storedMsg.message = message
+        }
+
+        try {
+          await this.store.service.editMessage(editedMessage.messageId, message)
+        } catch (e) {
+          if (storedMsg) {
+            storedMsg.message = originalMessage.message
+          }
+        }
+
+        return
+      }
+
+      let attachments: Attachment[] = []
+      files?.forEach(file => {
+        const extraMetaData: Record<string, any> = {}
+        extraMetaData["thumbnailMetaData"] = file.videoThumbnail ?? ""
+        extraMetaData["progressShown"] = true
+        extraMetaData["totalChunks"] = 0
+        extraMetaData["uploadedChunks"] = 0
+
+        attachments.push({
+          fileName: file.name,
+          fileId: file.fileId,
+          type: file.type,
+          format: file.extension,
+          path: file.blob,
+          height: file.height,
+          width: file.width,
+          extraMetaData: extraMetaData
+        })
+      })
+
+      const tempMsgId = uuidv4()
+      this.store.messages.update(value => [...value, {
+        author: {
+          userid: session.userData.userid,
+          pfp: session.userData.pfp,
+          username: session.userData.username,
+          displayName: session.userData.displayName
+        },
+        msgid: tempMsgId,
+        message: message,
+        sent_at: {
+          T: 0,
+          I: 0
+        },
+        isEdited: false,
+        channelId: "",
+        networkId: "",
+        categoryId: "",
+        files: attachments,
+        seen: false,
+        replyTo: "",
+        replyToId: "",
+        forwardedFrom: "",
+        forwardedFromName: ""
+      }])
+
+      this.scrollToBottom("smooth")
+
+      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)
+    }
+  }
+
+  async deleteMessage(messageId: string) {
+    if (!this.store) return
+    const i = this.store.messages().findIndex(m => m.msgid == messageId)
+    if (i != -1) {
+      const originalMessage: Message = JSON.parse(JSON.stringify(this.store.messages()[i]))
+      this.store.messages().splice(i, 1)
+      try {
+        await this.store.service.deleteMessages([messageId])
+      } catch (e) {
+        this.store.messages().splice(i, 0, originalMessage)
+      }
+    }
+  }
+
+  scrollToBottom(anim: 'instant' | 'smooth'): void {
+    setTimeout(() => {
+      if (!this.store) {
+        return
+      }
+      const scrollContainer = <HTMLDivElement>document.querySelector("#scrollContainer")
+      scrollContainer.scroll({
+        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) {
+    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);
+    if (data.channelId === channelId) {
+      const targetStore = this.serviceManager.networkServices()[networkId].textChannels()[channelId];
+      if (targetStore) {
+        switch (action) {
+          case "newMessage":
+            targetStore.messages.update(messages => [...messages, data]);
+            this.scrollToBottom("smooth")
+            break;
+        }
+      }
+    }
+  }
+
+  ngOnInit() {
+    this.route.params.subscribe(async params => {
+      const networkId = params['networkId'];
+      const categoryId = params['categoryId'];
+      const channelId = params['channelId'];
+      this.networkId = networkId;
+      this.categoryId = categoryId;
+      this.channelId = channelId;
+
+      const session = this.serviceManager.currentSession();
+      const networkData = this.serviceManager.networks().find(c => c.networkId === networkId);
+
+      if (!session || !networkData) {
+        console.warn("No network data")
+        return
+      }
+
+      const categoryData = networkData.categories.find(c => c.categoryId === categoryId);
+      if (!categoryData) {
+        console.warn("No category data")
+        return
+      }
+      const channelData = categoryData.channels.find(c => c.channelId === channelId);
+      if (!channelData) {
+        console.warn("No channel data")
+        return
+      }
+      if (!this.serviceManager.networkServices()[networkId]) {
+        console.warn("No networkService")
+        return
+      }
+      console.log(this.serviceManager.networkServices())
+      console.log(this.serviceManager.networkServices()[networkId])
+      if (!this.serviceManager.networkServices()[networkId].textChannels()[channelId]) {
+        const newStore = {
+          categoryData: signal(categoryData),
+          channelData: signal(channelData),
+          messages: signal<Message[]>([]),
+          messagesVm: new MessagesViewModel(),
+          messageBox: new MessageBoxViewModel((msg, files) => this.sendMessage(msg, files)),
+          wsListener: (action, data) => this.onWsListen(action, data, networkId, categoryId),
+        } as TextChannelStorage;
+
+        newStore.service = new TextChannelServiceService(
+          session.userData.userid,
+          session.token,
+          networkId,
+          categoryId,
+          channelId,
+          this.indexedDb.getApi(),
+          (action, data) => newStore.wsListener(action, data)
+        );
+
+        this.serviceManager.networkServices()[networkId].textChannels()[channelId] = newStore;
+
+        const currentStore = this.serviceManager.networkServices()[networkId].textChannels()[channelId]
+        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")
+      }
+    });
+  }
+}

src/app/chat/network/network.html

@@ -0,0 +1,44 @@
+@defer(when store) {
+  <div id="layout" [class.routerOutletActive]="routerOutletActive()" [class.hideNetworkNav]="routerOutletActive() && breakpoint() == 'desktopSmall'">
+    <div id="router">
+      <router-outlet (activate)="routerOutletActive.set(true)" (deactivate)="routerOutletActive.set(false)"></router-outlet>
+    </div>
+    <div id="network-data">
+      <navbar backButtonDest="/chat" dataAlignment="center">
+        <div class="data">
+          <oimg [src]="store.networkData().picture" height="50px" width="50px" [radius]="15"></oimg>
+          <h2>{{store.networkData().name}}</h2>
+        </div>
+
+        <div class="items-right"></div>
+      </navbar>
+
+      <main tuiGroup orientation="vertical" style="width: 100%">
+        @for (category of store.networkData().categories; track category) {
+          <div class="category">
+            <h2>{{category.name}}</h2>
+
+            <div tuiGroup orientation="vertical" style="width: 100%">
+              @for (channel of category.channels; track channel) {
+                <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>
+                    }
+                    @case ("broadcast") {
+                      <tui-icon icon="@tui.radio"></tui-icon>
+                    }
+                    @case ("voice") {
+                      <tui-icon icon="@tui.audio-lines"></tui-icon>
+                    }
+                  }
+                  <span>{{channel.name}}</span>
+                </button>
+              }
+            </div>
+          </div>
+        }
+      </main>
+    </div>
+  </div>
+}

src/app/chat/network/network.scss

@@ -0,0 +1,45 @@
+#layout {
+  overflow-y: scroll;
+  width: 100%;
+  height: 100%;
+  display: grid;
+  grid-template-columns: 0 100%;
+  overflow-x: hidden;
+  padding: 15px;
+  transition: 0.2s;
+
+  &.routerOutletActive {
+    overflow-y: hidden;
+    padding: 0;
+    grid-template-columns: 1fr 300px;
+
+    #router {
+      background: var(--tui-background-neutral-1);
+    }
+
+    main {
+      padding: 15px;
+    }
+  }
+
+  &.hideNetworkNav {
+    grid-template-columns: 1fr;
+
+    #network-data {
+      &.hidden {
+        display: none;
+      }
+    }
+  }
+
+  .category {
+    background: var(--tui-background-base-alt);
+    width: 100%;
+    padding: 15px;
+
+    .channel {
+      display: flex;
+      justify-content: start;
+    }
+  }
+}

src/app/chat/network/network.spec.ts

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

src/app/chat/network/network.ts

@@ -0,0 +1,77 @@
+import {Component, inject, OnInit, signal} from '@angular/core';
+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';
+import {DmStorage, NetworkStorage, ServiceManager} from '../../service-manager';
+import {DMService} from '@chatenium/chatenium-sdk/services/dmService';
+import {Network as NetworkData} from "@chatenium/chatenium-sdk/domain/networkService.schema"
+import {NetworkService} from '@chatenium/chatenium-sdk/services/networkService';
+import {IndexedDB} from '../../storage/indexed-db';
+import {Navbar} from '../elements/navbar/navbar';
+import {Oimg} from '../elements/oimg/oimg';
+import {TUI_BREAKPOINT, TuiButton, TuiGroup, TuiIcon} from '@taiga-ui/core';
+
+@Component({
+  selector: 'app-network',
+  imports: [
+    RouterOutlet,
+    Navbar,
+    Oimg,
+    TuiGroup,
+    TuiButton,
+    TuiIcon,
+    RouterLink
+  ],
+  templateUrl: './network.html',
+  styleUrl: './network.scss',
+})
+export class Network implements OnInit {
+  serviceManager = inject(ServiceManager)
+  route = inject(ActivatedRoute)
+  indexedDb = inject(IndexedDB)
+  breakpoint = inject(TUI_BREAKPOINT)
+  router = inject(Router)
+
+  routerOutletActive = signal(false)
+
+  networkId = ""
+  get store() {
+    return this.serviceManager.networkServices()[this.networkId]
+  }
+
+  ngOnInit() {
+    this.route.params.subscribe(async params => {
+      console.log("Loading network...")
+      const networkId = params['networkId'];
+      this.networkId = networkId;
+
+      const session = this.serviceManager.currentSession();
+      const networkData = this.serviceManager.networks().find(c => c.networkId === networkId);
+
+      if (!session || !networkData) {
+        console.warn(`Initialization deferred for ${networkId}: Session or NetworkData missing.`);
+        return;
+      }
+
+      if (!this.serviceManager.networkServices()[networkId]) {
+        const newStore = {
+          networkData: signal<NetworkData>(networkData),
+          textChannels: signal({}),
+          wsListener: (action, data) => {
+          },
+        } as NetworkStorage;
+
+        newStore.service = new NetworkService(
+          session.userData.userid,
+          session.token,
+          networkId,
+          this.indexedDb.getApi(),
+          (action, data) => newStore.wsListener(action, data)
+        );
+
+        this.serviceManager.networkServices()[networkId] = newStore;
+      }
+    });
+  }
+}

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>
+}

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%;
+      }
+    }
+  }
+}

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();
+  });
+});

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)
+    }
+  }
+}

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>

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;
+    }
+  }
+}

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();
+  });
+});

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;
+}

src/app/homepage/homepage.html

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

src/app/homepage/homepage.scss

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

src/app/homepage/homepage.ts

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

src/app/service-manager.ts

@@ -9,6 +9,14 @@ import {Chat} from '@chatenium/chatenium-sdk/domain/chatService.schema';
 import {DMService} from '@chatenium/chatenium-sdk/services/dmService';
 import {Message} from '@chatenium/chatenium-sdk/domain/dmService.schema';
 import {MessageBoxViewModel} from './chat/elements/message-box/message-box-viewmodel';
+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',
@@ -21,11 +29,18 @@ 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[]>([])
 
+  networkService: NetworkService | null = null // Initialized in network-list.ts
+  networksStatus = signal<LoadStatus>(LoadStatus.loading)
+  networks = signal<Network[]>([])
+  // Services for individual networks
+  networkServices = signal<Record<string, NetworkStorage>>({})
+
   dmServices = signal<Record<string, DmStorage>>({})
+  pictureServices = signal<Record<string, PictureStorage>>({})
 }
 
 export enum LoadStatus {
@@ -38,7 +53,31 @@ 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>
+  wsListener: (action: string, message: string) => void
+  textChannels: WritableSignal<Record<string, TextChannelStorage>>
+}
+
+export interface TextChannelStorage {
+  service: TextChannelServiceService
+  messages: WritableSignal<NetworkMessage[]>
+  messagesVm: MessagesViewModel
+  channelData: WritableSignal<NetworkChannel>
+  categoryData: WritableSignal<NetworkCategory>
+  messageBox: MessageBoxViewModel
+  wsListener: (action: string, message: string) => void
+}

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 = 1
+  private dbVersion = 3
   private db: IDBDatabase | null = null
 
   getApi(): DatabaseAPI {
@@ -35,6 +35,8 @@ export class IndexedDB {
         db.createObjectStore('networks', { keyPath: 'id' })
         db.createObjectStore('files', { keyPath: 'id' })
         db.createObjectStore('messages', { keyPath: 'id' })
+        db.createObjectStore('networkmessages', { keyPath: 'id' })
+        db.createObjectStore('pictures', { keyPath: 'id' })
       }
 
       request.onsuccess = (event: Event) => {

src/environments/environment.development.ts

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

src/environments/environment.ts

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

src/index.html

@@ -7,8 +7,10 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="manifest" href="manifest.webmanifest">
 </head>
 <body>
   <app-root></app-root>
+  <noscript>Please enable JavaScript to continue using this application.</noscript>
 </body>
 </html>