feat: add favorites tools

web/src/lib/components/catalog/ToolCard.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
 	import { resolve } from "$app/paths";
-	import { ArrowUpRight } from "@lucide/svelte";
+	import { ArrowUpRight, Star } from "@lucide/svelte";
 	import type { Component } from "svelte";
 	import Icon from "$lib/components/ui/Icon.svelte";
+	import { isFav, toggleFav } from "$lib/favorites.svelte";
+	import { t } from "$lib/i18n/t";
 
 	interface Props {
 		title: string;
@@ -20,6 +22,20 @@
 		<strong>{title}</strong>
 		{#if description}<span>{description}</span>{/if}
 	</span>
+	<button
+		type="button"
+		class="tool-fav"
+		class:active={isFav(slug)}
+		aria-label={isFav(slug) ? t("ui.removeFav") : t("ui.addFav")}
+		aria-pressed={isFav(slug)}
+		onclick={(e) => {
+			e.preventDefault();
+			e.stopPropagation();
+			toggleFav(slug);
+		}}
+	>
+		<Star size={15} fill={isFav(slug) ? "currentColor" : "none"} />
+	</button>
 	<span class="tool-index">
 		{index !== undefined ? index.toString().padStart(2, "0") : ""}
 	</span>
@@ -31,7 +47,7 @@
 		display: grid;
 		grid-template-columns:
 			var(--size-tool-icon) minmax(0, 1fr) var(--space-xxl)
-			var(--size-tool-arrow);
+			var(--space-xxl) var(--size-tool-arrow);
 		align-items: center;
 		gap: var(--space-l);
 		min-height: var(--size-tool-min-height);
@@ -54,6 +70,19 @@
 		color: var(--color-main);
 		border-radius: var(--radius-m);
 	}
+	.tool-fav {
+		display: grid;
+		place-items: center;
+		padding: var(--space-s);
+		border: none;
+		background: none;
+		color: var(--color-text-muted);
+		cursor: pointer;
+	}
+	.tool-fav:hover,
+	.tool-fav.active {
+		color: var(--color-warning);
+	}
 	.tool-copy {
 		display: flex;
 		flex-direction: column;

web/src/lib/components/schema/SchemaToolView.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 	import StepCard from "$lib/components/display/StepCard.svelte";
 	import Toggle from "$lib/components/ui/Toggle.svelte";
+	import { isFav, toggleFav } from "$lib/favorites.svelte";
+	import { Star } from "@lucide/svelte";
 	import { hasTransparency } from "$lib/core/analyze";
 	import { debounce } from "$lib/core/debounce";
 	import { ToolError, type ErrorVars } from "$lib/core/errors";
@@ -480,7 +482,19 @@
 	<div class="schema-tool">
 		<header class="header">
 			<div class="title-block">
-				<h1>{pageTitle(page)}</h1>
+				<h1>
+					{pageTitle(page)}
+					<button
+						type="button"
+						class="tool-fav"
+						class:active={isFav(page.slug)}
+						aria-label={isFav(page.slug) ? t("ui.removeFav") : t("ui.addFav")}
+						aria-pressed={isFav(page.slug)}
+						onclick={() => toggleFav(page.slug)}
+					>
+						<Star size={18} fill={isFav(page.slug) ? "currentColor" : "none"} />
+					</button>
+				</h1>
 				<p class="lede">{pageDescription(page)}</p>
 			</div>
 		</header>
@@ -701,11 +715,27 @@
 		margin-bottom: var(--space-xxxl);
 	}
 	.title-block h1 {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--space-m);
 		margin: var(--space-s) 0 0;
 		font-size: clamp(var(--font-size-xl), 4vw, var(--font-size-2xl));
 		line-height: 1.1;
 		color: var(--color-text);
 	}
+	.tool-fav {
+		display: inline-grid;
+		place-items: center;
+		padding: var(--space-s);
+		border: none;
+		background: none;
+		color: var(--color-text-muted);
+		cursor: pointer;
+	}
+	.tool-fav:hover,
+	.tool-fav.active {
+		color: var(--color-warning);
+	}
 	.lede {
 		max-width: 100%;
 		margin: var(--space-m) 0 0;