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"
|
||||
|
||||
Reference in New Issue
Block a user