Optimize task history list and add search bar

webview-ui/src/components/HistoryView.tsx

@@ -1,6 +1,8 @@
-import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"
+import { VSCodeButton, VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
 import { useExtensionState } from "../context/ExtensionStateContext"
 import { vscode } from "../utils/vscode"
+import { Virtuoso } from "react-virtuoso"
+import { useMemo, useState } from "react"
 
 type HistoryViewProps = {
 	onDone: () => void
@@ -8,6 +10,8 @@ type HistoryViewProps = {
 
 const HistoryView = ({ onDone }: HistoryViewProps) => {
 	const { taskHistory } = useExtensionState()
+	const [searchQuery, setSearchQuery] = useState("")
+
 	const handleHistorySelect = (id: string) => {
 		vscode.postMessage({ type: "showTaskWithId", text: id })
 	}
@@ -35,6 +39,30 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 			.toUpperCase()
 	}
 
+	const presentableTasks = useMemo(() => {
+		return taskHistory.filter((item) => item.ts && item.task)
+	}, [taskHistory])
+
+	const taskHistorySearchResults = useMemo(() => {
+		return presentableTasks.filter((item) => item.task.toLowerCase().includes(searchQuery.toLowerCase()))
+	}, [presentableTasks, searchQuery])
+
+	const highlightText = (text: string, query: string) => {
+		if (!query) return text
+		const parts = text.split(new RegExp(`(${query})`, "gi"))
+		return parts.map((part, index) =>
+			part.toLowerCase() === query.toLowerCase() ? (
+				<mark
+					key={index}
+					style={{ backgroundColor: "var(--vscode-editor-findMatchHighlightBackground)", color: "inherit" }}>
+					{part}
+				</mark>
+			) : (
+				part
+			)
+		)
+	}
+
 	return (
 		<>
 			<style>
@@ -73,8 +101,29 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 					<h3 style={{ color: "var(--vscode-foreground)", margin: 0 }}>History</h3>
 					<VSCodeButton onClick={onDone}>Done</VSCodeButton>
 				</div>
+				<div style={{ padding: "5px 17px" }}>
+					<VSCodeTextField
+						style={{ width: "100%" }}
+						placeholder="Search history..."
+						value={searchQuery}
+						onInput={(e) => setSearchQuery((e.target as HTMLInputElement)?.value)}>
+						<div
+							slot="start"
+							className="codicon codicon-search"
+							style={{ fontSize: 13, marginTop: 2.5, opacity: 0.8 }}></div>
+						{searchQuery && (
+							<VSCodeButton
+								appearance="icon"
+								aria-label="Clear search"
+								onClick={() => setSearchQuery("")}
+								slot="end">
+								<span className="codicon codicon-close"></span>
+							</VSCodeButton>
+						)}
+					</VSCodeTextField>
+				</div>
 				<div style={{ flexGrow: 1, overflowY: "auto", margin: 0 }}>
-					{taskHistory.length === 0 && (
+					{presentableTasks.length === 0 && (
 						<div
 							style={{
 								display: "flex",
@@ -97,10 +146,14 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 							</div>
 						</div>
 					)}
-
-					{taskHistory
-						.filter((item) => item.ts && item.task)
-						.map((item, index) => (
+					<Virtuoso
+						style={{
+							flexGrow: 1,
+							overflowY: "scroll",
+							scrollbarWidth: "none",
+						}}
+						data={taskHistorySearchResults}
+						itemContent={(index, item) => (
 							<div
 								key={item.id}
 								className="history-item"
@@ -157,7 +210,7 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 											wordBreak: "break-word",
 											overflowWrap: "anywhere",
 										}}>
-										{item.task}
+										{highlightText(item.task, searchQuery)}
 									</div>
 									<div style={{ display: "flex", flexDirection: "column", gap: "4px" }}>
 										<div
@@ -293,7 +346,8 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 									</div>
 								</div>
 							</div>
-						))}
+						)}
+					/>
 				</div>
 			</div>
 		</>