From a4c85c08140bd802bfb0dc2952ea475d4dca48f5 Mon Sep 17 00:00:00 2001
From: Ku6epXBOCTuK <Ku6epXBOCTuK@gmail.com>
Date: Sun, 13 Sep 2026 05:44:05 +0500
Subject: [PATCH] fix: update i18n - catalog, nav, common components

---
 web/src/lib/components/CatalogGroup.svelte   |  4 +++-
 web/src/lib/components/CatalogHeader.svelte  | 11 ++++-----
 web/src/lib/components/CatalogToolbar.svelte | 24 +++++++++++---------
 web/src/lib/components/Dropzone.svelte       |  5 ++--
 web/src/lib/components/ui/LangToggle.svelte  |  3 ++-
 web/src/lib/components/ui/ThemeToggle.svelte |  3 ++-
 web/src/lib/components/ui/TopNav.svelte      |  7 +++---
 7 files changed, 32 insertions(+), 25 deletions(-)

diff --git a/web/src/lib/components/CatalogGroup.svelte b/web/src/lib/components/CatalogGroup.svelte
index 864147d..fc8228a 100644
--- a/web/src/lib/components/CatalogGroup.svelte
+++ b/web/src/lib/components/CatalogGroup.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { Snippet } from "svelte";
+	import { t } from "$lib/i18n/t";
 
 	interface Props {
 		label: string;
@@ -12,7 +13,8 @@
 <section class="catalog-group">
 	<div class="group-title">
 		<span>{label}</span>
-		<i>{count.toString().padStart(2, "0")} <!-- --> TOOLS</i>
+		<i>{count.toString().padStart(2, "0")} <!-- --> {t("catalog.toolsCount")}</i
+		>
 	</div>
 	<div class="tool-cards">
 		{@render children()}
diff --git a/web/src/lib/components/CatalogHeader.svelte b/web/src/lib/components/CatalogHeader.svelte
index 8f641d6..55551a8 100644
--- a/web/src/lib/components/CatalogHeader.svelte
+++ b/web/src/lib/components/CatalogHeader.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { t } from "$lib/i18n/t";
+
 	interface Props {
 		total: number;
 	}
@@ -7,15 +9,12 @@
 
 <div class="catalog-head">
 	<div>
-		<h1>Tool catalog</h1>
-		<p>
-			Focused utilities for working with PNG. Inspect, transform, and export —
-			locally in your browser.
-		</p>
+		<h1>{t("catalog.heading")}</h1>
+		<p>{t("catalog.lead")}</p>
 	</div>
 	<div class="catalog-total">
 		<b>{total}</b>
-		<span>TOOLS<br /> AVAILABLE</span>
+		<span>{t("catalog.toolsAvailable")}</span>
 	</div>
 </div>
 
diff --git a/web/src/lib/components/CatalogToolbar.svelte b/web/src/lib/components/CatalogToolbar.svelte
index 1b4e355..fc7228e 100644
--- a/web/src/lib/components/CatalogToolbar.svelte
+++ b/web/src/lib/components/CatalogToolbar.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { Funnel, Search } from "@lucide/svelte";
+	import { t } from "$lib/i18n/t";
 
 	interface Props {
 		query: string;
@@ -8,15 +9,15 @@
 	let { query = $bindable(), category = $bindable() }: Props = $props();
 
 	const FILTERS = [
-		{ value: "all", label: "ALL" },
-		{ value: "convert", label: "CONVERT" },
-		{ value: "alpha", label: "TRANSPARENCY" },
-		{ value: "color", label: "COLOR" },
-		{ value: "geometry", label: "GEOMETRY" },
-		{ value: "filters", label: "FILTERS" },
-		{ value: "text", label: "TEXT" },
-		{ value: "analyze", label: "ANALYZE" },
-		{ value: "generate", label: "GENERATE" },
+		{ value: "all", label: t("categories.all") },
+		{ value: "convert", label: t("categories.convert") },
+		{ value: "alpha", label: t("categories.alpha") },
+		{ value: "color", label: t("categories.color") },
+		{ value: "geometry", label: t("categories.geometry") },
+		{ value: "filters", label: t("categories.filters") },
+		{ value: "text", label: t("categories.text") },
+		{ value: "analyze", label: t("categories.analyze") },
+		{ value: "generate", label: t("categories.generate") },
 	];
 
 	// TODO: Button component
@@ -26,8 +27,8 @@
 	<label class="catalog-search">
 		<Search size={16} />
 		<input
-			aria-label="Search tools"
-			placeholder="Search tools..."
+			aria-label={t("search.aria")}
+			placeholder={t("search.placeholder")}
 			bind:value={query}
 		/>
 	</label>
@@ -87,6 +88,7 @@
 		color: var(--color-text-muted);
 		font: var(--font-size-s) var(--font-mono);
 		letter-spacing: var(--space-text-m);
+		text-transform: uppercase;
 		padding: var(--space-s) var(--space-m);
 		border-radius: var(--radius-m);
 		cursor: pointer;
diff --git a/web/src/lib/components/Dropzone.svelte b/web/src/lib/components/Dropzone.svelte
index 72af9de..cbffae6 100644
--- a/web/src/lib/components/Dropzone.svelte
+++ b/web/src/lib/components/Dropzone.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { Upload } from "@lucide/svelte";
+	import { t } from "$lib/i18n/t";
 
 	interface Props {
 		accept?: string;
@@ -53,8 +54,8 @@
 		onchange={(e) => handleFiles((e.target as HTMLInputElement).files)}
 	/>
 	<Upload size={22} />
-	<span class="dz-title">Drop a PNG here</span>
-	<span class="dz-sub">or click to browse — processed locally</span>
+	<span class="dz-title">{t("dropZone.pickTitle")}</span>
+	<span class="dz-sub">{t("dropZone.pickHint")}</span>
 </div>
 
 <style>
diff --git a/web/src/lib/components/ui/LangToggle.svelte b/web/src/lib/components/ui/LangToggle.svelte
index 25b4144..9ad66c5 100644
--- a/web/src/lib/components/ui/LangToggle.svelte
+++ b/web/src/lib/components/ui/LangToggle.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
 	import { LOCALES, type Locale } from "$lib/i18n/dict";
 	import { getLocale, setLocale } from "$lib/i18n/locale.svelte";
+	import { t } from "$lib/i18n/t";
 
 	const LANG_LABELS: Record<Locale, string> = { ru: "RU", en: "EN" };
 </script>
 
-<div class="lang" role="group" aria-label="Language">
+<div class="lang" role="group" aria-label={t("ui.language")}>
 	{#each LOCALES as l (l)}
 		<button
 			type="button"
diff --git a/web/src/lib/components/ui/ThemeToggle.svelte b/web/src/lib/components/ui/ThemeToggle.svelte
index 381a8d2..20d3ee3 100644
--- a/web/src/lib/components/ui/ThemeToggle.svelte
+++ b/web/src/lib/components/ui/ThemeToggle.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { Moon, Sun } from "@lucide/svelte";
+	import { t } from "$lib/i18n/t";
 	import IconButton from "../ui/IconButton.svelte";
 
 	interface Props {
@@ -14,7 +15,7 @@
 
 <IconButton
 	icon={theme === "light" ? Moon : Sun}
-	label="Toggle theme"
+	label={t("ui.themeToggle")}
 	variant="clear"
 	onclick={ontoggle}
 />
diff --git a/web/src/lib/components/ui/TopNav.svelte b/web/src/lib/components/ui/TopNav.svelte
index aeffc7c..efabbc9 100644
--- a/web/src/lib/components/ui/TopNav.svelte
+++ b/web/src/lib/components/ui/TopNav.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
 	import { resolve } from "$app/paths";
+	import { t } from "$lib/i18n/t";
 </script>
 
 <nav class="nav">
-	<a href={resolve("/")}>Home page</a>
-	<a href={resolve("/list-tools")}>Catalog</a>
-	<a href={resolve("/kit")}> UI Kit </a>
+	<a href={resolve("/")}>{t("header.home")}</a>
+	<a href={resolve("/list-tools")}>{t("header.catalog")}</a>
+	<a href={resolve("/kit")}>{t("header.uiKit")}</a>
 </nav>
 
 <style>