From afdd3496312d011d5d9b1023f14fb7f3ef9e7168 Mon Sep 17 00:00:00 2001
From: Marius Tarau <mariustarau@Mariuss-MacBook-Pro-2.local>
Date: Sun, 1 Mar 2026 03:52:43 +0200
Subject: [PATCH] feat: Visual CoPilot module + collapsible sidebar

- Add visual-copilot module (iframe embed, env: NEXT_PUBLIC_VIM_URL)
- Sidebar collapse to icon-only with localStorage persistence
- Tooltips on collapsed nav items
- Full-viewport layout for canvas routes (/visual-copilot)
- Register module in modules.ts + feature flag in flags.ts
---
 app_modules_overview.xlsx                     | Bin 0 -> 11334 bytes
 src/app/(modules)/visual-copilot/page.tsx     |   5 +
 src/config/flags.ts                           |   8 +
 src/config/modules.ts                         |   6 +-
 .../components/visual-copilot-module.tsx      |  62 +++++
 src/modules/visual-copilot/config.ts          |  18 ++
 src/modules/visual-copilot/index.ts           |   2 +
 src/shared/components/layout/app-shell.tsx    |  48 +++-
 src/shared/components/layout/sidebar.tsx      | 222 +++++++++++++-----
 9 files changed, 297 insertions(+), 74 deletions(-)
 create mode 100644 app_modules_overview.xlsx
 create mode 100644 src/app/(modules)/visual-copilot/page.tsx
 create mode 100644 src/modules/visual-copilot/components/visual-copilot-module.tsx
 create mode 100644 src/modules/visual-copilot/config.ts
 create mode 100644 src/modules/visual-copilot/index.ts

diff --git a/app_modules_overview.xlsx b/app_modules_overview.xlsx
new file mode 100644
index 0000000000000000000000000000000000000000..e62f247d6727f9b928b22baa12dbddc0c38c7691
GIT binary patch
literal 11334
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

literal 0
HcmV?d00001

diff --git a/src/app/(modules)/visual-copilot/page.tsx b/src/app/(modules)/visual-copilot/page.tsx
new file mode 100644
index 0000000..2a675a9
--- /dev/null
+++ b/src/app/(modules)/visual-copilot/page.tsx
@@ -0,0 +1,5 @@
+import { VisualCopilotModule } from "@/modules/visual-copilot";
+
+export default function VisualCopilotPage() {
+  return <VisualCopilotModule />;
+}
diff --git a/src/config/flags.ts b/src/config/flags.ts
index 4ae16fd..faf580c 100644
--- a/src/config/flags.ts
+++ b/src/config/flags.ts
@@ -98,6 +98,14 @@ export const DEFAULT_FLAGS: FeatureFlag[] = [
     category: "module",
     overridable: true,
   },
