feat: Inline task rename on double-click and right-click (#857)

Author: charlesvien

apps/twig/src/renderer/components/RenameTaskDialog.tsx

@@ -9,6 +9,7 @@ interface SidebarItemProps {
   subtitle?: React.ReactNode;
   isActive?: boolean;
   onClick?: () => void;
+  onDoubleClick?: () => void;
   onContextMenu?: (e: React.MouseEvent) => void;
   action?: SidebarItemAction;
   endContent?: React.ReactNode;
@@ -21,6 +22,7 @@ export function SidebarItem({
   subtitle,
   isActive,
   onClick,
+  onDoubleClick,
   onContextMenu,
   endContent,
 }: SidebarItemProps) {
@@ -34,6 +36,7 @@ export function SidebarItem({
         gap: "4px",
       }}
       onClick={onClick}
+      onDoubleClick={onDoubleClick}
       onContextMenu={onContextMenu}
     >
       {icon && (

apps/twig/src/renderer/features/sidebar/components/SidebarItem.tsx

@@ -1,11 +1,16 @@
 import { DotsCircleSpinner } from "@components/DotsCircleSpinner";
-import { RenameTaskDialog } from "@components/RenameTaskDialog";
-import { useDeleteTask, useTasks } from "@features/tasks/hooks/useTasks";
+import {
+  useDeleteTask,
+  useTasks,
+  useUpdateTask,
+} from "@features/tasks/hooks/useTasks";
 import { useTaskContextMenu } from "@hooks/useTaskContextMenu";
 import { Box, Flex } from "@radix-ui/themes";
+import { logger } from "@renderer/lib/logger";
 import type { Task } from "@shared/types";
 import { useNavigationStore } from "@stores/navigationStore";
-import { memo, useEffect, useRef } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+import { memo, useCallback, useEffect, useRef } from "react";
 import { useWorkspaceStore } from "@/renderer/features/workspace/stores/workspaceStore";
 import { useSidebarData } from "../hooks/useSidebarData";
 import { usePinnedTasksStore } from "../stores/pinnedTasksStore";
@@ -22,7 +27,7 @@ function SidebarMenuComponent() {
   const workspaces = useWorkspaceStore.use.workspaces();
   const markAsViewed = useTaskViewedStore((state) => state.markAsViewed);
 
-  const { showContextMenu, renameTask, renameDialogOpen, setRenameDialogOpen } =
+  const { showContextMenu, editingTaskId, setEditingTaskId } =
     useTaskContextMenu();
   const { deleteWithConfirm } = useDeleteTask();
   const togglePin = usePinnedTasksStore((state) => state.togglePin);
@@ -94,52 +99,90 @@ function SidebarMenuComponent() {
     });
   };
 
+  const updateTask = useUpdateTask();
+  const queryClient = useQueryClient();
+  const log = logger.scope("sidebar-menu");
+
+  const handleTaskDoubleClick = useCallback(
+    (taskId: string) => {
+      setEditingTaskId(taskId);
+    },
+    [setEditingTaskId],
+  );
+
+  const handleTaskEditSubmit = useCallback(
+    async (taskId: string, newTitle: string) => {
+      setEditingTaskId(null);
+
+      // Optimistically update task title in all cached task lists
+      queryClient.setQueriesData<Task[]>(
+        { queryKey: ["tasks", "list"] },
+        (old) =>
+          old?.map((task) =>
+            task.id === taskId ? { ...task, title: newTitle } : task,
+          ),
+      );
+
+      try {
+        await updateTask.mutateAsync({
+          taskId,
+          updates: { title: newTitle },
+        });
+      } catch (error) {
+        log.error("Failed to rename task", error);
+        // Refetch to revert optimistic update on failure
+        queryClient.invalidateQueries({ queryKey: ["tasks", "list"] });
+      }
+    },
+    [setEditingTaskId, updateTask, queryClient, log],
+  );
+
+  const handleTaskEditCancel = useCallback(() => {
+    setEditingTaskId(null);
+  }, [setEditingTaskId]);
+
   return (
-    <>
-      <RenameTaskDialog
-        task={renameTask}
-        open={renameDialogOpen}
-        onOpenChange={setRenameDialogOpen}
-      />
-
-      <Box height="100%" position="relative">
-        <Box
-          style={{
-            height: "100%",
-            overflowY: "auto",
-            overflowX: "hidden",
-          }}
-        >
-          <Flex direction="column" py="2">
-            <Box mb="2">
-              <NewTaskItem
-                isActive={sidebarData.isHomeActive}
-                onClick={handleNewTaskClick}
-              />
-            </Box>
-
-            {sidebarData.isLoading ? (
-              <SidebarItem
-                depth={0}
-                icon={<DotsCircleSpinner size={12} className="text-gray-10" />}
-                label="Loading tasks..."
-              />
-            ) : (
-              <TaskListView
-                pinnedTasks={sidebarData.pinnedTasks}
-                flatTasks={sidebarData.flatTasks}
-                groupedTasks={sidebarData.groupedTasks}
-                activeTaskId={sidebarData.activeTaskId}
-                onTaskClick={handleTaskClick}
-                onTaskContextMenu={handleTaskContextMenu}
-                onTaskDelete={handleTaskDelete}
-                hasMore={sidebarData.hasMore}
-              />
-            )}
-          </Flex>
-        </Box>
+    <Box height="100%" position="relative">
+      <Box
+        style={{
+          height: "100%",
+          overflowY: "auto",
+          overflowX: "hidden",
+        }}
+      >
+        <Flex direction="column" py="2">
+          <Box mb="2">
+            <NewTaskItem
+              isActive={sidebarData.isHomeActive}
+              onClick={handleNewTaskClick}
+            />
+          </Box>
+
+          {sidebarData.isLoading ? (
+            <SidebarItem
+              depth={0}
+              icon={<DotsCircleSpinner size={12} className="text-gray-10" />}
+              label="Loading tasks..."
+            />
+          ) : (
+            <TaskListView
+              pinnedTasks={sidebarData.pinnedTasks}
+              flatTasks={sidebarData.flatTasks}
+              groupedTasks={sidebarData.groupedTasks}
+              activeTaskId={sidebarData.activeTaskId}
+              editingTaskId={editingTaskId}
+              onTaskClick={handleTaskClick}
+              onTaskDoubleClick={handleTaskDoubleClick}
+              onTaskContextMenu={handleTaskContextMenu}
+              onTaskDelete={handleTaskDelete}
+              onTaskEditSubmit={handleTaskEditSubmit}
+              onTaskEditCancel={handleTaskEditCancel}
+              hasMore={sidebarData.hasMore}
+            />
+          )}
+        </Flex>
       </Box>
-    </>
+    </Box>
   );
 }