From 137d1f01ad021f5ff720b54402e13d0e3cbf94fc Mon Sep 17 00:00:00 2001
From: 4gray <serega05@gmail.com>
Date: Sat, 14 Mar 2026 23:40:09 +0100
Subject: [PATCH] style(nav-list): update hover styles and clean up unused
 styles in workspace shell

---
 apps/web/src/nav-list.scss                    |  7 +-
 .../workspace/shell/feature/src/nav-list.scss | 92 +------------------
 2 files changed, 5 insertions(+), 94 deletions(-)

diff --git a/apps/web/src/nav-list.scss b/apps/web/src/nav-list.scss
index 861515930..14caa972c 100644
--- a/apps/web/src/nav-list.scss
+++ b/apps/web/src/nav-list.scss
@@ -59,13 +59,14 @@
         opacity: 0.7;
     }
 
-    &:hover {
-        background: var(--mat-sys-surface-container);
+    &:hover:not(.selected):not(.active):not(.is-active) {
+        background: var(--app-selection-surface);
         color: var(--mat-sys-on-surface);
     }
 
     &.selected,
-    &.active {
+    &.active,
+    &.is-active {
         background: linear-gradient(
             135deg,
             var(--app-selection-surface-strong),
diff --git a/libs/workspace/shell/feature/src/nav-list.scss b/libs/workspace/shell/feature/src/nav-list.scss
index a53e4b910..79b6f4692 100644
--- a/libs/workspace/shell/feature/src/nav-list.scss
+++ b/libs/workspace/shell/feature/src/nav-list.scss
@@ -1,91 +1 @@
-// Shared list navigation styles for workspace shell panels.
-.nav-list {
-    flex: 1;
-    overflow-y: auto;
-    padding: 0 8px 12px;
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-}
-
-.nav-item {
-    position: relative;
-    width: 100%;
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    padding: 6px 4px;
-    border: 1px solid transparent;
-    border-radius: 10px;
-    background: transparent;
-    color: var(--mat-sys-on-surface-variant);
-    text-align: left;
-    text-decoration: none;
-    cursor: pointer;
-    font-size: 0.875rem;
-    font-weight: 500;
-    box-sizing: border-box;
-    transition:
-        background 0.15s ease,
-        color 0.15s ease,
-        border-color 0.15s ease,
-        box-shadow 0.18s ease,
-        transform 0.18s ease;
-
-    mat-icon {
-        font-size: 18px;
-        width: 18px;
-        height: 18px;
-        flex-shrink: 0;
-    }
-
-    span,
-    .nav-item-label {
-        line-height: 1.2;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        flex: 1;
-        min-width: 0;
-        padding-left: 10px;
-    }
-
-    .nav-item-meta {
-        font-size: 0.8rem;
-        min-width: 2ch;
-        text-align: right;
-        flex-shrink: 0;
-        color: var(--mat-sys-on-surface-variant);
-        opacity: 0.7;
-    }
-
-    &:hover {
-        background: var(--mat-sys-surface-container);
-        color: var(--mat-sys-on-surface);
-    }
-
-    &.selected,
-    &.active {
-        background: linear-gradient(
-            135deg,
-            var(--app-selection-surface-strong),
-            var(--app-selection-surface)
-        ) !important;
-        color: var(--app-selection-color) !important;
-        border-color: var(--app-selection-border) !important;
-        font-weight: 600;
-        box-shadow:
-            inset 0 0 0 1px var(--app-selection-border),
-            0 12px 20px -18px var(--app-selection-glow);
-        transform: translateY(-1px);
-
-        * {
-            color: var(--app-selection-color) !important;
-        }
-
-        .nav-item-meta {
-            color: var(--app-selection-color) !important;
-            opacity: 0.92;
-        }
-    }
-}
+@use '../../../../../apps/web/src/nav-list.scss';