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

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

@@ -2,8 +2,7 @@ import { memo } from "react"
 
 import { vscode } from "@/utils/vscode"
 import { formatLargeNumber, formatDate } from "@/utils/format"
-import { Button } from "@/components/ui"
-import { VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react"
+import { Button, Checkbox } from "@/components/ui"
 
 import { useAppTranslation } from "../../i18n/TranslationContext"
 import { CopyButton } from "./CopyButton"
@@ -24,17 +23,27 @@ const HistoryPreview = ({ showHistoryView }: HistoryPreviewProps) => {
 						<span className="codicon codicon-comment-discussion scale-90 mr-1" />
 						<span className="font-medium text-xs uppercase">{t("history:recentTasks")}</span>
 					</div>
-					<div
-						className="flex items-center gap-1 text-xs opacity-80 hover:opacity-100 cursor-pointer"
-						onClick={() => setShowAllWorkspaces(!showAllWorkspaces)}>
-						<VSCodeCheckbox
-							checked={showAllWorkspaces}
-							onChange={(e) => setShowAllWorkspaces((e.target as HTMLInputElement).checked)}
-						/>
-						<span className="text-vscode-foreground select-none">{t("history:showAllWorkspaces")}</span>
+					<div className="flex items-center gap-1 text-xs opacity-80 hover:opacity-100">
+						<div className="flex items-center space-x-2">
+							<Checkbox
+								id="show-all-workspaces"
+								checked={showAllWorkspaces}
+								onCheckedChange={(checked) => setShowAllWorkspaces(checked === true)}
+								variant="description"
+							/>
+							<label
+								htmlFor="show-all-workspaces"
+								className="text-vscode-descriptionForeground select-none cursor-pointer text-sm">
+								{t("history:showAllWorkspaces")}
+							</label>
+						</div>
 					</div>
 				</div>
-				<Button variant="ghost" size="sm" onClick={() => showHistoryView()} className="uppercase">
+				<Button
+					variant="ghost"
+					size="sm"
+					onClick={() => showHistoryView()}
+					className="uppercase text-xs hover:bg-vscode-toolbar-hoverBackground/50 transition-colors">
 					{t("history:viewAll")}
 				</Button>
 			</div>

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"
@@ -157,9 +157,10 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 					</VSCodeRadioGroup>
 
 					<div className="flex items-center gap-2" onClick={() => setShowAllWorkspaces(!showAllWorkspaces)}>
-						<VSCodeCheckbox
+						<Checkbox
 							checked={showAllWorkspaces}
-							onChange={(e) => setShowAllWorkspaces((e.target as HTMLInputElement).checked)}
+							onCheckedChange={(checked) => setShowAllWorkspaces(checked === true)}
+							variant="description"
 						/>
 						<span className="text-vscode-foreground">{t("history:showAllWorkspaces")}</span>
 					</div>
@@ -168,9 +169,10 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 					{isSelectionMode && tasks.length > 0 && (
 						<div className="flex items-center py-1 px-2 bg-vscode-editor-background rounded">
 							<div className="flex items-center gap-2">
-								<VSCodeCheckbox
+								<Checkbox
 									checked={tasks.length > 0 && selectedTaskIds.length === tasks.length}
-									onChange={(e) => toggleSelectAll((e.target as HTMLInputElement).checked)}
+									onCheckedChange={(checked) => toggleSelectAll(checked === true)}
+									variant="description"
 								/>
 								<span className="text-vscode-foreground">
 									{selectedTaskIds.length === tasks.length
@@ -225,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>
 								)}

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

@@ -24,18 +24,21 @@ export const useTaskSearch = () => {
 	}, [searchQuery, sortOption, lastNonRelevantSort])
 
 	const presentableTasks = useMemo(() => {
-		return taskHistory.filter((item) => item.ts && item.task)
-	}, [taskHistory])
+		let tasks = taskHistory.filter((item) => item.ts && item.task)
+		if (!showAllWorkspaces) {
+			tasks = tasks.filter((item) => item.workspace === cwd)
+		}
+		return tasks
+	}, [taskHistory, showAllWorkspaces, cwd])
 
 	const fzf = useMemo(() => {
 		return new Fzf(presentableTasks, {
-			selector: (item) => `${item.task} ${item.workspace || ""}`,
+			selector: (item) => `${item.task} ${item.workspace ?? ""}`,
 		})
 	}, [presentableTasks])
-
+	
 	const tasks = useMemo(() => {
-		// First filter by workspace if enabled
-		let results = showAllWorkspaces ? presentableTasks : presentableTasks.filter((item) => item.workspace === cwd)
+		let results = presentableTasks
 
 		if (searchQuery) {
 			const searchResults = fzf.find(searchQuery)
@@ -58,14 +61,10 @@ export const useTaskSearch = () => {
 							: undefined,
 					}
 				})
-				.filter((item) => (showAllWorkspaces ? true : item.workspace === cwd))
 		}
 
-		// First apply search if needed
-		const searchResults = results
-
 		// Then sort the results
-		return [...searchResults].sort((a, b) => {
+		return [...results].sort((a, b) => {
 			switch (sortOption) {
 				case "oldest":
 					return (a.ts || 0) - (b.ts || 0)