feat: fix panel persist over server rendering, etc

components/ui/code-editor.tsx

@@ -50,6 +50,7 @@ const CodeEditor = (props: Props) => {
             parser,
             plugins,
             cursorOffset: cursor,
+            printWidth: 64,
           }
         );
 

components/ui/dialog.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { X } from "lucide-react";

components/ui/dropdown-menu.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import * as React from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { Check, ChevronRight, Circle } from "lucide-react";

components/ui/resizable.tsx

@@ -1,24 +1,82 @@
-"use client";
-
 import { GripVertical } from "lucide-react";
+import { createContext, forwardRef, useContext } from "react";
 import * as ResizablePrimitive from "react-resizable-panels";
+import cookieJs from "cookiejs";
 
 import { cn } from "~/lib/utils";
+import { usePageContext } from "~/renderer/context";
+import { useDebounce } from "~/hooks/useDebounce";
+
+const ResizableContext = createContext<{ initialSize: number[] }>(null!);
 
 const ResizablePanelGroup = ({
   className,
+  autoSaveId,
+  direction,
   ...props
-}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
-  <ResizablePrimitive.PanelGroup
-    className={cn(
-      "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
-      className
-    )}
-    {...props}
-  />
-);
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => {
+  const { cookies } = usePageContext();
+  const [debouncePersistLayout] = useDebounce((sizes: number[]) => {
+    if (autoSaveId && typeof window !== "undefined") {
+      cookieJs.set(panelKey, JSON.stringify(sizes));
+    }
+  }, 500);
 
-const ResizablePanel = ResizablePrimitive.Panel;
+  const panelKey = ["panel", direction, autoSaveId].join(":");
+  let initialSize: number[] = [];
+
+  if (autoSaveId && cookies && cookies[panelKey]) {
+    initialSize = JSON.parse(cookies[panelKey]) || [];
+  }
+
+  const onLayout = (sizes: number[]) => {
+    if (props.onLayout) {
+      props.onLayout(sizes);
+    }
+    debouncePersistLayout(sizes);
+  };
+
+  return (
+    <ResizableContext.Provider value={{ initialSize }}>
+      <ResizablePrimitive.PanelGroup
+        className={cn(
+          "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+          className
+        )}
+        {...props}
+        direction={direction}
+        onLayout={onLayout}
+      />
+    </ResizableContext.Provider>
+  );
+};
+
+type ResizablePanelProps = React.ComponentProps<
+  typeof ResizablePrimitive.Panel
+> & {
+  panelId: number;
+};
+
+const ResizablePanel = forwardRef((props: ResizablePanelProps, ref: any) => {
+  const { panelId, defaultSize, ...restProps } = props;
+  const ctx = useContext(ResizableContext);
+  let initialSize = defaultSize;
+
+  if (panelId != null) {
+    const size = ctx?.initialSize[panelId];
+    if (size != null) {
+      initialSize = size;
+    }
+  }
+
+  return (
+    <ResizablePrimitive.Panel
+      ref={ref}
+      defaultSize={initialSize}
+      {...restProps}
+    />
+  );
+});
 
 const ResizableHandle = ({
   withHandle,