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

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) {
+        <span tuiCell="m">
-          <tui-icon icon="@tui.check" class="g-positive" />
+          @if (update === true) {
-          Download complete, restart to apply changes
+            <tui-icon icon="@tui.check" class="g-positive" />
-        } @else if (
+            Download complete, restart to apply changes
-          update.overall && update.overall !== true && update.overall.total
+          } @else if (
-        ) {
+            update.overall && update.overall !== true && update.overall.total
-          <tui-progress-circle
+          ) {
-            size="xxs"
+            <tui-progress-circle
-            [style.display]="'flex'"
+              size="xxs"
-            [max]="100"
+              [style.display]="'flex'"
-            [value]="getProgress(update.overall.total, update.overall.done)"
+              [max]="100"
-          />
+              [value]="getProgress(update.overall.total, update.overall.done)"
-          Downloading:
+            />
-          {{ getProgress(update.overall.total, update.overall.done) }}%
+            Downloading:
-        } @else {
+            {{ getProgress(update.overall.total, update.overall.done) }}%
-          <tui-loader />
+          } @else {
-          Calculating download size
+            <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 {

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]="

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>

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>()

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>

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-badged-content>
-        <tui-icon
+        @if (getSignal(network.strength); as signal) {
-          background="@tui.wifi"
+          <tui-icon
-          [icon]="signal.icon"
+            background="@tui.wifi"
-          [style.background]="'var(--tui-background-neutral-2)'"
+            [icon]="signal.icon"
-          [style.color]="signal.color"
+            [style.background]="'var(--tui-background-neutral-2)'"
-        />
+            [style.color]="signal.color"
-      } @else {
+          />
-        <tui-icon icon="@tui.wifi-off" />
+        } @else {
-      }
+          <tui-icon icon="@tui.wifi-off" />
-      <tui-icon
+        }
-        [icon]="network.security.length ? '@tui.lock' : '@tui.lock-open'"
+        @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,
   ],
 })

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