refactor: refactor sideload page (#2475)

* refactor: refactor sideload page

* chore: improve ux

* chore: update

* chore: update

frontend/package-lock.json

@@ -23,13 +23,13 @@
         "@start9labs/argon2": "^0.1.0",
         "@start9labs/emver": "^0.1.5",
         "@start9labs/start-sdk": "0.4.0-rev0.lib0.rc8.beta2",
-        "@taiga-ui/addon-charts": "3.49.1",
+        "@taiga-ui/addon-charts": "3.52.0",
-        "@taiga-ui/cdk": "3.49.1",
+        "@taiga-ui/cdk": "3.52.0",
-        "@taiga-ui/core": "3.49.1",
+        "@taiga-ui/core": "3.52.0",
-        "@taiga-ui/experimental": "3.491.1-canary.5e01f6f\n",
+        "@taiga-ui/experimental": "3.52.0",
-        "@taiga-ui/icons": "3.49.1",
+        "@taiga-ui/icons": "3.52.0",
-        "@taiga-ui/kit": "3.49.1",
+        "@taiga-ui/kit": "3.52.0",
-        "@taiga-ui/styles": "3.49.1",
+        "@taiga-ui/styles": "3.52.0",
         "@tinkoff/ng-dompurify": "4.0.0",
         "ansi-to-html": "^0.7.2",
         "base64-js": "^1.5.1",
@@ -3670,9 +3670,9 @@
       "dev": true
     },
     "node_modules/@maskito/angular": {
-      "version": "1.7.0",
+      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/@maskito/angular/-/angular-1.7.0.tgz",
+      "resolved": "https://registry.npmjs.org/@maskito/angular/-/angular-1.8.1.tgz",
-      "integrity": "sha512-RcBEXkuUf5zyaNQZv26LxOZ2DrILR34Ci1OWRaeI0JfHSslKdMlbQMdWXvGKga6ChGY5Sfl64AsmQ1D2kMvGlQ==",
+      "integrity": "sha512-iT9/YK+lTRd8ofU1Qd2pJHofshi/QnSGXS9MBIjt8Mk034pLCYutB5ua+2kiZYMdPk7kyuaSXYZOSL/Pt5cBuA==",
       "dependencies": {
         "tslib": "2.6.2"
       },
@@ -3680,21 +3680,21 @@
         "@angular/common": ">=12.0.0",
         "@angular/core": ">=12.0.0",
         "@angular/forms": ">=12.0.0",
-        "@maskito/core": "^1.7.0",
+        "@maskito/core": "^1.8.1",
         "rxjs": ">=6.0.0"
       }
     },
     "node_modules/@maskito/core": {
-      "version": "1.7.0",
+      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/@maskito/core/-/core-1.7.0.tgz",
+      "resolved": "https://registry.npmjs.org/@maskito/core/-/core-1.8.1.tgz",
-      "integrity": "sha512-sjdv1MSJnWWor/Qy1u1+ZZtqejzfVt6zqMUfy5RToEPZSBWlsCg1JSfjRu9WRb3yirpZnj3j80JkTGCicFrvuw=="
+      "integrity": "sha512-h9+Z91WASHQ6z6kDP7uIHyMUPxNwA1mOIPsFxdg2MHq1RASFUNKHj66uU5xuR0OJu17qcCCzUu7ixZ43QQ/HYg=="
     },
     "node_modules/@maskito/kit": {
-      "version": "1.7.0",
+      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/@maskito/kit/-/kit-1.7.0.tgz",
+      "resolved": "https://registry.npmjs.org/@maskito/kit/-/kit-1.8.1.tgz",
-      "integrity": "sha512-LX/ngWFnPKWnQfvU9m5fss8NIBO261DlQdXOtlbhoXgyscVoR8RVeUHRVuRKEhJgd1I+dvlP1vUxms2qltFTjw==",
+      "integrity": "sha512-eevH2iyqRjxw8kzt7gmLETrlkPTj4Mq1mbIOOD2VQ+O33ocNFl1a87s02mRQGk6UmSJBmHLT/2EaVfUEswBmWA==",
       "peerDependencies": {
-        "@maskito/core": "^1.7.0"
+        "@maskito/core": "^1.8.1"
       }
     },
     "node_modules/@materia-ui/ngx-monaco-editor": {
@@ -3710,9 +3710,9 @@
       }
     },
     "node_modules/@ng-web-apis/common": {
-      "version": "3.0.3",
+      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/@ng-web-apis/common/-/common-3.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/@ng-web-apis/common/-/common-3.0.5.tgz",
-      "integrity": "sha512-CJm/NYQ4JrN0qNVbPcKeRnZ5nL0zL6RrJrNwBW/LnZEGp9t0mxgLYKw52fM4xRm0OVXOXoRwCbjr8gSUD6vstQ==",
+      "integrity": "sha512-rCaOxTKNQ0w0SFeH1Zdw+D8s2igE1QKRdVKDgAeZ7i4utQlSJWHP3de4k4lVEFM1cRiJh3Oq6QX2IOuLrgxEdw==",
       "dependencies": {
         "tslib": "^2.2.0"
       },
@@ -3723,9 +3723,9 @@
       }
     },
     "node_modules/@ng-web-apis/intersection-observer": {
-      "version": "3.1.3",
+      "version": "3.1.5",
-      "resolved": "https://registry.npmjs.org/@ng-web-apis/intersection-observer/-/intersection-observer-3.1.3.tgz",
+      "resolved": "https://registry.npmjs.org/@ng-web-apis/intersection-observer/-/intersection-observer-3.1.5.tgz",
-      "integrity": "sha512-mGxUcPOJ/y8oXY85c9k2UnZpGElu1wgAwN66brfFNKswwCYM8GLbrIOm0Zsdb6vyJiNFgaoZ+tG+dEZPobCzGQ==",
+      "integrity": "sha512-+79rkKa7Ce1h6qcnDxvNITIjMjnVSaHZ1TlR5y57cOWhh2kyX5bBwgBx+lTa702o27oO3HOYrS3YnJidDiiPsQ==",
       "dependencies": {
         "tslib": "^2.2.0"
       },
@@ -3735,9 +3735,9 @@
       }
     },
     "node_modules/@ng-web-apis/mutation-observer": {
-      "version": "3.0.3",
+      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/@ng-web-apis/mutation-observer/-/mutation-observer-3.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/@ng-web-apis/mutation-observer/-/mutation-observer-3.0.5.tgz",
-      "integrity": "sha512-gl2OGn7+N8w0VuBLzGP5Ypw2nMqbnV3TgNdnQSyCC5I7+3Rz/Q3OzQqciTNUPAqd5HWWwW/IKFPvgI6ePYWXog==",
+      "integrity": "sha512-pr8cxdNa+6VwZDAt7SWKrsuxr1yaTvbct9KG0dONl7zFLQf6n6yvpwgNTOz/PZQyReQxn8W7eHKPo4Q0aAwy/g==",
       "dependencies": {
         "tslib": "^2.2.0"
       },
@@ -3747,9 +3747,9 @@
       }
     },
     "node_modules/@ng-web-apis/resize-observer": {
-      "version": "3.0.3",
+      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/@ng-web-apis/resize-observer/-/resize-observer-3.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/@ng-web-apis/resize-observer/-/resize-observer-3.0.5.tgz",
-      "integrity": "sha512-2EVqcl/HTzObQmIgtXEs2KHrPUXC8r6ePPfbAAUbuVdlDAZm6vKsXYHvH+Zkm/JKNp1MZJb/3kb6UkkZtf8ewA==",
+      "integrity": "sha512-nmOpNL7c+RAxsnsmF2TvSuyWGQMqCTJ7MYVzSrDdNDFVqkEX5yQGu0UC+JM/8sEBcePjqju6OkJDWOLGF7uhOQ==",
       "dependencies": {
         "tslib": "^2.2.0"
       },
@@ -4133,9 +4133,9 @@
       }
     },
     "node_modules/@taiga-ui/addon-charts": {
-      "version": "3.49.1",
+      "version": "3.52.0",
-      "resolved": "https://registry.npmjs.org/@taiga-ui/addon-charts/-/addon-charts-3.49.1.tgz",
+      "resolved": "https://registry.npmjs.org/@taiga-ui/addon-charts/-/addon-charts-3.52.0.tgz",
-      "integrity": "sha512-Y2b421JSEOboB+wbLcf0uPeYWGtMtc4ZmqSF4cT8DPB8vA8QsG2HWj+JrOVjwnsryiuTieiFHE3txk1w4sjTVA==",
+      "integrity": "sha512-qu2p6Uo5qMTdh1hfnEB4xLHF0vsOw2YhDcq1bcqNWmI6Su2K090P2lsd9mCNyNHWAIrejjcCqBKRwJDopVm0hw==",
       "dependencies": {
         "tslib": ">=2.0.0"
       },
@@ -4143,25 +4143,51 @@
         "@angular/common": ">=12.0.0",
         "@angular/core": ">=12.0.0",
         "@ng-web-apis/common": ">=3.0.0",
-        "@taiga-ui/cdk": ">=3.49.1",
+        "@taiga-ui/cdk": ">=3.52.0",
-        "@taiga-ui/core": ">=3.49.1",
+        "@taiga-ui/core": ">=3.52.0",
         "@tinkoff/ng-polymorpheus": ">=4.0.0"
       }
     },
