style: adds left handle & style fixes for resizable component (#4745)

## 📝 Summary

<!--
Provide a concise summary of what this pull request is addressing.

If this PR fixes any issues, list them here by number (e.g., Fixes
#123).
-->
- Allows a left handle (which will be used in the future for sidebar)
- Makes the column drag handle slightly thinner
- Prevents element selection underneath (importantt)

## 🔍 Description of Changes

<!--
Detail the specific changes made in this pull request. Explain the
problem addressed and how it was resolved. If applicable, provide before
and after comparisons, screenshots, or any relevant details to help
reviewers understand the changes easily.
-->

## 📋 Checklist

- [X] I have read the [contributor
guidelines](https://github.com/marimo-team/marimo/blob/main/CONTRIBUTING.md).
- [ ] For large changes, or changes that affect the public API: this
change was discussed or approved through an issue, on
[Discord](https://marimo.io/discord?ref=pr), or the community
[discussions](https://github.com/marimo-team/marimo/discussions) (Please
provide a link if applicable).
- [X] I have added tests for the changes made.
- [X] I have run the code and verified that it works as expected.

## 📜 Reviewers

<!--
Tag potential reviewers from the community or maintainers who might be
interested in reviewing this pull request.

Your PR will be reviewed more quickly if you can figure out the right
person to tag with @ -->

@mscolnick

Author: Light2Dark

frontend/src/components/editor/columns/__tests__/storage.test.ts

@@ -2,20 +2,20 @@
 import { describe, it, expect, afterEach } from "vitest";
 import { reorderColumnSizes, storageFn } from "../storage";
 
-describe("setColumnWidth", () => {
-  const { clearStorage, getColumnWidth, setColumnWidth } = storageFn;
+describe("Column width storage", () => {
+  const { clearStorage, getColumnWidth, saveColumnWidth } = storageFn;
 
   afterEach(() => {
     clearStorage();
   });
 
   it("should set width for an existing index", () => {
     // Setup initial state
-    setColumnWidth(0, 100);
-    setColumnWidth(1, 200);
+    saveColumnWidth(0, 100);
+    saveColumnWidth(1, 200);
 
     // Test
-    setColumnWidth(0, 150);
+    saveColumnWidth(0, 150);
 
     // Verify
     expect(getColumnWidth(0)).toBe(150);
@@ -24,10 +24,10 @@ describe("setColumnWidth", () => {
 
   it("should set width for a new index", () => {
     // Setup initial state
-    setColumnWidth(0, 100);
+    saveColumnWidth(0, 100);
 
     // Test
-    setColumnWidth(1, 200);
+    saveColumnWidth(1, 200);
 
     // Verify
     expect(getColumnWidth(0)).toBe(100);
@@ -36,10 +36,10 @@ describe("setColumnWidth", () => {
 
   it("should pad with contentWidth when setting width for out of bounds index", () => {
     // Setup initial state
-    setColumnWidth(0, 100);
+    saveColumnWidth(0, 100);
 
     // Test
-    setColumnWidth(3, 300);
+    saveColumnWidth(3, 300);
 
     // Verify
     expect(getColumnWidth(0)).toBe(100);
@@ -50,7 +50,7 @@ describe("setColumnWidth", () => {
 
   it("should handle empty initial state", () => {
     // Test
-    setColumnWidth(2, 200);
+    saveColumnWidth(2, 200);
 
     // Verify
     expect(getColumnWidth(0)).toBe("contentWidth");
@@ -60,13 +60,13 @@ describe("setColumnWidth", () => {
 
   it("should update multiple columns", () => {
     // Setup initial state
-    setColumnWidth(0, 100);
-    setColumnWidth(1, 200);
-    setColumnWidth(2, 300);
+    saveColumnWidth(0, 100);
+    saveColumnWidth(1, 200);
+    saveColumnWidth(2, 300);
 
     // Test
-    setColumnWidth(0, 150);
-    setColumnWidth(2, 350);
+    saveColumnWidth(0, 150);
+    saveColumnWidth(2, 350);
 
     // Verify
     expect(getColumnWidth(0)).toBe(150);
@@ -76,11 +76,11 @@ describe("setColumnWidth", () => {
 
   it("should set contentWidth directly", () => {
     // Setup initial state
-    setColumnWidth(0, 100);
-    setColumnWidth(1, 200);
+    saveColumnWidth(0, 100);
+    saveColumnWidth(1, 200);
 
     // Test
-    setColumnWidth(0, "contentWidth");
+    saveColumnWidth(0, "contentWidth");
 
     // Verify
     expect(getColumnWidth(0)).toBe("contentWidth");
@@ -89,9 +89,9 @@ describe("setColumnWidth", () => {
 
   it("should maintain correct widths after reordering", () => {
     // Setup initial state with 3 columns
-    setColumnWidth(0, 100);
-    setColumnWidth(1, 200);
-    setColumnWidth(2, 300);
+    saveColumnWidth(0, 100);
+    saveColumnWidth(1, 200);
+    saveColumnWidth(2, 300);
 
     // Reorder column 0 to position 2
     reorderColumnSizes(0, 2);

frontend/src/components/editor/columns/cell-column.tsx

@@ -18,7 +18,7 @@ interface Props {
   canMoveRight: boolean;
 }
 
-const { getColumnWidth, setColumnWidth } = storageFn;
+const { getColumnWidth, saveColumnWidth } = storageFn;
 
 export const Column = memo((props: Props) => {
   const columnRef = useRef<HTMLDivElement>(null);
@@ -28,7 +28,7 @@ export const Column = memo((props: Props) => {
       <ResizableComponent
         startingWidth={getColumnWidth(props.index)}
         onResize={(width: number) => {
-          setColumnWidth(props.index, width);
+          saveColumnWidth(props.index, width);
         }}
       >
         {props.children}
@@ -78,6 +78,7 @@ const ResizableComponent = ({
   const { resizableDivRef, handleRef, style } = useResizeHandle({
     startingWidth,
     onResize,
+    direction: "right",
   });
 
   return (
@@ -91,7 +92,7 @@ const ResizableComponent = ({
       </div>
       <div
         ref={handleRef}
-        className="w-1 cursor-col-resize transition-colors duration-200 z-10
+        className="w-[3px] cursor-col-resize transition-colors duration-200 z-10
         group-hover/column:bg-[var(--slate-3)] dark:group-hover/column:bg-[var(--slate-5)]
         group-hover/column:hover:bg-primary/60 dark:group-hover/column:hover:bg-primary/60"
       />

frontend/src/components/editor/columns/storage.ts

@@ -27,7 +27,7 @@ export const storageFn = {
     const widths = storage.get().widths;
     return widths[index] ?? "contentWidth";
   },
-  setColumnWidth: (index: number, width: number | "contentWidth") => {
+  saveColumnWidth: (index: number, width: number | "contentWidth") => {
     const widths = storage.get().widths;
     if (widths[index]) {
       widths[index] = width;

frontend/src/hooks/__tests__/useResizeHandle.test.tsx

@@ -1,12 +1,16 @@
 /* Copyright 2024 Marimo. All rights reserved. */
-import { renderHook, act } from "@testing-library/react";
+import { renderHook, act, render } from "@testing-library/react";
 import { useResizeHandle } from "../useResizeHandle";
 import { describe, it, expect, vi } from "vitest";
 
 describe("useResizeHandle", () => {
   it("should initialize with correct refs and style", () => {
     const { result } = renderHook(() =>
-      useResizeHandle({ startingWidth: 500, onResize: vi.fn() }),
+      useResizeHandle({
+        startingWidth: 500,
+        onResize: vi.fn(),
+        direction: "right",
+      }),
     );
 
     expect(result.current.resizableDivRef.current).toBeNull();
@@ -16,32 +20,47 @@ describe("useResizeHandle", () => {
 
   it("should handle contentWidth starting width", () => {
     const { result } = renderHook(() =>
-      useResizeHandle({ startingWidth: "contentWidth", onResize: vi.fn() }),
+      useResizeHandle({
+        startingWidth: "contentWidth",
+        onResize: vi.fn(),
+        direction: "right",
+      }),
     );
 
     expect(result.current.style).toEqual({ width: "contentWidth" });
   });
 
-  it.skip("should call onResize when resizing ends", () => {
+  it("should call onResize when resizing ends", () => {
     const onResize = vi.fn();
-    const { result } = renderHook(() =>
-      useResizeHandle({ startingWidth: 500, onResize }),
-    );
 
-    // Mock DOM elements
-    const mockDiv = document.createElement("div");
-    mockDiv.style.width = "500px";
-    // @ts-expect-error - we're testing the ref
-    result.current.resizableDivRef.current = mockDiv;
+    // Create a test component that uses the hook
+    const TestComponent = () => {
+      const { resizableDivRef, handleRef } = useResizeHandle({
+        startingWidth: 500,
+        onResize,
+        direction: "right",
+      });
+
+      return (
+        <div>
+          <div
+            ref={resizableDivRef}
+            style={{ width: "500px" }}
+            data-testid="resizable-div"
+          />
+          <div ref={handleRef} data-testid="handle" />
+        </div>
+      );
+    };
 
-    const mockHandle = document.createElement("div");
-    // @ts-expect-error - we're testing the ref
-    result.current.handleRef.current = mockHandle;
+    const { getByTestId } = render(<TestComponent />);
+    const resizableDiv = getByTestId("resizable-div") as HTMLDivElement;
+    const handle = getByTestId("handle") as HTMLDivElement;
 
     // Simulate resize
     act(() => {
       const mousedownEvent = new MouseEvent("mousedown", { clientX: 0 });
-      mockHandle.dispatchEvent(mousedownEvent);
+      handle.dispatchEvent(mousedownEvent);
 
       const mousemoveEvent = new MouseEvent("mousemove", { clientX: 100 });
       document.dispatchEvent(mousemoveEvent);
@@ -50,6 +69,51 @@ describe("useResizeHandle", () => {
       document.dispatchEvent(mouseupEvent);
     });
 
-    expect(onResize).toHaveBeenCalledWith(600); // 500px + 100px movement
+    expect(resizableDiv.style.width).toBe("600px"); // 500px + 100px movement
+    expect(onResize).toHaveBeenCalledWith(600);
+  });
+
+  it("should handle left direction resizing", () => {
+    const onResize = vi.fn();
+
+    // Create a test component that uses the hook
+    const TestComponent = () => {
+      const { resizableDivRef, handleRef } = useResizeHandle({
+        startingWidth: 500,
+        onResize,
+        direction: "left",
+      });
+
+      return (
+        <div>
+          <div
+            ref={resizableDivRef}
+            style={{ width: "500px" }}
+            data-testid="resizable-div"
+          />
+          <div ref={handleRef} data-testid="handle" />
+        </div>
+      );
+    };
+
+    const { getByTestId } = render(<TestComponent />);
+
+    const resizableDiv = getByTestId("resizable-div") as HTMLDivElement;
+    const handle = getByTestId("handle") as HTMLDivElement;
+
+    // Simulate resize
+    act(() => {
+      const mousedownEvent = new MouseEvent("mousedown", { clientX: 0 });
+      handle.dispatchEvent(mousedownEvent);
+
+      const mousemoveEvent = new MouseEvent("mousemove", { clientX: -100 });
+      document.dispatchEvent(mousemoveEvent);
+
+      const mouseupEvent = new MouseEvent("mouseup");
+      document.dispatchEvent(mouseupEvent);
+    });
+
+    expect(resizableDiv.style.width).toBe("600px"); // 500px - (-100px) movement
+    expect(onResize).toHaveBeenCalledWith(600);
   });
 });

frontend/src/hooks/useResizeHandle.ts

@@ -4,11 +4,13 @@ import { useEffect, useRef } from "react";
 interface UseResizeHandleProps {
   onResize?: (width: number) => void;
   startingWidth: number | "contentWidth";
+  direction: "left" | "right";
 }
 
 export const useResizeHandle = ({
   onResize,
   startingWidth,
+  direction,
 }: UseResizeHandleProps) => {
   const resizableDivRef = useRef<HTMLDivElement>(null);
   const handleRef = useRef<HTMLDivElement>(null);
@@ -31,7 +33,8 @@ export const useResizeHandle = ({
       }
       const dx = e.clientX - lastX;
       lastX = e.clientX;
-      width += dx;
+      // dx is negative when moving left
+      width = direction === "left" ? width - dx : width + dx;
       resizableDiv.style.width = `${width}px`;
     };
 
@@ -45,6 +48,7 @@ export const useResizeHandle = ({
     };
 
     const onMouseDown = (e: MouseEvent) => {
+      e.preventDefault(); // Prevent selection of elements underneath
       isResizing = true;
       lastX = e.clientX;
       document.addEventListener("mousemove", onMouseMove);
@@ -58,7 +62,7 @@ export const useResizeHandle = ({
       document.removeEventListener("mousemove", onMouseMove);
       document.removeEventListener("mouseup", onMouseUp);
     };
-  }, [onResize]);
+  }, [direction, onResize]);
 
   return {
     resizableDivRef,