chore: make service icons not round and add wifi lock badge (#3139)

* chore: make service icons not round and add wifi lock badge * chore: comments
2026-03-26 02:11:53 +00:00 · 2026-03-20 04:18:25 +04:00
parent 56cb3861bc
commit f41fc75024
7 changed files with 93 additions and 52 deletions
--- a/web/projects/ui/src/app/routes/portal/portal.component.ts
+++ b/web/projects/ui/src/app/routes/portal/portal.component.ts
@@ -9,6 +9,7 @@ import { RouterOutlet } from '@angular/router'
 import { ErrorService } from '@start9labs/shared'
 import {
  TuiButton,
+  TuiCell,
  TuiIcon,
  TuiLoader,
  TuiPopup,
@@ -37,24 +38,26 @@ import { HeaderComponent } from './components/header/header.component'
    <app-tabs />
    @if (update(); as update) {
      <tui-action-bar *tuiPopup="bar()">
-        @if (update === true) {
-          <tui-icon icon="@tui.check" class="g-positive" />
-          Download complete, restart to apply changes
-        } @else if (
-          update.overall && update.overall !== true && update.overall.total
-        ) {
-          <tui-progress-circle
-            size="xxs"
-            [style.display]="'flex'"
-            [max]="100"
-            [value]="getProgress(update.overall.total, update.overall.done)"
-          />
-          Downloading:
-          {{ getProgress(update.overall.total, update.overall.done) }}%
-        } @else {
-          <tui-loader />
-          Calculating download size
-        }
+        <span tuiCell="m">
+          @if (update === true) {
+            <tui-icon icon="@tui.check" class="g-positive" />
+            Download complete, restart to apply changes
+          } @else if (
+            update.overall && update.overall !== true && update.overall.total
+          ) {
+            <tui-progress-circle
+              size="xxs"
+              [style.display]="'flex'"
+              [max]="100"
+              [value]="getProgress(update.overall.total, update.overall.done)"
+            />
+            Downloading:
+            {{ getProgress(update.overall.total, update.overall.done) }}%
+          } @else {
+            <tui-loader />
+            Calculating download size
+          }
+        </span>
        @if (update === true) {
          <button tuiButton size="s" (click)="restart()">Restart</button>
        }
@@ -91,6 +94,12 @@ import { HeaderComponent } from './components/header/header.component'
        filter: none;
      }
    }
+
+    [tuiCell] {
+      padding: 0;
+      white-space: normal;
+      text-wrap: balance;
+    }
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [
@@ -104,6 +113,7 @@ import { HeaderComponent } from './components/header/header.component'
    TuiIcon,
    TuiButton,
    TuiPopup,
+    TuiCell,
  ],
 })
 export class PortalComponent {
--- 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
@@ -23,7 +23,7 @@ import { ToManifestPipe } from '../../../pipes/to-manifest'
        [queryParams]="services[d.key] ? {} : { search: d.key }"
        [class.error]="getError(d.key)"
      >
-        <span tuiAvatar appearance="action-grayscale">
+        <span tuiAvatar appearance="action-grayscale" [round]="false">
          <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">
-      <i tuiAvatar appearance="action-grayscale" size="xs">
+      <i tuiAvatar appearance="action-grayscale" size="xs" [round]="false">
        <img [src]="pkg()?.icon || fallback()?.icon" alt="" />
      </i>
      <span>{{ title() || fallback()?.title }}</span>
--- a/web/projects/ui/src/app/routes/portal/routes/services/dashboard/service.component.ts
+++ b/web/projects/ui/src/app/routes/portal/routes/services/dashboard/service.component.ts
@@ -6,6 +6,7 @@ import {
 } from '@angular/core'
 import { RouterLink } from '@angular/router'
 import { i18nPipe } from '@start9labs/shared'
+import { TuiAvatar } from '@taiga-ui/kit'
 import { ServiceUptimeComponent } from 'src/app/routes/portal/routes/services/components/uptime.component'
 import { PkgDependencyErrors } from 'src/app/services/dep-error.service'
 import { PackageDataEntry } from 'src/app/services/patch-db/data-model'
@@ -16,7 +17,9 @@ import { StatusComponent } from './status.component'
  selector: 'tr[appService]',
  template: `
    <td [style.width.rem]="3" [style.grid-area]="'1 / 1 / 4'">
-      <img alt="logo" [src]="pkg().icon" />
+      <i tuiAvatar size="s" [round]="false">
+        <img alt="logo" [src]="pkg().icon" />
+      </i>
    </td>
    <td class="title">
      <a [routerLink]="'/services/' + manifest().id">{{ manifest().title }}</a>
@@ -50,13 +53,6 @@ import { StatusComponent } from './status.component'
      display: none;
    }

-    img {
-      display: block;
-      height: 2rem;
-      width: 2rem;
-      border-radius: 100%;
-    }
-
    a {
      color: var(--tui-text-primary);
      font-weight: bold;
@@ -93,7 +89,7 @@ import { StatusComponent } from './status.component'
        background: none;
      }

-      img {
+      [tuiAvatar] {
        height: 3rem;
        width: 3rem;
      }
@@ -141,7 +137,13 @@ import { StatusComponent } from './status.component'
    }
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [RouterLink, StatusComponent, ServiceUptimeComponent, i18nPipe],
+  imports: [
+    RouterLink,
+    StatusComponent,
+    ServiceUptimeComponent,
+    i18nPipe,
+    TuiAvatar,
+  ],
 })
 export class ServiceComponent {
  readonly pkg = input.required<PackageDataEntry>()
--- 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
@@ -33,14 +33,19 @@ import { getManifest } from 'src/app/utils/get-package-data'
        <a routerLink=".." tuiIconButton iconStart="@tui.arrow-left">
          {{ 'Back' | i18n }}
        </a>
-        <span tuiAvatar size="xs" [style.margin-inline-end.rem]="0.75">
+        <span
+          tuiAvatar
+          size="xs"
+          [round]="false"
+          [style.margin-inline-end.rem]="0.75"
+        >
          <img alt="" [src]="service()?.icon" />
        </span>
        <span tuiFade>{{ manifest()?.title }}</span>
      </div>
      <aside class="g-aside">
        <header tuiCell routerLink="./">
-          <span tuiAvatar appearance="action-grayscale">
+          <span tuiAvatar appearance="action-grayscale" [round]="false">
            <img alt="" [src]="service()?.icon" />
          </span>
          <span tuiTitle>
--- a/web/projects/ui/src/app/routes/portal/routes/system/routes/wifi/table.component.ts
+++ b/web/projects/ui/src/app/routes/portal/routes/system/routes/wifi/table.component.ts
@@ -16,7 +16,12 @@ import {
  TuiIcon,
  TuiTitle,
 } from '@taiga-ui/core'
-import { TuiBadge, TuiFade, TuiNotificationMiddleService } from '@taiga-ui/kit'
+import {
+  TuiBadge,
+  TuiBadgedContent,
+  TuiFade,
+  TuiNotificationMiddleService,
+} from '@taiga-ui/kit'
 import { filter } from 'rxjs'
 import {
  FormComponent,
@@ -32,19 +37,28 @@ import { wifiSpec } from './wifi.const'
  selector: '[wifi]',
  template: `
    <ng-template #row let-network>
-      @if (getSignal(network.strength); as signal) {
-        <tui-icon
-          background="@tui.wifi"
-          [icon]="signal.icon"
-          [style.background]="'var(--tui-background-neutral-2)'"
-          [style.color]="signal.color"
-        />
-      } @else {
-        <tui-icon icon="@tui.wifi-off" />
-      }
-      <tui-icon
-        [icon]="network.security.length ? '@tui.lock' : '@tui.lock-open'"
-      />
+      <tui-badged-content>
+        @if (getSignal(network.strength); as signal) {
+          <tui-icon
+            background="@tui.wifi"
+            [icon]="signal.icon"
+            [style.background]="'var(--tui-background-neutral-2)'"
+            [style.color]="signal.color"
+          />
+        } @else {
+          <tui-icon icon="@tui.wifi-off" />
+        }
+        @if (network.security.length) {
+          <tui-icon
+            appearance="action"
+            iconStart="@tui.lock"
+            size="s"
+            tuiBadge
+            tuiSlot="bottom"
+            [style.color]="getSignal(network.strength)?.color"
+          />
+        }
+      </tui-badged-content>
      <div tuiTitle>
        <strong tuiFade>
          {{ network.ssid }}
@@ -112,9 +126,17 @@ import { wifiSpec } from './wifi.const'
    }

    tui-icon {
-      width: 2rem;
      color: var(--tui-text-tertiary);
    }
+
+    tui-badged-content {
+      margin-inline-start: 0.75rem;
+      color: transparent;
+    }
+
+    [tuiBadge] {
+      --tui-stroke-width: 1.5px;
+    }
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [
@@ -127,6 +149,7 @@ import { wifiSpec } from './wifi.const'
    TuiFade,
    TuiDropdown,
    TuiDataList,
+    TuiBadgedContent,
    i18nPipe,
  ],
 })
--- a/web/projects/ui/src/styles.scss
+++ b/web/projects/ui/src/styles.scss
@@ -247,10 +247,6 @@ ul {
    display: none;
  }

-  &:has(app-placeholder) thead {
-    display: none;
-  }
-
  tr:not(:last-child) {
    box-shadow: inset 0 -1px var(--tui-background-neutral-1);
  }
@@ -275,7 +271,8 @@ ul {
    padding: 1rem;
  }

-  tui-root._mobile & thead {
+  tui-root._mobile & thead,
+  &:has(app-placeholder) thead {
    display: none;
  }
 }
@@ -354,3 +351,7 @@ svg:not(:root) {
 .g-external-link {
  color: #50c8ff;
 }
+
+tui-root._mobile tui-action-bar {
+  bottom: 4rem;
+}