fix: update notifications design (#3000)

web/projects/ui/src/app/routes/portal/routes/notifications/item.component.ts

@@ -49,12 +49,12 @@ import { i18nPipe } from '@start9labs/shared'
         (overflownChange)="overflow = $event"
       />
       @if (overflow) {
-        <button tuiLink (click)="service.viewModal(notificationItem, true)">
+        <button tuiLink (click.stop)="onClick()">
           {{ 'View full' | i18n }}
         </button>
       }
-      @if (notificationItem.code === 1 || notificationItem.code === 2) {
-        <button tuiLink (click)="service.viewModal(notificationItem)">
+      @if ([1, 2].includes(notificationItem.code)) {
+        <button tuiLink (click.stop)="onClick()">
           {{
             notificationItem.code === 1
               ? ('View report' | i18n)
@@ -66,7 +66,8 @@ import { i18nPipe } from '@start9labs/shared'
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
-    '[class._new]': '!notificationItem.read',
+    '[class._new]': '!notificationItem.seen',
+    '(click)': 'onClick()',
   },
   styles: `
     @use '@taiga-ui/core/styles/taiga-ui-local' as taiga;
@@ -74,11 +75,20 @@ import { i18nPipe } from '@start9labs/shared'
     :host {
       grid-template-columns: 1fr;
 
-      &._new {
-        background: var(--tui-background-neutral-1) !important;
+      &._new td {
+        font-weight: bold;
+        color: var(--tui-text-primary);
+
+        &.checkbox {
+          box-shadow: inset 0.25rem 0 var(--tui-text-action);
+        }
       }
     }
 
+    tui-icon {
+      vertical-align: text-top;
+    }
+
     button {
       position: relative;
     }
@@ -86,6 +96,7 @@ import { i18nPipe } from '@start9labs/shared'
     td {
       padding: 0.25rem;
       vertical-align: top;
+      color: var(--tui-text-secondary);
     }
 
     .checkbox {
@@ -98,11 +109,6 @@ import { i18nPipe } from '@start9labs/shared'
 
       .checkbox {
         @include taiga.fullsize();
-        @include taiga.transition(box-shadow);
-
-        &:has(:checked) {
-          box-shadow: inset 0.25rem 0 var(--tui-background-accent-1);
-        }
       }
 
       .date {
@@ -114,6 +120,7 @@ import { i18nPipe } from '@start9labs/shared'
         font-weight: bold;
         font-size: 1.2em;
         display: flex;
+        align-items: center;
         gap: 0.5rem;
       }
 
@@ -121,6 +128,10 @@ import { i18nPipe } from '@start9labs/shared'
         display: none;
       }
     }
+
+    :host-context(tui-root._mobile table:has(:checked)) tui-icon {
+      opacity: 0;
+    }
   `,
   imports: [CommonModule, RouterLink, TuiLineClamp, TuiLink, TuiIcon, i18nPipe],
 })
@@ -155,4 +166,14 @@ export class NotificationItemComponent {
   getLink(id: string) {
     return toRouterLink(id)
   }
+
+  onClick() {
+    if (this.overflow) {
+      this.service.viewModal(this.notificationItem, true)
+      this.notificationItem.seen = true
+    } else if ([1, 2].includes(this.notificationItem.code)) {
+      this.service.viewModal(this.notificationItem)
+      this.notificationItem.seen = true
+    }
+  }
 }

web/projects/ui/src/app/routes/portal/routes/notifications/notifications.component.ts

@@ -38,10 +38,10 @@ import { NotificationsTableComponent } from './table.component'
           tuiDropdownAlign="right"
           [tuiDropdown]="dropdown"
           [tuiDropdownEnabled]="!!table.selected().length"
-          [style.margin-inline-start]="'auto'"
+          [style.margin-inline-start.rem]="0.5"
           [disabled]="!table.selected().length"
         >
-          {{ 'Batch action' | i18n }}
+          {{ 'Actions' | i18n }}
           <ng-template #dropdown let-close>
             <tui-data-list (click)="close()">
               <button
@@ -130,7 +130,7 @@ export default class NotificationsComponent implements OnInit {
     this.notifications.set(
       current.map(c => ({
         ...c,
-        read: toUpdate.some(n => n.id === c.id) || c.seen,
+        seen: toUpdate.some(n => n.id === c.id) || c.seen,
       })),
     )
 
@@ -144,7 +144,7 @@ export default class NotificationsComponent implements OnInit {
     this.notifications.set(
       current.map(c => ({
         ...c,
-        read: c.seen && !toUpdate.some(n => n.id === c.id),
+        seen: c.seen && !toUpdate.some(n => n.id === c.id),
       })),
     )
 

web/projects/ui/src/app/routes/portal/routes/notifications/table.component.ts

@@ -41,7 +41,7 @@ import { i18nPipe } from '@start9labs/shared'
         @for (notification of notifications; track $index) {
           <tr
             [notificationItem]="notification"
-            [style.font-weight]="notification.seen ? 'normal' : 'bold'"
+            (longtap)="handleToggle(notification)"
           >
             <input
               tuiCheckbox
@@ -50,6 +50,7 @@ import { i18nPipe } from '@start9labs/shared'
               [style.display]="'block'"
               [ngModel]="selected().includes(notification)"
               (ngModelChange)="handleToggle(notification)"
+              (click.stop)="(0)"
             />
           </tr>
         } @empty {
@@ -69,13 +70,17 @@ import { i18nPipe } from '@start9labs/shared'
     </tbody>
   `,
   styles: `
-    @use '@taiga-ui/core/styles/taiga-ui-local' as taiga;
-
     :host-context(tui-root._mobile) {
       margin: 0 -1rem;
 
       input {
-        @include taiga.fullsize();
+        position: absolute;
+        top: 0.875rem;
+        left: 1rem;
+        z-index: 1;
+      }
+
+      :host:not(:has(:checked)) input {
         opacity: 0;
       }
     }

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

@@ -75,7 +75,6 @@ import { i18nPipe } from '@start9labs/shared'
     :host {
       position: relative;
       font-size: 1rem;
-      overflow: hidden;
     }
 
     :host-context(tui-root._mobile) {

web/projects/ui/src/app/services/notification.service.ts

@@ -93,14 +93,13 @@ export class NotificationService {
     }
   }
 
-  viewModal(
-    { data, createdAt, code, title, message }: ServerNotification<number>,
-    full = false,
-  ) {
+  viewModal(notification: ServerNotification<number>, full = false) {
+    const { data, createdAt, code, title, message } = notification
     const label = code === 1 ? 'Backup Report' : (title as i18nKey)
     const component = code === 1 ? REPORT : MARKDOWN
     const content = code === 1 ? data : of(data)
 
+    this.markSeen([notification])
     this.dialogs
       .openComponent(full ? message : component, {
         label,