From 200e971df503e6ba6a460bdd24f47cd617dbbc7c Mon Sep 17 00:00:00 2001
From: Ku6epXBOCTuK <Ku6epXBOCTuK@gmail.com>
Date: Mon, 24 Aug 2026 10:03:46 +0500
Subject: [PATCH] fix: use toolcard as links at list page

---
 .../components/chain/ChainToolBlock.svelte    | 16 ++++++
 web/src/lib/components/search/ToolCard.svelte | 54 ++++++++++++++-----
 web/src/routes/list-tools/+page.svelte        | 41 +++++---------
 3 files changed, 68 insertions(+), 43 deletions(-)

diff --git a/web/src/lib/components/chain/ChainToolBlock.svelte b/web/src/lib/components/chain/ChainToolBlock.svelte
index 45117bb..6cdf6ff 100644
--- a/web/src/lib/components/chain/ChainToolBlock.svelte
+++ b/web/src/lib/components/chain/ChainToolBlock.svelte
@@ -6,6 +6,7 @@
 	import EmptyState from '../ui/EmptyState.svelte';
 	import ParamsCard from '../tool/ParamsCard.svelte';
 	import Preview from '../Preview.svelte';
+	import { TOOL_ICONS } from '$lib/tools/tool-icons';
 
 	interface Props {
 		index: number;
@@ -37,11 +38,15 @@
 
 	const format = $derived(outputOf(tool));
 	const safeParams = $derived(sanitizeParams(tool, values));
+	const StepIcon = $derived(TOOL_ICONS[tool.id]);
 </script>
 
 <div class="block">
 	<div class="panel tool-stage">
 		<span class="edge-legend step-legend">
+			{#if StepIcon}
+				<span class="step-icon" aria-hidden="true"><StepIcon size={14} strokeWidth={2} /></span>
+			{/if}
 			Шаг {index + 1}: {tool.title}
 			<button
 				type="button"
@@ -118,6 +123,17 @@
 		font-weight: 600;
 	}
 
+	.step-icon {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 1.4rem;
+		height: 1.4rem;
+		border-radius: var(--radius-s);
+		background: color-mix(in srgb, var(--accent) 10%, var(--surface));
+		color: var(--accent);
+	}
+
 	.remove {
 		width: 1.4rem;
 		height: 1.4rem;
diff --git a/web/src/lib/components/search/ToolCard.svelte b/web/src/lib/components/search/ToolCard.svelte
index 39ad952..dc8254d 100644
--- a/web/src/lib/components/search/ToolCard.svelte
+++ b/web/src/lib/components/search/ToolCard.svelte
@@ -6,27 +6,25 @@
 		title: string;
 		description: string;
 		selected?: boolean;
+		href?: string;
 		onActivate?: () => void;
 		onHover?: () => void;
 	}
 
-	let { toolId, title, description, selected = false, onActivate, onHover }: Props = $props();
+	let {
+		toolId,
+		title,
+		description,
+		selected = false,
+		href,
+		onActivate,
+		onHover
+	}: Props = $props();
 
 	const Icon = $derived(TOOL_ICONS[toolId]);
 </script>
 
-<div
-	class="card"
-	class:selected
-	role="option"
-	aria-selected={selected}
-	tabindex="-1"
-	onclick={onActivate}
-	onmousemove={onHover}
-	onkeydown={(e) => {
-		if (e.key === 'Enter') onActivate?.();
-	}}
->
+{#snippet content()}
 	<span class="icon-box" aria-hidden="true">
 		{#if Icon}<Icon size={24} strokeWidth={1.75} />{/if}
 	</span>
@@ -34,7 +32,33 @@
 		<span class="title">{title}</span>
 		<span class="hint text-caption text-muted">{description}</span>
 	</span>
-</div>
+{/snippet}
+
+{#if href}
+	<a
+		{href}
+		class="card"
+		class:selected
+		onmousemove={onHover}
+	>
+		{@render content()}
+	</a>
+{:else}
+	<div
+		class="card"
+		class:selected
+		role="option"
+		aria-selected={selected}
+		tabindex="-1"
+		onclick={onActivate}
+		onmousemove={onHover}
+		onkeydown={(e) => {
+			if (e.key === 'Enter') onActivate?.();
+		}}
+	>
+		{@render content()}
+	</div>
+{/if}
 
 <style>
 	.card {
@@ -46,6 +70,8 @@
 		border: 1px solid transparent;
 		border-radius: var(--radius-s);
 		cursor: pointer;
+		color: inherit;
+		text-decoration: none;
 	}
 
 	.card:hover,
diff --git a/web/src/routes/list-tools/+page.svelte b/web/src/routes/list-tools/+page.svelte
index 8b29caf..fa4eb9e 100644
--- a/web/src/routes/list-tools/+page.svelte
+++ b/web/src/routes/list-tools/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { CATEGORIES } from '$lib/categories';
+	import ToolCard from '$lib/components/search/ToolCard.svelte';
 	import { TOOLS } from '$lib/registry';
 </script>
 
@@ -23,10 +24,14 @@
 			<h2 id="{category.id}-heading" class="heading-section">{category.label}</h2>
 			<div class="grid">
 				{#each categoryTools as tool (tool.id)}
-					<a class="card panel" href="/tools/{tool.id}">
-						<span class="card-title">{tool.title}</span>
-						<span class="card-desc text-caption text-muted">{tool.description}</span>
-					</a>
+					<div class="panel">
+						<ToolCard
+							toolId={tool.id}
+							title={tool.title}
+							description={tool.description}
+							href="/tools/{tool.id}"
+						/>
+					</div>
 				{/each}
 			</div>
 		</section>
@@ -58,39 +63,17 @@
 		gap: var(--space-3);
 	}
 
-	.card {
-		display: flex;
-		flex-direction: column;
-		gap: var(--space-2);
-		padding: var(--space-3) var(--space-3) var(--space-4);
-		color: inherit;
+	.grid > .panel {
+		padding: var(--space-2) var(--space-2) var(--space-3);
 		transition:
 			border-color var(--transition-fast),
 			box-shadow var(--transition-fast),
 			transform var(--transition-fast);
 	}
 
-	.card:hover {
-		text-decoration: none;
+	.grid > .panel:hover {
 		border-color: var(--accent);
 		box-shadow: var(--shadow-card);
 		transform: translateY(-1px);
 	}
-
-	.card-title {
-		font-weight: 600;
-		font-size: var(--text-m);
-	}
-
-	.card:hover .card-title {
-		color: var(--accent);
-	}
-
-	.card-desc {
-		display: -webkit-box;
-		-webkit-line-clamp: 3;
-		line-clamp: 3;
-		-webkit-box-orient: vertical;
-		overflow: hidden;
-	}
 </style>