Refactoring

Author: EhabY

packages/shared/src/tasks/api.ts

@@ -46,10 +46,10 @@ export interface TaskActionParams {
 const deleteTask = defineRequest<TaskActionParams, void>("deleteTask");
 const pauseTask = defineRequest<TaskActionParams, void>("pauseTask");
 const resumeTask = defineRequest<TaskActionParams, void>("resumeTask");
+const downloadLogs = defineRequest<{ taskId: string }, void>("downloadLogs");
 
 const viewInCoder = defineCommand<{ taskId: string }>("viewInCoder");
 const viewLogs = defineCommand<{ taskId: string }>("viewLogs");
-const downloadLogs = defineRequest<{ taskId: string }, void>("downloadLogs");
 const sendTaskMessage = defineCommand<{
 	taskId: string;
 	message: string;

packages/tasks/src/components/ActionMenu.tsx

@@ -4,7 +4,7 @@ import {
 	VscodeIcon,
 	VscodeProgressRing,
 } from "@vscode-elements/react-elements";
-import { useState, useRef, useEffect, useCallback } from "react";
+import { useState, useRef, useEffect } from "react";
 
 interface ActionMenuAction {
 	separator?: false;
@@ -33,8 +33,6 @@ export function ActionMenu({ items }: ActionMenuProps) {
 	} | null>(null);
 	const menuRef = useRef<HTMLDivElement>(null);
 	const buttonRef = useRef<HTMLDivElement>(null);
-	const dropdownRef = useRef<HTMLDivElement>(null);
-
 	function toggle() {
 		setPosition((prev) => {
 			if (prev) {
@@ -50,11 +48,6 @@ export function ActionMenu({ items }: ActionMenuProps) {
 
 	const isOpen = position !== null;
 
-	const dropdownRefCallback = useCallback((node: HTMLDivElement | null) => {
-		dropdownRef.current = node;
-		node?.focus();
-	}, []);
-
 	function onKeyDown(event: React.KeyboardEvent) {
 		if (event.key === "Escape") {
 			setPosition(null);
@@ -93,7 +86,7 @@ export function ActionMenu({ items }: ActionMenuProps) {
 			</div>
 			{position && (
 				<div
-					ref={dropdownRefCallback}
+					ref={(node) => node?.focus()}
 					className="action-menu-dropdown"
 					style={position}
 					tabIndex={-1}

packages/tasks/src/components/TaskItem.tsx

@@ -1,16 +1,11 @@
 import { getTaskLabel, type Task } from "@repo/shared";
 import { VscodeProgressRing } from "@vscode-elements/react-elements";
 
+import { getActionLabel } from "../utils/taskAction";
+
 import { ActionMenu } from "./ActionMenu";
 import { StatusIndicator } from "./StatusIndicator";
-import { useTaskMenuItems, type TaskAction } from "./useTaskMenuItems";
-
-const actionLabels: Record<NonNullable<TaskAction>, string> = {
-	pausing: "Pausing...",
-	resuming: "Resuming...",
-	deleting: "Deleting...",
-	downloading: "Downloading...",
-};
+import { useTaskMenuItems } from "./useTaskMenuItems";
 
 interface TaskItemProps {
 	task: Task;
@@ -50,7 +45,7 @@ export function TaskItem({ task, onSelect }: TaskItemProps) {
 				<span className="task-title" title={displayName}>
 					{displayName}
 					{action && (
-						<span className="task-action-label">{actionLabels[action]}</span>
+						<span className="task-action-label">{getActionLabel(action)}</span>
 					)}
 				</span>
 				<span className="task-subtitle" title={subtitle}>

packages/tasks/src/components/useTaskMenuItems.ts

@@ -3,16 +3,10 @@ import { logger } from "@repo/webview-shared/logger";
 import { useMutation } from "@tanstack/react-query";
 
 import { useTasksApi } from "../hooks/useTasksApi";
+import { type TaskAction } from "../utils/taskAction";
 
 import type { ActionMenuItem } from "./ActionMenu";
 
-export type TaskAction =
-	| "pausing"
-	| "resuming"
-	| "deleting"
-	| "downloading"
-	| null;
-
 interface ActionRequest {
 	action: NonNullable<TaskAction>;
 	fn: () => Promise<void>;

packages/tasks/src/hooks/useTasksData.ts

@@ -10,8 +10,8 @@ import { useIpc } from "@repo/webview-shared/react";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useEffect, useRef, useState } from "react";
 
-import { TASK_LIST_POLL_INTERVAL_MS } from "../config";
-import { taskArraysEqual, templateArraysEqual } from "../utils";
+import { taskArraysEqual, templateArraysEqual } from "../utils/compare";
+import { TASK_LIST_POLL_INTERVAL_MS } from "../utils/config";
 
 import { useTasksApi } from "./useTasksApi";
 

packages/tasks/src/index.css

@@ -219,6 +219,11 @@ vscode-collapsible::part(body) {
 	display: inline-flex;
 	align-items: center;
 	gap: 4px;
+	background: none;
+	border: none;
+	padding: 0;
+	font: inherit;
+	cursor: pointer;
 	text-decoration: none;
 }
 

packages/tasks/src/config.ts packages/tasks/src/utils/config.tspackages/tasks/src/config.ts renamed to packages/tasks/src/utils/config.ts

@@ -0,0 +1,17 @@
+export type TaskAction =
+	| "pausing"
+	| "resuming"
+	| "deleting"
+	| "downloading"
+	| null;
+
+const ACTION_LABELS: Record<NonNullable<TaskAction>, string> = {
+	pausing: "Pausing...",
+	resuming: "Resuming...",
+	deleting: "Deleting...",
+	downloading: "Downloading...",
+};
+
+export function getActionLabel(action: TaskAction): string | null {
+	return action ? ACTION_LABELS[action] : null;
+}