From 93d853c1f5bad9bdb87f97800183e857b87b72a6 Mon Sep 17 00:00:00 2001
From: ash1shkumar <rashishkumar2006@gmail.com>
Date: Mon, 15 Jun 2026 19:07:10 +0530
Subject: [PATCH 1/3] feat: improve sidebar accessibility and navigation
 semantics

---
 frontend/app/components/Sidebar.tsx | 34 ++++++++++++++++++++++++-----
 1 file changed, 29 insertions(+), 5 deletions(-)

diff --git a/frontend/app/components/Sidebar.tsx b/frontend/app/components/Sidebar.tsx
index 6b63cbe..7ece5dd 100644
--- a/frontend/app/components/Sidebar.tsx
+++ b/frontend/app/components/Sidebar.tsx
@@ -38,7 +38,7 @@ function getNavigationState(
 
   return {
     isActive,
-    className: `flex items-center gap-2 rounded-xl px-3 py-2 transition ${
+    className: `flex items-center gap-2 rounded-xl px-3 py-2 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-500 focus-visible:ring-offset-2 ${
       isActive
         ? "bg-teal-700 text-white shadow-sm"
         : "text-slate-700 hover:bg-slate-200"
@@ -158,9 +158,16 @@ export default function Sidebar() {
     );
 
   return (
-    <aside className="panel sticky top-0 z-20 m-2 mb-0 w-[140px] p-3 sm:m-4 sm:w-[180px] md:m-6 md:mb-6 md:h-[calc(100vh-3rem)] md:w-64 md:p-4">
+    <aside
+      aria-label="Sidebar"
+      aria-labelledby="sidebar-title"
+      className="panel sticky top-0 z-20 m-2 mb-0 w-[140px] p-3 sm:m-4 sm:w-[180px] md:m-6 md:mb-6 md:h-[calc(100vh-3rem)] md:w-64 md:p-4"
+    >
       <div className="mb-4 flex items-center justify-between md:mb-6 md:block">
-        <h1 className="text-xl font-bold tracking-tight text-slate-900 md:text-2xl">
+        <h1
+          id="sidebar-title"
+          className="text-xl font-bold tracking-tight text-slate-900 md:text-2xl"
+        >
           FlowForge
         </h1>
 
@@ -169,7 +176,10 @@ export default function Sidebar() {
         </span>
       </div>
 
-      <nav className="flex flex-col gap-2">
+      <nav
+        aria-label="Primary navigation"
+        className="flex flex-col gap-2"
+      >
         {navigationItems.map(
           (item) => {
             const Icon =
@@ -182,8 +192,22 @@ export default function Sidebar() {
                 className={
                   item.className
                 }
+                aria-current={
+                  item.isActive
+                    ? "page"
+                    : undefined
+                }
+                aria-label={
+                  item.label
+                }
+                title={
+                  item.label
+                }
               >
-                <Icon size={16} />
+                <Icon
+                  size={16}
+                  aria-hidden="true"
+                />
 
                 <span className="text-sm font-medium">
                   {item.label}

From 270195ce02265a77d32798308e2821bc108da264 Mon Sep 17 00:00:00 2001
From: ash1shkumar <rashishkumar2006@gmail.com>
Date: Mon, 15 Jun 2026 19:14:16 +0530
Subject: [PATCH 2/3] feat: improve sidebar accessibility and interaction
 consistency

---
 frontend/app/components/Sidebar.tsx | 28 ++++++++++++++++++++++------
 1 file changed, 22 insertions(+), 6 deletions(-)

diff --git a/frontend/app/components/Sidebar.tsx b/frontend/app/components/Sidebar.tsx
index 7ece5dd..8c73080 100644
--- a/frontend/app/components/Sidebar.tsx
+++ b/frontend/app/components/Sidebar.tsx
@@ -111,6 +111,14 @@ function buildNavigationItems(
     }
   );
 }
+function getNavigationAriaLabel(
+  label: string,
+  isActive: boolean
+) {
+  return isActive
+    ? `${label} (current page)`
+    : label;
+}
 
 export default function Sidebar() {
   const pathname = usePathname();
@@ -171,23 +179,26 @@ export default function Sidebar() {
           FlowForge
         </h1>
 
-        <span className="chip px-3 py-1 text-xs font-semibold">
+        <span
+          className="chip px-3 py-1 text-xs font-semibold"
+          aria-label="Application version 1"
+        >
           v1
         </span>
       </div>
 
       <nav
         aria-label="Primary navigation"
-        className="flex flex-col gap-2"
       >
+        <ul className="flex flex-col gap-2">
         {navigationItems.map(
           (item) => {
             const Icon =
               item.icon;
 
             return (
-              <Link
-                key={item.href}
+              <li key={item.href}>
+                <Link
                 href={item.href}
                 className={
                   item.className
@@ -198,7 +209,10 @@ export default function Sidebar() {
                     : undefined
                 }
                 aria-label={
-                  item.label
+                  getNavigationAriaLabel(
+                    item.label,
+                    item.isActive
+                  )
                 }
                 title={
                   item.label
@@ -213,9 +227,11 @@ export default function Sidebar() {
                   {item.label}
                 </span>
               </Link>
-            );
+            </li>
+          );
           }
         )}
+      </ul>
       </nav>
     </aside>
   );

From d914e4bd5742fd4571936814cb0d970255924354 Mon Sep 17 00:00:00 2001
From: Ashish Kumar <rashishkumar2006@gmail.com>
Date: Mon, 15 Jun 2026 23:48:05 +0530
Subject: [PATCH 3/3] Refactor Sidebar component for improved readability

---
 frontend/app/components/Sidebar.tsx | 172 +++++++++++++++-------------
 1 file changed, 92 insertions(+), 80 deletions(-)

diff --git a/frontend/app/components/Sidebar.tsx b/frontend/app/components/Sidebar.tsx
index 8c73080..33a9d79 100644
--- a/frontend/app/components/Sidebar.tsx
+++ b/frontend/app/components/Sidebar.tsx
@@ -46,38 +46,41 @@ function getNavigationState(
   };
 }
 
-const NAVIGATION_ITEMS: NavigationItem[] =
-  [
-    {
-      href: "/dashboard",
-      label: "Dashboard",
-      icon: LayoutDashboard,
-    },
-    {
-      href: "/projects",
-      label: "Projects",
-      icon: FolderKanban,
-    },
-    {
-      href: "/workspace",
-      label: "Workspace",
-      icon: Blocks,
-    },
-    {
-      href: "/insights/overview",
-      label: "Insights",
-      icon: BarChart3,
-    },
-    {
-      href: "/chat",
-      label: "Chat",
-      icon: MessageSquare,
-    },
-  ];
+const NAVIGATION_ITEMS: NavigationItem[] = [
+  {
+    href: "/dashboard",
+    label: "Dashboard",
+    icon: LayoutDashboard,
+  },
+  {
+    href: "/projects",
+    label: "Projects",
+    icon: FolderKanban,
+  },
+  {
+    href: "/workspace",
+    label: "Workspace",
+    icon: Blocks,
+  },
+  {
+    href: "/insights/overview",
+    label: "Insights",
+    icon: BarChart3,
+  },
+  {
+    href: "/chat",
+    label: "Chat",
+    icon: MessageSquare,
+  },
+];
 
 function persistActiveRoute(
   pathname: string
 ) {
+  if (typeof window === "undefined") {
+    return;
+  }
+
   sessionStorage.setItem(
     "sidebar-active-route",
     pathname
@@ -85,6 +88,10 @@ function persistActiveRoute(
 }
 
 function getPersistedRoute() {
+  if (typeof window === "undefined") {
+    return null;
+  }
+
   return sessionStorage.getItem(
     "sidebar-active-route"
   );
@@ -111,6 +118,7 @@ function buildNavigationItems(
     }
   );
 }
+
 function getNavigationAriaLabel(
   label: string,
   isActive: boolean
@@ -121,16 +129,19 @@ function getNavigationAriaLabel(
 }
 
 export default function Sidebar() {
-  const pathname = usePathname();
+  const pathname =
+    usePathname() ?? "";
 
   const [activePath, setActivePath] =
-    useState(pathname);
+    useState<string>(
+      pathname
+    );
 
   const saveActiveRoute =
     useCallback(
-      (pathname: string) => {
+      (currentPath: string) => {
         persistActiveRoute(
-          pathname
+          currentPath
         );
       },
       []
@@ -142,7 +153,10 @@ export default function Sidebar() {
     if (pathname) {
       saveActiveRoute(pathname);
     }
-  }, [pathname, saveActiveRoute]);
+  }, [
+    pathname,
+    saveActiveRoute,
+  ]);
 
   useEffect(() => {
     const persistedPath =
@@ -152,9 +166,11 @@ export default function Sidebar() {
       persistedPath &&
       !activePath
     ) {
-      setActivePath(persistedPath);
+      setActivePath(
+        persistedPath
+      );
     }
-  }, []);
+  }, [activePath]);
 
   const navigationItems =
     useMemo(
@@ -187,52 +203,48 @@ export default function Sidebar() {
         </span>
       </div>
 
-      <nav
-        aria-label="Primary navigation"
-      >
+      <nav aria-label="Primary navigation">
         <ul className="flex flex-col gap-2">
-        {navigationItems.map(
-          (item) => {
-            const Icon =
-              item.icon;
-
-            return (
-              <li key={item.href}>
-                <Link
-                href={item.href}
-                className={
-                  item.className
-                }
-                aria-current={
-                  item.isActive
-                    ? "page"
-                    : undefined
-                }
-                aria-label={
-                  getNavigationAriaLabel(
-                    item.label,
-                    item.isActive
-                  )
-                }
-                title={
-                  item.label
-                }
-              >
-                <Icon
-                  size={16}
-                  aria-hidden="true"
-                />
-
-                <span className="text-sm font-medium">
-                  {item.label}
-                </span>
-              </Link>
-            </li>
-          );
-          }
-        )}
-      </ul>
+          {navigationItems.map(
+            (item) => {
+              const Icon =
+                item.icon;
+
+              return (
+                <li key={item.href}>
+                  <Link
+                    href={item.href}
+                    className={
+                      item.className
+                    }
+                    aria-current={
+                      item.isActive
+                        ? "page"
+                        : undefined
+                    }
+                    aria-label={getNavigationAriaLabel(
+                      item.label,
+                      item.isActive
+                    )}
+                    title={
+                      item.label
+                    }
+                  >
+                    <Icon
+                      size={16}
+                      aria-hidden="true"
+                    />
+
+                    <span className="text-sm font-medium">
+                      {item.label}
+                    </span>
+                  </Link>
+                </li>
+              );
+            }
+          )}
+        </ul>
       </nav>
     </aside>
   );
-}
\ No newline at end of file
+}