From 87fe94037ea554ccc42df56c53dd3863c02123fb Mon Sep 17 00:00:00 2001
From: Jean-Luc Makiola <business@jeanlucmakiola.de>
Date: Sun, 15 Mar 2026 18:48:27 +0100
Subject: [PATCH] feat: add external link confirmation dialog for product URLs

Show an external link icon on ItemCard and CandidateCard that opens a
confirmation dialog before navigating to product URLs.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/client/components/CandidateCard.tsx      | 33 +++++++++-
 src/client/components/ExternalLinkDialog.tsx | 65 ++++++++++++++++++++
 src/client/components/ItemCard.tsx           | 35 +++++++++++
 src/client/routes/__root.tsx                 |  4 ++
 src/client/stores/uiStore.ts                 | 10 +++
 5 files changed, 146 insertions(+), 1 deletion(-)
 create mode 100644 src/client/components/ExternalLinkDialog.tsx

diff --git a/src/client/components/CandidateCard.tsx b/src/client/components/CandidateCard.tsx
index 0cec639..30a84ac 100644
--- a/src/client/components/CandidateCard.tsx
+++ b/src/client/components/CandidateCard.tsx
@@ -10,6 +10,7 @@ interface CandidateCardProps {
 	categoryName: string;
 	categoryIcon: string;
 	imageFilename: string | null;
+	productUrl?: string | null;
 	threadId: number;
 	isActive: boolean;
 }