-    "node_modules/@taiga-ui/cdk": {
+    "node_modules/@taiga-ui/addon-commerce": {
-      "version": "3.49.1",
+      "version": "3.52.0",
-      "resolved": "https://registry.npmjs.org/@taiga-ui/cdk/-/cdk-3.49.1.tgz",
+      "resolved": "https://registry.npmjs.org/@taiga-ui/addon-commerce/-/addon-commerce-3.52.0.tgz",
-      "integrity": "sha512-Mo+o/ey7WJYvXh/4hQiUca0VRVmGtEn13PMWY+wAE+243F8KeoMca/CGpzV3DhpK3WTUbFyURvmNV0pR78Qmzw==",
+      "integrity": "sha512-4oRmYhTsaN34L37MpwLder8eF3/WgsP/36qQWxsyhKCRN+H/ltpw7Yp16JO0Tg+nkj0ErtGOzZ4vZMl4+xJnAA==",
+      "peer": true,
       "dependencies": {
-        "@ng-web-apis/common": "3.0.3",
+        "tslib": ">=2.0.0"
-        "@ng-web-apis/mutation-observer": "3.0.3",
+      },
-        "@ng-web-apis/resize-observer": "3.0.3",
+      "peerDependencies": {
+        "@angular/common": ">=12.0.0",
+        "@angular/core": ">=12.0.0",
+        "@angular/forms": ">=12.0.0",
+        "@maskito/angular": ">=1.3.0",
+        "@maskito/core": ">=1.3.0",
+        "@maskito/kit": ">=1.3.0",
+        "@ng-web-apis/common": ">=3.0.0",
+        "@taiga-ui/cdk": ">=3.52.0",
+        "@taiga-ui/core": ">=3.52.0",
+        "@taiga-ui/i18n": ">=3.52.0",
+        "@taiga-ui/kit": ">=3.52.0",
+        "@tinkoff/ng-polymorpheus": ">=4.0.0",
+        "rxjs": ">=6.0.0"
+      }
+    },
+    "node_modules/@taiga-ui/cdk": {
+      "version": "3.52.0",
+      "resolved": "https://registry.npmjs.org/@taiga-ui/cdk/-/cdk-3.52.0.tgz",
+      "integrity": "sha512-fZ9HGUu1rpJXf9yq8SH0K5qLugErtaoCQErGd0Waa6zEV9jb0bm4XoCwSAUKTAUutJ1iQCzj34F5oDoDTG2ydA==",
+      "dependencies": {
+        "@angular-devkit/schematics": "12.2.18",
+        "@ng-web-apis/common": "3.0.5",
+        "@ng-web-apis/mutation-observer": "3.0.5",
+        "@ng-web-apis/resize-observer": "3.0.5",
+        "@schematics/angular": "12.2.18",
         "@tinkoff/ng-event-plugins": "3.1.0",
         "@tinkoff/ng-polymorpheus": "4.2.0",
         "tslib": "2.6.2"
       },
       "optionalDependencies": {
-        "ng-morph": "2.2.5",
+        "ng-morph": "4.0.0",
         "parse5": "6.0.1"
       },
       "peerDependencies": {
@@ -4172,12 +4198,144 @@
         "rxjs": ">=6.0.0"
       }
     },
-    "node_modules/@taiga-ui/core": {
+    "node_modules/@taiga-ui/cdk/node_modules/@angular-devkit/core": {
-      "version": "3.49.1",
+      "version": "12.2.18",
-      "resolved": "https://registry.npmjs.org/@taiga-ui/core/-/core-3.49.1.tgz",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-12.2.18.tgz",
-      "integrity": "sha512-rup9I5GVtbv5QNGj6jw2w1J2sHPRLwlmokI+/ceTzTlL4h1SvwH0vNm1hcQu4/nlsoYE4m3f8TyXs/1rM3lzxw==",
+      "integrity": "sha512-GDLHGe9HEY5SRS+NrKr14C8aHsRCiBFkBFSSbeohgLgcgSXzZHFoU84nDWrl3KZNP8oqcUSv5lHu6dLcf2fnww==",
       "dependencies": {
-        "@taiga-ui/i18n": "^3.49.1",
+        "ajv": "8.6.2",
+        "ajv-formats": "2.1.0",
+        "fast-json-stable-stringify": "2.1.0",
+        "magic-string": "0.25.7",
+        "rxjs": "6.6.7",
+        "source-map": "0.7.3"
+      },
+      "engines": {
+        "node": "^12.14.1 || >=14.0.0",
+        "npm": "^6.11.0 || ^7.5.6 || >=8.0.0",
+        "yarn": ">= 1.13.0"
+      }
+    },
+    "node_modules/@taiga-ui/cdk/node_modules/@angular-devkit/core/node_modules/rxjs": {
+      "version": "6.6.7",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz",
+      "integrity": "sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==",
+      "dependencies": {
+        "tslib": "^1.9.0"
+      },
+      "engines": {
+        "npm": ">=2.0.0"
+      }
+    },
+    "node_modules/@taiga-ui/cdk/node_modules/@angular-devkit/core/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+    },
+    "node_modules/@taiga-ui/cdk/node_modules/@angular-devkit/schematics": {
+      "version": "12.2.18",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-12.2.18.tgz",
+      "integrity": "sha512-bZ9NS5PgoVfetRC6WeQBHCY5FqPZ9y2TKHUo12sOB2YSL3tgWgh1oXyP8PtX34gasqsLjNULxEQsAQYEsiX/qQ==",
+      "dependencies": {
+        "@angular-devkit/core": "12.2.18",
+        "ora": "5.4.1",
+        "rxjs": "6.6.7"
+      },
+      "engines": {
+        "node": "^12.14.1 || >=14.0.0",
+        "npm": "^6.11.0 || ^7.5.6 || >=8.0.0",
+        "yarn": ">= 1.13.0"
+      }
+    },
+    "node_modules/@taiga-ui/cdk/node_modules/@angular-devkit/schematics/node_modules/rxjs": {
+      "version": "6.6.7",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz",
+      "integrity": "sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==",
+      "dependencies": {
+        "tslib": "^1.9.0"
+      },
+      "engines": {
+        "npm": ">=2.0.0"
+      }
+    },
+    "node_modules/@taiga-ui/cdk/node_modules/@angular-devkit/schematics/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+    },
+    "node_modules/@taiga-ui/cdk/node_modules/@schematics/angular": {
+      "version": "12.2.18",
+      "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-12.2.18.tgz",
+      "integrity": "sha512-niRS9Ly9y8uI0YmTSbo8KpdqCCiZ/ATMZWeS2id5M8JZvfXbngwiqJvojdSol0SWU+n1W4iA+lJBdt4gSKlD5w==",
+      "dependencies": {
+        "@angular-devkit/core": "12.2.18",
+        "@angular-devkit/schematics": "12.2.18",
+        "jsonc-parser": "3.0.0"
+      },
+      "engines": {
+        "node": "^12.14.1 || >=14.0.0",
+        "npm": "^6.11.0 || ^7.5.6 || >=8.0.0",
+        "yarn": ">= 1.13.0"
+      }
+    },
+    "node_modules/@taiga-ui/cdk/node_modules/ajv": {
+      "version": "8.6.2",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.6.2.tgz",
+      "integrity": "sha512-9807RlWAgT564wT+DjeyU5OFMPjmzxVobvDFmNAhY+5zD6A2ly3jDp6sgnfyDtlIQ+7H97oc/DGCzzfu9rjw9w==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/@taiga-ui/cdk/node_modules/ajv-formats": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.0.tgz",
+      "integrity": "sha512-USH2jBb+C/hIpwD2iRjp0pe0k+MvzG0mlSn/FIdCgQhUb9ALPRjt2KIQdfZDS9r0ZIeUAg7gOu9KL0PFqGqr5Q==",
+      "dependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "ajv": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@taiga-ui/cdk/node_modules/jsonc-parser": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.0.0.tgz",
+      "integrity": "sha512-fQzRfAbIBnR0IQvftw9FJveWiHp72Fg20giDrHz6TdfB12UH/uue0D3hm57UB5KgAVuniLMCaS8P1IMj9NR7cA=="
+    },
+    "node_modules/@taiga-ui/cdk/node_modules/magic-string": {
+      "version": "0.25.7",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz",
+      "integrity": "sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==",
+      "dependencies": {
+        "sourcemap-codec": "^1.4.4"
+      }
+    },
+    "node_modules/@taiga-ui/cdk/node_modules/source-map": {
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
+      "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@taiga-ui/core": {
+      "version": "3.52.0",
+      "resolved": "https://registry.npmjs.org/@taiga-ui/core/-/core-3.52.0.tgz",
+      "integrity": "sha512-KstWj5idjABd4qj7kvv7qRRRCogGKlT90LaAHZ/ha6sR8/nLDXtLcLJkLrWSSI6LFQXXTLtj/SDeMxdMvkCTSw==",
+      "dependencies": {
+        "@taiga-ui/i18n": "^3.52.0",
         "tslib": ">=2.0.0"
       },
       "peerDependencies": {
@@ -4189,34 +4347,35 @@
         "@angular/router": ">=12.0.0",
         "@ng-web-apis/common": ">=3.0.0",
         "@ng-web-apis/mutation-observer": ">=3.0.0",
-        "@taiga-ui/cdk": ">=3.49.1",
+        "@taiga-ui/cdk": ">=3.52.0",
-        "@taiga-ui/i18n": ">=3.49.1",
+        "@taiga-ui/i18n": ">=3.52.0",
         "@tinkoff/ng-event-plugins": ">=3.1.0",
         "@tinkoff/ng-polymorpheus": ">=4.0.0",
         "rxjs": ">=6.0.0"
       }
     },
     "node_modules/@taiga-ui/experimental": {
-      "version": "3.491.1-canary.5e01f6f",
+      "version": "3.52.0",
-      "resolved": "https://registry.npmjs.org/@taiga-ui/experimental/-/experimental-3.491.1-canary.5e01f6f.tgz",
+      "resolved": "https://registry.npmjs.org/@taiga-ui/experimental/-/experimental-3.52.0.tgz",
-      "integrity": "sha512-bQCGK8DKYzMZ+0SZNJkplmZ/EhyJoaWsQk0F/P/WefA6SrjupHTUq3K35P1hT1Ixr0vADONOcEDFd5DgziTZ5g==",
+      "integrity": "sha512-oql9ctZ0eXeQ6f4n525sL4xI2N5r9+qu4sEvuJaS9Qv008hyxKdgdqLRB4CmG4qIphfukHm2Q1cU+lsDM7+ENg==",
       "dependencies": {
         "tslib": ">=2.0.0"
       },
       "peerDependencies": {
         "@angular/common": ">=12.0.0",
         "@angular/core": ">=12.0.0",
-        "@taiga-ui/cdk": ">=3.49.1",
+        "@taiga-ui/addon-commerce": ">=3.52.0",
-        "@taiga-ui/core": ">=3.49.1",
+        "@taiga-ui/cdk": ">=3.52.0",
-        "@taiga-ui/kit": ">=3.49.1",
+        "@taiga-ui/core": ">=3.52.0",
+        "@taiga-ui/kit": ">=3.52.0",
         "@tinkoff/ng-polymorpheus": ">=4.0.0",
         "rxjs": ">=6.0.0"
       }
     },
     "node_modules/@taiga-ui/i18n": {
-      "version": "3.49.1",
+      "version": "3.52.0",
-      "resolved": "https://registry.npmjs.org/@taiga-ui/i18n/-/i18n-3.49.1.tgz",
+      "resolved": "https://registry.npmjs.org/@taiga-ui/i18n/-/i18n-3.52.0.tgz",
-      "integrity": "sha512-x85DI7iuMUlKbvH+M/kuyYT7jmaV2ILxFXeCjrLs93iHilLisF3o9Zz+z+2pKgyjkBdnx0t2M3Bme2J3N6mXYA==",
+      "integrity": "sha512-182Yf1QQXEjKSqEScuH01DZMBIyCa2/yOe6qtvmlAHjl67DRjaajtd0N7ehrNl8C9TyN4HsAbcGRtyMP0/0xgQ==",
       "dependencies": {
         "tslib": ">=2.0.0"
       },
@@ -4227,25 +4386,25 @@
       }
     },
     "node_modules/@taiga-ui/icons": {
-      "version": "3.49.1",
+      "version": "3.52.0",
-      "resolved": "https://registry.npmjs.org/@taiga-ui/icons/-/icons-3.49.1.tgz",
+      "resolved": "https://registry.npmjs.org/@taiga-ui/icons/-/icons-3.52.0.tgz",
-      "integrity": "sha512-TVllWirA7FIaGMGJuQqEPG5NbGvbxuxJaq7oNGV88+mBLaZtMIsIuWrG+ojCCwYYN+AztDFcfwG1BtSEpaGqww==",
+      "integrity": "sha512-0DjCqzCgk5FGh64NCf1tNgbXVR8TEVn9kUyhdaoEVd3K38eVyKtx/6DWjB0oV5+a1ZG1uq+oP6ixNurC4C6x8g==",
       "dependencies": {
         "tslib": ">=2.0.0"
       },
       "peerDependencies": {
-        "@taiga-ui/cdk": ">=3.49.1"
+        "@taiga-ui/cdk": ">=3.52.0"
       }
     },
     "node_modules/@taiga-ui/kit": {
-      "version": "3.49.1",
+      "version": "3.52.0",
-      "resolved": "https://registry.npmjs.org/@taiga-ui/kit/-/kit-3.49.1.tgz",
+      "resolved": "https://registry.npmjs.org/@taiga-ui/kit/-/kit-3.52.0.tgz",
-      "integrity": "sha512-CwK3iWXQsgx8Hn5yIc42ndZbtm2oS5C5byo40B8ex+vYQeoOj7NTRmrBJ/XIhWi66vpSbbYY7+d8b/5g6vgfXg==",
+      "integrity": "sha512-T5DR6Np7RiMGX+xMmeGisCc33Js5X2nztObW5VfprU3C7eCp15Z7rw3J3+NdJtf90IJ4EijcbEP8HPxE2sJIVQ==",
       "dependencies": {
-        "@maskito/angular": "1.7.0",
+        "@maskito/angular": "1.8.1",
-        "@maskito/core": "1.7.0",
+        "@maskito/core": "1.8.1",
-        "@maskito/kit": "1.7.0",
+        "@maskito/kit": "1.8.1",
-        "@ng-web-apis/intersection-observer": "3.1.3",
+        "@ng-web-apis/intersection-observer": "3.1.5",
         "text-mask-core": "5.1.2",
         "tslib": ">=2.0.0"
       },
@@ -4257,19 +4416,19 @@
         "@ng-web-apis/common": ">=3.0.0",
         "@ng-web-apis/mutation-observer": ">=3.0.0",
         "@ng-web-apis/resize-observer": ">=3.0.0",
-        "@taiga-ui/cdk": ">=3.49.1",
+        "@taiga-ui/cdk": ">=3.52.0",
-        "@taiga-ui/core": ">=3.49.1",
+        "@taiga-ui/core": ">=3.52.0",
-        "@taiga-ui/i18n": ">=3.49.1",
+        "@taiga-ui/i18n": ">=3.52.0",
         "@tinkoff/ng-polymorpheus": ">=4.0.0",
         "rxjs": ">=6.0.0"
       }
     },
     "node_modules/@taiga-ui/styles": {
-      "version": "3.49.1",
+      "version": "3.52.0",
-      "resolved": "https://registry.npmjs.org/@taiga-ui/styles/-/styles-3.49.1.tgz",
+      "resolved": "https://registry.npmjs.org/@taiga-ui/styles/-/styles-3.52.0.tgz",
-      "integrity": "sha512-J1SEVKY/UUyM97M7HyzMbgbmRS3EZwqeTyRStezejpg/kBJrbOQaBx76cUCoBvVJ6PZ5S5N/AapnrutW1RTkfg==",
+      "integrity": "sha512-VabK+8cV2DErI8cENyy2u/xjX2U0bg8J0fL/A9PrCu8LS9VZGXuH7m7AbMbo05ADpmkqDYDt9N0eBzik3+pVxw==",
       "peerDependencies": {
-        "@taiga-ui/cdk": ">=3.49.1",
+        "@taiga-ui/cdk": ">=3.52.0",
         "tslib": ">=2.0.0"
       }
     },
@@ -4322,17 +4481,56 @@
       }
     },
     "node_modules/@ts-morph/common": {
-      "version": "0.9.2",
+      "version": "0.20.0",
-      "resolved": "https://registry.npmjs.org/@ts-morph/common/-/common-0.9.2.tgz",
+      "resolved": "https://registry.npmjs.org/@ts-morph/common/-/common-0.20.0.tgz",
-      "integrity": "sha512-IPyg+c3Am0EBoa63W0f/AKeLrJhvzMzQ4BIvD1baxLopmiHOj1HFTXYxC6e8iTZ+UYtN+/WFM9UyGRnoA20b8g==",
+      "integrity": "sha512-7uKjByfbPpwuzkstL3L5MQyuXPSKdoNG93Fmi2JoDcTf3pEP731JdRFAduRVkOs8oqxPsXKA+ScrWkdQ8t/I+Q==",
       "optional": true,
       "dependencies": {
-        "fast-glob": "^3.2.5",
+        "fast-glob": "^3.2.12",
-        "minimatch": "^3.0.4",
+        "minimatch": "^7.4.3",
-        "mkdirp": "^1.0.4",
+        "mkdirp": "^2.1.6",
         "path-browserify": "^1.0.1"
       }
     },
