Implement resize functionality in state and import views

Author: nxnom

browser-extensions/chrome/src/panel/components/import/ImportView.tsx

@@ -12,6 +12,7 @@ import { useStore } from "../../store";
 import { ImportList } from "./ImportList";
 import { TraceDetail } from "../detail/TraceDetail";
 import { SubscriptionDetail } from "../subscription/SubscriptionDetail";
+import { ResizeHandle } from "../layout/ResizeHandle";
 
 interface ImportViewProps {
   viewState: ViewState;
@@ -98,9 +99,21 @@ export const ImportView: Component<ImportViewProps> = (props) => {
     input.click();
   };
 
+  const handleResize = (delta: number) => {
+    const currentWidth = props.viewState.listPanelWidth;
+    const newWidth = Math.max(
+      200,
+      Math.min(currentWidth + delta, window.innerWidth / 2)
+    );
+    props.actions.updateViewState("listPanelWidth", newWidth);
+  };
+
   return (
     <div class="flex h-full w-full">
-      <div class="w-70 border-r border-spoosh-border flex flex-col">
+      <div
+        class="shrink-0 border-r border-spoosh-border flex flex-col"
+        style={{ width: `${props.viewState.listPanelWidth}px` }}
+      >
         <div class="px-3 py-2 text-xs font-medium text-spoosh-text-muted border-b border-spoosh-border bg-spoosh-surface/50 flex items-center justify-between">
           <span>Imported Traces</span>
           {session() && (
@@ -120,6 +133,8 @@ export const ImportView: Component<ImportViewProps> = (props) => {
         />
       </div>
 
+      <ResizeHandle onResize={handleResize} />
+
       <div class="flex-1 min-w-0">
         <Show
           when={selectedItem()}

browser-extensions/chrome/src/panel/components/state/StateView.tsx

@@ -4,6 +4,7 @@ import type { ViewState } from "../../App";
 import { useStore } from "../../store";
 import { StateList } from "./StateList";
 import { StateDetail } from "./StateDetail";
+import { ResizeHandle } from "../layout/ResizeHandle";
 
 type Actions = {
   selectStateEntry: (key: string | null) => void;
@@ -50,9 +51,21 @@ export const StateView: Component<StateViewProps> = (props) => {
     props.actions.selectStateEntry(null);
   };
 
+  const handleResize = (delta: number) => {
+    const currentWidth = props.viewState.listPanelWidth;
+    const newWidth = Math.max(
+      200,
+      Math.min(currentWidth + delta, window.innerWidth / 2)
+    );
+    props.actions.updateViewState("listPanelWidth", newWidth);
+  };
+
   return (
     <div class="flex h-full w-full">
-      <div class="w-70 border-r border-spoosh-border flex flex-col">
+      <div
+        class="shrink-0 border-r border-spoosh-border flex flex-col"
+        style={{ width: `${props.viewState.listPanelWidth}px` }}
+      >
         <div
           class="px-3 py-2 text-xs font-medium text-spoosh-text-muted border-b border-spoosh-border border-l-2 border-l-[#14b8a6]"
           style={{
@@ -69,6 +82,8 @@ export const StateView: Component<StateViewProps> = (props) => {
         />
       </div>
 
+      <ResizeHandle onResize={handleResize} />
+
       <div class="flex-1 min-w-0 h-full">
         <StateDetail
           entry={selectedEntry()}