@@ -22,6 +23,7 @@ export function CandidateCard({
 	categoryName,
 	categoryIcon,
 	imageFilename,
+	productUrl,
 	threadId,
 	isActive,
 }: CandidateCardProps) {
@@ -30,9 +32,38 @@ export function CandidateCard({
 		(s) => s.openConfirmDeleteCandidate,
 	);
 	const openResolveDialog = useUIStore((s) => s.openResolveDialog);
+	const openExternalLink = useUIStore((s) => s.openExternalLink);
 
 	return (
-		<div className="bg-white rounded-xl border border-gray-100 hover:border-gray-200 hover:shadow-sm transition-all overflow-hidden">
+		<div className="relative bg-white rounded-xl border border-gray-100 hover:border-gray-200 hover:shadow-sm transition-all overflow-hidden group">
+			{productUrl && (
+				<span
+					role="button"
+					tabIndex={0}
+					onClick={() => openExternalLink(productUrl)}
+					onKeyDown={(e) => {
+						if (e.key === "Enter" || e.key === " ") {
+							openExternalLink(productUrl);
+						}
+					}}
+					className="absolute top-2 right-2 z-10 w-6 h-6 flex items-center justify-center rounded-full bg-gray-100/80 text-gray-400 hover:bg-blue-100 hover:text-blue-500 opacity-0 group-hover:opacity-100 transition-all cursor-pointer"
+					title="Open product link"
+				>
+					<svg
+						className="w-3.5 h-3.5"
+						fill="none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							strokeLinecap="round"
+							strokeLinejoin="round"
+							strokeWidth={2}
+							d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3"
+						/>
+					</svg>
+				</span>
+			)}
 			<div className="aspect-[4/3] bg-gray-50">
 				{imageFilename ? (
 					<img
diff --git a/src/client/components/ExternalLinkDialog.tsx b/src/client/components/ExternalLinkDialog.tsx
new file mode 100644
index 0000000..31efbd6
--- /dev/null
+++ b/src/client/components/ExternalLinkDialog.tsx
@@ -0,0 +1,65 @@
+import { useEffect } from "react";
+import { useUIStore } from "../stores/uiStore";
+
+export function ExternalLinkDialog() {
+	const externalLinkUrl = useUIStore((s) => s.externalLinkUrl);
+	const closeExternalLink = useUIStore((s) => s.closeExternalLink);
+
+	useEffect(() => {
+		function handleKeyDown(e: KeyboardEvent) {
+			if (e.key === "Escape") closeExternalLink();
+		}
+		if (externalLinkUrl) {
+			document.addEventListener("keydown", handleKeyDown);
+			return () => document.removeEventListener("keydown", handleKeyDown);
+		}
+	}, [externalLinkUrl, closeExternalLink]);
+
+	if (!externalLinkUrl) return null;
+
+	function handleContinue() {
+		if (externalLinkUrl) {
+			window.open(externalLinkUrl, "_blank", "noopener,noreferrer");
+		}
+		closeExternalLink();
+	}
+
+	return (
+		<div className="fixed inset-0 z-50 flex items-center justify-center">
+			<div
+				className="absolute inset-0 bg-black/30"
+				onClick={closeExternalLink}
+				onKeyDown={(e) => {
+					if (e.key === "Escape") closeExternalLink();
+				}}
+			/>
+			<div className="relative bg-white rounded-xl shadow-lg p-6 max-w-sm mx-4 w-full">
+				<h3 className="text-lg font-semibold text-gray-900 mb-2">
+					You are about to leave GearBox
+				</h3>
+				<p className="text-sm text-gray-600 mb-1">
+					You will be redirected to:
+				</p>
+				<p className="text-sm text-blue-600 break-all mb-6">
+					{externalLinkUrl}
+				</p>
+				<div className="flex justify-end gap-3">
+					<button
+						type="button"
+						onClick={closeExternalLink}
+						className="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors"
+					>
+						Cancel
+					</button>
+					<button
+						type="button"
+						onClick={handleContinue}
+						className="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors"
+					>
+						Continue
+					</button>
+				</div>
+			</div>
+		</div>
+	);
+}
diff --git a/src/client/components/ItemCard.tsx b/src/client/components/ItemCard.tsx
index 0115d1a..77fd23d 100644
--- a/src/client/components/ItemCard.tsx
+++ b/src/client/components/ItemCard.tsx
@@ -10,6 +10,7 @@ interface ItemCardProps {
 	categoryName: string;
 	categoryIcon: string;
 	imageFilename: string | null;
+	productUrl?: string | null;
 	onRemove?: () => void;
 }
 
@@ -21,9 +22,11 @@ export function ItemCard({
 	categoryName,
 	categoryIcon,
 	imageFilename,
+	productUrl,
 	onRemove,
 }: ItemCardProps) {
 	const openEditPanel = useUIStore((s) => s.openEditPanel);
+	const openExternalLink = useUIStore((s) => s.openExternalLink);
 
 	return (
 		<button
@@ -31,6 +34,38 @@ export function ItemCard({
 			onClick={() => openEditPanel(id)}
 			className="relative w-full text-left bg-white rounded-xl border border-gray-100 hover:border-gray-200 hover:shadow-sm transition-all overflow-hidden group"
 		>
+			{productUrl && (
+				<span
+					role="button"
+					tabIndex={0}
+					onClick={(e) => {
+						e.stopPropagation();
+						openExternalLink(productUrl);
+					}}
+					onKeyDown={(e) => {
+						if (e.key === "Enter" || e.key === " ") {
+							e.stopPropagation();
+							openExternalLink(productUrl);
+						}
+					}}
+					className={`absolute top-2 ${onRemove ? "right-10" : "right-2"} z-10 w-6 h-6 flex items-center justify-center rounded-full bg-gray-100/80 text-gray-400 hover:bg-blue-100 hover:text-blue-500 opacity-0 group-hover:opacity-100 transition-all cursor-pointer`}
+					title="Open product link"
+				>
+					<svg
+						className="w-3.5 h-3.5"
+						fill="none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							strokeLinecap="round"
+							strokeLinejoin="round"
+							strokeWidth={2}
+							d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3"
+						/>
+					</svg>
+				</span>
+			)}
 			{onRemove && (
 				<span
 					role="button"
diff --git a/src/client/routes/__root.tsx b/src/client/routes/__root.tsx
index bd63385..60bb39b 100644
--- a/src/client/routes/__root.tsx
+++ b/src/client/routes/__root.tsx
@@ -11,6 +11,7 @@ import { SlideOutPanel } from "../components/SlideOutPanel";
 import { ItemForm } from "../components/ItemForm";
 import { CandidateForm } from "../components/CandidateForm";
 import { ConfirmDialog } from "../components/ConfirmDialog";
+import { ExternalLinkDialog } from "../components/ExternalLinkDialog";
 import { OnboardingWizard } from "../components/OnboardingWizard";
 import { useUIStore } from "../stores/uiStore";
 import { useOnboardingComplete } from "../hooks/useSettings";
@@ -142,6 +143,9 @@ function RootLayout() {
       {/* Item Confirm Delete Dialog */}
       <ConfirmDialog />
 
+      {/* External Link Confirmation Dialog */}
+      <ExternalLinkDialog />
+
       {/* Candidate Delete Confirm Dialog */}
       {confirmDeleteCandidateId != null && currentThreadId != null && (
         <CandidateDeleteDialog
diff --git a/src/client/stores/uiStore.ts b/src/client/stores/uiStore.ts
index 842ef25..97d1355 100644
--- a/src/client/stores/uiStore.ts
+++ b/src/client/stores/uiStore.ts
@@ -43,6 +43,11 @@ interface UIState {
 	createThreadModalOpen: boolean;
 	openCreateThreadModal: () => void;
 	closeCreateThreadModal: () => void;
+
+	// External link dialog
+	externalLinkUrl: string | null;
+	openExternalLink: (url: string) => void;
+	closeExternalLink: () => void;
 }
 
 export const useUIStore = create<UIState>((set) => ({
@@ -93,4 +98,9 @@ export const useUIStore = create<UIState>((set) => ({
 	createThreadModalOpen: false,
 	openCreateThreadModal: () => set({ createThreadModalOpen: true }),
 	closeCreateThreadModal: () => set({ createThreadModalOpen: false }),
+
+	// External link dialog
+	externalLinkUrl: null,
+	openExternalLink: (url) => set({ externalLinkUrl: url }),
+	closeExternalLink: () => set({ externalLinkUrl: null }),
 }));