+    "node_modules/@ts-morph/common/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "optional": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/@ts-morph/common/node_modules/minimatch": {
+      "version": "7.4.6",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-7.4.6.tgz",
+      "integrity": "sha512-sBz8G/YjVniEz6lKPNpKxXwazJe4c19fEfV2GDMX6AjFz+MX9uDWIZW8XreVhkFW3fkIdTv/gxWr/Kks5FFAVw==",
+      "optional": true,
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@ts-morph/common/node_modules/mkdirp": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-2.1.6.tgz",
+      "integrity": "sha512-+hEnITedc8LAtIP9u3HJDFIdcLV2vXP33sqLLIzkv1Db1zO/1OxbvYf0Y1OC/S/Qo5dxHXepofhmxL02PsKe+A==",
+      "optional": true,
+      "bin": {
+        "mkdirp": "dist/cjs/src/bin.js"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/@tsconfig/node10": {
       "version": "1.0.9",
       "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.9.tgz",
@@ -6110,9 +6308,9 @@
       }
     },
     "node_modules/code-block-writer": {
-      "version": "10.1.1",
+      "version": "12.0.0",
-      "resolved": "https://registry.npmjs.org/code-block-writer/-/code-block-writer-10.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/code-block-writer/-/code-block-writer-12.0.0.tgz",
-      "integrity": "sha512-67ueh2IRGst/51p0n6FvPrnRjAGHY5F8xdjkgrYE7DDzpJe6qA07RYQ9VcoUeo5ATOjSOiWpSL3SWBRRbempMw==",
+      "integrity": "sha512-q4dMFMlXtKR3XNBHyMHt/3pwYNA69EDk00lloMOaaUMKPUXBw6lpXtbu3MMVG6/uOihGnRDOlkyqsONEUj60+w==",
       "optional": true
     },
     "node_modules/color-convert": {
@@ -7675,8 +7873,7 @@
     "node_modules/fast-json-stable-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
-      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="
-      "dev": true
     },
     "node_modules/fast-levenshtein": {
       "version": "2.0.6",
@@ -11069,25 +11266,78 @@
       }
     },
     "node_modules/ng-morph": {
-      "version": "2.2.5",
+      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/ng-morph/-/ng-morph-2.2.5.tgz",
+      "resolved": "https://registry.npmjs.org/ng-morph/-/ng-morph-4.0.0.tgz",
-      "integrity": "sha512-plxrHfcz7aNRcTCxS9tUxI1F5Vfx5CZAAw8NAnJCyCb41Js6S+EyPDvn2v7H2QyfZzXU1H0BAqtiRQv/rE2zTA==",
+      "integrity": "sha512-+opfMF/33fMQRt38oSPT+fnexZm8c635LaTDKOlAnkaDGRWcOM4EllqLf73m+5+D8gurwYXOkimIzj6Jmpx1cA==",
       "optional": true,
       "dependencies": {
-        "jsonc-parser": "3.0.0",
+        "jsonc-parser": "3.2.0",
-        "minimatch": "3.0.5",
+        "minimatch": "9.0.1",
         "multimatch": "5.0.0",
-        "ts-morph": "10.0.2"
+        "semver": "7.4.0",
+        "ts-morph": "19.0.0"
       },
       "peerDependencies": {
         "@angular-devkit/core": ">=11.0.0",
-        "@angular-devkit/schematics": ">=11.0.0"
+        "@angular-devkit/schematics": ">=11.0.0",
+        "tslib": "2.5.3"
       }
     },
