Resizable panels component

bun.lock

@@ -49,6 +49,7 @@
         "lucide-react": "^0.561.0",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
+        "react-resizable-panels": "^4.0.15",
         "react-router-dom": "^7.10.1",
         "tailwind-merge": "^3.4.0",
         "tailwindcss": "^4.1.18",
@@ -586,6 +587,8 @@
 
     "react-remove-scroll-bar": ["react-remove-scroll-bar@2.3.8", "", { "dependencies": { "react-style-singleton": "^2.2.2", "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q=="],
 
+    "react-resizable-panels": ["react-resizable-panels@4.0.15", "", { "peerDependencies": { "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" } }, "sha512-+ygM/EI2h4Qc/cl2fasQ2qwOgNfpQwXLNTU5PqhhPerliX+wnbf7ejcqran7lz3BqABzjddf0pJ3j3G/+A0v9Q=="],
+
     "react-router": ["react-router@7.10.1", "", { "dependencies": { "cookie": "1.1.1", "set-cookie-parser": "2.7.2" }, "optionalDependencies": { "react-dom": "19.2.3" }, "peerDependencies": { "react": "19.2.3" } }, "sha512-gHL89dRa3kwlUYtRQ+m8NmxGI6CgqN+k4XyGjwcFoQwwCWF6xXpOCUlDovkXClS0d0XJN/5q7kc5W3kiFEd0Yw=="],
 
     "react-router-dom": ["react-router-dom@7.10.1", "", { "dependencies": { "react-router": "7.10.1" }, "peerDependencies": { "react": "19.2.3", "react-dom": "19.2.3" } }, "sha512-JNBANI6ChGVjA5bwsUIwJk7LHKmqB4JYnYfzFwyp2t12Izva11elds2jx7Yfoup2zssedntwU0oZ5DEmk5Sdaw=="],

packages/frontend/package.json

@@ -22,6 +22,7 @@
         "lucide-react": "^0.561.0",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
+        "react-resizable-panels": "^4.0.15",
         "react-router-dom": "^7.10.1",
         "tailwind-merge": "^3.4.0",
         "tailwindcss": "^4.1.18"

packages/frontend/src/components/ui/resizable.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { GripVerticalIcon } from "lucide-react";
+import type * as React from "react";
+import { Group, Panel, Separator } from "react-resizable-panels";
+
+import { cn } from "@/lib/utils";
+
+function ResizablePanelGroup({ className, ...props }: React.ComponentProps<typeof Group>) {
+    return (
+        <Group
+            data-slot="resizable-panel-group"
+            className={cn("flex h-full w-full data-[panel-group-direction=vertical]:flex-col", className)}
+            {...props}
+        />
+    );
+}
+
+function ResizablePanel({ ...props }: React.ComponentProps<typeof Panel>) {
+    return <Panel data-slot="resizable-panel" {...props} />;
+}
+
+function ResizableSeparator({
+    withHandle,
+    className,
+    ...props
+}: React.ComponentProps<typeof Separator> & {
+    withHandle?: boolean;
+}) {
+    return (
+        <Separator
+            data-slot="resizable-handle"
+            className={cn(
+                "relative flex w-1 items-center justify-center",
+                "after:absolute after:inset-y-0 after:left-1/2",
+                "after:w-1 after:-translate-x-1/2 focus-visible:ring-0",
+                "focus-visible:ring-offset-0 focus-visible:outline-hidden",
+                "data-[panel-group-direction=vertical]:h-px",
+                "data-[panel-group-direction=vertical]:w-full",
+                "data-[panel-group-direction=vertical]:after:left-0",
+                "data-[panel-group-direction=vertical]:after:h-1",
+                "data-[panel-group-direction=vertical]:after:w-full",
+                "data-[panel-group-direction=vertical]:after:translate-x-0",
+                "data-[panel-group-direction=vertical]:after:-translate-y-1/2",
+                "[&[data-panel-group-direction=vertical]>div]:rotate-90",
+                className,
+            )}
+            {...props}
+        >
+            {withHandle && (
+                <div className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
+                    <GripVerticalIcon className="size-2.5" />
+                </div>
+            )}
+        </Separator>
+    );
+}
+
+export { ResizablePanelGroup, ResizablePanel, ResizableSeparator };