From 622924ed53dacb11a301983c89c1f15159b076fc Mon Sep 17 00:00:00 2001
From: Andrii Arsenin <ars9@pm.me>
Date: Tue, 14 Apr 2026 23:15:49 +0300
Subject: [PATCH] refactor(nav): reorganize sidebar with dynamic sections at
 top

- move runs and sessions to top of navigation (most dynamic)
- add visual separator between dynamic and configuration sections
- reorder remaining items: scenarios, snippets, credentials, environments
- implement separator component in nav rendering logic
---
 client/src/App.module.css |  6 ++++++
 client/src/App.tsx        | 44 +++++++++++++++++++++++----------------
 2 files changed, 32 insertions(+), 18 deletions(-)

diff --git a/client/src/App.module.css b/client/src/App.module.css
index ca00bb2..cdad06b 100644
--- a/client/src/App.module.css
+++ b/client/src/App.module.css
@@ -95,6 +95,12 @@
   background: var(--color-secondary-hover);
 }
 
+.navSeparator {
+  height: var(--border-width);
+  background: var(--color-border);
+  margin: var(--space-2) var(--space-2);
+}
+
 .main {
   flex: 1;
   overflow-y: auto;
diff --git a/client/src/App.tsx b/client/src/App.tsx
index 9a14dc7..fc0e579 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -90,13 +90,17 @@ const SnippetDetailPage = lazy(() =>
   import('./pages/snippet/SnippetDetailPage').then((m) => ({ default: m.SnippetDetailPage })),
 );
 
-const NAV: { path: string; labelKey: string; Icon: LucideIcon }[] = [
-  { path: '/environments', labelKey: 'nav.environments', Icon: Globe },
-  { path: '/credentials', labelKey: 'nav.credentials', Icon: KeyRound },
-  { path: '/snippets', labelKey: 'nav.snippets', Icon: Braces },
-  { path: '/sessions', labelKey: 'nav.sessions', Icon: Monitor },
-  { path: '/scenarios', labelKey: 'nav.scenarios', Icon: ClipboardList },
+const NAV: (
+  | { path: string; labelKey: string; Icon: LucideIcon }
+  | { separator: true }
+)[] = [
   { path: '/runs', labelKey: 'nav.runs', Icon: Activity },
+  { path: '/sessions', labelKey: 'nav.sessions', Icon: Monitor },
+  { separator: true },
+  { path: '/scenarios', labelKey: 'nav.scenarios', Icon: ClipboardList },
+  { path: '/snippets', labelKey: 'nav.snippets', Icon: Braces },
+  { path: '/credentials', labelKey: 'nav.credentials', Icon: KeyRound },
+  { path: '/environments', labelKey: 'nav.environments', Icon: Globe },
 ];
 
 export default function App() {
@@ -114,18 +118,22 @@ export default function App() {
       >
         <div className={styles.sideContent}>
           <nav className={styles.nav}>
-            {NAV.map(({ path, labelKey, Icon }) => (
-              <NavLink
-                key={path}
-                to={path}
-                className={({ isActive }) =>
-                  [styles.navItem, isActive ? styles.navItemActive : ''].filter(Boolean).join(' ')
-                }
-              >
-                <Icon size={16} className={styles.navIcon} aria-hidden="true" />
-                {t(labelKey)}
-              </NavLink>
-            ))}
+            {NAV.map((item, index) =>
+              'separator' in item ? (
+                <div key={`separator-${index}`} className={styles.navSeparator} />
+              ) : (
+                <NavLink
+                  key={item.path}
+                  to={item.path}
+                  className={({ isActive }) =>
+                    [styles.navItem, isActive ? styles.navItemActive : ''].filter(Boolean).join(' ')
+                  }
+                >
+                  <item.Icon size={16} className={styles.navIcon} aria-hidden="true" />
+                  {t(item.labelKey)}
+                </NavLink>
+              ),
+            )}
           </nav>
 
           <div className={styles.sideFooter}>