interface row clickable again, bu now with a chevron!

web/projects/ui/src/app/routes/portal/routes/services/components/interface-item.component.ts

@@ -1,7 +1,6 @@
 import { ChangeDetectionStrategy, Component, input } from '@angular/core'
-import { RouterLink } from '@angular/router'
 import { T } from '@start9labs/start-sdk'
-import { TuiButton } from '@taiga-ui/core'
+import { TuiIcon } from '@taiga-ui/core'
 import { TuiBadge } from '@taiga-ui/kit'
 
 @Component({
@@ -16,19 +15,19 @@ import { TuiBadge } from '@taiga-ui/kit'
     <td class="g-secondary" [style.grid-area]="'2 / 1 / 2 / 3'">
       {{ info().description }}
     </td>
-    <td class="actions">
-      <a
-        tuiIconButton
-        appearance="flat-grayscale"
-        iconStart="@tui.settings"
-        size="s"
-        [routerLink]="link()"
-      >
-        Settings
-      </a>
+    <td class="chevron">
+      <tui-icon icon="@tui.chevron-right" />
     </td>
   `,
   styles: `
+    :host {
+      cursor: pointer;
+
+      &:hover {
+        background: var(--tui-background-neutral-1);
+      }
+    }
+
     td:first-child {
       white-space: nowrap;
     }
@@ -38,12 +37,13 @@ import { TuiBadge } from '@taiga-ui/kit'
       font-weight: bold;
     }
 
-    tui-icon {
-      font-size: 1rem;
+    .chevron {
+      text-align: end;
     }
 
-    .actions {
-      text-align: end;
+    .chevron tui-icon {
+      font-size: 1rem;
+      color: var(--tui-text-tertiary);
     }
 
     :host-context(tui-root._mobile) {
@@ -57,13 +57,13 @@ import { TuiBadge } from '@taiga-ui/kit'
         padding: 0;
       }
 
-      .actions {
+      .chevron {
         grid-area: 1 / 2 / 3 / 3;
       }
     }
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [TuiBadge, TuiButton, RouterLink],
+  imports: [TuiBadge, TuiIcon],
 })
 export class ServiceInterfaceItemComponent {
   readonly info = input.required<T.ServiceInterface>()

web/projects/ui/src/app/routes/portal/routes/services/components/interfaces.component.ts

@@ -4,6 +4,7 @@ import {
   computed,
   input,
 } from '@angular/core'
+import { RouterLink } from '@angular/router'
 import { TuiTable } from '@taiga-ui/addon-table'
 import { tuiDefaultSort } from '@taiga-ui/cdk'
 import { PackageDataEntry } from 'src/app/services/patch-db/data-model'
@@ -26,8 +27,16 @@ import { PlaceholderComponent } from '../../../components/placeholder.component'
       </thead>
       <tbody>
         @for (info of interfaces(); track $index) {
-          <tr serviceInterface [info]="info" [link]="info.routerLink">
-            <strong>{{ info.name }}</strong>
+          <tr
+            tabindex="-1"
+            serviceInterface
+            [info]="info"
+            [link]="info.routerLink"
+            [routerLink]="info.routerLink"
+          >
+            <a [routerLink]="info.routerLink">
+              <strong>{{ info.name }}</strong>
+            </a>
           </tr>
         } @empty {
           <app-placeholder icon="@tui.monitor-x">
@@ -46,6 +55,7 @@ import { PlaceholderComponent } from '../../../components/placeholder.component'
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
     ServiceInterfaceItemComponent,
+    RouterLink,
     TuiTable,
     i18nPipe,
     PlaceholderComponent,