Code panel skeleton

package.json

@@ -19,6 +19,7 @@
     "next": "14.2.6",
     "react": "^18",
     "react-dom": "^18",
+    "react-resizable-panels": "^2.1.1",
     "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7",
     "use-debounce": "^10.0.3"

src/app/page.tsx

@@ -9,6 +9,12 @@ import { Separator } from "@/components/ui/separator"
 import { useRouter } from "next/navigation";
 import { useNonEmptyQueryParam } from "@/hooks/useNonEmptyQueryParam";
 import { SymbolIcon } from "@radix-ui/react-icons";
+import { ScrollArea, Scrollbar } from "@radix-ui/react-scroll-area";
+import {
+    ResizableHandle,
+    ResizablePanel,
+    ResizablePanelGroup,
+  } from "@/components/ui/resizable"
 
 interface ZoekMatch {
     URL: string,
@@ -58,7 +64,7 @@ export default function Home() {
     // Currently we do not re-query.
 
     return (
-        <main className="flex flex-col">
+        <main className="max-h-screen">
             <div className="sticky top-0 left-0 right-0 bg-white z-10">
                 <div className="flex flex-row p-1 gap-4 items-center">
                     <Image
@@ -90,11 +96,22 @@ export default function Home() {
                 </div>
                 <Separator />
             </div>
-            <div className="flex flex-col gap-2">
+            <ResizablePanelGroup direction="horizontal">
-                {fileMatches.map((match, index) => (
+                <ResizablePanel>
-                    <FileMatch key={index} match={match} />
+                    <ScrollArea type="scroll">
-                ))}
+                        <div className="flex flex-col gap-2">
-            </div>
+                            {fileMatches.map((match, index) => (
+                                <FileMatch key={index} match={match} />
+                            ))}
+                        </div>
+                        <Scrollbar orientation="vertical" />
+                    </ScrollArea>
+                </ResizablePanel>
+                <ResizableHandle />
+                <ResizablePanel>
+                    <p>CODE EDITOR</p>
+                </ResizablePanel>
+            </ResizablePanelGroup>
         </main>
     );
 }

src/components/ui/resizable.tsx

@@ -0,0 +1,45 @@
+"use client"
+
+import { GripVertical } from "lucide-react"
+import * as ResizablePrimitive from "react-resizable-panels"
+
+import { cn } from "@/lib/utils"
+
+const ResizablePanelGroup = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
+  <ResizablePrimitive.PanelGroup
+    className={cn(
+      "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+      className
+    )}
+    {...props}
+  />
+)
+
+const ResizablePanel = ResizablePrimitive.Panel
+
+const ResizableHandle = ({
+  withHandle,
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+  withHandle?: boolean
+}) => (
+  <ResizablePrimitive.PanelResizeHandle
+    className={cn(
+      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 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-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+      className
+    )}
+    {...props}
+  >
+    {withHandle && (
+      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
+        <GripVertical className="h-2.5 w-2.5" />
+      </div>
+    )}
+  </ResizablePrimitive.PanelResizeHandle>
+)
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle }

yarn.lock

@@ -2244,6 +2244,11 @@ react-is@^16.13.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-resizable-panels@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/react-resizable-panels/-/react-resizable-panels-2.1.1.tgz#efcf4ee0d7b45d9617db2f2e3de1ca04589e6b7f"
+  integrity sha512-+cUV/yZBYfiBj+WJtpWDJ3NtR4zgDZfHt3+xtaETKE+FCvp+RK/NJxacDQKxMHgRUTSkfA6AnGljQ5QZNsCQoA==
+
 react@^18:
   version "18.3.1"
   resolved "https://registry.yarnpkg.com/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891"