More FE fixes (#3056)

* tell user to restart server after kiosk chnage * remove unused import * dont show tor address on server setup * chore: address comments * revert mock * chore: remove uptime block on mobile * utiliser le futur proche * chore: comments * don't show loading on authorities tab * chore: fix mobile unions --------- Co-authored-by: waterplea <alexander@inkin.ru> Co-authored-by: Aiden McClelland <3732071+dr-bonez@users.noreply.github.com>
2026-03-26 02:11:53 +00:00 · 2025-11-25 16:43:19 -07:00
parent 6e8a425eb1
commit 009d76ea35
16 changed files with 224 additions and 192 deletions
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -25,18 +25,18 @@
        "@noble/hashes": "^1.4.0",
        "@start9labs/argon2": "^0.3.0",
        "@start9labs/start-sdk": "file:../sdk/baseDist",
-        "@taiga-ui/addon-charts": "4.55.0",
-        "@taiga-ui/addon-commerce": "4.55.0",
-        "@taiga-ui/addon-mobile": "4.55.0",
-        "@taiga-ui/addon-table": "4.55.0",
-        "@taiga-ui/cdk": "4.55.0",
-        "@taiga-ui/core": "4.55.0",
+        "@taiga-ui/addon-charts": "4.62.0",
+        "@taiga-ui/addon-commerce": "4.62.0",
+        "@taiga-ui/addon-mobile": "4.62.0",
+        "@taiga-ui/addon-table": "4.62.0",
+        "@taiga-ui/cdk": "4.62.0",
+        "@taiga-ui/core": "4.62.0",
        "@taiga-ui/dompurify": "4.1.11",
        "@taiga-ui/event-plugins": "4.7.0",
-        "@taiga-ui/experimental": "4.55.0",
-        "@taiga-ui/icons": "4.55.0",
-        "@taiga-ui/kit": "4.55.0",
-        "@taiga-ui/layout": "4.55.0",
+        "@taiga-ui/experimental": "4.62.0",
+        "@taiga-ui/icons": "4.62.0",
+        "@taiga-ui/kit": "4.62.0",
+        "@taiga-ui/layout": "4.62.0",
        "@taiga-ui/polymorpheus": "4.9.0",
        "ansi-to-html": "^0.7.2",
        "base64-js": "^1.5.1",
@@ -3950,9 +3950,9 @@
      "link": true
    },
    "node_modules/@taiga-ui/addon-charts": {
-      "version": "4.55.0",
-      "resolved": "https://registry.npmjs.org/@taiga-ui/addon-charts/-/addon-charts-4.55.0.tgz",
-      "integrity": "sha512-Rwgcc7NaLm75GsHYhqbO4jgNhD1bGbA7Kk0sNFE+Tgz9+V3ARXMuBw7C3cU9UxLSFnOsXz9RYLosmZ3jAVlyuQ==",
+      "version": "4.62.0",
+      "resolved": "https://registry.npmjs.org/@taiga-ui/addon-charts/-/addon-charts-4.62.0.tgz",
+      "integrity": "sha512-tCysUpzEHwRhK/p9hopkt0Jw4jcgA2cF8CYK8mDntghC+fNLnqCVUcrqFIC5plGabAo00WMEz+X+KyGvwvKaVg==",
      "license": "Apache-2.0",
      "dependencies": {
        "tslib": ">=2.8.1"
@@ -3961,15 +3961,15 @@
        "@angular/common": ">=16.0.0",
        "@angular/core": ">=16.0.0",
        "@ng-web-apis/common": "^4.12.0",
-        "@taiga-ui/cdk": "^4.55.0",
-        "@taiga-ui/core": "^4.55.0",
+        "@taiga-ui/cdk": "^4.62.0",
+        "@taiga-ui/core": "^4.62.0",
        "@taiga-ui/polymorpheus": "^4.9.0"
      }
    },
    "node_modules/@taiga-ui/addon-commerce": {
-      "version": "4.55.0",
-      "resolved": "https://registry.npmjs.org/@taiga-ui/addon-commerce/-/addon-commerce-4.55.0.tgz",
-      "integrity": "sha512-eOOBkIJSsagtRkpRZ04xlL8ePIP01d4Xo264zSTg2SRxD6vwR/7/QJlf9108BvIJv/jfTpmFukLwSB9LazqmCw==",
+      "version": "4.62.0",
+      "resolved": "https://registry.npmjs.org/@taiga-ui/addon-commerce/-/addon-commerce-4.62.0.tgz",
+      "integrity": "sha512-J4+bdHeDe2d7Uh8NNObLl4LzBhWLCdzxNHXPac1bMGB+3gX751Htc9px37FkVZlQGnxQATCbxAVXj7Zjveq/QQ==",
      "license": "Apache-2.0",
      "peer": true,
      "dependencies": {
@@ -3979,22 +3979,22 @@
        "@angular/common": ">=16.0.0",
        "@angular/core": ">=16.0.0",
        "@angular/forms": ">=16.0.0",
-        "@maskito/angular": "^3.10.3",
-        "@maskito/core": "^3.10.3",
-        "@maskito/kit": "^3.10.3",
+        "@maskito/angular": "^3.11.1",
+        "@maskito/core": "^3.11.1",
+        "@maskito/kit": "^3.11.1",
        "@ng-web-apis/common": "^4.12.0",
-        "@taiga-ui/cdk": "^4.55.0",
-        "@taiga-ui/core": "^4.55.0",
-        "@taiga-ui/i18n": "^4.55.0",
-        "@taiga-ui/kit": "^4.55.0",
+        "@taiga-ui/cdk": "^4.62.0",
+        "@taiga-ui/core": "^4.62.0",
+        "@taiga-ui/i18n": "^4.62.0",
+        "@taiga-ui/kit": "^4.62.0",
        "@taiga-ui/polymorpheus": "^4.9.0",
        "rxjs": ">=7.0.0"
      }
    },
    "node_modules/@taiga-ui/addon-mobile": {
-      "version": "4.55.0",
-      "resolved": "https://registry.npmjs.org/@taiga-ui/addon-mobile/-/addon-mobile-4.55.0.tgz",
-      "integrity": "sha512-NQRozVKcXLs9/rd/s1yI7T5rIokzwHQ5IN/c3NLBUEka1iKUr1ZTch+g9CHJf8GTVB0uAwWKNCgX5LxtiSI5zg==",
+      "version": "4.62.0",
+      "resolved": "https://registry.npmjs.org/@taiga-ui/addon-mobile/-/addon-mobile-4.62.0.tgz",
+      "integrity": "sha512-seIBG4utgLq2xDJu+YDzksOsVi/V6vsTbm2bljgM1fIBZInbhqk95YOIFZDU9JXT1/vIShcqetavg1vHD1wdkQ==",
      "license": "Apache-2.0",
      "dependencies": {
        "tslib": ">=2.8.1"
@@ -4004,18 +4004,18 @@
        "@angular/common": ">=16.0.0",
        "@angular/core": ">=16.0.0",
        "@ng-web-apis/common": "^4.12.0",
-        "@taiga-ui/cdk": "^4.55.0",
-        "@taiga-ui/core": "^4.55.0",
-        "@taiga-ui/kit": "^4.55.0",
-        "@taiga-ui/layout": "^4.55.0",
+        "@taiga-ui/cdk": "^4.62.0",
+        "@taiga-ui/core": "^4.62.0",
+        "@taiga-ui/kit": "^4.62.0",
+        "@taiga-ui/layout": "^4.62.0",
        "@taiga-ui/polymorpheus": "^4.9.0",
        "rxjs": ">=7.0.0"
      }
    },
    "node_modules/@taiga-ui/addon-table": {
-      "version": "4.55.0",
-      "resolved": "https://registry.npmjs.org/@taiga-ui/addon-table/-/addon-table-4.55.0.tgz",
-      "integrity": "sha512-K5qpOS0UQLDqruJXPNDic8scCRvO3oAN/ZCPQ9XOGDrcvydvo4AKUwjKRPj+pZ/z0ulxbwAAruFFFCvRNnbzaA==",
+      "version": "4.62.0",
+      "resolved": "https://registry.npmjs.org/@taiga-ui/addon-table/-/addon-table-4.62.0.tgz",
+      "integrity": "sha512-0rolnsO1puYwUK17si5OOpzFxiziS6/OSbpLOSKrVrMkCgsWCoNDvpgPIwtwS5Mq3iF5cwLfUPbDQM8saG7wxQ==",
      "license": "Apache-2.0",
      "dependencies": {
        "tslib": ">=2.8.1"
@@ -4024,18 +4024,18 @@
        "@angular/common": ">=16.0.0",
        "@angular/core": ">=16.0.0",
        "@ng-web-apis/intersection-observer": "^4.12.0",
-        "@taiga-ui/cdk": "^4.55.0",
-        "@taiga-ui/core": "^4.55.0",
-        "@taiga-ui/i18n": "^4.55.0",
-        "@taiga-ui/kit": "^4.55.0",
+        "@taiga-ui/cdk": "^4.62.0",
+        "@taiga-ui/core": "^4.62.0",
+        "@taiga-ui/i18n": "^4.62.0",
+        "@taiga-ui/kit": "^4.62.0",
        "@taiga-ui/polymorpheus": "^4.9.0",
        "rxjs": ">=7.0.0"
      }
    },
    "node_modules/@taiga-ui/cdk": {
-      "version": "4.55.0",
-      "resolved": "https://registry.npmjs.org/@taiga-ui/cdk/-/cdk-4.55.0.tgz",
-      "integrity": "sha512-vA5nGyx+YIHR1xZeq5D9gSqTRQg74qhe1AOt5FlqFOC0P4LvmLkNg3De7AeahXALNSeRz/DYcqI7WuGo6xpcLQ==",
+      "version": "4.62.0",
+      "resolved": "https://registry.npmjs.org/@taiga-ui/cdk/-/cdk-4.62.0.tgz",
+      "integrity": "sha512-KWPXEbCHtRp7aIet1L3PySdXpo5Aay4L/36jDzjiFZ/bcbuD2cY/3S2l68zpgv6ZksZA94DuCuaamSEwQIAtPw==",
      "license": "Apache-2.0",
      "peer": true,
      "dependencies": {
@@ -4065,9 +4065,9 @@
      }
    },
    "node_modules/@taiga-ui/core": {
-      "version": "4.55.0",
-      "resolved": "https://registry.npmjs.org/@taiga-ui/core/-/core-4.55.0.tgz",
-      "integrity": "sha512-Z2ATVNmEAlHEk2cgs/tnS6qZML87IchkPDeRl6HQfBT2fjYVjh1oCzXL07t86Lv6tpvkllyUVqoBCTSvDXs9kA==",
+      "version": "4.62.0",
+      "resolved": "https://registry.npmjs.org/@taiga-ui/core/-/core-4.62.0.tgz",
+      "integrity": "sha512-PQW10hFH50g8PgnJpPa/ZrGMWljhIsBHad/utvalmlv8wXQY24i8T1BjrGIOFPOjzs20NEwLOICHf7KdZUtiuA==",
      "license": "Apache-2.0",
      "peer": true,
      "dependencies": {
@@ -4082,9 +4082,9 @@
        "@angular/router": ">=16.0.0",
        "@ng-web-apis/common": "^4.12.0",
        "@ng-web-apis/mutation-observer": "^4.12.0",
-        "@taiga-ui/cdk": "^4.55.0",
+        "@taiga-ui/cdk": "^4.62.0",
        "@taiga-ui/event-plugins": "^4.7.0",
-        "@taiga-ui/i18n": "^4.55.0",
+        "@taiga-ui/i18n": "^4.62.0",
        "@taiga-ui/polymorpheus": "^4.9.0",
        "rxjs": ">=7.0.0"
      }
@@ -4120,9 +4120,9 @@
      }
    },
    "node_modules/@taiga-ui/experimental": {
-      "version": "4.55.0",
-      "resolved": "https://registry.npmjs.org/@taiga-ui/experimental/-/experimental-4.55.0.tgz",
-      "integrity": "sha512-3zq2BTl+fE/N/tEr74TzWbyzT5OoS9YEApKobJehKivW5XxZmF/MDRWp45kSe4jDtVbJ2ueI0Jn8h0BDNykkcg==",
+      "version": "4.62.0",
+      "resolved": "https://registry.npmjs.org/@taiga-ui/experimental/-/experimental-4.62.0.tgz",
+      "integrity": "sha512-EiL5wJ+9LSf0BfZcFX6ioCavLfx26v0BCOUXh52Rtczp85Uh2qTDt2feM0oBDB+0Kj74/+wqqiKi+s3B8ZV3WA==",
      "license": "Apache-2.0",
      "dependencies": {
        "tslib": ">=2.8.1"
@@ -4130,19 +4130,19 @@
      "peerDependencies": {
        "@angular/common": ">=16.0.0",
        "@angular/core": ">=16.0.0",
-        "@taiga-ui/addon-commerce": "^4.55.0",
-        "@taiga-ui/cdk": "^4.55.0",
-        "@taiga-ui/core": "^4.55.0",
-        "@taiga-ui/kit": "^4.55.0",
-        "@taiga-ui/layout": "^4.55.0",
+        "@taiga-ui/addon-commerce": "^4.62.0",
+        "@taiga-ui/cdk": "^4.62.0",
+        "@taiga-ui/core": "^4.62.0",
+        "@taiga-ui/kit": "^4.62.0",
+        "@taiga-ui/layout": "^4.62.0",
        "@taiga-ui/polymorpheus": "^4.9.0",
        "rxjs": ">=7.0.0"
      }
    },
    "node_modules/@taiga-ui/i18n": {
-      "version": "4.59.0",
-      "resolved": "https://registry.npmjs.org/@taiga-ui/i18n/-/i18n-4.59.0.tgz",
-      "integrity": "sha512-IxPzqkORJlSqagvUdmqBL9fuvfRm/Ca/W/bCDEK2GN/4QtSZ0yFzAyQdWduoIJubqyEPMXRbXZGc7WBtDgAMIQ==",
+      "version": "4.62.0",
+      "resolved": "https://registry.npmjs.org/@taiga-ui/i18n/-/i18n-4.62.0.tgz",
+      "integrity": "sha512-84hD1nI26EAYd5RUhFKxbg+8WKYhc0GBHyf8wfi15xuwaT6oh2gbJx7pNTlGN3klH4CeDB9HF998tkhieevqQw==",
      "license": "Apache-2.0",
      "peer": true,
      "dependencies": {
@@ -4155,18 +4155,18 @@
      }
    },
    "node_modules/@taiga-ui/icons": {
-      "version": "4.55.0",
-      "resolved": "https://registry.npmjs.org/@taiga-ui/icons/-/icons-4.55.0.tgz",
-      "integrity": "sha512-sYqSG9wgUcwHBrDRnMhLCMEkvAAw/SZrvvq0jdY2oWGmKwAj/6WBt+wA+jnFkDDKEZ7mjzdPIQffpVaUjSwsiw==",
+      "version": "4.62.0",
+      "resolved": "https://registry.npmjs.org/@taiga-ui/icons/-/icons-4.62.0.tgz",
+      "integrity": "sha512-vD+bJk3Wot/+NcbdPwAJGBnqXG6T1OJVeg2IkaEE6DBixwdwDpukZWiV9asXyXiJkyEpG2Ar7SASvdCYZEVlxw==",
      "license": "Apache-2.0",
      "dependencies": {
        "tslib": "^2.3.0"
      }
    },
    "node_modules/@taiga-ui/kit": {
-      "version": "4.55.0",
-      "resolved": "https://registry.npmjs.org/@taiga-ui/kit/-/kit-4.55.0.tgz",
-      "integrity": "sha512-xTvi7viI+wI2ifPv2bsf8prhYWWS4g1lbx059jXV3f5Cttc0Xg6DEb6xpaQOf4loBkcrP2FzkA4njACUuiouzw==",
+      "version": "4.62.0",
+      "resolved": "https://registry.npmjs.org/@taiga-ui/kit/-/kit-4.62.0.tgz",
+      "integrity": "sha512-tdEaXJTks1PZQJAwMiVQTZrtCpaLIYV6T9VdVPZUKAJXq7K6J2kcD0oIISjwE9rqgLVwqytMZrwHx1nSRzkb/A==",
      "license": "Apache-2.0",
      "peer": true,
      "dependencies": {
@@ -4177,25 +4177,25 @@
        "@angular/core": ">=16.0.0",
        "@angular/forms": ">=16.0.0",
        "@angular/router": ">=16.0.0",
-        "@maskito/angular": "^3.10.3",
-        "@maskito/core": "^3.10.3",
-        "@maskito/kit": "^3.10.3",
-        "@maskito/phone": "^3.10.3",
+        "@maskito/angular": "^3.11.1",
+        "@maskito/core": "^3.11.1",
+        "@maskito/kit": "^3.11.1",
+        "@maskito/phone": "^3.11.1",
        "@ng-web-apis/common": "^4.12.0",
        "@ng-web-apis/intersection-observer": "^4.12.0",
        "@ng-web-apis/mutation-observer": "^4.12.0",
        "@ng-web-apis/resize-observer": "^4.12.0",
-        "@taiga-ui/cdk": "^4.55.0",
-        "@taiga-ui/core": "^4.55.0",
-        "@taiga-ui/i18n": "^4.55.0",
+        "@taiga-ui/cdk": "^4.62.0",
+        "@taiga-ui/core": "^4.62.0",
+        "@taiga-ui/i18n": "^4.62.0",
        "@taiga-ui/polymorpheus": "^4.9.0",
        "rxjs": ">=7.0.0"
      }
    },
    "node_modules/@taiga-ui/layout": {
-      "version": "4.55.0",
-      "resolved": "https://registry.npmjs.org/@taiga-ui/layout/-/layout-4.55.0.tgz",
-      "integrity": "sha512-C+e4gudZwjIc46VITil5vySas1FPpfe+D4uwLRggJOTuUosZlZHBuc51v91wCCc0pL0Xfu+TD0s8W9kRd1sQHA==",
+      "version": "4.62.0",
+      "resolved": "https://registry.npmjs.org/@taiga-ui/layout/-/layout-4.62.0.tgz",
+      "integrity": "sha512-xd8eLLeR5FE3RhnVMGl1QlC3JXXJLsLAAASpBf9DQsTt+YBBl8BQt/cXGbBcJecC2mJLZlS6zytSkMTHY7VAhw==",
      "license": "Apache-2.0",
      "peer": true,
      "dependencies": {
@@ -4204,9 +4204,9 @@
      "peerDependencies": {
        "@angular/common": ">=16.0.0",
        "@angular/core": ">=16.0.0",
-        "@taiga-ui/cdk": "^4.55.0",
-        "@taiga-ui/core": "^4.55.0",
-        "@taiga-ui/kit": "^4.55.0",
+        "@taiga-ui/cdk": "^4.62.0",
+        "@taiga-ui/core": "^4.62.0",
+        "@taiga-ui/kit": "^4.62.0",
        "@taiga-ui/polymorpheus": "^4.9.0",
        "rxjs": ">=7.0.0"
      }
--- a/web/package.json
+++ b/web/package.json
@@ -49,18 +49,18 @@
    "@noble/hashes": "^1.4.0",
    "@start9labs/argon2": "^0.3.0",
    "@start9labs/start-sdk": "file:../sdk/baseDist",
-    "@taiga-ui/addon-charts": "4.55.0",
-    "@taiga-ui/addon-commerce": "4.55.0",
-    "@taiga-ui/addon-mobile": "4.55.0",
-    "@taiga-ui/addon-table": "4.55.0",
-    "@taiga-ui/cdk": "4.55.0",
-    "@taiga-ui/core": "4.55.0",
+    "@taiga-ui/addon-charts": "4.62.0",
+    "@taiga-ui/addon-commerce": "4.62.0",
+    "@taiga-ui/addon-mobile": "4.62.0",
+    "@taiga-ui/addon-table": "4.62.0",
+    "@taiga-ui/cdk": "4.62.0",
+    "@taiga-ui/core": "4.62.0",
    "@taiga-ui/dompurify": "4.1.11",
    "@taiga-ui/event-plugins": "4.7.0",
-    "@taiga-ui/experimental": "4.55.0",
-    "@taiga-ui/icons": "4.55.0",
-    "@taiga-ui/kit": "4.55.0",
-    "@taiga-ui/layout": "4.55.0",
+    "@taiga-ui/experimental": "4.62.0",
+    "@taiga-ui/icons": "4.62.0",
+    "@taiga-ui/kit": "4.62.0",
+    "@taiga-ui/layout": "4.62.0",
    "@taiga-ui/polymorpheus": "4.9.0",
    "ansi-to-html": "^0.7.2",
    "base64-js": "^1.5.1",
--- a/web/projects/marketplace/src/pages/show/dependencies/dependency-item.component.ts
+++ b/web/projects/marketplace/src/pages/show/dependencies/dependency-item.component.ts
@@ -10,7 +10,12 @@ import { MarketplacePkgBase } from '../../../types'
  selector: 'marketplace-dep-item',
  template: `
    <div class="outer-container">
-      <tui-avatar class="dep-img" size="l" [src]="getImage(dep.key)" />
+      <tui-avatar
+        appearance="action-grayscale"
+        class="dep-img"
+        size="l"
+        [src]="getImage(dep.key)"
+      />
      <div>
        <tui-line-clamp [linesLimit]="2" [content]="titleContent" />
        <ng-template #titleContent>
--- a/web/projects/marketplace/src/pages/show/flavors.component.ts
+++ b/web/projects/marketplace/src/pages/show/flavors.component.ts
@@ -21,7 +21,10 @@ import { MarketplacePkg } from '../../types'
            [queryParams]="{ id: pkg.id, flavor: pkg.flavor }"
            queryParamsHandling="merge"
          >
-            <tui-avatar [src]="pkg.icon | trustUrl" />
+            <tui-avatar
+              appearance="action-grayscale"
+              [src]="pkg.icon | trustUrl"
+            />
            <span tuiTitle>
              {{ pkg.title }}
              <span tuiSubtitle>{{ pkg.version }}</span>
--- a/web/projects/ui/src/app/routes/portal/components/form/controls/select.component.ts
+++ b/web/projects/ui/src/app/routes/portal/components/form/controls/select.component.ts
@@ -40,7 +40,9 @@ import { HintPipe } from '../pipes/hint.pipe'
          [(ngModel)]="selected"
        />
      }
-      <tui-data-list-wrapper *tuiTextfieldDropdown new [items]="items" />
+      @if (!mobile) {
+        <tui-data-list-wrapper *tuiTextfieldDropdown new [items]="items" />
+      }
      @if (spec | hint; as hint) {
        <tui-icon [tuiTooltip]="hint" />
      }
--- a/web/projects/ui/src/app/routes/portal/components/interfaces/addresses/actions.component.ts
+++ b/web/projects/ui/src/app/routes/portal/components/interfaces/addresses/actions.component.ts
@@ -17,6 +17,7 @@ import {
  tuiButtonOptionsProvider,
  TuiDataList,
  TuiDropdown,
+  TuiIcon,
  TuiTextfield,
 } from '@taiga-ui/core'
 import { PolymorpheusComponent } from '@taiga-ui/polymorpheus'
@@ -27,13 +28,9 @@ import { InterfaceComponent } from '../interface.component'
  selector: 'td[actions]',
  template: `
    <div class="desktop">
-      <button
-        tuiIconButton
-        appearance="flat-grayscale"
-        iconStart="@tui.info"
-        (click)="viewDetails()"
-      >
+      <button tuiIconButton appearance="flat-grayscale" (click)="viewDetails()">
        {{ 'Address details' | i18n }}
+        <tui-icon class="info" icon="@tui.info" background="@tui.info-filled" />
      </button>
      @if (interface.value()?.type === 'ui') {
        <a
@@ -113,6 +110,19 @@ import { InterfaceComponent } from '../interface.component'
      white-space: nowrap;
    }

+    :host-context(.uncommon-hidden) .desktop {
+      height: 0;
+      visibility: hidden;
+    }
+
+    .info {
+      background: var(--tui-status-info);
+
+      &::after {
+        mask-size: 1.5rem;
+      }
+    }
+
    .mobile {
      display: none;
    }
@@ -127,7 +137,14 @@ import { InterfaceComponent } from '../interface.component'
      }
    }
  `,
-  imports: [TuiButton, TuiDropdown, TuiDataList, i18nPipe, TuiTextfield],
+  imports: [
+    TuiButton,
+    TuiDropdown,
+    TuiDataList,
+    i18nPipe,
+    TuiTextfield,
+    TuiIcon,
+  ],
  providers: [tuiButtonOptionsProvider({ appearance: 'icon' })],
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
--- a/web/projects/ui/src/app/routes/portal/components/interfaces/addresses/addresses.component.ts
+++ b/web/projects/ui/src/app/routes/portal/components/interfaces/addresses/addresses.component.ts
@@ -1,7 +1,8 @@
 import { ChangeDetectionStrategy, Component, input } from '@angular/core'
 import { i18nPipe } from '@start9labs/shared'
+import { TuiButton } from '@taiga-ui/core'
 import { TuiAccordion } from '@taiga-ui/experimental'
-import { TuiSkeleton } from '@taiga-ui/kit'
+import { TuiElasticContainer, TuiSkeleton } from '@taiga-ui/kit'
 import { PlaceholderComponent } from 'src/app/routes/portal/components/placeholder.component'
 import { TableComponent } from 'src/app/routes/portal/components/table.component'

@@ -12,91 +13,79 @@ import { InterfaceAddressItemComponent } from './item.component'
  selector: 'section[addresses]',
  template: `
    <header>{{ 'Addresses' | i18n }}</header>
-    <table [appTable]="['Type', 'Access', 'Gateway', 'URL', null]">
-      @for (address of addresses()?.common; track $index) {
-        <tr [address]="address" [isRunning]="isRunning()"></tr>
-      } @empty {
-        @if (addresses()) {
-          <tr>
-            <td colspan="5">
-              <app-placeholder icon="@tui.list-x">
-                {{ 'No addresses' | i18n }}
-              </app-placeholder>
-            </td>
-          </tr>
-        } @else {
-          @for (_ of [0, 1]; track $index) {
+    <tui-elastic-container>
+      <table [appTable]="['Type', 'Access', 'Gateway', 'URL', null]">
+        @for (address of addresses()?.common; track $index) {
+          <tr [address]="address" [isRunning]="isRunning()"></tr>
+        } @empty {
+          @if (addresses()) {
            <tr>
-              <td colspan="6">
-                <div [tuiSkeleton]="true">{{ 'Loading' | i18n }}</div>
+              <td colspan="5">
+                <app-placeholder icon="@tui.list-x">
+                  {{ 'No addresses' | i18n }}
+                </app-placeholder>
              </td>
            </tr>
+          } @else {
+            @for (_ of [0, 1]; track $index) {
+              <tr>
+                <td colspan="6">
+                  <div [tuiSkeleton]="true">{{ 'Loading' | i18n }}</div>
+                </td>
+              </tr>
+            }
          }
        }
-      }
-    </table>
-    @if (addresses()?.uncommon?.length) {
-      <tui-accordion>
-        <tui-expand>
-          <hr />
-          <table class="g-table">
-            @for (address of addresses()?.uncommon; track $index) {
-              <tr [address]="address" [isRunning]="isRunning()"></tr>
-            }
-          </table>
-        </tui-expand>
-        <button
-          appearance="secondary-grayscale"
-          iconEnd=""
-          [(tuiAccordion)]="uncommon"
-        >
-          @if (uncommon) {
-            Hide uncommon
-          } @else {
-            Show uncommon
+        <tbody [class.uncommon-hidden]="!uncommon">
+          @if (addresses()?.uncommon?.length && uncommon) {
+            <tr [style.background]="'var(--tui-background-neutral-1)'">
+              <td colspan="5"></td>
+            </tr>
          }
-        </button>
-      </tui-accordion>
-    }
+          @for (address of addresses()?.uncommon; track $index) {
+            <tr [address]="address" [isRunning]="isRunning()"></tr>
+          }
+        </tbody>
+        @if (addresses()?.uncommon?.length) {
+          <caption [style.caption-side]="'bottom'">
+            <button
+              tuiButton
+              size="m"
+              appearance="secondary-grayscale"
+              (click)="uncommon = !uncommon"
+            >
+              @if (uncommon) {
+                Hide uncommon
+              } @else {
+                Show uncommon
+              }
+            </button>
+          </caption>
+        }
+      </table>
+    </tui-elastic-container>
  `,
  styles: `
-    tui-accordion {
-      border-radius: 0;
+    .g-table:has(caption) {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
    }

-    [tuiAccordion],
-    tui-expand {
-      box-shadow: none;
-      padding: 0;
-    }
-
-    [tuiAccordion] {
-      justify-content: center;
-      height: 3rem;
-      border-radius: 0 0 var(--tui-radius-m) var(--tui-radius-m) !important;
-    }
-
-    hr {
-      margin: 0;
-      height: 0.25rem;
-      border-radius: 1rem;
-    }
-
-    :host-context(tui-root._mobile) {
-      [tuiAccordion] {
-        margin: 0.5rem 0;
-        border-radius: var(--tui-radius-m) !important;
-      }
+    [tuiButton] {
+      width: 100%;
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
    }
  `,
  host: { class: 'g-card' },
  imports: [
+    TuiSkeleton,
+    TuiButton,
    TableComponent,
    PlaceholderComponent,
    i18nPipe,
    InterfaceAddressItemComponent,
-    TuiAccordion,
-    TuiSkeleton,
+    TuiElasticContainer,
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
--- a/web/projects/ui/src/app/routes/portal/components/interfaces/addresses/item.component.ts
+++ b/web/projects/ui/src/app/routes/portal/components/interfaces/addresses/item.component.ts
@@ -8,27 +8,31 @@ import { TuiBadge } from '@taiga-ui/kit'
  selector: 'tr[address]',
  template: `
    @if (address(); as address) {
-      <td>{{ address.type }}</td>
      <td>
-        @if (address.access === 'public') {
-          <tui-badge size="s" appearance="primary-success">
-            {{ 'public' | i18n }}
-          </tui-badge>
-        } @else if (address.access === 'private') {
-          <tui-badge size="s" appearance="primary-destructive">
-            {{ 'private' | i18n }}
-          </tui-badge>
-        } @else {
-          -
-        }
+        <div class="wrapper">{{ address.type }}</div>
+      </td>
+      <td>
+        <div class="wrapper">
+          @if (address.access === 'public') {
+            <tui-badge size="s" appearance="primary-success">
+              {{ 'public' | i18n }}
+            </tui-badge>
+          } @else if (address.access === 'private') {
+            <tui-badge size="s" appearance="primary-destructive">
+              {{ 'private' | i18n }}
+            </tui-badge>
+          } @else {
+            -
+          }
+        </div>
      </td>
      <td [style.order]="-1">
-        <div [title]="address.gatewayName">
+        <div class="wrapper" [title]="address.gatewayName">
          {{ address.gatewayName || '-' }}
        </div>
      </td>
      <td>
-        <div [title]="address.url">{{ address.url }}</div>
+        <div class="wrapper" [title]="address.url">{{ address.url }}</div>
      </td>
      <td
        actions
@@ -48,6 +52,18 @@ import { TuiBadge } from '@taiga-ui/kit'
      }
    }

+    :host-context(.uncommon-hidden) {
+      .wrapper {
+        height: 0;
+        visibility: hidden;
+      }
+
+      td {
+        padding-block: 0;
+        border: hidden;
+      }
+    }
+
    div {
      white-space: normal;
      word-break: break-all;
--- a/web/projects/ui/src/app/routes/portal/components/table.component.ts
+++ b/web/projects/ui/src/app/routes/portal/components/table.component.ts
@@ -13,6 +13,8 @@ import { i18nKey, i18nPipe } from '@start9labs/shared'
      </tr>
    </thead>
    <tbody><ng-content /></tbody>
+    <ng-content select="tbody" />
+    <ng-content select="caption" />
  `,
  styles: `
    :host:has(app-placeholder) thead {
--- a/web/projects/ui/src/app/routes/portal/routes/services/components/dependencies.component.ts
+++ b/web/projects/ui/src/app/routes/portal/routes/services/components/dependencies.component.ts
@@ -25,7 +25,7 @@ import { ToManifestPipe } from '../../../pipes/to-manifest'
        [queryParams]="services[d.key] ? {} : { search: d.key }"
        [class.error]="getError(d.key)"
      >
-        <tui-avatar>
+        <tui-avatar appearance="action-grayscale">
          <img
            alt=""
            [src]="
--- a/web/projects/ui/src/app/routes/portal/routes/services/components/task.component.ts
+++ b/web/projects/ui/src/app/routes/portal/routes/services/components/task.component.ts
@@ -25,7 +25,7 @@ import { getManifest } from 'src/app/utils/get-package-data'
  selector: 'tr[task]',
  template: `
    <td tuiFade class="row">
-      <tui-avatar size="xs">
+      <tui-avatar appearance="action-grayscale" size="xs">
        <img [src]="pkg()?.icon || fallback()?.icon" alt="" />
      </tui-avatar>
      <span>{{ title() || fallback()?.title }}</span>
--- a/web/projects/ui/src/app/routes/portal/routes/services/routes/outlet.component.ts
+++ b/web/projects/ui/src/app/routes/portal/routes/services/routes/outlet.component.ts
@@ -47,7 +47,9 @@ const INACTIVE: PrimaryStatus[] = [
      </div>
      <aside class="g-aside">
        <header tuiCell routerLink="./">
-          <tui-avatar><img alt="" [src]="service()?.icon" /></tui-avatar>
+          <tui-avatar appearance="action-grayscale">
+            <img alt="" [src]="service()?.icon" />
+          </tui-avatar>
          <span tuiTitle>
            <strong tuiFade>{{ manifest()?.title }}</strong>
            <span tuiSubtitle>{{ manifest()?.version }}</span>
--- a/web/projects/ui/src/app/routes/portal/routes/system/routes/authorities/table.component.ts
+++ b/web/projects/ui/src/app/routes/portal/routes/system/routes/authorities/table.component.ts
@@ -1,6 +1,4 @@
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
-import { i18nPipe } from '@start9labs/shared'
-import { TuiSkeleton } from '@taiga-ui/kit'
 import { TableComponent } from 'src/app/routes/portal/components/table.component'
 import { AuthorityItemComponent } from './item.component'
 import { AuthorityService } from './authority.service'
@@ -12,15 +10,11 @@ import { AuthorityService } from './authority.service'
      <tr [authority]="{ name: 'Local Root CA' }"></tr>
      @for (authority of authorityService.authorities(); track $index) {
        <tr [authority]="authority"></tr>
-      } @empty {
-        <td [attr.colspan]="4">
-          <div [tuiSkeleton]="true">{{ 'Loading' | i18n }}</div>
-        </td>
      }
    </table>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [TuiSkeleton, i18nPipe, TableComponent, AuthorityItemComponent],
+  imports: [TableComponent, AuthorityItemComponent],
 })
 export class AuthoritiesTableComponent {
  protected readonly authorityService = inject(AuthorityService)
--- a/web/projects/ui/src/app/routes/portal/routes/system/routes/backups/progress.component.ts
+++ b/web/projects/ui/src/app/routes/portal/routes/system/routes/backups/progress.component.ts
@@ -18,7 +18,7 @@ import { DataModel } from 'src/app/services/patch-db/data-model'
    @for (pkg of pkgs() | keyvalue; track $index) {
      @if (backupProgress()?.[pkg.key]; as progress) {
        <div tuiCell>
-          <tui-avatar>
+          <tui-avatar appearance="action-grayscale">
            <img alt="" [src]="pkg.value.icon" />
          </tui-avatar>
          <span tuiTitle>
--- a/web/projects/ui/src/app/routes/portal/routes/updates/item.component.ts
+++ b/web/projects/ui/src/app/routes/portal/routes/updates/item.component.ts
@@ -45,7 +45,9 @@ import UpdatesComponent from './updates.component'
    <tr (click)="expanded.set(!expanded())">
      <td>
        <div [style.gap.rem]="0.75" [style.padding-inline-end.rem]="1">
-          <tui-avatar size="s"><img alt="" [src]="item().icon" /></tui-avatar>
+          <tui-avatar appearance="action-grayscale" size="s">
+            <img alt="" [src]="item().icon" />
+          </tui-avatar>
          <span tuiTitle [style.margin]="'-0.125rem 0 0'">
            <b tuiFade>{{ item().title }}</b>
            <span tuiSubtitle tuiFade class="mobile">
--- a/web/projects/ui/src/app/routes/portal/routes/updates/updates.component.ts
+++ b/web/projects/ui/src/app/routes/portal/routes/updates/updates.component.ts
@@ -69,7 +69,7 @@ interface UpdatesData {
          [class.g-secondary]="current()?.url !== registry.url"
          (click)="current.set(registry)"
        >
-          <tui-avatar>
+          <tui-avatar appearance="action-grayscale">
            <store-icon [url]="registry.url" />
          </tui-avatar>
          <span tuiTitle>