refactor: simplify and reorganize panel components

- Extract GroupNodeRenderer and LeafNodeRenderer from PanelLayout
- Add usePanelLayoutHooks for panel interactions
- Simplify PanelLayout through component extraction
- Remove DraggablePanel component
- Update panel component exports

Author: jonathanlab

src/renderer/features/panels/components/DraggablePanel.tsx

@@ -9,6 +9,7 @@ interface DraggableTabProps {
   label: string;
   isActive: boolean;
   index: number;
+  draggable?: boolean;
   onSelect: () => void;
   onClose?: () => void;
   icon?: React.ReactNode;
@@ -20,6 +21,7 @@ export const DraggableTab: React.FC<DraggableTabProps> = ({
   label,
   isActive,
   index,
+  draggable = true,
   onSelect,
   onClose,
   icon,
@@ -28,15 +30,19 @@ export const DraggableTab: React.FC<DraggableTabProps> = ({
     id: tabId,
     index,
     data: { tabId, panelId, type: "tab" },
+    disabled: !draggable,
   });
 
   return (
     <Flex
       ref={ref}
+      role="tab"
+      aria-label={label}
+      data-active={isActive}
       align="center"
       gap="2"
       px="4"
-      className="group relative cursor-grab select-none border-r border-b-2 transition-colors"
+      className={`group relative select-none border-r border-b-2 transition-colors ${draggable ? "cursor-grab" : "cursor-default"}`}
       style={{
         backgroundColor: isActive ? "var(--accent-3)" : "transparent",
         borderRightColor: "var(--gray-6)",
@@ -75,6 +81,7 @@ export const DraggableTab: React.FC<DraggableTabProps> = ({
           variant="ghost"
           color={isActive ? undefined : "gray"}
           className="opacity-0 transition-opacity group-hover:opacity-100"
+          aria-label="Close tab"
           onClick={(e) => {
             e.stopPropagation();
             onClose();

src/renderer/features/panels/components/DraggableTab.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import type { ImperativePanelGroupHandle } from "react-resizable-panels";
+import { PANEL_SIZES } from "../constants/panelConstants";
+import type { GroupPanel, PanelNode } from "../store/panelTypes";
+import { calculateDefaultSize } from "../utils/panelLayoutUtils";
+import { Panel } from "./Panel";
+import { PanelGroup } from "./PanelGroup";
+import { PanelResizeHandle } from "./PanelResizeHandle";
+
+interface GroupNodeRendererProps {
+  node: GroupPanel;
+  setGroupRef: (
+    groupId: string,
+    ref: ImperativePanelGroupHandle | null,
+  ) => void;
+  onLayout: (groupId: string, sizes: number[]) => void;
+  renderNode: (node: PanelNode) => React.ReactNode;
+}
+
+export const GroupNodeRenderer: React.FC<GroupNodeRendererProps> = ({
+  node,
+  setGroupRef,
+  onLayout,
+  renderNode,
+}) => {
+  return (
+    <PanelGroup
+      ref={(ref) => setGroupRef(node.id, ref)}
+      direction={node.direction}
+      onLayout={(sizes) => onLayout(node.id, sizes)}
+    >
+      {node.children.map((child, index) => (
+        <React.Fragment key={child.id}>
+          <Panel
+            id={child.id}
+            order={index}
+            defaultSize={calculateDefaultSize(node, index)}
+            minSize={PANEL_SIZES.MIN_PANEL_SIZE}
+          >
+            {renderNode(child)}
+          </Panel>
+          {index < node.children.length - 1 && <PanelResizeHandle />}
+        </React.Fragment>
+      ))}
+    </PanelGroup>
+  );
+};

src/renderer/features/panels/components/GroupNodeRenderer.tsx

@@ -0,0 +1,48 @@
+import type { Task } from "@shared/types";
+import type React from "react";
+import { useTabInjection } from "../hooks/usePanelLayoutHooks";
+import type { LeafPanel } from "../store/panelTypes";
+import { TabbedPanel } from "./TabbedPanel";
+
+interface LeafNodeRendererProps {
+  node: LeafPanel;
+  taskId: string;
+  task: Task;
+  closeTab: (taskId: string, panelId: string, tabId: string) => void;
+  draggingTabId: string | null;
+  draggingTabPanelId: string | null;
+  onActiveTabChange: (panelId: string, tabId: string) => void;
+}
+
+export const LeafNodeRenderer: React.FC<LeafNodeRendererProps> = ({
+  node,
+  taskId,
+  task,
+  closeTab,
+  draggingTabId,
+  draggingTabPanelId,
+  onActiveTabChange,
+}) => {
+  const tabs = useTabInjection(
+    node.content.tabs,
+    node.id,
+    taskId,
+    task,
+    closeTab,
+  );
+
+  const contentWithComponents = {
+    ...node.content,
+    tabs,
+  };
+
+  return (
+    <TabbedPanel
+      panelId={node.id}
+      content={contentWithComponents}
+      onActiveTabChange={onActiveTabChange}
+      draggingTabId={draggingTabId}
+      draggingTabPanelId={draggingTabPanelId}
+    />
+  );
+};

src/renderer/features/panels/components/LeafNodeRenderer.tsx

@@ -8,6 +8,7 @@ type DropZoneType = SplitDirection | "center";
 interface PanelDropZonesProps {
   panelId: string;
   isDragging: boolean;
+  allowSplit?: boolean; // Whether to show edge drop zones for splitting
 }
 
 interface DropZoneProps {
@@ -25,13 +26,11 @@ const DropZone: React.FC<DropZoneProps> = ({ panelId, zone, style }) => {
   return (
     <Box
       ref={ref}
-      className={`drop-zone drop-zone-${zone} pointer-events-auto absolute z-[100] transition-all duration-150 ${
-        isDropTarget ? "border-2 opacity-50" : "border-0 opacity-10"
-      }`}
+      className={`drop-zone drop-zone-${zone} pointer-events-auto absolute z-[100] transition-all duration-150`}
       style={{
         ...style,
-        backgroundColor: isDropTarget ? "var(--accent-9)" : "var(--gray-5)",
-        borderColor: isDropTarget ? "var(--accent-9)" : "transparent",
+        backgroundColor: isDropTarget ? "var(--gray-8)" : "transparent",
+        opacity: isDropTarget ? 0.3 : 0,
       }}
     />
   );
@@ -71,9 +70,15 @@ const ZONE_CONFIGS: Array<{ zone: DropZoneType; style: React.CSSProperties }> =
 export const PanelDropZones: React.FC<PanelDropZonesProps> = ({
   panelId,
   isDragging,
+  allowSplit = true,
 }) => {
   if (!isDragging) return null;
 
+  // Filter zones based on allowSplit
+  const visibleZones = allowSplit
+    ? ZONE_CONFIGS
+    : ZONE_CONFIGS.filter((config) => config.zone === "center");
+
   return (
     <Box
       style={{
@@ -83,7 +88,7 @@ export const PanelDropZones: React.FC<PanelDropZonesProps> = ({
         zIndex: 100,
       }}
     >
-      {ZONE_CONFIGS.map(({ zone, style }) => (
+      {visibleZones.map(({ zone, style }) => (
         <DropZone key={zone} panelId={panelId} zone={zone} style={style} />
       ))}
     </Box>