From 9e70772838865daa993e761beb0aa7380bf90c42 Mon Sep 17 00:00:00 2001
From: arsam <me@asabbagh.com>
Date: Fri, 18 Sep 2026 23:11:00 +0330
Subject: [PATCH] Import source: src/components/shell/sidebar

Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
---
 src/components/shell/sidebar.tsx | 254 +++++++++++++++++++++++++++++++
 1 file changed, 254 insertions(+)
 create mode 100644 src/components/shell/sidebar.tsx

diff --git a/src/components/shell/sidebar.tsx b/src/components/shell/sidebar.tsx
new file mode 100644
index 0000000..ebc7d78
--- /dev/null
+++ b/src/components/shell/sidebar.tsx
@@ -0,0 +1,254 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { ChevronDown, Menu, Search, Star, X } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Logo } from "@/components/common/logo";
+import { cn } from "@/lib/utils";
+import { groupRoutes, routeItems, sidebarRoutes } from "@/lib/routes";
+import { useUiStore } from "@/stores/ui-store";
+
+export function Sidebar() {
+  const collapsed = useUiStore((state) => state.sidebarCollapsed);
+  const toggleSidebar = useUiStore((state) => state.toggleSidebar);
+
+  return (
+    <aside
+      className={cn(
+        "glass-bar fixed bottom-2 left-2 top-2 z-30 hidden overflow-hidden rounded-2xl border border-border/60 lg:flex lg:flex-col",
+        collapsed ? "w-[72px]" : "w-[var(--sidebar-width)]",
+      )}
+      aria-label="Primary navigation"
+    >
+      <SidebarBody
+        collapsed={collapsed}
+        headerAction={
+          <Button
+            size="icon"
+            variant="ghost"
+            onClick={toggleSidebar}
+            aria-label="Collapse sidebar"
+          >
+            <Menu className="h-4 w-4" />
+          </Button>
+        }
+      />
+    </aside>
+  );
+}
+
+export function MobileSidebar() {
+  const open = useUiStore((state) => state.mobileSidebarOpen);
+  const setOpen = useUiStore((state) => state.setMobileSidebarOpen);
+  const pathname = usePathname();
+
+  useEffect(() => {
+    setOpen(false);
+  }, [pathname, setOpen]);
+
+  useEffect(() => {
+    if (!open) return;
+    document.body.style.overflow = "hidden";
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") setOpen(false);
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.body.style.overflow = "";
+      window.removeEventListener("keydown", onKeyDown);
+    };
+  }, [open, setOpen]);
+
+  return (
+    <div
+      className={cn("fixed inset-0 z-40 lg:hidden", !open && "pointer-events-none")}
+      aria-hidden={!open}
+    >
+      <div
+        className={cn(
+          "absolute inset-0 bg-background/60 backdrop-blur-sm transition-opacity duration-300",
+          open ? "opacity-100" : "opacity-0",
+        )}
+        onClick={() => setOpen(false)}
+      />
+      <aside
+        className={cn(
+          "glass-bar absolute inset-y-0 left-0 flex w-[min(86vw,300px)] flex-col overflow-hidden rounded-r-2xl border-r border-border/60 transition-transform duration-300 ease-out",
+          open ? "translate-x-0" : "-translate-x-full",
+        )}
+        aria-label="Primary navigation"
+      >
+        <SidebarBody
+          collapsed={false}
+          onNavigate={() => setOpen(false)}
+          headerAction={
+            <Button
+              size="icon"
+              variant="ghost"
+              onClick={() => setOpen(false)}
+              aria-label="Close navigation"
+            >
+              <X className="h-4 w-4" />
+            </Button>
+          }
+        />
+      </aside>
+    </div>
+  );
+}
+
+function SidebarBody({
+  collapsed,
+  headerAction,
+  onNavigate,
+}: {
+  collapsed: boolean;
+  headerAction: React.ReactNode;
+  onNavigate?: () => void;
+}) {
+  const pathname = usePathname();
+  const favorites = useUiStore((state) => state.favorites);
+  const recent = useUiStore((state) => state.recent);
+  const [filter, setFilter] = useState("");
+
+  const favoritesRoutes = routeItems.filter((item) => favorites.includes(item.path));
+  const recentRoutes = routeItems.filter((item) => recent.includes(item.path));
+  const visible = useMemo(() => {
+    if (!filter) return sidebarRoutes;
+    const term = filter.toLowerCase();
+    return routeItems.filter((item) =>
+      [item.label, item.category, item.description, ...item.keywords].some((value) =>
+        value.toLowerCase().includes(term),
+      ),
+    );
+  }, [filter]);
+  const groups = groupRoutes(visible);
+
+  return (
+    <>
+      <div className="flex h-[var(--header-height)] items-center justify-between border-b border-border/60 px-3">
+        <Link href="/dashboard" className="overflow-hidden" onClick={onNavigate}>
+          <Logo compact={collapsed} className={collapsed ? "" : "h-9"} />
+        </Link>
+        {headerAction}
+      </div>
+      {!collapsed ? (
+        <div className="border-b border-border/60 p-3">
+          <div className="relative">
+            <Search className="pointer-events-none absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+            <Input
+              value={filter}
+              onChange={(event) => setFilter(event.target.value)}
+              placeholder="Find tools"
+              className="h-8 pl-8"
+            />
+          </div>
+        </div>
+      ) : null}
+      <div className="min-h-0 flex-1 overflow-y-auto px-2 py-3">
+        {!collapsed && !filter ? (
+          <SidebarSection
+            title="Favorites"
+            routes={favoritesRoutes.slice(0, 6)}
+            pathname={pathname}
+            collapsed={collapsed}
+            icon="star"
+            onNavigate={onNavigate}
+          />
+        ) : null}
+        {!collapsed && !filter ? (
+          <SidebarSection
+            title="Recently used"
+            routes={recentRoutes.slice(0, 4)}
+            pathname={pathname}
+            collapsed={collapsed}
+            onNavigate={onNavigate}
+          />
+        ) : null}
+        {Object.entries(groups).map(([title, routes]) => (
+          <SidebarSection
+            key={title}
+            title={title}
+            routes={routes}
+            pathname={pathname}
+            collapsed={collapsed}
+            onNavigate={onNavigate}
+          />
+        ))}
+      </div>
+    </>
+  );
+}
+
+function SidebarSection({
+  title,
+  routes,
+  pathname,
+  collapsed,
+  icon,
+  onNavigate,
+}: {
+  title: string;
+  routes: typeof routeItems;
+  pathname: string;
+  collapsed: boolean;
+  icon?: "star";
+  onNavigate?: () => void;
+}) {
+  if (!routes.length) return null;
+  return (
+    <div className="mb-3">
+      {!collapsed ? (
+        <div className="mb-1 flex items-center gap-1 px-2 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">
+          {icon === "star" ? (
+            <Star className="h-3 w-3 text-accent" />
+          ) : (
+            <ChevronDown className="h-3 w-3" />
+          )}
+          {title}
+        </div>
+      ) : null}
+      <div className="space-y-0.5">
+        {routes.map((route) => {
+          const Icon = route.icon;
+          const active =
+            pathname === route.path ||
+            (route.path !== "/dashboard" && pathname.startsWith(`${route.path}/`));
+          return (
+            <Link
+              key={`${title}-${route.path}`}
+              href={route.path}
+              title={collapsed ? route.label : undefined}
+              onClick={onNavigate}
+              className={cn(
+                "focus-ring group relative flex items-center gap-2.5 rounded-md px-2 py-2 text-sm text-muted-foreground transition-colors duration-150 hover:bg-muted/70 hover:text-foreground",
+                active &&
+                  "bg-primary/10 font-medium text-primary hover:bg-primary/15 hover:text-primary",
+                collapsed && "justify-center",
+              )}
+            >
+              {active ? (
+                <span
+                  className={cn(
+                    "absolute left-0 top-1/2 h-5 w-[3px] -translate-y-1/2 rounded-full bg-primary shadow-[0_0_8px_hsl(var(--primary)/0.7)]",
+                    collapsed && "left-0.5",
+                  )}
+                />
+              ) : null}
+              <Icon
+                className={cn(
+                  "h-4 w-4 shrink-0 transition-transform duration-150 group-hover:scale-110",
+                  active && "scale-105",
+                )}
+              />
+              {!collapsed ? <span className="truncate">{route.label}</span> : null}
+            </Link>
+          );
+        })}
+      </div>
+    </div>
+  );
+}