Filter & Search Workspace Task History (#2526)

* Enhancement: Add 'Show all workspaces' feature to task history and update translations

* Enhancement: Add Checkbox component and integrate it into HistoryPreview and HistoryView

* Simplify the UX

---------

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

Author: samhvw8

webview-ui/package-lock.json

@@ -19,6 +19,7 @@
 	},
 	"dependencies": {
 		"@radix-ui/react-alert-dialog": "^1.1.6",
+		"@radix-ui/react-checkbox": "^1.1.5",
 		"@radix-ui/react-collapsible": "^1.1.3",
 		"@radix-ui/react-dialog": "^1.1.6",
 		"@radix-ui/react-dropdown-menu": "^2.1.5",

webview-ui/package.json

@@ -4,15 +4,15 @@ import { vscode } from "@/utils/vscode"
 import { formatLargeNumber, formatDate } from "@/utils/format"
 import { Button } from "@/components/ui"
 
-import { useExtensionState } from "../../context/ExtensionStateContext"
 import { useAppTranslation } from "../../i18n/TranslationContext"
 import { CopyButton } from "./CopyButton"
+import { useTaskSearch } from "./useTaskSearch"
 
 type HistoryPreviewProps = {
 	showHistoryView: () => void
 }
 const HistoryPreview = ({ showHistoryView }: HistoryPreviewProps) => {
-	const { taskHistory } = useExtensionState()
+	const { tasks } = useTaskSearch()
 	const { t } = useAppTranslation()
 
 	return (
@@ -26,7 +26,7 @@ const HistoryPreview = ({ showHistoryView }: HistoryPreviewProps) => {
 					{t("history:viewAll")}
 				</Button>
 			</div>
-			{taskHistory.slice(0, 3).map((item) => (
+			{tasks.slice(0, 3).map((item) => (
 				<div
 					key={item.id}
 					className="bg-vscode-toolbar-hoverBackground/50 hover:bg-vscode-toolbar-hoverBackground/75 rounded-xs relative overflow-hidden opacity-90 hover:opacity-100 cursor-pointer"

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

@@ -4,12 +4,12 @@ import { BatchDeleteTaskDialog } from "./BatchDeleteTaskDialog"
 import prettyBytes from "pretty-bytes"
 import { Virtuoso } from "react-virtuoso"
 
-import { VSCodeTextField, VSCodeRadioGroup, VSCodeRadio, VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react"
+import { VSCodeTextField, VSCodeRadioGroup, VSCodeRadio } from "@vscode/webview-ui-toolkit/react"
 
 import { vscode } from "@/utils/vscode"
 import { formatLargeNumber, formatDate } from "@/utils/format"
 import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui"
+import { Button, Checkbox } from "@/components/ui"
 import { useAppTranslation } from "@/i18n/TranslationContext"
 
 import { Tab, TabContent, TabHeader } from "../common/Tab"
@@ -24,7 +24,16 @@ type HistoryViewProps = {
 type SortOption = "newest" | "oldest" | "mostExpensive" | "mostTokens" | "mostRelevant"
 
 const HistoryView = ({ onDone }: HistoryViewProps) => {
-	const { tasks, searchQuery, setSearchQuery, sortOption, setSortOption, setLastNonRelevantSort } = useTaskSearch()
+	const {
+		tasks,
+		searchQuery,
+		setSearchQuery,
+		sortOption,
+		setSortOption,
+		setLastNonRelevantSort,
+		showAllWorkspaces,
+		setShowAllWorkspaces,
+	} = useTaskSearch()
 	const { t } = useAppTranslation()
 
 	const [deleteTaskId, setDeleteTaskId] = useState<string | null>(null)
@@ -147,21 +156,36 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 						</VSCodeRadio>
 					</VSCodeRadioGroup>
 
+					<div className="flex items-center gap-2" onClick={() => setShowAllWorkspaces(!showAllWorkspaces)}>
+						<Checkbox
+							checked={showAllWorkspaces}
+							onCheckedChange={(checked) => setShowAllWorkspaces(checked === true)}
+							variant="description"
+						/>
+						<span className="text-vscode-foreground">{t("history:showAllWorkspaces")}</span>
+					</div>
+
 					{/* Select all control in selection mode */}
 					{isSelectionMode && tasks.length > 0 && (
 						<div className="flex items-center py-1 px-2 bg-vscode-editor-background rounded">
-							<VSCodeCheckbox
-								checked={tasks.length > 0 && selectedTaskIds.length === tasks.length}
-								onChange={(e) => toggleSelectAll((e.target as HTMLInputElement).checked)}
-							/>
-							<span className="ml-2 text-vscode-foreground">
-								{selectedTaskIds.length === tasks.length
-									? t("history:deselectAll")
-									: t("history:selectAll")}
-							</span>
-							<span className="ml-auto text-vscode-descriptionForeground text-xs">
-								{t("history:selectedItems", { selected: selectedTaskIds.length, total: tasks.length })}
-							</span>
+							<div className="flex items-center gap-2">
+								<Checkbox
+									checked={tasks.length > 0 && selectedTaskIds.length === tasks.length}
+									onCheckedChange={(checked) => toggleSelectAll(checked === true)}
+									variant="description"
+								/>
+								<span className="text-vscode-foreground">
+									{selectedTaskIds.length === tasks.length
+										? t("history:deselectAll")
+										: t("history:selectAll")}
+								</span>
+								<span className="ml-auto text-vscode-descriptionForeground text-xs">
+									{t("history:selectedItems", {
+										selected: selectedTaskIds.length,
+										total: tasks.length,
+									})}
+								</span>
+							</div>
 						</div>
 					)}
 				</div>
@@ -203,11 +227,12 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 										onClick={(e) => {
 											e.stopPropagation()
 										}}>
-										<VSCodeCheckbox
+										<Checkbox
 											checked={selectedTaskIds.includes(item.id)}
-											onChange={(e) =>
-												toggleTaskSelection(item.id, (e.target as HTMLInputElement).checked)
+											onCheckedChange={(checked) =>
+												toggleTaskSelection(item.id, checked === true)
 											}
+											variant="description"
 										/>
 									</div>
 								)}
@@ -407,6 +432,13 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 												)}
 											</div>
 										)}
+
+										{showAllWorkspaces && item.workspace && (
+											<div className="flex flex-row gap-1 text-vscode-descriptionForeground text-xs">
+												<span className="codicon codicon-folder scale-80" />
+												<span>{item.workspace}</span>
+											</div>
+										)}
 									</div>
 								</div>
 							</div>