VIBN Frontend for Coolify deployment

components/sidebar/resizable-sidebar.tsx

@@ -0,0 +1,143 @@
+"use client";
+
+import { useState, useCallback, useEffect, useRef, type ReactNode } from "react";
+import { cn } from "@/lib/utils";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+interface ResizableSidebarProps {
+  children: ReactNode;
+  defaultWidth?: number;
+  minWidth?: number;
+  maxWidth?: number;
+}
+
+export function ResizableSidebar({
+  children,
+  defaultWidth = 250,
+  minWidth = 200,
+  maxWidth = 400,
+}: ResizableSidebarProps) {
+  const [width, setWidth] = useState(defaultWidth);
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  const [isResizing, setIsResizing] = useState(false);
+  const [showPeek, setShowPeek] = useState(false);
+  const sidebarRef = useRef<HTMLDivElement>(null);
+  const initialXRef = useRef<number>(0);
+  const initialWidthRef = useRef<number>(defaultWidth);
+
+  const startResizing = useCallback((e: React.MouseEvent) => {
+    setIsResizing(true);
+    initialXRef.current = e.clientX;
+    initialWidthRef.current = width;
+    e.preventDefault();
+  }, [width]);
+
+  const stopResizing = useCallback(() => {
+    setIsResizing(false);
+  }, []);
+
+  const resize = useCallback(
+    (e: MouseEvent) => {
+      if (isResizing) {
+        const deltaX = e.clientX - initialXRef.current;
+        const newWidth = initialWidthRef.current + deltaX;
+        const clampedWidth = Math.min(Math.max(newWidth, minWidth), maxWidth);
+        setWidth(clampedWidth);
+      }
+    },
+    [isResizing, minWidth, maxWidth]
+  );
+
+  useEffect(() => {
+    if (isResizing) {
+      window.addEventListener("mousemove", resize);
+      window.addEventListener("mouseup", stopResizing);
+      document.body.style.cursor = "col-resize";
+      document.body.style.userSelect = "none";
+    }
+
+    return () => {
+      window.removeEventListener("mousemove", resize);
+      window.removeEventListener("mouseup", stopResizing);
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+    };
+  }, [isResizing, resize, stopResizing]);
+
+  const handleMouseEnter = () => {
+    if (isCollapsed) {
+      setShowPeek(true);
+    }
+  };
+
+  const handleMouseLeave = () => {
+    if (isCollapsed) {
+      setTimeout(() => setShowPeek(false), 300);
+    }
+  };
+
+  return (
+    <>
+      {/* Peek trigger when collapsed */}
+      {isCollapsed && (
+        <div
+          className="absolute left-0 top-0 z-40 h-full w-2"
+          onMouseEnter={handleMouseEnter}
+        />
+      )}
+
+      <aside
+        ref={sidebarRef}
+        style={{ width: isCollapsed ? 0 : `${width}px` }}
+        className={cn(
+          "relative flex flex-col border-r bg-card transition-all duration-300",
+          isCollapsed && "w-0 overflow-hidden"
+        )}
+      >
+        {!isCollapsed && children}
+
+        {/* Resize Handle */}
+        {!isCollapsed && (
+          <div
+            onMouseDown={startResizing}
+            className={cn(
+              "absolute right-0 top-0 h-full w-1 cursor-col-resize transition-colors hover:bg-primary/20",
+              isResizing && "bg-primary/40"
+            )}
+          />
+        )}
+
+        {/* Collapse/Expand Button */}
+        <Button
+          variant="outline"
+          size="icon"
+          onClick={() => setIsCollapsed(!isCollapsed)}
+          className={cn(
+            "absolute -right-3 top-4 z-10 h-6 w-6 rounded-full shadow-sm",
+            isCollapsed && "left-2"
+          )}
+        >
+          {isCollapsed ? (
+            <ChevronRight className="h-4 w-4" />
+          ) : (
+            <ChevronLeft className="h-4 w-4" />
+          )}
+        </Button>
+      </aside>
+
+      {/* Peek Sidebar (when collapsed) */}
+      {isCollapsed && showPeek && (
+        <div
+          className="absolute left-0 top-0 z-30 h-full w-64 border-r bg-card shadow-lg"
+          style={{ width: `${defaultWidth}px` }}
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+        >
+          {children}
+        </div>
+      )}
+    </>
+  );
+}
+