-    "node_modules/ng-morph/node_modules/jsonc-parser": {
+    "node_modules/ng-morph/node_modules/brace-expansion": {
-      "version": "3.0.0",
+      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-fQzRfAbIBnR0IQvftw9FJveWiHp72Fg20giDrHz6TdfB12UH/uue0D3hm57UB5KgAVuniLMCaS8P1IMj9NR7cA==",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "optional": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/ng-morph/node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "optional": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/ng-morph/node_modules/minimatch": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.1.tgz",
+      "integrity": "sha512-0jWhJpD/MdhPXwPuiRkCbfYfSKp2qnn2eOc279qI7f+osl/l+prKSrvhg157zSYvx/1nmgn2NqdT6k2Z7zSH9w==",
+      "optional": true,
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/ng-morph/node_modules/semver": {
+      "version": "7.4.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.4.0.tgz",
+      "integrity": "sha512-RgOxM8Mw+7Zus0+zcLEUn8+JfoLpj/huFTItQy2hsM4khuC1HYRDp0cU482Ewn/Fcy6bCjufD8vAj7voC66KQw==",
+      "optional": true,
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/ng-morph/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
       "optional": true
     },
     "node_modules/ng-packagr": {
@@ -14608,6 +14858,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/sourcemap-codec": {
+      "version": "1.4.8",
+      "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
+      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
+      "deprecated": "Please use @jridgewell/sourcemap-codec instead"
+    },
     "node_modules/spdx-correct": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.2.0.tgz",
@@ -15294,13 +15550,13 @@
       "integrity": "sha512-kXrY75F0s0WD15N2bWKDScKlKgwnusN6dTRzGs1N7LlxQRnazrsBISC1HL4sy2adsyk65Zbx3Ui3IGN8leAFOQ=="
     },
     "node_modules/ts-morph": {
-      "version": "10.0.2",
+      "version": "19.0.0",
-      "resolved": "https://registry.npmjs.org/ts-morph/-/ts-morph-10.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/ts-morph/-/ts-morph-19.0.0.tgz",
-      "integrity": "sha512-TVuIfEqtr9dW25K3Jajqpqx7t/zLRFxKu2rXQZSDjTm4MO4lfmuj1hn8WEryjeDDBFcNOCi+yOmYUYR4HucrAg==",
+      "integrity": "sha512-D6qcpiJdn46tUqV45vr5UGM2dnIEuTGNxVhg0sk5NX11orcouwj6i1bMqZIz2mZTZB1Hcgy7C3oEVhAT+f6mbQ==",
       "optional": true,
       "dependencies": {
-        "@ts-morph/common": "~0.9.0",
+        "@ts-morph/common": "~0.20.0",
-        "code-block-writer": "^10.1.1"
+        "code-block-writer": "^12.0.0"
       }
     },
     "node_modules/ts-node": {

frontend/package.json

@@ -44,13 +44,13 @@
     "@materia-ui/ngx-monaco-editor": "^6.0.0",
     "@start9labs/argon2": "^0.1.0",
     "@start9labs/emver": "^0.1.5",
-    "@taiga-ui/addon-charts": "3.49.1",
+    "@taiga-ui/addon-charts": "3.52.0",
-    "@taiga-ui/cdk": "3.49.1",
+    "@taiga-ui/cdk": "3.52.0",
-    "@taiga-ui/core": "3.49.1",
+    "@taiga-ui/core": "3.52.0",
-    "@taiga-ui/experimental": "3.491.1-canary.5e01f6f\n",
+    "@taiga-ui/experimental": "3.52.0",
-    "@taiga-ui/icons": "3.49.1",
+    "@taiga-ui/icons": "3.52.0",
-    "@taiga-ui/kit": "3.49.1",
+    "@taiga-ui/kit": "3.52.0",
-    "@taiga-ui/styles": "3.49.1",
+    "@taiga-ui/styles": "3.52.0",
     "@tinkoff/ng-dompurify": "4.0.0",
     "ansi-to-html": "^0.7.2",
     "base64-js": "^1.5.1",

frontend/projects/marketplace/src/pages/show/package/package.component.html

@@ -1,11 +1,9 @@
-<div class="header montserrat">
+<img class="logo" alt="" [src]="pkg | mimeType | trustUrl" />
-  <img class="logo" alt="" [src]="pkg | mimeType | trustUrl" />
+<div class="text">
-  <div class="text">
+  <h1 ticker class="title">{{ pkg.manifest.title }}</h1>
-    <h1 ticker class="title">{{ pkg.manifest.title }}</h1>
+  <p class="version">{{ pkg.manifest.version | displayEmver }}</p>
-    <p class="version">{{ pkg.manifest.version | displayEmver }}</p>
+  <p *ngIf="pkg['published-at'] as published" class="published">
-    <p *ngIf="pkg['published-at'] as published" class="published">
+    Released: {{ published | date : 'medium' }}
-      Released: {{ published | date : 'medium' }}
+  </p>
-    </p>
+  <ng-content></ng-content>
-    <ng-content></ng-content>
-  </div>
 </div>

frontend/projects/marketplace/src/pages/show/package/package.component.scss

@@ -1,7 +1,8 @@
-.header {
+:host {
   display: flex;
   align-items: flex-start;
   padding: 16px;
+  line-height: 2;
 }
 
 .text {

frontend/projects/marketplace/src/pipes/mime-type.pipe.ts

@@ -6,6 +6,8 @@ import { MarketplacePkg } from '../types'
 })
 export class MimeTypePipe implements PipeTransform {
   transform(pkg: MarketplacePkg): string {
+    if (pkg.icon.startsWith('data:')) return pkg.icon
+
     if (pkg.manifest.assets.icon) {
       switch (pkg.manifest.assets.icon.split('.').pop()) {
         case 'png':

frontend/projects/shared/styles/taiga.scss

@@ -39,6 +39,13 @@
   color: var(--tui-error-fill);
 }
 
+[tuiWrapper][data-appearance='input-file'] {
+  &:hover,
+  &:active {
+    background: transparent !important;
+  }
+}
+
 tui-dialog {
   transform: translate3d(0, 0, 0);
 }

frontend/projects/ui/src/app/app.providers.ts

@@ -4,10 +4,10 @@ import { Router, RouteReuseStrategy } from '@angular/router'
 import { IonicRouteStrategy, IonNav } from '@ionic/angular'
 import { TUI_DATE_FORMAT, TUI_DATE_SEPARATOR } from '@taiga-ui/cdk'
 import {
-  tuiButtonOptionsProvider,
   tuiNumberFormatProvider,
   tuiTextfieldOptionsProvider,
 } from '@taiga-ui/core'
+import { tuiButtonOptionsProvider } from '@taiga-ui/experimental'
 import {
   TUI_DATE_TIME_VALUE_TRANSFORMER,
   TUI_DATE_VALUE_TRANSFORMER,

frontend/projects/ui/src/app/app/snek/snek.module.ts

@@ -1,10 +1,10 @@
 import { NgModule } from '@angular/core'
 import { CommonModule } from '@angular/common'
 import { IonicModule } from '@ionic/angular'
+import { TuiButtonModule } from '@taiga-ui/experimental'
 
 import { SnekDirective } from './snek.directive'
 import { SnakePage } from './snake.page'
-import { TuiButtonModule } from '@taiga-ui/core'
 
 @NgModule({
   imports: [CommonModule, IonicModule, TuiButtonModule],

frontend/projects/ui/src/app/apps/diagnostic/home/home.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core'
 import { CommonModule } from '@angular/common'
 import { RouterModule, Routes } from '@angular/router'
-import { TuiButtonModule } from '@taiga-ui/core'
+import { TuiButtonModule } from '@taiga-ui/experimental'
 import { HomePage } from './home.page'
 
 const ROUTES: Routes = [

frontend/projects/ui/src/app/apps/portal/components/card/card.component.html

@@ -24,9 +24,9 @@
     <button
       tuiIconButton
       appearance="outline"
-      shape="rounded"
       size="xs"
-      icon="tuiIconMoreHorizontal"
+      iconLeft="tuiIconMoreHorizontal"
+      [style.border-radius.%]="100"
     >
       Actions
     </button>

frontend/projects/ui/src/app/apps/portal/components/card/card.component.ts

@@ -9,11 +9,11 @@ import {
 import {
   TuiBadgedContentModule,
   TuiBadgeNotificationModule,
+  TuiButtonModule,
 } from '@taiga-ui/experimental'
 import { RouterLink } from '@angular/router'
 import { TickerModule } from '@start9labs/shared'
 import {
-  TuiButtonModule,
   TuiDataListModule,
   TuiHostedDropdownModule,
   TuiSvgModule,

frontend/projects/ui/src/app/apps/portal/components/header/header-menu/header-menu.component.ts

@@ -1,10 +1,10 @@
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
 import {
-  TuiButtonModule,
   TuiDataListModule,
   TuiHostedDropdownModule,
   TuiSvgModule,
 } from '@taiga-ui/core'
+import { TuiButtonModule } from '@taiga-ui/experimental'
 import { ApiService } from 'src/app/services/api/embassy-api.service'
 import { AuthService } from 'src/app/services/auth.service'
 

frontend/projects/ui/src/app/apps/portal/components/header/header.component.html

@@ -1,10 +1,11 @@
 <ng-content></ng-content>
 <div class="toolbar">
-  <button tuiIconButton icon="tuiIconCloudLarge" appearance="success">
+  <button tuiIconButton iconLeft="tuiIconCloudLarge" appearance="success">
     Connection
   </button>
-  <tui-badged-content size="m" [contentBottom]="4">
+  <tui-badged-content [style.--tui-radius.%]="50">
-    <button tuiIconButton icon="tuiIconBellLarge" appearance="warning">
+    <tui-badge-notification tuiSlot="bottom" size="s">4</tui-badge-notification>
+    <button tuiIconButton iconLeft="tuiIconBellLarge" appearance="warning">
       Notifications
     </button>
   </tui-badged-content>

frontend/projects/ui/src/app/apps/portal/components/header/header.component.ts

@@ -1,11 +1,14 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core'
-import { TuiBadgedContentModule } from '@taiga-ui/kit'
 import {
-  TuiButtonModule,
   TuiDataListModule,
   TuiHostedDropdownModule,
   TuiSvgModule,
 } from '@taiga-ui/core'
+import {
+  TuiBadgedContentModule,
+  TuiBadgeNotificationModule,
+  TuiButtonModule,
+} from '@taiga-ui/experimental'
 import { HeaderMenuComponent } from './header-menu/header-menu.component'
 
 @Component({
@@ -16,6 +19,7 @@ import { HeaderMenuComponent } from './header-menu/header-menu.component'
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
     TuiBadgedContentModule,
+    TuiBadgeNotificationModule,
     TuiButtonModule,
     TuiHostedDropdownModule,
     TuiDataListModule,

frontend/projects/ui/src/app/apps/portal/components/navigation/navigation.component.html

@@ -25,7 +25,7 @@
   <button
     tuiIconButton
     size="xs"
-    icon="tuiIconClose"
+    iconLeft="tuiIconClose"
     appearance="icon"
     class="close"
     (click.stop.prevent)="removeTab(tab, rla.isActive)"

frontend/projects/ui/src/app/apps/portal/components/navigation/navigation.component.ts

@@ -1,7 +1,8 @@
 import { CommonModule } from '@angular/common'
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
 import { Router, RouterModule } from '@angular/router'
-import { TuiButtonModule, TuiSvgModule } from '@taiga-ui/core'
+import { TuiSvgModule } from '@taiga-ui/core'
+import { TuiButtonModule } from '@taiga-ui/experimental'
 import { NavigationService } from '../../services/navigation.service'
 import { NavigationItem } from '../../types/navigation-item'
 

frontend/projects/ui/src/app/apps/portal/constants/system-utilities.ts

@@ -8,17 +8,9 @@ export const SYSTEM_UTILITIES: Record<string, { icon: string; title: string }> =
       icon: 'tuiIconGlobeLarge',
       title: 'Updates',
     },
-    '/portal/system/devices': {
+    '/portal/system/sideload': {
-      icon: 'assets/img/icon_transparent.png',
+      icon: 'tuiIconUploadLarge',
-      title: 'Devices',
+      title: 'Sideload',
-    },
-    '/portal/system/metrics': {
-      icon: 'assets/img/icon_transparent.png',
-      title: 'Metrics',
-    },
-    '/portal/system/manual': {
-      icon: 'assets/img/icon_transparent.png',
-      title: 'Manual',
     },
     '/portal/system/snek': {
       icon: 'assets/img/icon_transparent.png',

frontend/projects/ui/src/app/apps/portal/routes/service/components/action-success.component.ts

@@ -1,7 +1,8 @@
 import { CommonModule } from '@angular/common'
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
 import { CopyService } from '@start9labs/shared'
-import { TuiButtonModule, TuiDialogContext } from '@taiga-ui/core'
+import { TuiDialogContext } from '@taiga-ui/core'
+import { TuiButtonModule } from '@taiga-ui/experimental'
 import { POLYMORPHEUS_CONTEXT } from '@tinkoff/ng-polymorpheus'
 import { QrCodeModule } from 'ng-qrcode'
 import { ActionResponse } from 'src/app/services/api/api.types'
@@ -21,7 +22,7 @@ import { ActionResponse } from 'src/app/services/api/api.types'
           *ngIf="context.data.copyable"
           tuiIconButton
           appearance="flat"
-          icon="tuiIconCopyLarge"
+          iconLeft="tuiIconCopyLarge"
           (click)="copyService.copy(context.data.value)"
         >
           Copy

frontend/projects/ui/src/app/apps/portal/routes/service/components/actions.component.ts

@@ -1,7 +1,8 @@
 import { CommonModule } from '@angular/common'
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
 import { ErrorService, LoadingService } from '@start9labs/shared'
-import { TuiButtonModule, TuiDialogService } from '@taiga-ui/core'
+import { TuiDialogService } from '@taiga-ui/core'
+import { TuiButtonModule } from '@taiga-ui/experimental'
 import { tuiPure } from '@taiga-ui/cdk'
 import { TUI_PROMPT } from '@taiga-ui/kit'
 import { PatchDB } from 'patch-db-client'

frontend/projects/ui/src/app/apps/portal/routes/service/components/credential.component.ts

@@ -6,7 +6,8 @@ import {
 } from '@angular/core'
 import { CopyService } from '@start9labs/shared'
 import { mask } from 'src/app/util/mask'
-import { TuiButtonModule, TuiLabelModule } from '@taiga-ui/core'
+import { TuiLabelModule } from '@taiga-ui/core'
+import { TuiButtonModule } from '@taiga-ui/experimental'
 
 @Component({
   selector: 'service-credential',
@@ -17,7 +18,7 @@ import { TuiButtonModule, TuiLabelModule } from '@taiga-ui/core'
     <button
       tuiIconButton
       appearance="flat"
-      [icon]="masked ? 'tuiIconEyeLarge' : 'tuiIconEyeOffLarge'"
+      [iconLeft]="masked ? 'tuiIconEyeLarge' : 'tuiIconEyeOffLarge'"
       (click)="masked = !masked"
     >
       Toggle
@@ -25,7 +26,7 @@ import { TuiButtonModule, TuiLabelModule } from '@taiga-ui/core'
     <button
       tuiIconButton
       appearance="flat"
-      icon="tuiIconCopyLarge"
+      iconLeft="tuiIconCopyLarge"
       (click)="copyService.copy(value)"
     >
       Copy

frontend/projects/ui/src/app/apps/portal/routes/service/components/interface.component.ts

@@ -5,7 +5,8 @@ import {
   inject,
   Input,
 } from '@angular/core'
-import { TuiButtonModule, TuiSvgModule } from '@taiga-ui/core'
+import { TuiSvgModule } from '@taiga-ui/core'
+import { TuiButtonModule } from '@taiga-ui/experimental'
 import { ConfigService } from 'src/app/services/config.service'
 import { InterfaceInfo } from 'src/app/services/patch-db/data-model'
 import { ExtendedInterfaceInfo } from '../pipes/interface-info.pipe'
@@ -23,7 +24,7 @@ import { ExtendedInterfaceInfo } from '../pipes/interface-info.pipe'
       *ngIf="info.type === 'ui'"
       tuiIconButton
       appearance="flat"
-      icon="tuiIconExternalLinkLarge"
+      iconLeft="tuiIconExternalLinkLarge"
       [style.border-radius.%]="100"
       (click.stop.prevent)="launchUI(info)"
       [disabled]="disabled"

frontend/projects/ui/src/app/apps/portal/routes/service/modals/config.component.ts

@@ -7,8 +7,8 @@ import {
   LoadingService,
 } from '@start9labs/shared'
 import { InputSpec } from '@start9labs/start-sdk/lib/config/configTypes'
+import { TuiButtonModule } from '@taiga-ui/experimental'
 import {
-  TuiButtonModule,
   TuiDialogContext,
   TuiDialogService,
   TuiLoaderModule,

frontend/projects/ui/src/app/apps/portal/routes/service/modals/credentials.component.ts

@@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common'
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
 import { ErrorService, SharedPipesModule } from '@start9labs/shared'
 import { TuiForModule } from '@taiga-ui/cdk'
-import { TuiButtonModule } from '@taiga-ui/core'
+import { TuiButtonModule } from '@taiga-ui/experimental'
 import { POLYMORPHEUS_CONTEXT } from '@tinkoff/ng-polymorpheus'
 import { BehaviorSubject } from 'rxjs'
 import { ApiService } from 'src/app/services/api/embassy-api.service'

frontend/projects/ui/src/app/apps/portal/routes/system/backups/components/physical.component.ts

@@ -7,7 +7,8 @@ import {
   Output,
 } from '@angular/core'
 import { TuiForModule } from '@taiga-ui/cdk'
-import { TuiButtonModule, TuiSvgModule } from '@taiga-ui/core'
+import { TuiSvgModule } from '@taiga-ui/core'
+import { TuiButtonModule } from '@taiga-ui/experimental'
 import { UnknownDisk } from 'src/app/services/api/api.types'
 import { IonicModule } from '@ionic/angular'
 import { UnitConversionPipesModule } from '@start9labs/shared'

frontend/projects/ui/src/app/apps/portal/routes/system/backups/components/targets.component.ts

@@ -8,8 +8,8 @@ import {
   Output,
 } from '@angular/core'
 import { TuiForModule } from '@taiga-ui/cdk'
+import { TuiButtonModule } from '@taiga-ui/experimental'
 import {
-  TuiButtonModule,
   TuiDialogOptions,
   TuiDialogService,
   TuiSvgModule,
@@ -52,7 +52,7 @@ import { GetBackupIconPipe } from '../pipes/get-backup-icon.pipe'
             tuiIconButton
             size="xs"
             appearance="icon"
-            icon="tuiIconEdit2"
+            iconLeft="tuiIconEdit2"
             (click)="update.emit(target)"
           >
             Update
@@ -61,7 +61,7 @@ import { GetBackupIconPipe } from '../pipes/get-backup-icon.pipe'
             tuiIconButton
             size="xs"
             appearance="icon"
-            icon="tuiIconTrash2"
+            iconLeft="tuiIconTrash2"
             (click)="delete$.next(target.id)"
           >
             Delete

frontend/projects/ui/src/app/apps/portal/routes/system/backups/modals/backup.component.ts

@@ -3,12 +3,12 @@ import { Component, inject } from '@angular/core'
 import { FormsModule } from '@angular/forms'
 import { TuiForModule } from '@taiga-ui/cdk'
 import {
-  TuiButtonModule,
   TuiDialogContext,
   TuiDialogOptions,
   TuiGroupModule,
   TuiLoaderModule,
 } from '@taiga-ui/core'
+import { TuiButtonModule } from '@taiga-ui/experimental'
 import { TuiCheckboxBlockModule } from '@taiga-ui/kit'
 import {
   POLYMORPHEUS_CONTEXT,

frontend/projects/ui/src/app/apps/portal/routes/system/backups/modals/edit.component.ts

@@ -36,6 +36,7 @@ import { ToHumanCronPipe } from '../pipes/to-human-cron.pipe'
         appearance="secondary"
         type="button"
         class="button"
+        size="l"
         (click)="selectTarget()"
       >
         Target
@@ -48,6 +49,7 @@ import { ToHumanCronPipe } from '../pipes/to-human-cron.pipe'
         appearance="secondary"
         type="button"
         class="button"
+        size="l"
         (click)="selectPackages()"
       >
         Packages
@@ -70,7 +72,6 @@ import { ToHumanCronPipe } from '../pipes/to-human-cron.pipe'
       </div>
       <button
         tuiButton
-        size="m"
         class="submit"
         [style.margin-left]="'auto'"
         (click)="save()"

frontend/projects/ui/src/app/apps/portal/routes/system/backups/modals/history.component.ts

@@ -8,13 +8,8 @@ import {
   ALWAYS_TRUE_HANDLER,
   TuiForModule,
 } from '@taiga-ui/cdk'
-import {
+import { TuiDialogService, TuiLinkModule, TuiSvgModule } from '@taiga-ui/core'
-  TuiButtonModule,
+import { TuiButtonModule, TuiFadeModule } from '@taiga-ui/experimental'
-  TuiDialogService,
-  TuiLinkModule,
-  TuiSvgModule,
-} from '@taiga-ui/core'
-import { TuiFadeModule } from '@taiga-ui/experimental'
 import { TuiCheckboxModule } from '@taiga-ui/kit'
 import { BehaviorSubject } from 'rxjs'
 import { BackupRun } from 'src/app/services/api/api.types'
@@ -31,7 +26,6 @@ import { REPORT } from './report.component'
       Past Events
       <button
         tuiButton
-        size="m"
         appearance="secondary-destructive"
         [disabled]="disabled"
         (click)="delete()"

frontend/projects/ui/src/app/apps/portal/routes/system/backups/modals/jobs.component.ts

@@ -3,13 +3,12 @@ import { Component, inject, OnInit } from '@angular/core'
 import { ErrorService, LoadingService } from '@start9labs/shared'
 import { TuiForModule } from '@taiga-ui/cdk'
 import {
-  TuiButtonModule,
   TuiDialogOptions,
   TuiDialogService,
   TuiNotificationModule,
   TuiSvgModule,
 } from '@taiga-ui/core'
-import { TuiFadeModule } from '@taiga-ui/experimental'
+import { TuiButtonModule, TuiFadeModule } from '@taiga-ui/experimental'
 import { TUI_PROMPT, TuiPromptData } from '@taiga-ui/kit'
 import { PolymorpheusComponent } from '@tinkoff/ng-polymorpheus'
 import { BehaviorSubject, filter } from 'rxjs'
@@ -36,7 +35,7 @@ import { EDIT } from './edit.component'
     </tui-notification>
     <h3 class="g-title">
       Saved Jobs
-      <button tuiButton size="s" icon="tuiIconPlus" (click)="create()">
+      <button tuiButton size="s" iconLeft="tuiIconPlus" (click)="create()">
         Create New Job
       </button>
     </h3>
@@ -65,14 +64,14 @@ import { EDIT } from './edit.component'
                 tuiIconButton
                 appearance="icon"
                 size="xs"
-                icon="tuiIconEdit2"
+                iconLeft="tuiIconEdit2"
                 (click)="update(job)"
               ></button>
               <button
                 tuiIconButton
                 appearance="icon"
                 size="xs"
-                icon="tuiIconTrash2"
+                iconLeft="tuiIconTrash2"
                 (click)="delete(job.id)"
               ></button>
             </td>

frontend/projects/ui/src/app/apps/portal/routes/system/backups/modals/recover.component.ts

@@ -2,11 +2,8 @@ import { CommonModule } from '@angular/common'
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
 import { FormsModule } from '@angular/forms'
 import { ErrorService, LoadingService } from '@start9labs/shared'
-import {
+import { TuiDialogContext, TuiGroupModule } from '@taiga-ui/core'
-  TuiButtonModule,
+import { TuiButtonModule } from '@taiga-ui/experimental'
-  TuiDialogContext,
-  TuiGroupModule,
-} from '@taiga-ui/core'
 import { TuiCheckboxBlockModule } from '@taiga-ui/kit'
 import {
   POLYMORPHEUS_CONTEXT,

frontend/projects/ui/src/app/apps/portal/routes/system/backups/modals/target.component.ts

@@ -2,8 +2,8 @@ import { CommonModule } from '@angular/common'
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
 import { ErrorService } from '@start9labs/shared'
 import { TuiForModule } from '@taiga-ui/cdk'
+import { TuiButtonModule } from '@taiga-ui/experimental'
 import {
-  TuiButtonModule,
   TuiDialogContext,
   TuiDialogOptions,
   TuiDialogService,

frontend/projects/ui/src/app/apps/portal/routes/system/backups/modals/targets.component.ts

@@ -5,18 +5,10 @@ import {
   unionSelectKey,
   unionValueKey,
 } from '@start9labs/start-sdk/lib/config/configTypes'
-import { TuiButtonModule, TuiNotificationModule } from '@taiga-ui/core'
+import { TuiNotificationModule } from '@taiga-ui/core'
+import { TuiButtonModule, TuiFadeModule } from '@taiga-ui/experimental'
 import { PolymorpheusComponent } from '@tinkoff/ng-polymorpheus'
-import {
+import { BehaviorSubject } from 'rxjs'
-  BehaviorSubject,
-  catchError,
-  from,
-  Observable,
-  of,
-  share,
-  startWith,
-  switchMap,
-} from 'rxjs'
 import { FormPage } from 'src/app/apps/ui/modals/form/form.page'
 import { configBuilderToSpec } from 'src/app/util/configBuilderToSpec'
 import {
@@ -37,7 +29,6 @@ import { ApiService } from 'src/app/services/api/embassy-api.service'
 import { BackupConfig } from '../types/backup-config'
 import { BackupsPhysicalComponent } from '../components/physical.component'
 import { BackupsTargetsComponent } from '../components/targets.component'
-import { TuiFadeModule } from '@taiga-ui/experimental'
 
 @Component({
   template: `

frontend/projects/ui/src/app/apps/portal/routes/system/sideload/dependencies.component.ts

@@ -0,0 +1,58 @@
+import { CommonModule } from '@angular/common'
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { MarketplacePkg } from '@start9labs/marketplace'
+import { EmverPipesModule } from '@start9labs/shared'
+import {
+  TuiAvatarModule,
+  TuiCellModule,
+  TuiTitleModule,
+} from '@taiga-ui/experimental'
+
+@Component({
+  selector: 'sideload-dependencies',
+  template: `
+    <h3 class="g-title" [style.text-indent.rem]="1">Dependencies</h3>
+    <div *ngFor="let dep of package.manifest.dependencies | keyvalue" tuiCell>
+      <tui-avatar [src]="getImage(dep.key)"></tui-avatar>
+      <div tuiTitle>
+        <div>
+          <strong>{{ getTitle(dep.key) }}&nbsp;</strong>
+          <ng-container [ngSwitch]="dep.value.requirement.type">
+            <span *ngSwitchCase="'required'">(required)</span>
+            <span *ngSwitchCase="'opt-out'">(required by default)</span>
+            <span *ngSwitchCase="'opt-in'">(optional)</span>
+          </ng-container>
+        </div>
+        <div tuiSubtitle [style.color]="'var(--tui-text-03)'">
+          {{ dep.value.version | displayEmver }}
+        </div>
+        <div tuiSubtitle>
+          {{ dep.value.description }}
+        </div>
+      </div>
+    </div>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    CommonModule,
+    TuiTitleModule,
+    EmverPipesModule,
+    TuiAvatarModule,
+    TuiCellModule,
+  ],
+})
+export class SideloadDependenciesComponent {
+  @Input({ required: true })
+  package!: MarketplacePkg
+
+  getTitle(key: string): string {
+    return this.package['dependency-metadata'][key]?.title || key
+  }
+
+  getImage(key: string): string {
+    const icon = this.package['dependency-metadata'][key]?.icon
+
+    return icon ? `data:image/png;base64,${icon}` : key.substring(0, 2)
+  }
+}

frontend/projects/ui/src/app/apps/portal/routes/system/sideload/package.component.ts

@@ -0,0 +1,131 @@
+import { CommonModule } from '@angular/common'
+import { Component, inject, Input } from '@angular/core'
+import { Router, RouterLink } from '@angular/router'
+import {
+  AboutModule,
+  AdditionalModule,
+  MarketplacePkg,
+  PackageModule,
+} from '@start9labs/marketplace'
+import {
+  Emver,
+  ErrorService,
+  LoadingService,
+  SharedPipesModule,
+} from '@start9labs/shared'
+import { TuiLetModule } from '@taiga-ui/cdk'
+import { TuiAlertService } from '@taiga-ui/core'
+import { TuiButtonModule } from '@taiga-ui/experimental'
+import { PatchDB } from 'patch-db-client'
+import { combineLatest, map } from 'rxjs'
+import { DataModel } from 'src/app/services/patch-db/data-model'
+import { ApiService } from 'src/app/services/api/embassy-api.service'
+import { ClientStorageService } from 'src/app/services/client-storage.service'
+
+import { toDesktopItem } from '../../../utils/to-desktop-item'
+import { NavigationService } from '../../../services/navigation.service'
+import { SideloadDependenciesComponent } from './dependencies.component'
+
+@Component({
+  selector: 'sideload-package',
+  template: `
+    <ng-content></ng-content>
+    <marketplace-package *tuiLet="button$ | async as button" [pkg]="package">
+      <a
+        *ngIf="button !== null && button !== 'Install'"
+        tuiButton
+        appearance="secondary"
+        [routerLink]="'/portal/service/' + package.manifest.id"
+      >
+        View installed
+      </a>
+      <button *ngIf="button" tuiButton (click)="upload()">
+        {{ button }}
+      </button>
+    </marketplace-package>
+    <marketplace-about [pkg]="package"></marketplace-about>
+    <sideload-dependencies
+      *ngIf="!(package.manifest.dependencies | empty)"
+      [package]="package"
+    ></sideload-dependencies>
+    <marketplace-additional [pkg]="package"></marketplace-additional>
+  `,
+  standalone: true,
+  imports: [
+    CommonModule,
+    RouterLink,
+    SharedPipesModule,
+    AboutModule,
+    AdditionalModule,
+    PackageModule,
+    TuiButtonModule,
+    TuiLetModule,
+    SideloadDependenciesComponent,
+  ],
+})
+export class SideloadPackageComponent {
+  private readonly loader = inject(LoadingService)
+  private readonly api = inject(ApiService)
+  private readonly errorService = inject(ErrorService)
+  private readonly router = inject(Router)
+  private readonly navigation = inject(NavigationService)
+  private readonly alerts = inject(TuiAlertService)
+  private readonly emver = inject(Emver)
+
+  readonly button$ = combineLatest([
+    inject(ClientStorageService).showDevTools$,
+    inject(PatchDB<DataModel>)
+      .watch$('package-data')
+      .pipe(
+        map(local =>
+          local[this.package.manifest.id]
+            ? this.emver.compare(
+                local[this.package.manifest.id].manifest.version,
+                this.package.manifest.version,
+              )
+            : null,
+        ),
+      ),
+  ]).pipe(
+    map(([devtools, version]) => {
+      switch (version) {
+        case null:
+          return 'Install'
+        case 1:
+          return 'Update'
+        case -1:
+          return devtools ? 'Downgrade' : ''
+        default:
+          return ''
+      }
+    }),
+  )
+
+  @Input({ required: true })
+  package!: MarketplacePkg
+
+  @Input({ required: true })
+  file!: File
+
+  async upload() {
+    const loader = this.loader.open('Uploading package').subscribe()
+    const { manifest, icon } = this.package
+    const { size } = this.file
+
+    try {
+      const pkg = await this.api.sideloadPackage({ manifest, icon, size })
+
+      await this.api.uploadPackage(pkg, this.file)
+      await this.router.navigate(['/portal/service', manifest.id])
+
+      this.navigation.removeTab(toDesktopItem('/portal/system/sideload'))
+      this.alerts
+        .open('Package uploaded successfully', { status: 'success' })
+        .subscribe()
+    } catch (e: any) {
+      this.errorService.handleError(e)
+    } finally {
+      loader.unsubscribe()
+    }
+  }
+}

frontend/projects/ui/src/app/apps/portal/routes/system/sideload/sideload.component.ts

@@ -0,0 +1,119 @@
+import { CommonModule } from '@angular/common'
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
+import { FormsModule } from '@angular/forms'
+import { MarketplacePkg } from '@start9labs/marketplace'
+import { TuiLinkModule, TuiWrapperModule } from '@taiga-ui/core'
+import { TuiAvatarModule, TuiButtonModule } from '@taiga-ui/experimental'
+import {
+  TuiInputFilesModule,
+  tuiInputFilesOptionsProvider,
+} from '@taiga-ui/kit'
+import { Subject } from 'rxjs'
+import { ConfigService } from 'src/app/services/config.service'
+
+import { parseS9pk, validateS9pk } from './sideload.utils'
+import { SideloadPackageComponent } from './package.component'
+
+@Component({
+  template: `
+    <ng-container *ngIf="refresh$ | async"></ng-container>
+    <sideload-package
+      *ngIf="package && file; else upload"
+      [package]="package"
+      [file]="file"
+    >
+      <button
+        tuiIconButton
+        appearance="secondary"
+        iconLeft="tuiIconXLarge"
+        [style.border-radius.%]="100"
+        [style.float]="'right'"
+        (click)="clear()"
+      >
+        Close
+      </button>
+    </sideload-package>
+    <ng-template #upload>
+      <tui-input-files
+        [ngModel]="null"
+        (ngModelChange)="onFile($event)"
+        (click)="clear()"
+      >
+        <input tuiInputFiles accept=".s9pk" />
+        <ng-template>
+          <div *ngIf="invalid; else valid">
+            <tui-avatar
+              tuiWrapper
+              appearance="secondary"
+              src="tuiIconXCircleLarge"
+            ></tui-avatar>
+            <p [style.color]="'var(--tui-negative)'">Invalid package file</p>
+            <button tuiButton>Try again</button>
+          </div>
+          <ng-template #valid>
+            <div>
+              <tui-avatar
+                tuiWrapper
+                appearance="secondary"
+                src="tuiIconUploadCloudLarge"
+              ></tui-avatar>
+              <p>Upload .s9pk package file</p>
+              <p *ngIf="isTor" [style.color]="'var(--tui-positive)'">
+                Tip: switch to LAN for faster uploads
+              </p>
+              <button tuiButton>Upload</button>
+            </div>
+          </ng-template>
+        </ng-template>
+      </tui-input-files>
+    </ng-template>
+  `,
+  host: { class: 'g-page', '[style.padding-top.rem]': '2' },
+  styles: [
+    `
+      tui-input-files {
+        height: 100%;
+        max-width: 40rem;
+        margin: 0 auto;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [tuiInputFilesOptionsProvider({ maxFileSize: Infinity })],
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    TuiInputFilesModule,
+    TuiLinkModule,
+    TuiAvatarModule,
+    TuiWrapperModule,
+    TuiButtonModule,
+    SideloadPackageComponent,
+  ],
+})
+export class SideloadComponent {
+  readonly refresh$ = new Subject<void>()
+  readonly isTor = inject(ConfigService).isTor()
+
+  invalid = false
+  file: File | null = null
+  package: MarketplacePkg | null = null
+
+  clear() {
+    this.invalid = false
+    this.file = null
+    this.package = null
+  }
+
+  async onFile(file: File | null) {
+    if (!file || !(await validateS9pk(file))) {
+      this.invalid = true
+    } else {
+      this.package = await parseS9pk(file)
+      this.file = file
+    }
+
+    this.refresh$.next()
+  }
+}

frontend/projects/ui/src/app/apps/portal/routes/system/sideload/sideload.utils.ts

@@ -0,0 +1,162 @@
+import { Manifest, MarketplacePkg } from '@start9labs/marketplace'
+import cbor from 'cbor'
+
+interface Positions {
+  [key: string]: [bigint, bigint] // [position, length]
+}
+
+const MAGIC = new Uint8Array([59, 59])
+const VERSION = new Uint8Array([1])
+
+export async function validateS9pk(file: File): Promise<boolean> {
+  const magic = new Uint8Array(await blobToBuffer(file.slice(0, 2)))
+  const version = new Uint8Array(await blobToBuffer(file.slice(2, 3)))
+
+  return compare(magic, MAGIC) && compare(version, VERSION)
+}
+
+export async function parseS9pk(file: File): Promise<MarketplacePkg> {
+  const positions: Positions = {}
+  // magic=2bytes, version=1bytes, pubkey=32bytes, signature=64bytes, toc_length=4bytes = 103byte is starting point
+  let start = 103
+  let end = start + 1 // 104
+  const tocLength = new DataView(
+    await blobToBuffer(file.slice(99, 103) ?? new Blob()),
+  ).getUint32(0, false)
+  await getPositions(start, end, file, positions, tocLength as any)
+
+  const manifest = await getAsset(positions, file, 'manifest')
+  const [icon] = await Promise.all([
+    await getIcon(positions, file, manifest),
+    // getAsset(positions, file, 'license'),
+    // getAsset(positions, file, 'instructions'),
+  ])
+
+  return {
+    manifest,
+    icon,
+    license: '',
+    instructions: '',
+    categories: [],
+    versions: [],
+    'dependency-metadata': {},
+    'published-at': '',
+  }
+}
+
+async function getPositions(
+  initialStart: number,
+  initialEnd: number,
+  file: Blob,
+  positions: Positions,
+  tocLength: number,
+) {
+  let start = initialStart
+  let end = initialEnd
+  const titleLength = new Uint8Array(
+    await blobToBuffer(file.slice(start, end)),
+  )[0]
+  const tocTitle = await file.slice(end, end + titleLength).text()
+  start = end + titleLength
+  end = start + 8
+  const chapterPosition = new DataView(
+    await blobToBuffer(file.slice(start, end)),
+  ).getBigUint64(0, false)
+  start = end
+  end = start + 8
+  const chapterLength = new DataView(
+    await blobToBuffer(file.slice(start, end)),
+  ).getBigUint64(0, false)
+
+  positions[tocTitle] = [chapterPosition, chapterLength]
+  start = end
+  end = start + 1
+  if (end <= tocLength + (initialStart - 1)) {
+    await getPositions(start, end, file, positions, tocLength)
+  }
+}
+
+async function readBlobAsDataURL(
+  f: Blob | File,
+): Promise<string | ArrayBuffer | null> {
+  const reader = new FileReader()
+  return new Promise((resolve, reject) => {
+    reader.onloadend = () => {
+      resolve(reader.result)
+    }
+    reader.readAsDataURL(f)
+    reader.onerror = _ => reject(new Error('error reading blob'))
+  })
+}
+
+async function blobToDataURL(data: Blob | File): Promise<string> {
+  const res = await readBlobAsDataURL(data)
+  if (res instanceof ArrayBuffer) {
+    throw new Error('readBlobAsDataURL response should not be an array buffer')
+  }
+  if (res == null) {
+    throw new Error('readBlobAsDataURL response should not be null')
+  }
+  if (typeof res === 'string') return res
+  throw new Error('no possible blob to data url resolution found')
+}
+
+async function blobToBuffer(data: Blob | File): Promise<ArrayBuffer> {
+  const res = await readBlobToArrayBuffer(data)
+  if (res instanceof String) {
+    throw new Error('readBlobToArrayBuffer response should not be a string')
+  }
+  if (res == null) {
+    throw new Error('readBlobToArrayBuffer response should not be null')
+  }
+  if (res instanceof ArrayBuffer) return res
+  throw new Error('no possible blob to array buffer resolution found')
+}
+
+async function readBlobToArrayBuffer(
+  f: Blob | File,
+): Promise<string | ArrayBuffer | null> {
+  const reader = new FileReader()
+  return new Promise((resolve, reject) => {
+    reader.onloadend = () => {
+      resolve(reader.result)
+    }
+    reader.readAsArrayBuffer(f)
+    reader.onerror = _ => reject(new Error('error reading blob'))
+  })
+}
+
+function compare(a: Uint8Array, b: Uint8Array) {
+  for (let i = 0; i < a.length; i++) {
+    if (a[i] !== b[i]) return false
+  }
+  return true
+}
+
+async function getAsset(
+  positions: Positions,
+  file: Blob,
+  asset: 'manifest' | 'license' | 'instructions',
+): Promise<any> {
+  const data = await blobToBuffer(
+    file.slice(
+      Number(positions[asset][0]),
+      Number(positions[asset][0]) + Number(positions[asset][1]),
+    ),
+  )
+  return cbor.decode(data, true)
+}
+
+async function getIcon(
+  positions: Positions,
+  file: Blob,
+  manifest: Manifest,
+): Promise<string> {
+  const contentType = `image/${manifest.assets.icon.split('.').pop()}`
+  const data = file.slice(
+    Number(positions['icon'][0]),
+    Number(positions['icon'][0]) + Number(positions['icon'][1]),
+    contentType,
+  )
+  return blobToDataURL(data)
+}

frontend/projects/ui/src/app/apps/portal/routes/system/system.module.ts

@@ -11,6 +11,13 @@ const ROUTES: Routes = [
       import('./backups/backups.component').then(m => m.BackupsComponent),
     data: toDesktopItem('/portal/system/backups'),
   },
+  {
+    title: systemTabResolver,
+    path: 'sideload',
+    loadComponent: () =>
+      import('./sideload/sideload.component').then(m => m.SideloadComponent),
+    data: toDesktopItem('/portal/system/sideload'),
+  },
   {
     title: systemTabResolver,
     path: 'updates',

frontend/projects/ui/src/app/apps/portal/routes/system/updates/components/item.component.ts

@@ -15,13 +15,12 @@ import {
   SharedPipesModule,
 } from '@start9labs/shared'
 import {
-  TuiButtonModule,
   TuiDialogService,
   TuiLinkModule,
   TuiLoaderModule,
   TuiSvgModule,
 } from '@taiga-ui/core'
-import { TuiAvatarModule } from '@taiga-ui/experimental'
+import { TuiAvatarModule, TuiButtonModule } from '@taiga-ui/experimental'
 import {
   TUI_PROMPT,
   TuiAccordionModule,

frontend/projects/ui/src/app/apps/portal/services/navigation.service.ts

@@ -12,8 +12,8 @@ export class NavigationService {
     return this.tabs
   }
 
-  removeTab(tab: NavigationItem) {
+  removeTab({ routerLink }: NavigationItem) {
-    this.tabs.next(this.tabs.value.filter(t => t !== tab))
+    this.tabs.next(this.tabs.value.filter(t => t.routerLink !== routerLink))
   }
 
   addTab(tab: NavigationItem) {

frontend/projects/ui/src/app/apps/ui/modals/form/form.module.ts

@@ -3,7 +3,8 @@ import { CommonModule } from '@angular/common'
 import { ReactiveFormsModule } from '@angular/forms'
 import { RouterModule } from '@angular/router'
 import { TuiValueChangesModule } from '@taiga-ui/cdk'
-import { TuiButtonModule, TuiModeModule } from '@taiga-ui/core'
+import { TuiButtonModule } from '@taiga-ui/experimental'
+import { TuiModeModule } from '@taiga-ui/core'
 import { FormModule } from 'src/app/common/form/form.module'
 import { FormPage } from './form.page'
 

frontend/projects/ui/src/app/apps/ui/modals/prompt/prompt.component.html

@@ -34,7 +34,7 @@
     title="Toggle masking"
     size="xs"
     class="button"
-    [icon]="masked ? 'tuiIconEye' : 'tuiIconEyeOff'"
+    [iconLeft]="masked ? 'tuiIconEye' : 'tuiIconEyeOff'"
     (click)="masked = !masked"
   ></button>
 </ng-template>

frontend/projects/ui/src/app/apps/ui/modals/prompt/prompt.module.ts

@@ -1,7 +1,8 @@
 import { CommonModule } from '@angular/common'
 import { NgModule } from '@angular/core'
 import { FormsModule } from '@angular/forms'
-import { TuiButtonModule, TuiTextfieldControllerModule } from '@taiga-ui/core'
+import { TuiTextfieldControllerModule } from '@taiga-ui/core'
+import { TuiButtonModule } from '@taiga-ui/experimental'
 import { TuiInputModule } from '@taiga-ui/kit'
 import { TuiAutoFocusModule } from '@taiga-ui/cdk'
 import { PromptComponent } from './prompt.component'

frontend/projects/ui/src/app/apps/ui/pages/backups/modals/backup-select/backup-select.module.ts

@@ -1,7 +1,8 @@
 import { NgModule } from '@angular/core'
 import { CommonModule } from '@angular/common'
 import { FormsModule } from '@angular/forms'
-import { TuiButtonModule, TuiGroupModule } from '@taiga-ui/core'
+import { TuiGroupModule } from '@taiga-ui/core'
+import { TuiButtonModule } from '@taiga-ui/experimental'
 import { TuiCheckboxBlockModule } from '@taiga-ui/kit'
 import { BackupSelectPage } from './backup-select.page'
 

frontend/projects/ui/src/app/apps/ui/pages/backups/modals/recover-select/recover-select.module.ts

@@ -1,7 +1,8 @@
 import { NgModule } from '@angular/core'
 import { CommonModule } from '@angular/common'
 import { FormsModule } from '@angular/forms'
-import { TuiButtonModule, TuiGroupModule } from '@taiga-ui/core'
+import { TuiGroupModule } from '@taiga-ui/core'
+import { TuiButtonModule } from '@taiga-ui/experimental'
 import { TuiCheckboxBlockModule } from '@taiga-ui/kit'
 import { RecoverSelectPage } from './recover-select.page'
 import { ToOptionsPipe } from './to-options.pipe'

frontend/projects/ui/src/app/apps/ui/pages/backups/modals/target-select/target-select.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core'
 import { CommonModule } from '@angular/common'
 import { IonicModule } from '@ionic/angular'
-import { TuiButtonModule } from '@taiga-ui/core'
+import { TuiButtonModule } from '@taiga-ui/experimental'
 import { TargetSelectPage, TargetStatusComponent } from './target-select.page'
 import { TargetPipesModule } from '../../pipes/target-pipes.module'
 import { TextSpinnerComponentModule } from '@start9labs/shared'

frontend/projects/ui/src/app/apps/ui/pages/backups/pages/backup-jobs/backup-jobs.module.ts

@@ -3,11 +3,8 @@ import { NgModule } from '@angular/core'
 import { FormsModule } from '@angular/forms'
 import { RouterModule, Routes } from '@angular/router'
 import { IonicModule } from '@ionic/angular'
-import {
+import { TuiNotificationModule, TuiWrapperModule } from '@taiga-ui/core'
-  TuiButtonModule,
+import { TuiButtonModule } from '@taiga-ui/experimental'
-  TuiNotificationModule,
-  TuiWrapperModule,
-} from '@taiga-ui/core'
 import { TuiInputModule, TuiToggleModule } from '@taiga-ui/kit'
 import { BackupJobsPage } from './backup-jobs.page'
 import { EditJobComponent } from './edit-job/edit-job.component'

frontend/projects/ui/src/app/apps/ui/pages/services/app-show/modals/app-config/app-config.module.ts

@@ -2,11 +2,11 @@ import { NgModule } from '@angular/core'
 import { CommonModule } from '@angular/common'
 import { ReactiveFormsModule } from '@angular/forms'
 import {
-  TuiButtonModule,
   TuiLoaderModule,
   TuiModeModule,
   TuiNotificationModule,
 } from '@taiga-ui/core'
+import { TuiButtonModule } from '@taiga-ui/experimental'
 import { FormPageModule } from 'src/app/apps/ui/modals/form/form.module'
 
 import { AppConfigPage } from './app-config.page'

frontend/projects/ui/src/app/apps/ui/pages/system/email/email.module.ts

@@ -1,7 +1,8 @@
 import { NgModule } from '@angular/core'
 import { CommonModule } from '@angular/common'
 import { IonicModule } from '@ionic/angular'
-import { TuiButtonModule, TuiNotificationModule } from '@taiga-ui/core'
+import { TuiNotificationModule } from '@taiga-ui/core'
+import { TuiButtonModule } from '@taiga-ui/experimental'
 import { EmailPage } from './email.page'
 import { Routes, RouterModule } from '@angular/router'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'

frontend/projects/ui/src/app/apps/ui/pages/system/proxies/proxies.module.ts

@@ -4,13 +4,13 @@ import { FormsModule } from '@angular/forms'
 import { RouterModule, Routes } from '@angular/router'
 import { IonicModule } from '@ionic/angular'
 import {
-  TuiButtonModule,
   TuiDataListModule,
   TuiHostedDropdownModule,
   TuiNotificationModule,
   TuiSvgModule,
   TuiWrapperModule,
 } from '@taiga-ui/core'
+import { TuiButtonModule } from '@taiga-ui/experimental'
 import { TuiBadgeModule, TuiInputModule, TuiToggleModule } from '@taiga-ui/kit'
 import { ProxiesPage } from './proxies.page'
 

frontend/projects/ui/src/app/apps/ui/pages/system/proxies/proxies.page.html

@@ -102,11 +102,8 @@
                 appearance="flat"
                 tuiHostedDropdownHost
                 size="s"
-                [icon]="icon"
+                iconLeft="tuiIconMoreHorizontal"
               ></button>
-              <ng-template #icon>
-                <tui-svg src="tuiIconMoreHorizontal"></tui-svg>
-              </ng-template>
             </tui-hosted-dropdown>
             <ng-template #dropdown let-close="close">
               <tui-data-list>

frontend/projects/ui/src/app/apps/ui/pages/system/server-show/os-update/os-update.page.module.ts

@@ -1,7 +1,8 @@
 import { NgModule } from '@angular/core'
 import { CommonModule } from '@angular/common'
 import { MarkdownPipeModule, SafeLinksDirective } from '@start9labs/shared'
-import { TuiButtonModule, TuiScrollbarModule } from '@taiga-ui/core'
+import { TuiScrollbarModule } from '@taiga-ui/core'
+import { TuiButtonModule } from '@taiga-ui/experimental'
 import { TuiAutoFocusModule } from '@taiga-ui/cdk'
 import { NgDompurifyModule } from '@tinkoff/ng-dompurify'
 import { OSUpdatePage } from './os-update.page'

frontend/projects/ui/src/app/common/form/form-array/form-array.component.html

@@ -48,7 +48,7 @@
       tuiIconButton
       type="button"
       class="remove"
-      icon="tuiIconTrash"
+      iconLeft="tuiIconTrash"
       appearance="icon"
       size="m"
       title="Remove"

frontend/projects/ui/src/app/common/form/form-object/form-object.component.html

@@ -2,11 +2,11 @@
   <button
     tuiIconButton
     size="s"
-    icon="tuiIconChevronDown"
+    iconLeft="tuiIconChevronDown"
     type="button"
-    shape="rounded"
     class="button"
     [class.button_open]="open"
+    [style.border-radius.%]="100"
     [appearance]="invalid ? 'secondary-destructive' : 'secondary'"
   ></button>
   <ng-content></ng-content>

frontend/projects/ui/src/app/common/form/form-text/form-text.component.html

@@ -27,7 +27,7 @@
     title="Generate"
     size="xs"
     class="button"
-    icon="tuiIconRefreshCcw"
+    iconLeft="tuiIconRefreshCcw"
     (click)="generate()"
   ></button>
   <button
@@ -38,7 +38,7 @@
     title="Toggle masking"
     size="xs"
     class="button"
-    [icon]="masked ? 'tuiIconEye' : 'tuiIconEyeOff'"
+    [iconLeft]="masked ? 'tuiIconEye' : 'tuiIconEyeOff'"
     (click)="masked = !masked"
   ></button>
 </ng-template>

frontend/projects/ui/src/app/common/form/form.module.ts

@@ -4,7 +4,6 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { MaskitoModule } from '@maskito/angular'
 import { TuiMapperPipeModule, TuiValueChangesModule } from '@taiga-ui/cdk'
 import {
-  TuiButtonModule,
   TuiErrorModule,
   TuiExpandModule,
   TuiHintModule,
@@ -15,6 +14,7 @@ import {
   TuiTooltipModule,
   TuiWrapperModule,
 } from '@taiga-ui/core'
+import { TuiButtonModule } from '@taiga-ui/experimental'
 import {
   TuiElasticContainerModule,
   TuiFieldErrorPipeModule,

frontend/projects/ui/src/app/common/os-welcome/os-welcome.module.ts

@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core'
-import { TuiButtonModule } from '@taiga-ui/core'
+import { TuiButtonModule } from '@taiga-ui/experimental'
 import { OSWelcomePage } from './os-welcome.page'
 
 @NgModule({

frontend/projects/ui/src/app/common/toast-container/toast-container.module.ts

@@ -2,11 +2,8 @@ import { CommonModule } from '@angular/common'
 import { NgModule } from '@angular/core'
 import { RouterModule } from '@angular/router'
 import { TuiAutoFocusModule } from '@taiga-ui/cdk'
-import {
+import { TuiAlertModule, TuiDialogModule } from '@taiga-ui/core'
-  TuiAlertModule,
+import { TuiButtonModule } from '@taiga-ui/experimental'
-  TuiButtonModule,
-  TuiDialogModule,
-} from '@taiga-ui/core'
 
 import { ToastContainerComponent } from './toast-container.component'
 import { NotificationsToastComponent } from './notifications-toast/notifications-toast.component'

frontend/projects/ui/src/styles.scss

@@ -375,6 +375,7 @@ ul {
   padding: 1px 2rem 3rem;
   box-sizing: border-box;
   overflow: auto;
+  isolation: isolate;
 
   // TODO: Theme
   background: #373a3f;