Remove react-resizable (#182)

* Use react-resizable-panel on RequestorPage

And also:
* tweak the mobile layout
* make the AiTestGenerationPanel resizable

* Set autoSaveId so the panel layout is saved

in localstorage

* Fix build

* Cleanup

* Also migrate routes panel to react-resizable-panel

 Please enter the commit message for your changes. Lines starting

* Cleanup

* Remove react-resizable

* Remove commented out code

* Fix build

* Remove import of react-resizable css

* Increase minimum size for RequestPanel

* Feedback on PR

* Remove line

* Add missing dependency for effect

frontend/package.json

@@ -57,7 +57,6 @@
     "react-highlight-words": "^0.20.0",
     "react-hook-form": "^7.52.0",
     "react-hotkeys-hook": "^4.5.0",
-    "react-resizable": "^3.0.5",
     "react-resizable-panels": "^2.0.23",
     "react-router-dom": "^6.23.1",
     "react-use-websocket": "^4.8.1",

frontend/src/components/ui/resizable/index.ts

@@ -0,0 +1,6 @@
+export {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "./components";
+export { usePanelConstraints } from "./usePanelConstraints";

frontend/src/components/ui/resizable/usePanelConstraints.ts

@@ -0,0 +1,94 @@
+import { useHandler } from "@fiberplane/hooks";
+import { useLayoutEffect, useState } from "react";
+import { getPanelGroupElement } from "react-resizable-panels";
+
+type PanelConstraintOptions = {
+  groupId: string;
+  minPixelSize?: number;
+  maxPixelSize?: number;
+  /**
+   * The initial estimated size of the panel in pixels.
+   */
+  initialGroupSize: number;
+  /**
+   * The minimum size of the panel in pixels. If the panel is
+   * not big enough, there won't be any min/max value applied.
+   */
+  minimalGroupSize?: number;
+};
+
+type SizeConstraint = {
+  /* Size in percentages. If set to undefined, the panel group wasn't big engouh */
+  minSize?: number;
+  maxSize?: number;
+};
+
+/**
+ * This function determines the min/max size of a panel group based on the
+ * initial size of the panel group and the min/max pixel size for a panel
+ *
+ * Note: it is assumed the panel is a horizontal panel group
+ */
+export function usePanelConstraints(
+  options: PanelConstraintOptions,
+): SizeConstraint {
+  const {
+    groupId,
+    initialGroupSize,
+    maxPixelSize,
+    minPixelSize,
+    minimalGroupSize,
+  } = options;
+
+  const getConstraint = useHandler((size: number) => {
+    if (minimalGroupSize && size < minimalGroupSize) {
+      return {};
+    }
+    const minSize = minPixelSize ? (minPixelSize / size) * 100 : undefined;
+    const maxSize = maxPixelSize ? (maxPixelSize / size) * 100 : maxPixelSize;
+
+    return {
+      minSize,
+      maxSize,
+    };
+  });
+
+  const [current, setCurrent] = useState(() => getConstraint(initialGroupSize));
+
+  const updateCurrent = useHandler((size: number) => {
+    const result = getConstraint(size);
+    if (
+      result.minSize !== current.minSize ||
+      result.maxSize !== current.maxSize
+    ) {
+      setCurrent(result);
+    }
+  });
+
+  useLayoutEffect(() => {
+    const group = getPanelGroupElement(groupId);
+    if (!group) {
+      return;
+    }
+
+    if (!group) {
+      console.warn("Unable to find the group");
+      return;
+    }
+
+    const observer = new ResizeObserver((entries) => {
+      const width = entries[0].contentRect.width;
+      updateCurrent(width);
+    });
+    observer.observe(group);
+
+    // Trigger the initial update
+    updateCurrent(group.offsetWidth);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [groupId, updateCurrent]);
+
+  return current;
+}

frontend/src/hooks/useIsSmScreen.ts

@@ -6,5 +6,5 @@ import { useMedia } from "@fiberplane/hooks";
  * IMPROVE - Use css variable instead of hardcoded 640px?
  */
 export function useIsSmScreen() {
-  return useMedia("(min-width: 640px)");
+  return useMedia("(max-width: 640px)");
 }

frontend/src/pages/RequestorPage/RequestPanel/RequestPanel.tsx

@@ -1,18 +1,14 @@
 import { Button } from "@/components/ui/button";
 import { Tabs } from "@/components/ui/tabs";
 import { useToast } from "@/components/ui/use-toast";
-import { useIsSmScreen } from "@/hooks";
 import { cn } from "@/utils";
 import { EraserIcon, InfoCircledIcon } from "@radix-ui/react-icons";
 import { Dispatch, SetStateAction } from "react";
-import { Resizable } from "react-resizable";
 import { CodeMirrorJsonEditor } from "../Editors";
 import { FormDataForm } from "../FormDataForm";
 import { KeyValueForm, KeyValueParameter } from "../KeyValueForm";
-import { ResizableHandle } from "../Resizable";
 import { CustomTabTrigger, CustomTabsContent, CustomTabsList } from "../Tabs";
 import { AiTestingPersona } from "../ai";
-import { useResizableWidth, useStyleWidth } from "../hooks";
 import type {
   RequestBodyType,
   RequestorBody,
@@ -62,41 +58,6 @@ type RequestPanelProps = {
 };
 
 export function RequestPanel(props: RequestPanelProps) {
-  const shouldBeResizable = useIsSmScreen();
-
-  return shouldBeResizable ? (
-    <ResizableRequestMeta {...props} />
-  ) : (
-    <RequestMeta {...props} />
-  );
-}
-
-function ResizableRequestMeta(props: RequestPanelProps) {
-  // TODO - I tried setting the width based off of result of `useMedia` but I think something is wrong with that fiberplane hook,
-  //        since it was matching (min-width: 1024px) even on small screens, and setting the panel too wide by default for smaller devices...
-  const { width, handleResize } = useResizableWidth(320);
-  const styleWidth = useStyleWidth(width);
-  return (
-    <Resizable
-      className="min-w-[200px] overflow-hidden h-full"
-      width={width} // Initial width
-      axis="x" // Restrict resizing to the horizontal axis
-      onResize={handleResize}
-      resizeHandles={["e"]} // Limit resize handle to just the east (right) handle
-      handle={(_, ref) => (
-        // Render a custom handle component, so we can indicate "resizability"
-        // along the entire right side of the container
-        <ResizableHandle ref={ref} />
-      )}
-    >
-      <div style={styleWidth} className="min-w-[200px] border-r">
-        <RequestMeta {...props} />
-      </div>
-    </Resizable>
-  );
-}
-
-function RequestMeta(props: RequestPanelProps) {
   const {
     handleRequestBodyTypeChange,
     activeRequestsPanelTab,
@@ -137,9 +98,9 @@ function RequestMeta(props: RequestPanelProps) {
       value={activeRequestsPanelTab}
       onValueChange={setActiveRequestsPanelTab}
       className={cn(
-        "min-w-[200px] border-none sm:border-r",
+        "border-none sm:border-r",
         "grid grid-rows-[auto_1fr]",
-        "overflow-hidden h-full max-h-full",
+        "lg:overflow-hidden lg:h-full max-h-full",
       )}
     >
       <CustomTabsList>
@@ -375,10 +336,14 @@ export function PanelSectionHeader({
       {children}
 
       {handleClearData && (
-        <EraserIcon
+        <button
           className="h-3.5 w-3.5 cursor-pointer hover:text-white transition-color"
+          title="Clear data"
           onClick={handleClearData}
-        />
+          tabIndex={0}
+        >
+          <EraserIcon />
+        </button>
       )}
     </div>
   );