feat: move preview pages to root

2026-09-14 21:46:35 +00:00 · 2026-09-10 19:59:40 +05:00
parent 85effce7d9
commit 45dc54b6aa
8 changed files with 8 additions and 77 deletions
@@ -0,0 +1,78 @@
+<script lang="ts">
+	import CatalogGroup from "$lib/components/kit/CatalogGroup.svelte";
+	import CatalogHeader from "$lib/components/kit/CatalogHeader.svelte";
+	import CatalogToolbar from "$lib/components/kit/CatalogToolbar.svelte";
+	import ToolCard from "$lib/components/kit/ToolCard.svelte";
+	import { PREVIEW_GROUPS, PREVIEW_TOTAL } from "$lib/preview/catalog";
+	import { TOOL_ICONS } from "$lib/preview/tool-icons";
+
+	let query = $state("");
+	let category = $state<string>("all");
+
+	const groups = $derived(
+		PREVIEW_GROUPS.map((g) => ({
+			id: g.id,
+			label: g.label,
+			tools: g.tools.filter(
+				(t) =>
+					(category === "all" || category === g.id) &&
+					(query.trim() === "" ||
+						t.title.toLowerCase().includes(query.trim().toLowerCase()) ||
+						t.description.toLowerCase().includes(query.trim().toLowerCase())),
+			),
+		})).filter((g) => g.tools.length > 0),
+	);
+
+	// TODO: make main page different from catalog - larger and simpler search, no categories
+</script>
+
+<div class="catalog-page">
+	<CatalogHeader total={PREVIEW_TOTAL} />
+	<CatalogToolbar bind:query bind:category />
+	<div class="catalog-groups">
+		{#each groups as group (group.id)}
+			<CatalogGroup label={group.label} count={group.tools.length}>
+				{#each group.tools as tool, i (tool.id)}
+					<ToolCard
+						title={tool.title}
+						id={tool.id}
+						description={tool.description}
+						index={i + 1}
+						icon={TOOL_ICONS[tool.id]}
+					/>
+				{/each}
+			</CatalogGroup>
+		{/each}
+	</div>
+	<footer class="catalog-footer">
+		ALL OPERATIONS RUN LOCALLY <span>•</span> YOUR FILES NEVER LEAVE THIS DEVICE
+	</footer>
+</div>
+
+<style>
+	.catalog-page {
+		padding: var(--space-page-top)
+			clamp(var(--space-xxl), 4vw, var(--space-page-bottom))
+			var(--space-page-bottom);
+	}
+	.catalog-groups {
+		display: grid;
+		gap: var(--space-page-top) var(--space-xxl);
+	}
+	.catalog-footer {
+		display: flex;
+		gap: var(--space-xxl);
+		flex-wrap: wrap;
+		margin-top: var(--space-page-top);
+		padding-top: var(--space-xxl);
+		border-top: var(--size-border) solid var(--color-border);
+		font: var(--font-size-xs) var(--font-mono);
+		letter-spacing: var(--space-text-l);
+		color: var(--color-text-muted);
+	}
+	@media (--bp-tablet) {
+		.catalog-groups {
+			grid-template-columns: 1fr;
+		}
+	}
+</style>