style: fix formatting via prettier

web/src/routes/(old)/+page.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
-	import { getTool } from '$lib/registry';
-	import { t } from '$lib/i18n/t';
-	import { toolTitle } from '$lib/i18n/tool-strings';
-	import ToolPage from '$lib/components/ToolPage.svelte';
-	import ToolSearch from '$lib/components/search/ToolSearch.svelte';
-	import Button from '$lib/components/ui/Button.svelte';
+	import { getTool } from "$lib/registry";
+	import { t } from "$lib/i18n/t";
+	import { toolTitle } from "$lib/i18n/tool-strings";
+	import ToolPage from "$lib/components/ToolPage.svelte";
+	import ToolSearch from "$lib/components/search/ToolSearch.svelte";
+	import Button from "$lib/components/ui/Button.svelte";
 
-	const LAST_TOOL_KEY = 'last-tool-id';
+	const LAST_TOOL_KEY = "last-tool-id";
 
 	function loadLastToolId(): string | null {
-		if (typeof localStorage === 'undefined') return null;
+		if (typeof localStorage === "undefined") return null;
 		try {
 			const id = localStorage.getItem(LAST_TOOL_KEY);
 			return id !== null && getTool(id) ? id : null;
@@ -27,7 +27,7 @@
 		selectedId = id;
 		restoreOnOpen = restore;
 		lastToolId = id;
-		if (typeof localStorage === 'undefined') return;
+		if (typeof localStorage === "undefined") return;
 		try {
 			localStorage.setItem(LAST_TOOL_KEY, id);
 		} catch {
@@ -39,33 +39,45 @@
 		selectedId = null;
 	}
 
-	let selected = $derived(selectedId !== null ? (getTool(selectedId) ?? null) : null);
+	let selected = $derived(
+		selectedId !== null ? (getTool(selectedId) ?? null) : null,
+	);
 </script>
 
 <svelte:head>
 	<title>
-		{selected ? `${selected.title} — easy-png-tools` : t('home.defaultTitle')}
+		{selected ? `${selected.title} — easy-png-tools` : t("home.defaultTitle")}
 	</title>
 </svelte:head>
 
 {#if !selected}
 	<section class="hero">
-		<h1>{t('home.heroTitle')}</h1>
-		<p class="lead text-muted">{t('home.heroLead')}</p>
+		<h1>{t("home.heroTitle")}</h1>
+		<p class="lead text-muted">{t("home.heroLead")}</p>
 		<ToolSearch onSelect={(id) => openTool(id)} />
 		{#if lastToolId !== null && getTool(lastToolId)}
 			{@const restoreId = lastToolId}
 			<div class="restore-row">
-				<Button variant="secondary" fullWidth onclick={() => openTool(restoreId, true)}>
-					{t('home.restoreLast', { title: getTool(restoreId) ? toolTitle(getTool(restoreId)!) : '' })}
+				<Button
+					variant="secondary"
+					fullWidth
+					onclick={() => openTool(restoreId, true)}
+				>
+					{t("home.restoreLast", {
+						title: getTool(restoreId) ? toolTitle(getTool(restoreId)!) : "",
+					})}
 				</Button>
 			</div>
 		{/if}
 	</section>
 {:else}
 	<section class="workbench">
-		<button type="button" class="back text-caption text-muted" onclick={closeTool}>
-			{t('home.changeTool')}
+		<button
+			type="button"
+			class="back text-caption text-muted"
+			onclick={closeTool}
+		>
+			{t("home.changeTool")}
 		</button>
 		{#key selectedId}
 			<ToolPage tool={selected} restoreChain={restoreOnOpen} />

web/src/routes/(old)/demo/+page.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-	import ToolPage from '$lib/components/ToolPage.svelte';
-	import { getTool } from '$lib/registry';
+	import ToolPage from "$lib/components/ToolPage.svelte";
+	import { getTool } from "$lib/registry";
 
-	const base = getTool('linear-gradient-png')!;
+	const base = getTool("linear-gradient-png")!;
 </script>
 
 <svelte:head>
@@ -17,17 +17,17 @@
 		presetBaseValues={{
 			width: 520,
 			height: 340,
-			fromColor: '#e5484d',
-			toColor: '#fbbf24',
-			direction: 'horizontal'
+			fromColor: "#e5484d",
+			toColor: "#fbbf24",
+			direction: "horizontal",
 		}}
 		presetChain={[
 			{
-				toolId: 'remove-background-png',
-				values: { color: '#fbbf24', tolerance: 10, outerOnly: true, smooth: 2 }
+				toolId: "remove-background-png",
+				values: { color: "#fbbf24", tolerance: 10, outerOnly: true, smooth: 2 },
 			},
-			{ toolId: 'add-stroke-png', values: { color: '#2563eb', thickness: 8 } },
-			{ toolId: 'round-corners-png', values: { radius: 28 } }
+			{ toolId: "add-stroke-png", values: { color: "#2563eb", thickness: 8 } },
+			{ toolId: "round-corners-png", values: { radius: 28 } },
 		]}
 	/>
 </section>

web/src/routes/(old)/list-tools/+page.svelte

@@ -1,25 +1,31 @@
 <script lang="ts">
-	import { CATEGORIES } from '$lib/categories';
-	import { resolve } from '$app/paths';
-	import { t } from '$lib/i18n/t';
-	import { toolDescription, toolTitle } from '$lib/i18n/tool-strings';
-	import ToolCard from '$lib/components/search/ToolCard.svelte';
-	import { TOOLS } from '$lib/registry';
+	import { CATEGORIES } from "$lib/categories";
+	import { resolve } from "$app/paths";
+	import { t } from "$lib/i18n/t";
+	import { toolDescription, toolTitle } from "$lib/i18n/tool-strings";
+	import ToolCard from "$lib/components/search/ToolCard.svelte";
+	import { TOOLS } from "$lib/registry";
 </script>
 
 <svelte:head>
-	<title>{t('catalog.pageTitle')}</title>
-	<meta name="description" content={t('catalog.metaDescription')} />
+	<title>{t("catalog.pageTitle")}</title>
+	<meta name="description" content={t("catalog.metaDescription")} />
 </svelte:head>
 
-<h1>{t('catalog.heading')}</h1>
-<p class="lead text-muted">{t('catalog.lead', { count: TOOLS.length })}</p>
+<h1>{t("catalog.heading")}</h1>
+<p class="lead text-muted">{t("catalog.lead", { count: TOOLS.length })}</p>
 
 {#each CATEGORIES as category (category)}
 	{@const categoryTools = TOOLS.filter((tool) => tool.category === category)}
 	{#if categoryTools.length > 0}
-		<section id={category} class="category" aria-labelledby="{category}-heading">
-			<h2 id="{category}-heading" class="heading-section">{t(`categories.${category}`)}</h2>
+		<section
+			id={category}
+			class="category"
+			aria-labelledby="{category}-heading"
+		>
+			<h2 id="{category}-heading" class="heading-section">
+				{t(`categories.${category}`)}
+			</h2>
 			<div class="grid">
 				{#each categoryTools as tool (tool.id)}
 					<div class="panel">

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

@@ -1,8 +1,8 @@
 <script lang="ts">
-	import ToolPage from '$lib/components/ToolPage.svelte';
-	import { getTool } from '$lib/registry';
-	import { t } from '$lib/i18n/t';
-	import { toolDescription, toolTitle } from '$lib/i18n/tool-strings';
+	import ToolPage from "$lib/components/ToolPage.svelte";
+	import { getTool } from "$lib/registry";
+	import { t } from "$lib/i18n/t";
+	import { toolDescription, toolTitle } from "$lib/i18n/tool-strings";
 
 	let { data } = $props();
 
@@ -10,7 +10,9 @@
 </script>
 
 <svelte:head>
-	<title>{tool ? toolTitle(tool) : t('toolPage.fallbackTitle')} — easy-png-tools</title>
+	<title
+		>{tool ? toolTitle(tool) : t("toolPage.fallbackTitle")} — easy-png-tools</title
+	>
 	{#if tool}
 		<meta name="description" content={toolDescription(tool)} />
 	{/if}

web/src/routes/(old)/tools/[id]/+page.ts

@@ -1,14 +1,15 @@
-import { error } from '@sveltejs/kit';
-import { getTool, TOOLS } from '$lib/registry';
-import { t } from '$lib/i18n/t';
-import type { EntryGenerator, PageLoad } from './$types';
+import { error } from "@sveltejs/kit";
+import { getTool, TOOLS } from "$lib/registry";
+import { t } from "$lib/i18n/t";
+import type { EntryGenerator, PageLoad } from "./$types";
 
-export const entries: EntryGenerator = () => TOOLS.map((tool) => ({ id: tool.id }));
+export const entries: EntryGenerator = () =>
+	TOOLS.map((tool) => ({ id: tool.id }));
 
 export const load: PageLoad = ({ params }) => {
 	const tool = getTool(params.id);
 	if (!tool) {
-		error(404, t('errors.notFound'));
+		error(404, t("errors.notFound"));
 	}
 	return { id: tool.id };
 };

web/src/routes/+layout.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-	import favicon from '$lib/assets/favicon.svg';
-	import { onMount } from 'svelte';
-	import { initLocale } from '$lib/i18n/locale.svelte';
-	import { initTheme } from '$lib/theme.svelte';
+	import favicon from "$lib/assets/favicon.svg";
+	import { onMount } from "svelte";
+	import { initLocale } from "$lib/i18n/locale.svelte";
+	import { initTheme } from "$lib/theme.svelte";
 
 	let { children } = $props();