bit of hookage

Author: jonathanlab

src/renderer/components/tasks/TaskList.tsx

@@ -1,13 +1,14 @@
 import { Box, Button, Flex, Spinner, Text } from "@radix-ui/themes";
 import type { Task } from "@shared/types";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef } from "react";
 import { useTasks } from "../../hooks/useTasks";
 import { useUsers } from "../../hooks/useUsers";
 import { useAuthStore } from "../../stores/authStore";
 import { useLayoutStore } from "../../stores/layoutStore";
 import { useStatusBarStore } from "../../stores/statusBarStore";
 import { useTaskStore } from "../../stores/taskStore";
 import { CliTaskPanel } from "./CliTaskPanel";
+import { useCliPanelResize } from "./hooks/useCliPanelResize";
 import { useTaskDragDrop } from "./hooks/useTaskDragDrop";
 import { useTaskFiltering } from "./hooks/useTaskFiltering";
 import { useTaskGrouping } from "./hooks/useTaskGrouping";
@@ -50,9 +51,6 @@ export function TaskList({ onSelectTask }: TaskListProps) {
   const setCliPanelWidth = useLayoutStore((state) => state.setCliPanelWidth);
   const listRef = useRef<HTMLDivElement>(null);
 
-  // Resize state
-  const [isResizing, setIsResizing] = useState(false);
-
   // Custom hooks
   const filteredTasks = useTaskFiltering(
     tasks,
@@ -61,6 +59,7 @@ export function TaskList({ onSelectTask }: TaskListProps) {
     filter,
   );
   const groupedTasks = useTaskGrouping(filteredTasks, groupBy, users);
+  const { isResizing, handleMouseDown } = useCliPanelResize(setCliPanelWidth);
 
   const handleMoveTask = useCallback(
     (fromIndex: number, toIndex: number) => {
@@ -94,33 +93,6 @@ export function TaskList({ onSelectTask }: TaskListProps) {
 
   useTaskScrolling(listRef, selectedIndex, filteredTasks.length);
 
-  // Resize handler
-  const handleMouseDown = useCallback(() => {
-    setIsResizing(true);
-  }, []);
-
-  useEffect(() => {
-    if (!isResizing) return;
-
-    const handleMouseMove = (e: MouseEvent) => {
-      const newWidth =
-        ((window.innerWidth - e.clientX) / window.innerWidth) * 100;
-      setCliPanelWidth(Math.max(20, Math.min(50, newWidth))); // clamp between 20% and 50%
-    };
-
-    const handleMouseUp = () => {
-      setIsResizing(false);
-    };
-
-    document.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("mouseup", handleMouseUp);
-
-    return () => {
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseup", handleMouseUp);
-    };
-  }, [isResizing, setCliPanelWidth]);
-
   // Status bar
   useEffect(() => {
     setStatusBar({

src/renderer/components/tasks/hooks/useCliPanelResize.ts

@@ -0,0 +1,33 @@
+import { useCallback, useEffect, useState } from "react";
+
+export function useCliPanelResize(setCliPanelWidth: (width: number) => void) {
+  const [isResizing, setIsResizing] = useState(false);
+
+  const handleMouseDown = useCallback(() => {
+    setIsResizing(true);
+  }, []);
+
+  useEffect(() => {
+    if (!isResizing) return;
+
+    const handleMouseMove = (e: MouseEvent) => {
+      const newWidth =
+        ((window.innerWidth - e.clientX) / window.innerWidth) * 100;
+      setCliPanelWidth(Math.max(20, Math.min(50, newWidth)));
+    };
+
+    const handleMouseUp = () => {
+      setIsResizing(false);
+    };
+
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [isResizing, setCliPanelWidth]);
+
+  return { isResizing, handleMouseDown };
+}