Treat HistoryView item clicks as (de)select in selection mode (#3068)

* Treat HistoryView item clicks as (de)select in selection mode

* UI tweaks

---------

Co-authored-by: Matt Rubens <[email protected]>

webview-ui/src/components/history/HistoryView.tsx

@@ -83,6 +83,7 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 						<Button
 							variant={isSelectionMode ? "default" : "secondary"}
 							onClick={toggleSelectionMode}
+							data-testid="toggle-selection-mode-button"
 							title={
 								isSelectionMode
 									? `${t("history:exitSelectionMode")}`
@@ -170,7 +171,7 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 
 					{/* Select all control in selection mode */}
 					{isSelectionMode && tasks.length > 0 && (
-						<div className="flex items-center py-1 px-2 bg-vscode-editor-background rounded">
+						<div className="flex items-center py-1">
 							<div className="flex items-center gap-2">
 								<Checkbox
 									checked={tasks.length > 0 && selectedTaskIds.length === tasks.length}
@@ -217,12 +218,14 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 								"bg-vscode-list-activeSelectionBackground":
 									isSelectionMode && selectedTaskIds.includes(item.id),
 							})}
-							onClick={(e) => {
-								if (!isSelectionMode || !(e.target as HTMLElement).closest(".task-checkbox")) {
+							onClick={() => {
+								if (isSelectionMode) {
+									toggleTaskSelection(item.id, !selectedTaskIds.includes(item.id))
+								} else {
 									vscode.postMessage({ type: "showTaskWithId", text: item.id })
 								}
 							}}>
-							<div className="flex items-start p-3 gap-2">
+							<div className="flex items-start p-3 gap-2 ml-2">
 								{/* Show checkbox in selection mode */}
 								{isSelectionMode && (
 									<div

webview-ui/src/components/history/__tests__/HistoryView.test.tsx

@@ -148,6 +148,23 @@ describe("HistoryView", () => {
 		})
 	})
 
+	it("handles selection mode clicks", async () => {
+		const onDone = jest.fn()
+		render(<HistoryView onDone={onDone} />)
+
+		// Go to selection mode
+		fireEvent.click(screen.getByTestId("toggle-selection-mode-button"))
+
+		const taskContainer = screen.getByTestId("task-item-1")
+
+		// Click anywhere in the task item
+		fireEvent.click(taskContainer)
+
+		// Check the box instead of sending a message to open the task
+		expect(within(taskContainer).getByRole("checkbox")).toBeChecked()
+		expect(vscode.postMessage).not.toHaveBeenCalled()
+	})
+
 	describe("task deletion", () => {
 		it("shows confirmation dialog on regular click", () => {
 			const onDone = jest.fn()

webview-ui/src/i18n/locales/en/history.json

@@ -26,8 +26,8 @@
 	"delete": "Delete",
 	"exitSelection": "Exit Selection",
 	"selectionMode": "Selection Mode",
-	"deselectAll": "Deselect All",
-	"selectAll": "Select All",
+	"deselectAll": "Deselect all",
+	"selectAll": "Select all",
 	"selectedItems": "Selected {{selected}}/{{total}} items",
 	"clearSelection": "Clear Selection",
 	"deleteSelected": "Delete Selected",