✨ feat: add resizable side panels (#141)

Add drag-to-resize for the annotation panel, table of contents,
and file tree sidebar. Panel widths persist in cookie storage
across sessions and random-port hook invocations.

- Add useResizablePanel hook with left/right side support
- Extract ResizeHandle component with spread-friendly handleProps API
- Apply to AnnotationPanel, ReviewPanel, TableOfContents, FileTree
- Double-click handle to reset to default width
- Add min-w-0 on content areas for proper flex shrinking

Author: flex-yj-kim

packages/editor/App.tsx

@@ -25,6 +25,8 @@ import { getAgentSwitchSettings, getEffectiveAgentName } from '@plannotator/ui/u
 import { getPlanSaveSettings } from '@plannotator/ui/utils/planSave';
 import { getUIPreferences, needsUIFeaturesSetup, type UIPreferences } from '@plannotator/ui/utils/uiPreferences';
 import { getEditorMode, saveEditorMode } from '@plannotator/ui/utils/editorMode';
+import { useResizablePanel } from '@plannotator/ui/hooks/useResizablePanel';
+import { ResizeHandle } from '@plannotator/ui/components/ResizeHandle';
 import {
   getPermissionModeSettings,
   needsPermissionModeSetup,
@@ -364,6 +366,14 @@ const App: React.FC = () => {
   const viewerRef = useRef<ViewerHandle>(null);
   const containerRef = useRef<HTMLElement>(null);
 
+  // Resizable panels
+  const panelResize = useResizablePanel({ storageKey: 'plannotator-panel-width' });
+  const tocResize = useResizablePanel({
+    storageKey: 'plannotator-toc-width',
+    defaultWidth: 240, minWidth: 160, maxWidth: 400, side: 'left',
+  });
+  const isResizing = panelResize.isDragging || tocResize.isDragging;
+
   // Track active section for TOC highlighting
   const headingCount = useMemo(() => blocks.filter(b => b.type === 'heading').length, [blocks]);
   const activeSection = useActiveSection(containerRef, headingCount);
@@ -1021,20 +1031,24 @@ const App: React.FC = () => {
         </header>
 
         {/* Main Content */}
-        <div className="flex-1 flex overflow-hidden">
+        <div className={`flex-1 flex overflow-hidden ${isResizing ? 'select-none' : ''}`}>
           {/* Table of Contents */}
           {uiPrefs.tocEnabled && (
-            <TableOfContents
-              blocks={blocks}
-              annotations={annotations}
-              activeId={activeSection}
-              onNavigate={handleTocNavigate}
-              className="hidden lg:block w-60 sticky top-12 h-[calc(100vh-3rem)] flex-shrink-0"
-            />
+            <>
+              <TableOfContents
+                blocks={blocks}
+                annotations={annotations}
+                activeId={activeSection}
+                onNavigate={handleTocNavigate}
+                className="hidden lg:block sticky top-12 h-[calc(100vh-3rem)] flex-shrink-0"
+                style={{ width: tocResize.width }}
+              />
+              <ResizeHandle {...tocResize.handleProps} className="hidden lg:block" />
+            </>
           )}
 
           {/* Document Area */}
-          <main ref={containerRef} className="flex-1 overflow-y-auto bg-grid">
+          <main ref={containerRef} className="flex-1 min-w-0 overflow-y-auto bg-grid">
             <div className="min-h-full flex flex-col items-center px-4 py-3 md:px-10 md:py-8 xl:px-16">
               {/* Mode Switcher */}
               <div className="w-full max-w-[832px] 2xl:max-w-5xl mb-3 md:mb-4 flex justify-start">
@@ -1061,6 +1075,9 @@ const App: React.FC = () => {
             </div>
           </main>
 
+          {/* Resize Handle */}
+          {isPanelOpen && <ResizeHandle {...panelResize.handleProps} />}
+
           {/* Annotation Panel */}
           <AnnotationPanel
             isOpen={isPanelOpen}
@@ -1072,6 +1089,7 @@ const App: React.FC = () => {
             onEdit={handleEditAnnotation}
             shareUrl={shareUrl}
             sharingEnabled={sharingEnabled}
+            width={panelResize.width}
           />
         </div>
 

packages/review-editor/App.tsx

@@ -8,6 +8,8 @@ import { storage, getAutoClose } from '@plannotator/ui/utils/storage';
 import { getIdentity } from '@plannotator/ui/utils/identity';
 import { getAgentSwitchSettings, getEffectiveAgentName } from '@plannotator/ui/utils/agentSwitch';
 import { CodeAnnotation, CodeAnnotationType, SelectedLineRange, DiffAnnotationMetadata } from '@plannotator/ui/types';
+import { useResizablePanel } from '@plannotator/ui/hooks/useResizablePanel';
+import { ResizeHandle } from '@plannotator/ui/components/ResizeHandle';
 import { DiffViewer } from './components/DiffViewer';
 import { ReviewPanel } from './components/ReviewPanel';
 import { FileTree } from './components/FileTree';
@@ -155,6 +157,14 @@ const ReviewApp: React.FC = () => {
 
   const identity = useMemo(() => getIdentity(), []);
 
+  // Resizable panels
+  const panelResize = useResizablePanel({ storageKey: 'plannotator-review-panel-width' });
+  const fileTreeResize = useResizablePanel({
+    storageKey: 'plannotator-filetree-width',
+    defaultWidth: 256, minWidth: 160, maxWidth: 400, side: 'left',
+  });
+  const isResizing = panelResize.isDragging || fileTreeResize.isDragging;
+
   // Global keyboard shortcuts
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
@@ -714,28 +724,32 @@ const ReviewApp: React.FC = () => {
         </header>
 
         {/* Main content */}
-        <div className="flex-1 flex overflow-hidden">
+        <div className={`flex-1 flex overflow-hidden ${isResizing ? 'select-none' : ''}`}>
           {/* File tree sidebar - show when multiple files OR diff options available */}
           {(files.length > 1 || gitContext?.diffOptions) && (
-            <FileTree
-              files={files}
-              activeFileIndex={activeFileIndex}
-              onSelectFile={handleFileSwitch}
-              annotations={annotations}
-              viewedFiles={viewedFiles}
-              onToggleViewed={handleToggleViewed}
-              hideViewedFiles={hideViewedFiles}
-              onToggleHideViewed={() => setHideViewedFiles(prev => !prev)}
-              enableKeyboardNav={!showExportModal}
-              diffOptions={gitContext?.diffOptions}
-              activeDiffType={diffType}
-              onSelectDiff={handleDiffSwitch}
-              isLoadingDiff={isLoadingDiff}
-            />
+            <>
+              <FileTree
+                files={files}
+                activeFileIndex={activeFileIndex}
+                onSelectFile={handleFileSwitch}
+                annotations={annotations}
+                viewedFiles={viewedFiles}
+                onToggleViewed={handleToggleViewed}
+                hideViewedFiles={hideViewedFiles}
+                onToggleHideViewed={() => setHideViewedFiles(prev => !prev)}
+                enableKeyboardNav={!showExportModal}
+                diffOptions={gitContext?.diffOptions}
+                activeDiffType={diffType}
+                onSelectDiff={handleDiffSwitch}
+                isLoadingDiff={isLoadingDiff}
+                width={fileTreeResize.width}
+              />
+              <ResizeHandle {...fileTreeResize.handleProps} />
+            </>
           )}
 
           {/* Diff viewer */}
-          <main className="flex-1 overflow-hidden">
+          <main className="flex-1 min-w-0 overflow-hidden">
             {activeFile ? (
               <DiffViewer
                 patch={activeFile.patch}
@@ -779,6 +793,9 @@ const ReviewApp: React.FC = () => {
             )}
           </main>
 
+          {/* Resize Handle */}
+          {isPanelOpen && <ResizeHandle {...panelResize.handleProps} />}
+
           {/* Annotations panel */}
           <ReviewPanel
             isOpen={isPanelOpen}
@@ -789,6 +806,7 @@ const ReviewApp: React.FC = () => {
             onSelectAnnotation={handleSelectAnnotation}
             onDeleteAnnotation={handleDeleteAnnotation}
             feedbackMarkdown={feedbackMarkdown}
+            width={panelResize.width}
           />
         </div>
 

packages/review-editor/components/FileTree.tsx

@@ -28,6 +28,7 @@ interface FileTreeProps {
   activeDiffType?: string;
   onSelectDiff?: (diffType: string) => void;
   isLoadingDiff?: boolean;
+  width?: number;
 }
 
 export const FileTree: React.FC<FileTreeProps> = ({
@@ -44,6 +45,7 @@ export const FileTree: React.FC<FileTreeProps> = ({
   activeDiffType,
   onSelectDiff,
   isLoadingDiff,
+  width,
 }) => {
   // Keyboard navigation: j/k or arrow keys
   const handleKeyDown = useCallback((e: KeyboardEvent) => {
@@ -82,7 +84,7 @@ export const FileTree: React.FC<FileTreeProps> = ({
   };
 
   return (
-    <aside className="w-64 border-r border-border bg-card/30 flex flex-col overflow-hidden">
+    <aside className="border-r border-border bg-card/30 flex flex-col flex-shrink-0 overflow-hidden" style={{ width: width ?? 256 }}>
       {/* Header */}
       <div className="p-3 border-b border-border/50">
         <div className="flex items-center justify-between">

packages/review-editor/components/ReviewPanel.tsx

@@ -17,6 +17,7 @@ interface ReviewPanelProps {
   onSelectAnnotation: (id: string | null) => void;
   onDeleteAnnotation: (id: string) => void;
   feedbackMarkdown?: string;
+  width?: number;
 }
 
 function formatTimestamp(ts: number): string {
@@ -45,6 +46,7 @@ export const ReviewPanel: React.FC<ReviewPanelProps> = ({
   onSelectAnnotation,
   onDeleteAnnotation,
   feedbackMarkdown,
+  width,
 }) => {
   const [copied, setCopied] = useState(false);
 
@@ -76,7 +78,7 @@ export const ReviewPanel: React.FC<ReviewPanelProps> = ({
   if (!isOpen) return null;
 
   return (
-    <aside className="w-72 border-l border-border/50 bg-card/30 backdrop-blur-sm flex flex-col">
+    <aside className="border-l border-border/50 bg-card/30 backdrop-blur-sm flex flex-col flex-shrink-0" style={{ width: width ?? 288 }}>
         {/* Header */}
         <div className="p-3 border-b border-border/50">
           <div className="flex items-center justify-between">

packages/ui/components/AnnotationPanel.tsx

@@ -13,6 +13,7 @@ interface PanelProps {
   selectedId: string | null;
   shareUrl?: string;
   sharingEnabled?: boolean;
+  width?: number;
 }
 
 export const AnnotationPanel: React.FC<PanelProps> = ({
@@ -24,7 +25,8 @@ export const AnnotationPanel: React.FC<PanelProps> = ({
   onEdit,
   selectedId,
   shareUrl,
-  sharingEnabled = true
+  sharingEnabled = true,
+  width,
 }) => {
   const [copied, setCopied] = useState(false);
   const sortedAnnotations = [...annotations].sort((a, b) => a.createdA - b.createdA);
@@ -43,7 +45,7 @@ export const AnnotationPanel: React.FC<PanelProps> = ({
   if (!isOpen) return null;
 
   return (
-    <aside className="w-72 border-l border-border/50 bg-card/30 backdrop-blur-sm flex flex-col">
+    <aside className="border-l border-border/50 bg-card/30 backdrop-blur-sm flex flex-col flex-shrink-0" style={{ width: width ?? 288 }}>
       {/* Header */}
       <div className="p-3 border-b border-border/50">
         <div className="flex items-center justify-between">

packages/ui/components/ResizeHandle.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import type { ResizeHandleProps as BaseProps } from '../hooks/useResizablePanel';
+
+interface Props extends BaseProps {
+  className?: string;
+}
+
+export const ResizeHandle: React.FC<Props> = ({
+  isDragging,
+  onMouseDown,
+  onDoubleClick,
+  className,
+}) => (
+  <div
+    onMouseDown={onMouseDown}
+    onDoubleClick={onDoubleClick}
+    className={`w-1 cursor-col-resize flex-shrink-0 transition-colors ${
+      isDragging ? 'bg-primary/50' : 'hover:bg-border'
+    }${className ? ` ${className}` : ''}`}
+  />
+);

packages/ui/components/TableOfContents.tsx

@@ -12,6 +12,7 @@ interface TableOfContentsProps {
   activeId: string | null;
   onNavigate: (blockId: string) => void;
   className?: string;
+  style?: React.CSSProperties;
 }
 
 interface TocItemProps {
@@ -142,6 +143,7 @@ export function TableOfContents({
   activeId,
   onNavigate,
   className = '',
+  style,
 }: TableOfContentsProps) {
   // Calculate annotation counts per section
   const annotationCounts = useMemo(
@@ -192,6 +194,7 @@ export function TableOfContents({
     <nav
       className={`bg-card/50 backdrop-blur-sm border-r border-border overflow-y-auto ${className}`}
       aria-label="Table of contents"
+      style={style}
     >
       <div className="p-4">
         <h2 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground mb-3">

packages/ui/hooks/useResizablePanel.ts

@@ -0,0 +1,84 @@
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { storage } from '../utils/storage';
+
+interface UseResizablePanelOptions {
+  storageKey: string;
+  defaultWidth?: number;
+  minWidth?: number;
+  maxWidth?: number;
+  side?: 'left' | 'right';
+}
+
+export interface ResizeHandleProps {
+  isDragging: boolean;
+  onMouseDown: (e: React.MouseEvent) => void;
+  onDoubleClick: () => void;
+}
+
+export function useResizablePanel({
+  storageKey,
+  defaultWidth = 288,
+  minWidth = 200,
+  maxWidth = 600,
+  side = 'right',
+}: UseResizablePanelOptions) {
+  const [width, setWidth] = useState(() => {
+    const saved = storage.getItem(storageKey);
+    if (saved) {
+      const n = Number(saved);
+      if (!Number.isNaN(n) && n >= minWidth && n <= maxWidth) return n;
+    }
+    return defaultWidth;
+  });
+
+  const [isDragging, setIsDragging] = useState(false);
+  const startXRef = useRef(0);
+  const startWidthRef = useRef(0);
+  const widthRef = useRef(width);
+
+  const updateWidth = useCallback((value: number) => {
+    widthRef.current = value;
+    setWidth(value);
+  }, []);
+
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    startXRef.current = e.clientX;
+    startWidthRef.current = widthRef.current;
+    setIsDragging(true);
+  }, []);
+
+  useEffect(() => {
+    if (!isDragging) return;
+
+    const onMove = (e: MouseEvent) => {
+      const delta = side === 'right'
+        ? startXRef.current - e.clientX
+        : e.clientX - startXRef.current;
+      updateWidth(Math.min(maxWidth, Math.max(minWidth, startWidthRef.current + delta)));
+    };
+
+    const onUp = () => {
+      setIsDragging(false);
+      storage.setItem(storageKey, String(widthRef.current));
+    };
+
+    document.addEventListener('mousemove', onMove);
+    document.addEventListener('mouseup', onUp);
+    return () => {
+      document.removeEventListener('mousemove', onMove);
+      document.removeEventListener('mouseup', onUp);
+    };
+  }, [isDragging, minWidth, maxWidth, storageKey, side, updateWidth]);
+
+  const resetWidth = useCallback(() => {
+    updateWidth(defaultWidth);
+    storage.setItem(storageKey, String(defaultWidth));
+  }, [defaultWidth, storageKey, updateWidth]);
+
+  return {
+    width,
+    isDragging,
+    handleProps: { isDragging, onMouseDown: handleMouseDown, onDoubleClick: resetWidth } as ResizeHandleProps,
+  };
+}