feat: add tool search cards
This commit is contained in:
@@ -0,0 +1,88 @@
|
||||
<script lang="ts">
|
||||
import { TOOL_ICONS } from '$lib/tools/tool-icons';
|
||||
|
||||
interface Props {
|
||||
toolId: string;
|
||||
title: string;
|
||||
description: string;
|
||||
selected?: boolean;
|
||||
onActivate?: () => void;
|
||||
onHover?: () => void;
|
||||
}
|
||||
|
||||
let { toolId, title, description, selected = false, onActivate, onHover }: Props = $props();
|
||||
|
||||
const Icon = $derived(TOOL_ICONS[toolId]);
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="card"
|
||||
class:selected
|
||||
role="option"
|
||||
aria-selected={selected}
|
||||
tabindex="-1"
|
||||
onclick={onActivate}
|
||||
onmousemove={onHover}
|
||||
onkeydown={(e) => {
|
||||
if (e.key === 'Enter') onActivate?.();
|
||||
}}
|
||||
>
|
||||
<span class="icon-box" aria-hidden="true">
|
||||
{#if Icon}<Icon size={24} strokeWidth={1.75} />{/if}
|
||||
</span>
|
||||
<span class="text">
|
||||
<span class="title">{title}</span>
|
||||
<span class="hint text-caption text-muted">{description}</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.card {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-2);
|
||||
min-width: 0;
|
||||
padding: var(--space-2);
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius-s);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.card:hover,
|
||||
.card.selected {
|
||||
background: color-mix(in srgb, var(--accent) 10%, var(--surface));
|
||||
border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
|
||||
}
|
||||
|
||||
.icon-box {
|
||||
flex: none;
|
||||
width: 2.6rem;
|
||||
height: 2.6rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--radius-s);
|
||||
background: color-mix(in srgb, var(--accent) 10%, var(--surface));
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 600;
|
||||
font-size: var(--text-m);
|
||||
}
|
||||
|
||||
.hint {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
@@ -1,5 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { isChainable, TOOLS } from '$lib/registry';
|
||||
import ToolCard from './ToolCard.svelte';
|
||||
|
||||
interface Props {
|
||||
onSelect: (toolId: string) => void;
|
||||
@@ -13,7 +14,13 @@
|
||||
let activeIndex = $state(0);
|
||||
let listOpen = $state(false);
|
||||
|
||||
type Match = { id: string; title: string; description: string; score: number };
|
||||
type Match = {
|
||||
id: string;
|
||||
title: string;
|
||||
description: string;
|
||||
popularity: number;
|
||||
score: number;
|
||||
};
|
||||
|
||||
function score(tool: (typeof TOOLS)[number], q: string): number | null {
|
||||
if (q.length === 0) return 1;
|
||||
@@ -46,10 +53,21 @@
|
||||
for (const tool of candidates) {
|
||||
const s = score(tool, q);
|
||||
if (s !== null && s > 0) {
|
||||
found.push({ id: tool.id, title: tool.title, description: tool.description, score: s });
|
||||
found.push({
|
||||
id: tool.id,
|
||||
title: tool.title,
|
||||
description: tool.description,
|
||||
popularity: tool.popularity ?? 50,
|
||||
score: s
|
||||
});
|
||||
}
|
||||
}
|
||||
found.sort((a, b) => b.score - a.score || a.title.localeCompare(b.title));
|
||||
found.sort(
|
||||
(a, b) =>
|
||||
b.score - a.score ||
|
||||
b.popularity - a.popularity ||
|
||||
a.title.localeCompare(b.title)
|
||||
);
|
||||
return found.slice(0, 12);
|
||||
});
|
||||
|
||||
@@ -97,21 +115,18 @@
|
||||
{#if listOpen && query.trim().length > 0 && matches.length === 0}
|
||||
<p class="none text-muted">Ничего не найдено — попробуйте другое слово.</p>
|
||||
{:else if listOpen && matches.length > 0}
|
||||
<ul id="tool-search-list" role="listbox">
|
||||
<div id="tool-search-list" class="cards" role="listbox">
|
||||
{#each matches as match, index (match.id)}
|
||||
<li role="option" aria-selected={index === activeIndex}>
|
||||
<button
|
||||
type="button"
|
||||
class:selected={index === activeIndex}
|
||||
onclick={() => choose(match.id)}
|
||||
onmousemove={() => (activeIndex = index)}
|
||||
>
|
||||
<span class="title">{match.title}</span>
|
||||
<span class="hint text-caption text-muted">{match.description}</span>
|
||||
</button>
|
||||
</li>
|
||||
<ToolCard
|
||||
toolId={match.id}
|
||||
title={match.title}
|
||||
description={match.description}
|
||||
selected={index === activeIndex}
|
||||
onActivate={() => choose(match.id)}
|
||||
onHover={() => (activeIndex = index)}
|
||||
/>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@@ -138,54 +153,30 @@
|
||||
outline: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
.cards {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: calc(100% + var(--space-1));
|
||||
z-index: 40;
|
||||
list-style: none;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: var(--space-1);
|
||||
margin: 0;
|
||||
padding: var(--space-1);
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-m);
|
||||
box-shadow: var(--shadow-card);
|
||||
max-height: 24rem;
|
||||
max-height: 26rem;
|
||||
overflow-y: auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
li button {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
padding: var(--space-2);
|
||||
border: 0;
|
||||
border-radius: var(--radius-s);
|
||||
background: none;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
li button.selected,
|
||||
li button:hover {
|
||||
background: color-mix(in srgb, var(--accent) 10%, var(--surface));
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 600;
|
||||
font-size: var(--text-m);
|
||||
}
|
||||
|
||||
.hint {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
@media (max-width: 40rem) {
|
||||
.cards {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.none {
|
||||
|
||||
@@ -3,6 +3,9 @@ import { sveltekit } from '@sveltejs/kit/vite';
|
||||
import { defineConfig } from 'vite';
|
||||
|
||||
export default defineConfig({
|
||||
ssr: {
|
||||
noExternal: ['@lucide/svelte']
|
||||
},
|
||||
plugins: [
|
||||
sveltekit({
|
||||
compilerOptions: {
|
||||
|
||||
Reference in New Issue
Block a user