feat: Add pin button back to task hover toolbar (#934)

Author: charlesvien

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

@@ -196,6 +196,7 @@ function SidebarMenuComponent() {
               onTaskDoubleClick={handleTaskDoubleClick}
               onTaskContextMenu={handleTaskContextMenu}
               onTaskDelete={handleTaskDelete}
+              onTaskTogglePin={togglePin}
               onTaskEditSubmit={handleTaskEditSubmit}
               onTaskEditCancel={handleTaskEditCancel}
               hasMore={sidebarData.hasMore}

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

@@ -35,6 +35,7 @@ interface TaskListViewProps {
     isPinned: boolean,
   ) => void;
   onTaskDelete: (taskId: string) => void;
+  onTaskTogglePin: (taskId: string) => void;
   onTaskEditSubmit: (taskId: string, newTitle: string) => void;
   onTaskEditCancel: () => void;
   hasMore: boolean;
@@ -65,6 +66,7 @@ function TaskRow({
   onDoubleClick,
   onContextMenu,
   onDelete,
+  onTogglePin,
   onEditSubmit,
   onEditCancel,
   timestamp,
@@ -77,6 +79,7 @@ function TaskRow({
   onDoubleClick: () => void;
   onContextMenu: (e: React.MouseEvent, isPinned: boolean) => void;
   onDelete: () => void;
+  onTogglePin: () => void;
   onEditSubmit: (newTitle: string) => void;
   onEditCancel: () => void;
   timestamp: number;
@@ -101,6 +104,7 @@ function TaskRow({
       onDoubleClick={onDoubleClick}
       onContextMenu={(e) => onContextMenu(e, task.isPinned)}
       onDelete={onDelete}
+      onTogglePin={onTogglePin}
       onEditSubmit={onEditSubmit}
       onEditCancel={onEditCancel}
     />
@@ -229,6 +233,7 @@ export function TaskListView({
   onTaskDoubleClick,
   onTaskContextMenu,
   onTaskDelete,
+  onTaskTogglePin,
   onTaskEditSubmit,
   onTaskEditCancel,
   hasMore,
@@ -291,6 +296,7 @@ export function TaskListView({
                 onTaskContextMenu(task.id, e, isPinned)
               }
               onDelete={() => onTaskDelete(task.id)}
+              onTogglePin={() => onTaskTogglePin(task.id)}
               onEditSubmit={(newTitle) => onTaskEditSubmit(task.id, newTitle)}
               onEditCancel={onTaskEditCancel}
               timestamp={task[timestampKey]}
@@ -353,6 +359,7 @@ export function TaskListView({
                           onTaskContextMenu(task.id, e, isPinned)
                         }
                         onDelete={() => onTaskDelete(task.id)}
+                        onTogglePin={() => onTaskTogglePin(task.id)}
                         onEditSubmit={(newTitle) =>
                           onTaskEditSubmit(task.id, newTitle)
                         }
@@ -381,6 +388,7 @@ export function TaskListView({
                 onTaskContextMenu(task.id, e, isPinned)
               }
               onDelete={() => onTaskDelete(task.id)}
+              onTogglePin={() => onTaskTogglePin(task.id)}
               onEditSubmit={(newTitle) => onTaskEditSubmit(task.id, newTitle)}
               onEditCancel={onTaskEditCancel}
               timestamp={task[timestampKey]}

apps/twig/src/renderer/features/sidebar/components/items/TaskItem.tsx

@@ -30,6 +30,7 @@ interface TaskItemProps {
   onDoubleClick?: () => void;
   onContextMenu: (e: React.MouseEvent) => void;
   onDelete?: () => void;
+  onTogglePin?: () => void;
   onEditSubmit?: (newTitle: string) => void;
   onEditCancel?: () => void;
 }
@@ -55,31 +56,62 @@ function formatRelativeTime(timestamp: number): string {
 }
 
 interface TaskHoverToolbarProps {
-  onDelete: () => void;
+  isPinned: boolean;
+  onTogglePin?: () => void;
+  onDelete?: () => void;
 }
 
-function TaskHoverToolbar({ onDelete }: TaskHoverToolbarProps) {
+function TaskHoverToolbar({
+  isPinned,
+  onTogglePin,
+  onDelete,
+}: TaskHoverToolbarProps) {
   return (
     <span className="hidden shrink-0 items-center gap-0.5 group-hover:flex">
-      {/* biome-ignore lint/a11y/useSemanticElements: Cannot use button inside parent button (SidebarItem) */}
-      <span
-        role="button"
-        tabIndex={0}
-        className="flex h-5 w-5 cursor-pointer items-center justify-center rounded text-gray-10 transition-colors hover:bg-red-4 hover:text-red-11"
-        onClick={(e) => {
-          e.stopPropagation();
-          onDelete();
-        }}
-        onKeyDown={(e) => {
-          if (e.key === "Enter" || e.key === " ") {
+      {onTogglePin && (
+        // biome-ignore lint/a11y/useSemanticElements: Cannot use button inside parent button (SidebarItem)
+        <span
+          role="button"
+          tabIndex={0}
+          className="flex h-5 w-5 cursor-pointer items-center justify-center rounded text-gray-10 transition-colors hover:bg-gray-4 hover:text-gray-12"
+          onClick={(e) => {
+            e.stopPropagation();
+            onTogglePin();
+          }}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              e.stopPropagation();
+              onTogglePin();
+            }
+          }}
+          title={isPinned ? "Unpin task" : "Pin task"}
+        >
+          <PushPin size={12} weight={isPinned ? "fill" : "regular"} />
+        </span>
+      )}
+      {onDelete && (
+        // biome-ignore lint/a11y/useSemanticElements: Cannot use button inside parent button (SidebarItem)
+        <span
+          role="button"
+          tabIndex={0}
+          className="flex h-5 w-5 cursor-pointer items-center justify-center rounded text-gray-10 transition-colors hover:bg-red-4 hover:text-red-11"
+          onClick={(e) => {
             e.stopPropagation();
             onDelete();
-          }
-        }}
-        title="Delete task"
-      >
-        <Trash size={12} />
-      </span>
+          }}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              e.stopPropagation();
+              onDelete();
+            }
+          }}
+          title="Delete task"
+        >
+          <Trash size={12} />
+        </span>
+      )}
     </span>
   );
 }
@@ -103,6 +135,7 @@ export function TaskItem({
   onDoubleClick,
   onContextMenu,
   onDelete,
+  onTogglePin,
   onEditSubmit,
   onEditCancel,
 }: TaskItemProps) {
@@ -161,7 +194,14 @@ export function TaskItem({
       </span>
     ) : null;
 
-    const toolbar = onDelete ? <TaskHoverToolbar onDelete={onDelete} /> : null;
+    const toolbar =
+      onDelete || onTogglePin ? (
+        <TaskHoverToolbar
+          isPinned={isPinned}
+          onTogglePin={onTogglePin}
+          onDelete={onDelete}
+        />
+      ) : null;
 
     if (!timestampNode && !toolbar) return null;
 
@@ -171,7 +211,7 @@ export function TaskItem({
         {toolbar}
       </>
     );
-  }, [timestamp, onDelete]);
+  }, [timestamp, onDelete, onTogglePin, isPinned]);
 
   if (isEditing) {
     return (