From 409c98ca295be7b4541148c9568ed9b89524e37a Mon Sep 17 00:00:00 2001
From: Ku6epXBOCTuK <Ku6epXBOCTuK@gmail.com>
Date: Sun, 4 Oct 2026 13:13:06 +0500
Subject: [PATCH] refactor: reuse badge component

---
 docs/backlog.md                               |  7 ----
 .../components/schema/SchemaTextResult.svelte | 38 ++++---------------
 web/src/lib/components/ui/Badge.svelte        | 37 ++++++++++++++++--
 web/src/routes/kit/+page.svelte               |  7 ++++
 4 files changed, 48 insertions(+), 41 deletions(-)

diff --git a/docs/backlog.md b/docs/backlog.md
index addd00c..338a69b 100644
--- a/docs/backlog.md
+++ b/docs/backlog.md
@@ -82,13 +82,6 @@
 - [ ] придумать процесс редактирования и настройки pipeline - drag-n-drop,
       удаление, добавление инструментов. переход один инструмент - pipeline без
       перезагрузки
-- [ ] `CatalogToolbar`: фильтры используют сырой `<button>`, а не `ui/Button` —
-      единый контрол для всей библиотеки
-      (`web/src/lib/components/CatalogToolbar.svelte`).
-- [ ] `SchemaTextResult` вердикт-бейдж рисует руками: свои классы
-      `badge`/`badge-tone--{tone}` и свой CSS в `<style>` вместо
-      `ui/Badge.svelte` — тон и разметка бейджа живут в двух местах
-      (`web/src/lib/components/schema/SchemaTextResult.svelte`).
 - [ ] `PreviewTile`: высота плитки задана только `min-height: clamp(...)`,
       поэтому она не следует за пропорциями результата — широкий результат
       уезжает в узкую полосу, а высокий упирается в `max-height: 100vh`. Нужно,
diff --git a/web/src/lib/components/schema/SchemaTextResult.svelte b/web/src/lib/components/schema/SchemaTextResult.svelte
index de36fd3..b15fc40 100644
--- a/web/src/lib/components/schema/SchemaTextResult.svelte
+++ b/web/src/lib/components/schema/SchemaTextResult.svelte
@@ -2,6 +2,7 @@
 	import { verdictText, verdictTone } from "$lib/i18n/schema-tool-strings";
 	import { t } from "$lib/i18n/t";
 	import { Copy, Download, FileText } from "@lucide/svelte";
+	import Badge from "$lib/components/ui/Badge.svelte";
 	import IconButton from "$lib/components/ui/IconButton.svelte";
 
 	interface Props {
@@ -32,14 +33,16 @@
 {#if kind === "verdict"}
 	<div class="verdict">
 		<span class="verdict-label">{t("resultCard.result")}</span>
-		<div
+		<Badge
+			{tone}
+			variant="tint"
+			size="m"
 			data-testid="result-verdict"
-			class="badge badge-tone--{tone}"
 			role="status"
 		>
-			<span class="verdict-text">{displayValue}</span>
+			{displayValue}
 			<IconButton icon={Copy} label={t("textResult.copy")} onclick={oncopy} />
-		</div>
+		</Badge>
 	</div>
 {:else}
 	<div class="text-result">
@@ -109,31 +112,4 @@
 		letter-spacing: var(--space-text-l);
 		text-transform: uppercase;
 	}
-	.badge {
-		display: inline-flex;
-		align-items: center;
-		gap: var(--space-l);
-		padding: var(--space-m) var(--space-xl);
-		border: var(--size-border-thick) solid transparent;
-		border-radius: var(--radius-m);
-		font: var(--font-size-m) var(--font-mono);
-	}
-	.badge-tone--success {
-		background: var(--color-success-tint);
-		border-color: var(--color-success);
-		color: var(--color-success);
-	}
-	.badge-tone--danger {
-		background: var(--color-danger-tint);
-		border-color: var(--color-danger);
-		color: var(--color-danger);
-	}
-	.badge-tone--info {
-		background: var(--color-info-tint);
-		border-color: var(--color-info);
-		color: var(--color-info);
-	}
-	.verdict-text {
-		line-height: normal;
-	}
 </style>
diff --git a/web/src/lib/components/ui/Badge.svelte b/web/src/lib/components/ui/Badge.svelte
index 7de8837..4d97d72 100644
--- a/web/src/lib/components/ui/Badge.svelte
+++ b/web/src/lib/components/ui/Badge.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
 	import { Check } from "@lucide/svelte";
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	const ToneVariantDefine = {
 		DEFAULT: "default",
@@ -15,28 +17,43 @@
 		DEFAULT: "default",
 		OUTLINE: "outline",
 		CLEAR: "clear",
+		TINT: "tint",
 	} as const;
 	type BadgeVariant =
 		(typeof BadgeVariantDefine)[keyof typeof BadgeVariantDefine];
 
-	interface Props {
+	const BadgeSizeDefine = {
+		S: "s",
+		M: "m",
+	} as const;
+	type BadgeSize = (typeof BadgeSizeDefine)[keyof typeof BadgeSizeDefine];
+
+	interface Props extends HTMLAttributes<HTMLSpanElement> {
 		tone?: ToneVariant;
 		variant?: BadgeVariant;
+		size?: BadgeSize;
 		check?: boolean;
 		label?: string;
+		children?: Snippet;
 	}
 
 	let {
 		tone = ToneVariantDefine.DEFAULT,
 		variant = BadgeVariantDefine.DEFAULT,
+		size = BadgeSizeDefine.S,
 		check = false,
 		label = "",
+		children,
+		...rest
 	}: Props = $props();
 </script>
 
-<span class="badge badge-tone--{tone} badge-variant--{variant}">
+<span
+	class="badge badge-tone--{tone} badge-variant--{variant} badge-size--{size}"
+	{...rest}
+>
 	{#if check}<Check size={12} />{/if}
-	{label}
+	{#if children}{@render children()}{:else}{label}{/if}
 </span>
 
 <style>
@@ -94,4 +111,18 @@
 		border-color: transparent;
 		color: var(--color-badge-tint);
 	}
+
+	.badge-variant--tint {
+		background-color: var(--color-badge-tint);
+		border-style: solid;
+		border-color: var(--color-badge-main);
+		border-radius: var(--radius-m);
+		color: var(--color-badge-main);
+	}
+
+	.badge-size--m {
+		gap: var(--space-l);
+		padding: var(--space-m) var(--space-xl);
+		font-size: var(--font-size-m);
+	}
 </style>
diff --git a/web/src/routes/kit/+page.svelte b/web/src/routes/kit/+page.svelte
index 098956d..6317b34 100644
--- a/web/src/routes/kit/+page.svelte
+++ b/web/src/routes/kit/+page.svelte
@@ -147,6 +147,13 @@
 				<Badge tone="warning" label="warning" />
 				<Badge tone="info" label="info" />
 			</SettingGroup>
+			<SettingGroup label="variants">
+				<Badge tone="success" variant="outline" label="outline" />
+				<Badge tone="success" variant="clear" label="clear" />
+				<Badge tone="success" variant="tint" label="tint" />
+				<Badge tone="danger" variant="tint" label="tint" />
+				<Badge tone="info" variant="tint" size="m" label="tint m" />
+			</SettingGroup>
 		</div>
 	</Panel>