+  {
+    key: "module.visual-copilot",
+    enabled: true,
+    label: "Visual CoPilot",
+    description: "Canvas AI pentru vizualizare arhitecturală",
+    category: "module",
+    overridable: true,
+  },
   {
     key: "module.hot-desk",
     enabled: true,
diff --git a/src/config/modules.ts b/src/config/modules.ts
index 9ec3a4c..e9cd504 100644
--- a/src/config/modules.ts
+++ b/src/config/modules.ts
@@ -14,6 +14,7 @@ import { tagManagerConfig } from "@/modules/tag-manager/config";
 import { miniUtilitiesConfig } from "@/modules/mini-utilities/config";
 import { aiChatConfig } from "@/modules/ai-chat/config";
 import { hotDeskConfig } from "@/modules/hot-desk/config";
+import { visualCopilotConfig } from "@/modules/visual-copilot/config";
 
 /**
  * Toate configurările modulelor ArchiTools, ordonate după navOrder.
@@ -31,8 +32,9 @@ export const MODULE_CONFIGS: ModuleConfig[] = [
   hotDeskConfig, // navOrder: 33  | management
   tagManagerConfig, // navOrder: 40  | tools
   miniUtilitiesConfig, // navOrder: 41  | tools
-  promptGeneratorConfig, // navOrder: 50  | ai
-  aiChatConfig, // navOrder: 51  | ai
+  promptGeneratorConfig,  // navOrder: 50  | ai
+  aiChatConfig,           // navOrder: 51  | ai
+  visualCopilotConfig,    // navOrder: 52  | ai
 ];
 
 // Înregistrare automată a tuturor modulelor în registru
diff --git a/src/modules/visual-copilot/components/visual-copilot-module.tsx b/src/modules/visual-copilot/components/visual-copilot-module.tsx
new file mode 100644
index 0000000..68f5d3c
--- /dev/null
+++ b/src/modules/visual-copilot/components/visual-copilot-module.tsx
@@ -0,0 +1,62 @@
+"use client";
+
+import { ExternalLink, AlertTriangle, Maximize2 } from "lucide-react";
+import { useState } from "react";
+
+const VIM_URL = process.env.NEXT_PUBLIC_VIM_URL ?? "";
+
+export function VisualCopilotModule() {
+  const [isFullscreen, setIsFullscreen] = useState(false);
+
+  if (!VIM_URL) {
+    return (
+      <div className="flex h-full flex-col items-center justify-center gap-4 text-muted-foreground">
+        <AlertTriangle className="h-8 w-8 text-amber-500" />
+        <div className="text-center">
+          <p className="text-sm font-medium text-foreground">
+            Visual CoPilot nu este configurat
+          </p>
+          <p className="mt-1 text-xs">
+            Setează{" "}
+            <code className="rounded bg-muted px-1 py-0.5 text-xs">
+              NEXT_PUBLIC_VIM_URL
+            </code>{" "}
+            în fișierul .env
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="relative h-full w-full">
+      <iframe
+        src={VIM_URL}
+        className="h-full w-full border-0"
+        title="Visual CoPilot"
+        allow="fullscreen"
+      />
+
+      {/* Floating action bar */}
+      <div className="absolute bottom-4 right-4 flex items-center gap-1.5">
+        <button
+          onClick={() => setIsFullscreen(!isFullscreen)}
+          className="flex items-center gap-1.5 rounded-md bg-background/80 px-2 py-1.5 text-xs text-muted-foreground backdrop-blur transition-colors hover:text-foreground"
+          title="Deschide fullscreen"
+        >
+          <Maximize2 className="h-3 w-3" />
+        </button>
+        <a
+          href={VIM_URL}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="flex items-center gap-1.5 rounded-md bg-background/80 px-2 py-1.5 text-xs text-muted-foreground backdrop-blur transition-colors hover:text-foreground"
+          title="Deschide în tab nou"
+        >
+          <ExternalLink className="h-3 w-3" />
+          Tab nou
+        </a>
+      </div>
+    </div>
+  );
+}
diff --git a/src/modules/visual-copilot/config.ts b/src/modules/visual-copilot/config.ts
new file mode 100644
index 0000000..d45bdb9
--- /dev/null
+++ b/src/modules/visual-copilot/config.ts
@@ -0,0 +1,18 @@
+import type { ModuleConfig } from "@/core/module-registry/types";
+
+export const visualCopilotConfig: ModuleConfig = {
+  id: "visual-copilot",
+  name: "Visual CoPilot",
+  description:
+    "Canvas AI pentru vizualizare arhitecturală — generare imagini cu noduri conectate",
+  icon: "image",
+  route: "/visual-copilot",
+  category: "ai",
+  featureFlag: "module.visual-copilot",
+  visibility: "all",
+  version: "0.1.0",
+  dependencies: [],
+  storageNamespace: "visual-copilot",
+  navOrder: 52,
+  tags: ["ai", "imagine", "canvas", "arhitectura", "generare", "flux"],
+};
diff --git a/src/modules/visual-copilot/index.ts b/src/modules/visual-copilot/index.ts
new file mode 100644
index 0000000..255ed06
--- /dev/null
+++ b/src/modules/visual-copilot/index.ts
@@ -0,0 +1,2 @@
+export { VisualCopilotModule } from "./components/visual-copilot-module";
+export { visualCopilotConfig } from "./config";
diff --git a/src/shared/components/layout/app-shell.tsx b/src/shared/components/layout/app-shell.tsx
index e8feb12..9b36204 100644
--- a/src/shared/components/layout/app-shell.tsx
+++ b/src/shared/components/layout/app-shell.tsx
@@ -1,35 +1,69 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useEffect, useCallback } from 'react';
+import { usePathname } from 'next/navigation';
 import { Sidebar } from './sidebar';
 import { Header } from './header';
 import { Sheet, SheetContent } from '@/shared/components/ui/sheet';
