Add pin button back to task hover toolbar

Author: charlesvien

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

@@ -196,6 +196,7 @@ function SidebarMenuComponent() {
               onTaskDoubleClick={handleTaskDoubleClick}
               onTaskContextMenu={handleTaskContextMenu}
               onTaskDelete={handleTaskDelete}
+              onTaskTogglePin={(taskId) => togglePin(taskId)}
               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,12 +56,37 @@ function formatRelativeTime(timestamp: number): string {
 }
 
 interface TaskHoverToolbarProps {
+  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-gray-4 hover:text-gray-12"
+        onClick={(e) => {
+          e.stopPropagation();
+          onTogglePin();
+        }}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.stopPropagation();
+            onTogglePin();
+          }
+        }}
+        title={isPinned ? "Unpin task" : "Pin task"}
+      >
+        <PushPin size={12} weight={isPinned ? "fill" : "regular"} />
+      </span>
       {/* biome-ignore lint/a11y/useSemanticElements: Cannot use button inside parent button (SidebarItem) */}
       <span
         role="button"
@@ -103,6 +129,7 @@ export function TaskItem({
   onDoubleClick,
   onContextMenu,
   onDelete,
+  onTogglePin,
   onEditSubmit,
   onEditCancel,
 }: TaskItemProps) {
@@ -161,7 +188,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 +205,7 @@ export function TaskItem({
         {toolbar}
       </>
     );
-  }, [timestamp, onDelete]);
+  }, [timestamp, onDelete, onTogglePin, isPinned]);
 
   if (isEditing) {
     return (