feat: fix list tools page to correspond refs
This commit is contained in:
@@ -0,0 +1,51 @@
|
||||
<script lang="ts">
|
||||
import type { Snippet } from "svelte";
|
||||
|
||||
interface Props {
|
||||
label: string;
|
||||
count: number;
|
||||
children: Snippet;
|
||||
}
|
||||
let { label, count, children }: Props = $props();
|
||||
</script>
|
||||
|
||||
<section class="catalog-group">
|
||||
<div class="group-title">
|
||||
<span>{label}</span>
|
||||
<i>{count} <!-- --> TOOLS</i>
|
||||
</div>
|
||||
<div class="tool-cards">
|
||||
{@render children()}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.catalog-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
.group-title {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
.group-title span {
|
||||
font: 12px var(--font-mono);
|
||||
letter-spacing: 0.14em;
|
||||
color: var(--foreground);
|
||||
}
|
||||
.group-title i {
|
||||
font: 10px var(--font-mono);
|
||||
font-style: normal;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--muted);
|
||||
}
|
||||
.tool-cards {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,66 @@
|
||||
<script lang="ts">
|
||||
interface Props {
|
||||
total: number;
|
||||
}
|
||||
let { total }: Props = $props();
|
||||
</script>
|
||||
|
||||
<div class="catalog-head">
|
||||
<div>
|
||||
<div class="eyebrow">EASY-PNG-TOOLS / CATALOG</div>
|
||||
<h1>Tool catalog</h1>
|
||||
<p>
|
||||
Focused utilities for working with PNG. Inspect, transform, and export —
|
||||
locally in your browser.
|
||||
</p>
|
||||
</div>
|
||||
<div class="catalog-total">
|
||||
<b>{total}</b>
|
||||
<span>TOOLS<br />AVAILABLE</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.catalog-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
gap: 1.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.eyebrow {
|
||||
font: 12px var(--font-mono);
|
||||
letter-spacing: 0.18em;
|
||||
color: var(--muted);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: var(--foreground);
|
||||
}
|
||||
p {
|
||||
margin: 0.5rem 0 0;
|
||||
max-width: 56ch;
|
||||
color: var(--muted);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
.catalog-total {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
line-height: 1;
|
||||
}
|
||||
.catalog-total b {
|
||||
font: 700 2rem var(--font-mono);
|
||||
color: var(--foreground);
|
||||
}
|
||||
.catalog-total span {
|
||||
font: 10px var(--font-mono);
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--muted);
|
||||
text-align: right;
|
||||
margin-top: 0.35rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,93 @@
|
||||
<script lang="ts">
|
||||
import { Search, Filter } from "@lucide/svelte";
|
||||
|
||||
interface Props {
|
||||
query: string;
|
||||
category: string;
|
||||
}
|
||||
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: "analyze", label: "ANALYZE" },
|
||||
];
|
||||
</script>
|
||||
|
||||
<div class="catalog-toolbar">
|
||||
<label class="catalog-search">
|
||||
<Search size={16} />
|
||||
<input
|
||||
aria-label="Search tools"
|
||||
placeholder="Search tools..."
|
||||
bind:value={query}
|
||||
/>
|
||||
</label>
|
||||
<div class="catalog-filters">
|
||||
<Filter size={15} />
|
||||
{#each FILTERS as f (f.value)}
|
||||
<button
|
||||
type="button"
|
||||
class:active={category === f.value}
|
||||
onclick={() => (category = f.value)}>{f.label}</button
|
||||
>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.catalog-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
padding: 1.25rem 0;
|
||||
}
|
||||
.catalog-search {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
background: var(--panel);
|
||||
color: var(--muted);
|
||||
}
|
||||
.catalog-search input {
|
||||
border: none;
|
||||
background: transparent;
|
||||
outline: none;
|
||||
color: var(--foreground);
|
||||
font: 12px var(--font-mono);
|
||||
}
|
||||
.catalog-search input::placeholder {
|
||||
color: var(--muted);
|
||||
}
|
||||
.catalog-filters {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
flex-wrap: wrap;
|
||||
color: var(--muted);
|
||||
}
|
||||
.catalog-filters button {
|
||||
border: 1px solid var(--line);
|
||||
background: transparent;
|
||||
color: var(--muted);
|
||||
font: 10px var(--font-mono);
|
||||
letter-spacing: 0.06em;
|
||||
padding: 0.4rem 0.6rem;
|
||||
border-radius: var(--radius);
|
||||
cursor: pointer;
|
||||
}
|
||||
.catalog-filters button.active {
|
||||
background: var(--blue);
|
||||
color: #fff;
|
||||
border-color: var(--blue);
|
||||
}
|
||||
</style>
|
||||
@@ -2,6 +2,7 @@
|
||||
import { ArrowUpRight } from "@lucide/svelte";
|
||||
import type { Component } from "svelte";
|
||||
import Icon from "./Icon.svelte";
|
||||
import { resolve } from "$app/paths";
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
@@ -13,25 +14,26 @@
|
||||
let { title, href, description, index, icon }: Props = $props();
|
||||
</script>
|
||||
|
||||
<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
|
||||
<a class="tool-card" {href}>
|
||||
{#if icon}<span class="tool-icon"><Icon {icon} size={18} /></span>{/if}
|
||||
<a class="tool-card" href={resolve(href)}>
|
||||
{#if icon}<span class="tool-icon"><Icon {icon} size={19} /></span>{/if}
|
||||
<span class="tool-copy">
|
||||
<strong>{title}</strong>
|
||||
{#if description}<span>{description}</span>{/if}
|
||||
</span>
|
||||
<span class="tool-index">
|
||||
{index !== undefined ? index.toString().padStart(2, "0") : ""}
|
||||
</span>
|
||||
<span class="tool-copy">
|
||||
<span class="tool-title">{title}</span>
|
||||
{#if description}<span class="tool-desc">{description}</span>{/if}
|
||||
</span>
|
||||
<span class="tool-arrow"><ArrowUpRight size={16} /></span>
|
||||
</a>
|
||||
|
||||
<style>
|
||||
.tool-card {
|
||||
display: flex;
|
||||
display: grid;
|
||||
grid-template-columns: 42px minmax(0, 1fr) 24px 18px;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem 1rem;
|
||||
gap: 14px;
|
||||
min-height: 106px;
|
||||
padding: 16px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
background: var(--panel);
|
||||
@@ -42,32 +44,42 @@
|
||||
border-color: var(--blue);
|
||||
}
|
||||
.tool-icon {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: color-mix(in srgb, var(--blue) 12%, transparent);
|
||||
color: var(--blue);
|
||||
display: inline-flex;
|
||||
}
|
||||
.tool-index {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--muted);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
.tool-copy {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
.tool-title {
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
.tool-copy strong {
|
||||
font: 600 13px var(--font-mono);
|
||||
color: var(--foreground);
|
||||
}
|
||||
.tool-desc {
|
||||
font-size: 0.8rem;
|
||||
.tool-copy span {
|
||||
font: 12px/1.5 var(--font-mono);
|
||||
color: var(--muted);
|
||||
}
|
||||
.tool-index {
|
||||
font: 10px var(--font-mono);
|
||||
color: var(--muted);
|
||||
align-self: start;
|
||||
}
|
||||
.tool-arrow {
|
||||
color: var(--muted);
|
||||
color: var(--blue);
|
||||
opacity: 0;
|
||||
transition:
|
||||
opacity 0.12s ease,
|
||||
transform 0.12s ease;
|
||||
}
|
||||
.tool-card:hover .tool-arrow {
|
||||
color: var(--blue);
|
||||
opacity: 1;
|
||||
transform: translate(2px, -2px);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -7,10 +7,11 @@
|
||||
interface Props {
|
||||
theme: "light" | "dark";
|
||||
crumb?: string;
|
||||
status?: string;
|
||||
ontoggle: () => void;
|
||||
}
|
||||
|
||||
let { theme, crumb, ontoggle }: Props = $props();
|
||||
let { theme, crumb, status = "AUTO PIPELINE", ontoggle }: Props = $props();
|
||||
|
||||
let lang = $state("RU");
|
||||
</script>
|
||||
@@ -28,7 +29,7 @@
|
||||
<a href={resolve("/preview/tools/remove-background-png")}>Background remover</a>
|
||||
</nav>
|
||||
<div class="top-actions">
|
||||
<span class="status"><StatusDot /> AUTO PIPELINE</span>
|
||||
<span class="status"><StatusDot /> {status}</span>
|
||||
<IconButton
|
||||
icon={CircleHelp}
|
||||
label="Help"
|
||||
|
||||
@@ -32,29 +32,41 @@
|
||||
});
|
||||
|
||||
let crumb = $derived(toCrumb($page.url.pathname));
|
||||
let status = $derived(toStatus($page.url.pathname));
|
||||
|
||||
const CRUMB: Record<string, string> = {
|
||||
"/preview/demo": "WORKSPACE",
|
||||
"/preview/list-tools": "CATALOG",
|
||||
"/preview/tools/linear-gradient-png": "GRADIENT",
|
||||
"/preview/tools/remove-background-png": "BACKGROUND REMOVER",
|
||||
};
|
||||
|
||||
const STATUS: Record<string, string> = {
|
||||
"/preview/demo": "AUTO PIPELINE",
|
||||
"/preview/list-tools": "LOCAL MODE / READY",
|
||||
"/preview/tools/linear-gradient-png": "LIVE PREVIEW",
|
||||
"/preview/tools/remove-background-png": "AUTO PROCESSING",
|
||||
};
|
||||
|
||||
function toCrumb(path: string): string {
|
||||
const seg = path
|
||||
.replace(/^\/preview/, "")
|
||||
.replace(/^\//, "")
|
||||
.split("/")
|
||||
.filter(Boolean);
|
||||
const map: Record<string, string> = { demo: "WORKSPACE" };
|
||||
const label = seg.length
|
||||
? seg.map((s) => map[s] ?? s.toUpperCase()).join(" / ")
|
||||
: "PREVIEW";
|
||||
return "/ " + label;
|
||||
return "/ " + (CRUMB[path] ?? path.split("/").filter(Boolean).pop()?.toUpperCase() ?? "PREVIEW");
|
||||
}
|
||||
|
||||
function toStatus(path: string): string {
|
||||
return STATUS[path] ?? "AUTO PIPELINE";
|
||||
}
|
||||
</script>
|
||||
|
||||
<main class="preview-root" data-theme={theme}>
|
||||
<TopBar {theme} {crumb} ontoggle={toggle} />
|
||||
<TopBar {theme} {crumb} {status} ontoggle={toggle} />
|
||||
{@render children()}
|
||||
<footer class="preview-footer">
|
||||
<span>easy-png-tools <b>v2.4.0</b></span>
|
||||
<span><Link2 size={13} /> pipeline is local-only</span>
|
||||
<span>© 2024</span>
|
||||
</footer>
|
||||
{#if $page.url.pathname !== "/preview/list-tools"}
|
||||
<footer class="preview-footer">
|
||||
<span>easy-png-tools <b>v2.4.0</b></span>
|
||||
<span><Link2 size={13} /> pipeline is local-only</span>
|
||||
<span>© 2024</span>
|
||||
</footer>
|
||||
{/if}
|
||||
</main>
|
||||
|
||||
<style>
|
||||
|
||||
@@ -1,89 +1,88 @@
|
||||
<script lang="ts">
|
||||
import { TOOLS } from "$lib/registry";
|
||||
import { CATEGORIES, type CategoryId } from "$lib/categories";
|
||||
import Panel from "$lib/components/kit/Panel.svelte";
|
||||
import PanelHeading from "$lib/components/kit/PanelHeading.svelte";
|
||||
import { TOOL_ICONS } from "$lib/tools/tool-icons";
|
||||
import CatalogHeader from "$lib/components/kit/CatalogHeader.svelte";
|
||||
import CatalogToolbar from "$lib/components/kit/CatalogToolbar.svelte";
|
||||
import CatalogGroup from "$lib/components/kit/CatalogGroup.svelte";
|
||||
import ToolCard from "$lib/components/kit/ToolCard.svelte";
|
||||
|
||||
const TITLES: Record<CategoryId, string> = {
|
||||
convert: "Convert",
|
||||
alpha: "Alpha & transparency",
|
||||
color: "Color",
|
||||
geometry: "Geometry",
|
||||
filters: "Filters",
|
||||
text: "Text",
|
||||
analyze: "Analyze",
|
||||
generate: "Generate",
|
||||
const LABELS: Record<CategoryId, string> = {
|
||||
convert: "CONVERT",
|
||||
alpha: "TRANSPARENCY",
|
||||
color: "COLOR",
|
||||
geometry: "GEOMETRY",
|
||||
filters: "FILTERS",
|
||||
text: "TEXT",
|
||||
analyze: "ANALYZE",
|
||||
generate: "GENERATE",
|
||||
};
|
||||
|
||||
const groups = CATEGORIES.map((cat) => ({
|
||||
id: cat,
|
||||
title: TITLES[cat],
|
||||
tools: TOOLS.filter((t) => t.category === cat),
|
||||
}));
|
||||
let query = $state("");
|
||||
let category = $state<string>("all");
|
||||
|
||||
const groups = $derived(
|
||||
CATEGORIES.map((cat) => ({
|
||||
id: cat,
|
||||
label: LABELS[cat],
|
||||
tools: TOOLS.filter(
|
||||
(t) =>
|
||||
t.category === cat &&
|
||||
(category === "all" || category === cat) &&
|
||||
(query.trim() === "" ||
|
||||
t.title.toLowerCase().includes(query.trim().toLowerCase()) ||
|
||||
t.description.toLowerCase().includes(query.trim().toLowerCase())),
|
||||
),
|
||||
})).filter((g) => g.tools.length > 0),
|
||||
);
|
||||
</script>
|
||||
|
||||
<section class="catalog">
|
||||
<header class="cat-head">
|
||||
<span class="cat-eyebrow">CATALOG</span>
|
||||
<h1 class="cat-title">All tools</h1>
|
||||
<p class="cat-lede">
|
||||
Каталог всех PNG-инструментов, сгруппированный по назначению.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
{#each groups as group (group.id)}
|
||||
<Panel>
|
||||
<PanelHeading title={group.title} eyebrow={group.id} />
|
||||
<div class="cat-grid">
|
||||
{#each group.tools as tool (tool.id)}
|
||||
<div class="catalog-page">
|
||||
<CatalogHeader total={TOOLS.length} />
|
||||
<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}
|
||||
href="/preview/tools/{tool.id}"
|
||||
href={`/preview/tools/${tool.id}`}
|
||||
description={tool.description}
|
||||
index={i + 1}
|
||||
icon={TOOL_ICONS[tool.id]}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
</Panel>
|
||||
{/each}
|
||||
</section>
|
||||
</CatalogGroup>
|
||||
{/each}
|
||||
</div>
|
||||
<footer class="catalog-footer">
|
||||
ALL OPERATIONS RUN LOCALLY <span>•</span> YOUR FILES NEVER LEAVE THIS DEVICE
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.catalog {
|
||||
max-width: none;
|
||||
margin: 0 auto;
|
||||
padding: 2.5rem clamp(24px, 4vw, 72px) 4rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.25rem;
|
||||
.catalog-page {
|
||||
padding: 60px clamp(24px, 4vw, 72px) 72px;
|
||||
}
|
||||
.cat-head {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.cat-eyebrow {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.18em;
|
||||
color: var(--muted);
|
||||
}
|
||||
.cat-title {
|
||||
margin: 0;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: var(--foreground);
|
||||
}
|
||||
.cat-lede {
|
||||
margin: 0;
|
||||
max-width: 56ch;
|
||||
color: var(--muted);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
.cat-grid {
|
||||
.catalog-groups {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem 1rem 1rem;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 56px 28px;
|
||||
}
|
||||
.catalog-footer {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 56px;
|
||||
padding-top: 24px;
|
||||
border-top: 1px solid var(--line);
|
||||
font: 10px var(--font-mono);
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--muted);
|
||||
}
|
||||
@media (max-width: 800px) {
|
||||
.catalog-groups {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user