+import { cn } from '@/shared/lib/utils';
+
+const SIDEBAR_COLLAPSED_KEY = 'sidebar:collapsed';
+
+// Routes that need full viewport height and no padding (canvas tools)
+const FULLSCREEN_ROUTES = ['/visual-copilot'];
 
 interface AppShellProps {
   children: React.ReactNode;
 }
 
 export function AppShell({ children }: AppShellProps) {
-  const [sidebarOpen, setSidebarOpen] = useState(false);
+  const pathname = usePathname();
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const [collapsed, setCollapsed] = useState(false);
+  const [mounted, setMounted] = useState(false);
+
+  // Read persisted state after mount (avoids SSR mismatch)
+  useEffect(() => {
+    const stored = localStorage.getItem(SIDEBAR_COLLAPSED_KEY);
+    if (stored === 'true') setCollapsed(true);
+    setMounted(true);
+  }, []);
+
+  const handleToggle = useCallback(() => {
+    setCollapsed((prev) => {
+      const next = !prev;
+      localStorage.setItem(SIDEBAR_COLLAPSED_KEY, String(next));
+      return next;
+    });
+  }, []);
+
+  const isFullscreen = FULLSCREEN_ROUTES.some((r) => pathname.startsWith(r));
 
   return (
     <div className="flex h-screen overflow-hidden bg-background">
       {/* Desktop sidebar */}
       <div className="hidden lg:block">
-        <Sidebar />
+        {mounted && (
+          <Sidebar collapsed={collapsed} onToggle={handleToggle} />
+        )}
       </div>
 
       {/* Mobile sidebar */}
-      <Sheet open={sidebarOpen} onOpenChange={setSidebarOpen}>
+      <Sheet open={mobileOpen} onOpenChange={setMobileOpen}>
         <SheetContent side="left" className="w-64 p-0">
-          <Sidebar />
+          <Sidebar collapsed={false} onToggle={() => setMobileOpen(false)} />
         </SheetContent>
       </Sheet>
 
       {/* Main area */}
       <div className="flex flex-1 flex-col overflow-hidden">
-        <Header onToggleSidebar={() => setSidebarOpen(true)} />
-        <main className="flex-1 overflow-y-auto p-6">
+        <Header onToggleSidebar={() => setMobileOpen(true)} />
+        <main
+          className={cn(
+            'flex-1 overflow-y-auto',
+            isFullscreen ? 'overflow-hidden p-0' : 'p-6',
+          )}
+        >
           {children}
         </main>
       </div>
diff --git a/src/shared/components/layout/sidebar.tsx b/src/shared/components/layout/sidebar.tsx
index 9830b7c..49f1473 100644
--- a/src/shared/components/layout/sidebar.tsx
+++ b/src/shared/components/layout/sidebar.tsx
@@ -6,6 +6,7 @@ import { usePathname } from "next/navigation";
 import { useMemo, useState, useCallback, useEffect } from "react";
 import { useTheme } from "next-themes";
 import * as Icons from "lucide-react";
+import { PanelLeftClose, PanelLeftOpen } from "lucide-react";
 import { buildNavigation } from "@/config/navigation";
 import { COMPANIES } from "@/config/companies";
 import { useFeatureFlag } from "@/core/feature-flags";
@@ -13,6 +14,14 @@ import { useAuth } from "@/core/auth/auth-provider";
 import { cn } from "@/shared/lib/utils";
 import { ScrollArea } from "@/shared/components/ui/scroll-area";
 import { Separator } from "@/shared/components/ui/separator";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/shared/components/ui/tooltip";
+
+const SIDEBAR_COLLAPSED_KEY = "sidebar:collapsed";
 
 function DynamicIcon({
   name,
@@ -37,6 +46,7 @@ function DynamicIcon({
 function NavItem({
   item,
   isActive,
+  collapsed,
 }: {
   item: {
     id: string;
@@ -46,20 +56,36 @@ function NavItem({
     featureFlag: string;
   };
   isActive: boolean;
+  collapsed: boolean;
 }) {
   const enabled = useFeatureFlag(item.featureFlag);
   if (!enabled) return null;
 
+  const linkClass = cn(
+    "flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors",
+    collapsed && "justify-center px-2",
+    isActive
+      ? "bg-accent text-accent-foreground font-medium"
+      : "text-muted-foreground hover:bg-accent/50 hover:text-accent-foreground",
+  );
+
+  if (collapsed) {
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Link href={item.href} className={linkClass}>
+            <DynamicIcon name={item.icon} className="h-4 w-4 shrink-0" />
+          </Link>
+        </TooltipTrigger>
+        <TooltipContent side="right">
+          <p>{item.label}</p>
+        </TooltipContent>
+      </Tooltip>
+    );
+  }
+
   return (
-    <Link
-      href={item.href}
-      className={cn(
-        "flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors",
-        isActive
-          ? "bg-accent text-accent-foreground font-medium"
-          : "text-muted-foreground hover:bg-accent/50 hover:text-accent-foreground",
-      )}
-    >
+    <Link href={item.href} className={linkClass}>
       <DynamicIcon name={item.icon} className="h-4 w-4 shrink-0" />
       <span className="truncate">{item.label}</span>
     </Link>
@@ -80,7 +106,6 @@ const COMPANY_GLOW: Record<string, string> = {
   "studii-de-teren": "hover:drop-shadow-[0_0_6px_#f59e0b]",
 };
 
-// Secret combo: click logos in order BTG → US → SDT to trigger confetti
 const SECRET_COMBO = ["beletage", "urban-switch", "studii-de-teren"];
 
 function SidebarLogos() {
@@ -94,14 +119,12 @@ function SidebarLogos() {
 
   const isDark = mounted ? resolvedTheme === "dark" : false;
 
-  // Reset combo after 3 seconds of inactivity
   useEffect(() => {
     if (comboProgress === 0) return;
     const timer = setTimeout(() => setComboProgress(0), 3000);
     return () => clearTimeout(timer);
   }, [comboProgress]);
 
-  // Hide confetti after 2 seconds
   useEffect(() => {
     if (!showConfetti) return;
     const timer = setTimeout(() => setShowConfetti(false), 2000);
@@ -113,11 +136,9 @@ function SidebarLogos() {
       e.preventDefault();
       e.stopPropagation();
 
-      // Trigger individual animation
       setAnimatingId(companyId);
       setTimeout(() => setAnimatingId(null), 500);
 
-      // Check secret combo
       if (SECRET_COMBO[comboProgress] === companyId) {
         const next = comboProgress + 1;
         if (next >= SECRET_COMBO.length) {
@@ -160,7 +181,6 @@ function SidebarLogos() {
             )}
             title={company.shortName}
           >
-            {/* Light variant — hidden in dark mode */}
             <Image
               src={lightSrc}
               alt={company.shortName}
@@ -172,7 +192,6 @@ function SidebarLogos() {
               )}
               suppressHydrationWarning
             />
-            {/* Dark variant — hidden in light mode */}
             <Image
               src={darkSrc ?? lightSrc}
               alt={company.shortName}
@@ -188,7 +207,6 @@ function SidebarLogos() {
         );
       })}
 
-      {/* Confetti burst on secret combo */}
       {showConfetti && (
         <div className="pointer-events-none absolute -bottom-6 left-1/2 -translate-x-1/2 z-50">
           <div className="flex gap-0.5 animate-[fadeIn_0.2s_ease-in]">
@@ -211,7 +229,12 @@ function SidebarLogos() {
   );
 }
 
-export function Sidebar() {
+interface SidebarProps {
+  collapsed: boolean;
+  onToggle: () => void;
+}
+
+export function Sidebar({ collapsed, onToggle }: SidebarProps) {
   const pathname = usePathname();
   const navGroups = useMemo(() => buildNavigation(), []);
   const { user } = useAuth();
@@ -224,55 +247,124 @@ export function Sidebar() {
   }, [user?.name]);
 
   return (
-    <aside className="flex h-full w-64 shrink-0 flex-col border-r bg-card">
-      <div className="border-b px-4 py-3">
-        <Link
-          href="/"
-          className="mb-2 flex w-full items-center justify-center"
-          title="Panou principal"
-        >
-          <SidebarLogos />
-        </Link>
-        <Link
-          href="/"
-          className="block text-center text-base font-semibold tracking-wide transition-colors hover:text-primary"
-          title="Panou principal"
-        >
-          {brandingLabel}
-        </Link>
-      </div>
-
-      <ScrollArea className="flex-1 px-3 py-3">
-        <Link
-          href="/"
-          className={cn(
-            "mb-1 flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors",
-            pathname === "/"
-              ? "bg-accent text-accent-foreground font-medium"
-              : "text-muted-foreground hover:bg-accent/50 hover:text-accent-foreground",
+    <TooltipProvider delayDuration={200}>
+      <aside
+        className={cn(
+          "flex h-full shrink-0 flex-col border-r bg-card transition-[width] duration-200",
+          collapsed ? "w-14" : "w-64",
+        )}
+      >
+        {/* Header */}
+        <div className={cn("border-b px-4 py-3", collapsed && "px-2")}>
+          {collapsed ? (
+            <div className="flex flex-col items-center gap-2">
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Link
+                    href="/"
+                    className="flex items-center justify-center rounded-md p-1 hover:bg-accent"
+                  >
+                    <Icons.Home className="h-5 w-5 text-primary" />
+                  </Link>
+                </TooltipTrigger>
+                <TooltipContent side="right">ArchiTools</TooltipContent>
+              </Tooltip>
+            </div>
+          ) : (
+            <>
+              <Link
+                href="/"
+                className="mb-2 flex w-full items-center justify-center"
+                title="Panou principal"
+              >
+                <SidebarLogos />
+              </Link>
+              <Link
+                href="/"
+                className="block text-center text-base font-semibold tracking-wide transition-colors hover:text-primary"
+                title="Panou principal"
+              >
+                {brandingLabel}
+              </Link>
+            </>
           )}
-        >
-          <Icons.Home className="h-4 w-4" />
-          <span>Panou principal</span>
-        </Link>
+        </div>
 
-        <Separator className="my-2" />
+        {/* Nav */}
+        <ScrollArea className={cn("flex-1 py-3", collapsed ? "px-1" : "px-3")}>
+          {/* Home link */}
+          {collapsed ? (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Link
+                  href="/"
+                  className={cn(
+                    "mb-1 flex items-center justify-center rounded-md px-2 py-2 text-sm transition-colors",
+                    pathname === "/"
+                      ? "bg-accent text-accent-foreground font-medium"
+                      : "text-muted-foreground hover:bg-accent/50 hover:text-accent-foreground",
+                  )}
+                >
+                  <Icons.LayoutDashboard className="h-4 w-4" />
+                </Link>
+              </TooltipTrigger>
+              <TooltipContent side="right">Panou principal</TooltipContent>
+            </Tooltip>
+          ) : (
+            <Link
+              href="/"
+              className={cn(
+                "mb-1 flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors",
+                pathname === "/"
+                  ? "bg-accent text-accent-foreground font-medium"
+                  : "text-muted-foreground hover:bg-accent/50 hover:text-accent-foreground",
+              )}
+            >
+              <Icons.LayoutDashboard className="h-4 w-4" />
+              <span>Panou principal</span>
+            </Link>
+          )}
 
-        {navGroups.map((group) => (
-          <div key={group.category} className="mb-3">
-            <p className="mb-1 px-3 text-xs font-medium uppercase tracking-wider text-muted-foreground/60">
-              {group.label}
-            </p>
-            {group.items.map((item) => (
-              <NavItem
-                key={item.id}
-                item={item}
-                isActive={pathname.startsWith(item.href)}
-              />
-            ))}
-          </div>
-        ))}
-      </ScrollArea>
-    </aside>
+          <Separator className="my-2" />
+
+          {navGroups.map((group) => (
+            <div key={group.category} className="mb-3">
+              {!collapsed && (
+                <p className="mb-1 px-3 text-xs font-medium uppercase tracking-wider text-muted-foreground/60">
+                  {group.label}
+                </p>
+              )}
+              {collapsed && <Separator className="my-1 opacity-30" />}
+              {group.items.map((item) => (
+                <NavItem
+                  key={item.id}
+                  item={item}
+                  isActive={pathname.startsWith(item.href)}
+                  collapsed={collapsed}
+                />
+              ))}
+            </div>
+          ))}
+        </ScrollArea>
+
+        {/* Collapse toggle button */}
+        <div className={cn("border-t p-2", collapsed && "flex justify-center")}>
+          <button
+            onClick={onToggle}
+            className="flex w-full items-center gap-2 rounded-md px-3 py-2 text-xs text-muted-foreground transition-colors hover:bg-accent/50 hover:text-accent-foreground"
+            title={collapsed ? "Extinde sidebar" : "Restrânge sidebar"}
+          >
+            {collapsed ? (
+              <PanelLeftOpen className="h-4 w-4 shrink-0" />
+            ) : (
+              <>
+                <PanelLeftClose className="h-4 w-4 shrink-0" />
+                <span>Restrânge</span>
+              </>
+            )}
+          </button>
+        </div>
+      </aside>
+    </TooltipProvider>
   );
 }