Add navigation link to history tab in HistoryPreview (#5630)

* feat: add navigation link to history tab in HistoryPreview

- Add 'View all history' link at bottom of history preview
- Include internationalization support with new translation key
- Use consistent styling with VSCode theme colors
- Navigate to history tab using switchTab message format

* feat: add viewAllHistory translation to all language files

* Tweaks and translations

* Fix test

---------

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

Author: roomote

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

@@ -1,18 +1,32 @@
 import { memo } from "react"
 
+import { vscode } from "@src/utils/vscode"
+import { useAppTranslation } from "@src/i18n/TranslationContext"
+
 import { useTaskSearch } from "./useTaskSearch"
 import TaskItem from "./TaskItem"
 
 const HistoryPreview = () => {
 	const { tasks } = useTaskSearch()
+	const { t } = useAppTranslation()
+
+	const handleViewAllHistory = () => {
+		vscode.postMessage({ type: "switchTab", tab: "history" })
+	}
 
 	return (
 		<div className="flex flex-col gap-3">
 			{tasks.length !== 0 && (
 				<>
-					{tasks.slice(0, 3).map((item) => (
+					{tasks.slice(0, 2).map((item) => (
 						<TaskItem key={item.id} item={item} variant="compact" />
 					))}
+					<button
+						onClick={handleViewAllHistory}
+						className="text-base text-vscode-descriptionForeground hover:text-vscode-textLink-foreground transition-colors cursor-pointer text-center w-full bg-vscode-editor-background rounded p-3 hover:border-vscode-toolbar-hoverBackground/60"
+						aria-label={t("history:viewAllHistory")}>
+						{t("history:viewAllHistory")}
+					</button>
 				</>
 			)}
 		</div>

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

@@ -86,7 +86,7 @@ describe("HistoryPreview", () => {
 		expect(screen.queryByTestId(/task-item-/)).not.toBeInTheDocument()
 	})
 
-	it("renders up to 3 tasks when tasks are available", () => {
+	it("renders up to 2 tasks when tasks are available", () => {
 		mockUseTaskSearch.mockReturnValue({
 			tasks: mockTasks,
 			searchQuery: "",
@@ -101,17 +101,17 @@ describe("HistoryPreview", () => {
 
 		render(<HistoryPreview />)
 
-		// Should render only the first 3 tasks
+		// Should render only the first 2 tasks
 		expect(screen.getByTestId("task-item-task-1")).toBeInTheDocument()
 		expect(screen.getByTestId("task-item-task-2")).toBeInTheDocument()
-		expect(screen.getByTestId("task-item-task-3")).toBeInTheDocument()
+		expect(screen.queryByTestId("task-item-task-3")).not.toBeInTheDocument()
 		expect(screen.queryByTestId("task-item-task-4")).not.toBeInTheDocument()
 	})
 
-	it("renders all tasks when there are 3 or fewer", () => {
-		const threeTasks = mockTasks.slice(0, 3)
+	it("renders all tasks when there are 2 or fewer", () => {
+		const twoTasks = mockTasks.slice(0, 2)
 		mockUseTaskSearch.mockReturnValue({
-			tasks: threeTasks,
+			tasks: twoTasks,
 			searchQuery: "",
 			setSearchQuery: vi.fn(),
 			sortOption: "newest",
@@ -126,7 +126,7 @@ describe("HistoryPreview", () => {
 
 		expect(screen.getByTestId("task-item-task-1")).toBeInTheDocument()
 		expect(screen.getByTestId("task-item-task-2")).toBeInTheDocument()
-		expect(screen.getByTestId("task-item-task-3")).toBeInTheDocument()
+		expect(screen.queryByTestId("task-item-task-3")).not.toBeInTheDocument()
 	})
 
 	it("renders only 1 task when there is only 1 task", () => {

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

@@ -47,5 +47,6 @@
 		"mostExpensive": "Més cares",
 		"mostTokens": "Més tokens",
 		"mostRelevant": "Més rellevants"
-	}
+	},
+	"viewAllHistory": "Veure totes les tasques"
 }

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

@@ -47,5 +47,6 @@
 		"mostExpensive": "Teuerste",
 		"mostTokens": "Meiste Tokens",
 		"mostRelevant": "Relevanteste"
-	}
+	},
+	"viewAllHistory": "Gesamten Verlauf anzeigen"
 }

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

@@ -40,5 +40,6 @@
 		"mostExpensive": "Most Expensive",
 		"mostTokens": "Most Tokens",
 		"mostRelevant": "Most Relevant"
-	}
+	},
+	"viewAllHistory": "View all tasks"
 }

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

@@ -47,5 +47,6 @@
 		"mostExpensive": "Más costosas",
 		"mostTokens": "Más tokens",
 		"mostRelevant": "Más relevantes"
-	}
+	},
+	"viewAllHistory": "Ver todo el historial"
 }

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

@@ -47,5 +47,6 @@
 		"mostExpensive": "Plus coûteuses",
 		"mostTokens": "Plus de tokens",
 		"mostRelevant": "Plus pertinentes"
-	}
+	},
+	"viewAllHistory": "Voir tout l'historique"
 }

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

@@ -40,5 +40,6 @@
 		"mostExpensive": "सबसे महंगा",
 		"mostTokens": "सबसे अधिक टोकन",
 		"mostRelevant": "सबसे प्रासंगिक"
-	}
+	},
+	"viewAllHistory": "सभी कार्य देखें"
 }

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

@@ -49,5 +49,6 @@
 		"mostExpensive": "Termahal",
 		"mostTokens": "Token Terbanyak",
 		"mostRelevant": "Paling Relevan"
-	}
+	},
+	"viewAllHistory": "Lihat semua tugas"
 }

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

@@ -40,5 +40,6 @@
 		"mostExpensive": "Più costose",
 		"mostTokens": "Più token",
 		"mostRelevant": "Più rilevanti"
-	}
+	},
+	"viewAllHistory": "Visualizza tutta la cronologia"
 }