style(navigation): update nav item styles and improve hover effects

feat(rail-links): change icon for 'all channels' in playlists

libs/portal/shared/ui/src/lib/components/category-view/category-view.component.scss

@@ -19,10 +19,6 @@
         font-size: 0.85em;
         margin-left: 4px;
     }
-
-    &:hover:not(.category-item--selected) {
-        background: var(--app-selection-surface);
-    }
 }
 
 .category-item--selected .item-count {

libs/portal/shared/ui/src/lib/navigation/navigation.component.html

@@ -9,6 +9,7 @@
 <div class="nav-section">
     <mat-nav-list>
         <a
+            class="portal-nav-link nav-item"
             mat-list-item
             routerLink="/"
             routerLinkActive="active"
@@ -46,7 +47,7 @@
         @if (!isStalkerPlaylist()) {
             <a
                 mat-list-item
-                class="action-button"
+                class="portal-nav-link nav-item action-button"
                 (click)="openAccountInfo()"
                 [matTooltip]="'PORTALS.SIDEBAR.ACCOUNT_INFO' | translate"
                 matTooltipPosition="right"
@@ -55,6 +56,7 @@
             </a>
         }
         <a
+            class="portal-nav-link nav-item"
             mat-list-item
             (click)="openPlaylistInfo()"
             [matTooltip]="'PORTALS.SIDEBAR.PLAYLIST_INFO' | translate"
@@ -64,6 +66,7 @@
         </a>
         <mat-divider />
         <a
+            class="portal-nav-link nav-item"
             mat-list-item
             (click)="openSettings()"
             [matTooltip]="'MENU.SETTINGS' | translate"

libs/portal/shared/ui/src/lib/navigation/navigation.component.scss

@@ -1,3 +1,5 @@
+@use '../../../../../../../apps/web/src/nav-list.scss';
+
 :host {
     padding: 4px;
     display: flex;
@@ -13,11 +15,11 @@
     padding: 0;
     margin: 0;
 
-    .mdc-list-item {
+    .portal-nav-link.mdc-list-item {
         min-height: 28px;
         height: 28px;
         padding: 0 !important;
-        border-radius: 4px;
+        border-radius: 10px;
         margin: 2px 0;
         display: flex;
         justify-content: center;
@@ -47,11 +49,10 @@
 }
 
 .active {
-    background: var(--mat-sys-secondary-container);
-    color: var(--mat-sys-on-secondary-container);
+    color: var(--app-selection-color);
 
     mat-icon {
-        color: var(--mat-sys-on-secondary-container);
+        color: var(--app-selection-color);
     }
 }
 

libs/portal/shared/ui/src/lib/navigation/portal-rail-links.component.html

@@ -2,7 +2,7 @@
     <mat-nav-list class="p-0 m-0">
         @for (link of links(); track link.path.join('/')) {
             <a
-                class="portal-rail-link"
+                class="portal-rail-link nav-item"
                 mat-list-item
                 [routerLink]="link.path"
                 [routerLinkActive]="activeClass()"
@@ -24,7 +24,7 @@
     <nav class="flex flex-col items-center gap-2 w-full">
         @for (link of links(); track link.path.join('/')) {
             <a
-                class="portal-rail-link"
+                class="portal-rail-link nav-item"
                 [routerLink]="link.path"
                 [routerLinkActive]="activeClass()"
                 [routerLinkActiveOptions]="{ exact: link.exact ?? false }"

libs/portal/shared/ui/src/lib/navigation/portal-rail-links.component.scss

@@ -1,19 +1,13 @@
+@use '../../../../../../../apps/web/src/nav-list.scss';
+
 :host {
     display: block;
     width: 100%;
     --rail-link-color: var(--mat-sys-on-surface-variant);
-    --rail-link-hover-color: var(--mat-sys-on-surface);
-    --rail-link-hover-bg: var(--mat-sys-surface-container);
-    --rail-link-active-bg: var(--app-selection-surface);
-    --rail-link-active-bg-strong: var(--app-selection-surface-strong);
-    --rail-link-active-color: var(--app-selection-color);
-    --rail-link-active-icon: var(--app-selection-color);
-    --rail-link-active-border: var(--app-selection-border);
-    --rail-link-active-glow: var(--app-selection-glow);
 }
 
 .p-0.m-0 {
-    .mdc-list-item {
+    .portal-rail-link.mdc-list-item {
         min-height: 28px;
         height: 28px;
         padding: 0 !important;
@@ -44,66 +38,27 @@
         width: 18px !important;
         height: 18px !important;
     }
-
-    .mdc-list-item.active,
-    .mdc-list-item.is-active {
-        background: linear-gradient(
-            145deg,
-            var(--rail-link-active-bg-strong),
-            var(--rail-link-active-bg)
-        );
-        color: var(--rail-link-active-color);
-        box-shadow:
-            inset 0 0 0 1px var(--rail-link-active-border),
-            0 8px 18px -14px var(--rail-link-active-glow);
-        transform: translateY(-1px);
-
-        mat-icon {
-            color: var(--rail-link-active-icon);
-        }
-    }
 }
 
 nav.flex .portal-rail-link {
     width: 44px;
     height: 44px;
+    padding: 0;
+    gap: 0;
     border-radius: 14px;
     position: relative;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     color: var(--rail-link-color);
-    text-decoration: none;
-    transition:
-        background-color 0.2s ease,
-        color 0.2s ease,
-        box-shadow 0.2s ease,
-        transform 0.2s ease;
     app-region: no-drag;
 }
 
-nav.flex .portal-rail-link:hover {
-    color: var(--rail-link-hover-color);
-    background: var(--rail-link-hover-bg);
-}
-
 nav.flex .portal-rail-link.is-active,
 nav.flex .portal-rail-link.active {
-    color: var(--rail-link-active-color);
-    background: linear-gradient(
-        145deg,
-        var(--rail-link-active-bg-strong),
-        var(--rail-link-active-bg)
-    );
     box-shadow:
-        inset 0 0 0 1px var(--rail-link-active-border),
-        0 10px 20px -16px var(--rail-link-active-glow);
-    transform: translateY(-1px);
-}
-
-nav.flex .portal-rail-link.is-active mat-icon,
-nav.flex .portal-rail-link.active mat-icon {
-    color: var(--rail-link-active-icon);
+        inset 0 0 0 1px var(--app-selection-border),
+        0 10px 20px -16px var(--app-selection-glow);
 }
 
 nav.flex .portal-rail-link.is-active::after,
@@ -116,6 +71,6 @@ nav.flex .portal-rail-link.active::after {
     width: 4px;
     height: 20px;
     border-radius: 999px;
-    background: var(--rail-link-active-icon);
-    box-shadow: 0 0 10px var(--rail-link-active-glow);
+    background: var(--app-selection-color);
+    box-shadow: 0 0 10px var(--app-selection-glow);
 }

libs/portal/shared/util/src/lib/navigation/portal-rail-links.ts

@@ -174,7 +174,7 @@ export function buildPortalRailLinks(
     if (provider === 'playlists') {
         const primary: PortalRailLink[] = [
             {
-                icon: 'list',
+                icon: 'tv',
                 tooltip: 'All channels (this playlist)',
                 path: [...root, 'all'],
                 exact: true,