fix: update i18n text in pages and layout

web/src/routes/+layout.svelte

@@ -3,6 +3,9 @@
 	import Footer from "$lib/components/layout/Footer.svelte";
 	import TopBar from "$lib/components/layout/TopBar.svelte";
 	import { initLocale } from "$lib/i18n/locale.svelte";
+	import { toolTitle } from "$lib/i18n/schema-tool-strings";
+	import { t } from "$lib/i18n/t";
+	import { getTool } from "$lib/registry";
 	import { getTheme, initTheme, setTheme } from "$lib/theme.svelte";
 	import type { Snippet } from "svelte";
 	import { onMount } from "svelte";
@@ -27,19 +30,16 @@
 
 	let crumb = $derived(toCrumb(page.url.pathname));
 
-	const CRUMB: Record<string, string> = {
-		"/list-tools": "CATALOG",
-		"/tools/linear-gradient-png": "GRADIENT",
-		"/tools/remove-background-png": "BACKGROUND REMOVER",
-	};
-
 	function toCrumb(path: string): string {
-		return (
+		if (path === "/") return "/ " + t("header.home");
-			"/ " +
+		if (path === "/list-tools") return "/ " + t("header.catalog");
-			(CRUMB[path] ??
+		if (path === "/kit") return "/ " + t("header.uiKit");
-				path.split("/").filter(Boolean).pop()?.toUpperCase() ??
+		const match = /^\/tools\/([^/]+)$/.exec(path);
-				"HOME")
+		if (match) {
-		);
+			const tool = getTool(match[1]);
+			if (tool) return "/ " + toolTitle(tool);
+		}
+		return "/ " + t("header.home");
 	}
 </script>
 

web/src/routes/+page.svelte

@@ -4,6 +4,7 @@
 	import CatalogHeader from "$lib/components/CatalogHeader.svelte";
 	import CatalogToolbar from "$lib/components/CatalogToolbar.svelte";
 	import ToolCard from "$lib/components/ToolCard.svelte";
+	import { t } from "$lib/i18n/t";
 	import { TOOL_ICONS } from "$lib/tool-icons";
 
 	let query = $state("");
@@ -44,9 +45,7 @@
 			</CatalogGroup>
 		{/each}
 	</div>
-	<footer class="catalog-footer">
+	<footer class="catalog-footer">{t("header.footerNote")}</footer>
-		ALL OPERATIONS RUN LOCALLY <span>•</span> YOUR FILES NEVER LEAVE THIS DEVICE
-	</footer>
 </div>
 
 <style>

web/src/routes/list-tools/+page.svelte

@@ -4,6 +4,7 @@
 	import CatalogHeader from "$lib/components/CatalogHeader.svelte";
 	import CatalogToolbar from "$lib/components/CatalogToolbar.svelte";
 	import ToolCard from "$lib/components/ToolCard.svelte";
+	import { t } from "$lib/i18n/t";
 	import { TOOL_ICONS } from "$lib/tool-icons";
 
 	let query = $state("");
@@ -42,9 +43,7 @@
 			</CatalogGroup>
 		{/each}
 	</div>
-	<footer class="catalog-footer">
+	<footer class="catalog-footer">{t("header.footerNote")}</footer>
-		ALL OPERATIONS RUN LOCALLY <span>•</span> YOUR FILES NEVER LEAVE THIS DEVICE
-	</footer>
 </div>
 
 <style>

web/src/routes/tools/[id]/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import EmptyState from "$lib/components/EmptyState.svelte";
 	import SchemaToolView from "$lib/components/SchemaToolView.svelte";
+	import { t } from "$lib/i18n/t";
 	import { getTool } from "$lib/registry";
 	import { SlidersHorizontal as ToolIcon } from "@lucide/svelte";
 
@@ -13,15 +14,15 @@
 </script>
 
 <svelte:head>
-	<title>easy-png-tools / {tool?.title ?? "Tool"}</title>
+	<title>easy-png-tools / {tool?.title ?? t("toolPage.fallbackTitle")}</title>
 	<meta name="robots" content="noindex, nofollow" />
 </svelte:head>
 
 {#if !tool}
 	<div class="notfound">
 		<EmptyState
-			title="Tool not found"
+			title={t("errors.notFound")}
-			description="No tool is registered under “{data.id}”."
+			description={t("errors.toolUnknown", { id: data.id })}
 			icon={ToolIcon}
 		/>
 	</div>