chore(FEEDBACK-0001): linting
This commit is contained in:
Giancarmine Salucci
@@ -57,25 +57,31 @@ An interactive search interface within the web UI that lets users test the docum
|
||||
```svelte
|
||||
<!-- src/lib/components/search/LibraryResult.svelte -->
|
||||
<script lang="ts">
|
||||
let { result, onSelect } = $props<{
|
||||
result: { id: string; title: string; description: string; totalSnippets: number; trustScore: number };
|
||||
onSelect: (id: string) => void;
|
||||
}>();
|
||||
let { result, onSelect } = $props<{
|
||||
result: {
|
||||
id: string;
|
||||
title: string;
|
||||
description: string;
|
||||
totalSnippets: number;
|
||||
trustScore: number;
|
||||
};
|
||||
onSelect: (id: string) => void;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<button
|
||||
onclick={() => onSelect(result.id)}
|
||||
class="w-full rounded-xl border border-gray-200 bg-white p-4 text-left shadow-sm hover:border-blue-300 hover:shadow-md transition-all"
|
||||
onclick={() => onSelect(result.id)}
|
||||
class="w-full rounded-xl border border-gray-200 bg-white p-4 text-left shadow-sm transition-all hover:border-blue-300 hover:shadow-md"
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="font-semibold text-gray-900">{result.title}</span>
|
||||
<span class="text-xs text-gray-400">Trust {result.trustScore.toFixed(1)}/10</span>
|
||||
</div>
|
||||
<p class="font-mono text-xs text-gray-400">{result.id}</p>
|
||||
{#if result.description}
|
||||
<p class="mt-1.5 text-sm text-gray-600 line-clamp-2">{result.description}</p>
|
||||
{/if}
|
||||
<p class="mt-2 text-xs text-gray-400">{result.totalSnippets.toLocaleString()} snippets</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="font-semibold text-gray-900">{result.title}</span>
|
||||
<span class="text-xs text-gray-400">Trust {result.trustScore.toFixed(1)}/10</span>
|
||||
</div>
|
||||
<p class="font-mono text-xs text-gray-400">{result.id}</p>
|
||||
{#if result.description}
|
||||
<p class="mt-1.5 line-clamp-2 text-sm text-gray-600">{result.description}</p>
|
||||
{/if}
|
||||
<p class="mt-2 text-xs text-gray-400">{result.totalSnippets.toLocaleString()} snippets</p>
|
||||
</button>
|
||||
```
|
||||
|
||||
@@ -86,37 +92,39 @@ An interactive search interface within the web UI that lets users test the docum
|
||||
```svelte
|
||||
<!-- src/lib/components/search/SnippetCard.svelte -->
|
||||
<script lang="ts">
|
||||
import type { Snippet } from '$lib/types';
|
||||
import type { Snippet } from '$lib/types';
|
||||
|
||||
let { snippet } = $props<{ snippet: Snippet }>();
|
||||
let { snippet } = $props<{ snippet: Snippet }>();
|
||||
</script>
|
||||
|
||||
<div class="rounded-xl border border-gray-200 bg-white overflow-hidden">
|
||||
<div class="flex items-center justify-between border-b border-gray-100 px-4 py-2.5">
|
||||
<div class="flex items-center gap-2">
|
||||
{#if snippet.type === 'code'}
|
||||
<span class="rounded bg-purple-100 px-1.5 py-0.5 text-xs text-purple-700">code</span>
|
||||
{:else}
|
||||
<span class="rounded bg-blue-100 px-1.5 py-0.5 text-xs text-blue-700">info</span>
|
||||
{/if}
|
||||
{#if snippet.title}
|
||||
<span class="text-sm font-medium text-gray-800">{snippet.title}</span>
|
||||
{/if}
|
||||
</div>
|
||||
<span class="text-xs text-gray-400">{snippet.tokenCount} tokens</span>
|
||||
</div>
|
||||
<div class="overflow-hidden rounded-xl border border-gray-200 bg-white">
|
||||
<div class="flex items-center justify-between border-b border-gray-100 px-4 py-2.5">
|
||||
<div class="flex items-center gap-2">
|
||||
{#if snippet.type === 'code'}
|
||||
<span class="rounded bg-purple-100 px-1.5 py-0.5 text-xs text-purple-700">code</span>
|
||||
{:else}
|
||||
<span class="rounded bg-blue-100 px-1.5 py-0.5 text-xs text-blue-700">info</span>
|
||||
{/if}
|
||||
{#if snippet.title}
|
||||
<span class="text-sm font-medium text-gray-800">{snippet.title}</span>
|
||||
{/if}
|
||||
</div>
|
||||
<span class="text-xs text-gray-400">{snippet.tokenCount} tokens</span>
|
||||
</div>
|
||||
|
||||
{#if snippet.breadcrumb}
|
||||
<p class="bg-gray-50 px-4 py-1.5 text-xs text-gray-500 italic">{snippet.breadcrumb}</p>
|
||||
{/if}
|
||||
{#if snippet.breadcrumb}
|
||||
<p class="bg-gray-50 px-4 py-1.5 text-xs text-gray-500 italic">{snippet.breadcrumb}</p>
|
||||
{/if}
|
||||
|
||||
<div class="p-4">
|
||||
{#if snippet.type === 'code'}
|
||||
<pre class="overflow-x-auto rounded bg-gray-950 p-4 text-sm text-gray-100"><code>{snippet.content}</code></pre>
|
||||
{:else}
|
||||
<div class="prose prose-sm max-w-none text-gray-700">{snippet.content}</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="p-4">
|
||||
{#if snippet.type === 'code'}
|
||||
<pre class="overflow-x-auto rounded bg-gray-950 p-4 text-sm text-gray-100"><code
|
||||
>{snippet.content}</code
|
||||
></pre>
|
||||
{:else}
|
||||
<div class="prose prose-sm max-w-none text-gray-700">{snippet.content}</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
@@ -127,44 +135,44 @@ An interactive search interface within the web UI that lets users test the docum
|
||||
```svelte
|
||||
<!-- src/routes/search/+page.svelte -->
|
||||
<script lang="ts">
|
||||
import { page } from '$app/stores';
|
||||
import { goto } from '$app/navigation';
|
||||
import { page } from '$app/stores';
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
let libraryName = $state('');
|
||||
let selectedLibraryId = $state<string | null>(null);
|
||||
let query = $state('');
|
||||
let libraryResults = $state<LibrarySearchResult[]>([]);
|
||||
let snippets = $state<Snippet[]>([]);
|
||||
let loadingLibraries = $state(false);
|
||||
let loadingSnippets = $state(false);
|
||||
let libraryName = $state('');
|
||||
let selectedLibraryId = $state<string | null>(null);
|
||||
let query = $state('');
|
||||
let libraryResults = $state<LibrarySearchResult[]>([]);
|
||||
let snippets = $state<Snippet[]>([]);
|
||||
let loadingLibraries = $state(false);
|
||||
let loadingSnippets = $state(false);
|
||||
|
||||
async function searchLibraries() {
|
||||
loadingLibraries = true;
|
||||
const res = await fetch(
|
||||
`/api/v1/libs/search?libraryName=${encodeURIComponent(libraryName)}&query=${encodeURIComponent(query)}`
|
||||
);
|
||||
const data = await res.json();
|
||||
libraryResults = data.results;
|
||||
loadingLibraries = false;
|
||||
}
|
||||
async function searchLibraries() {
|
||||
loadingLibraries = true;
|
||||
const res = await fetch(
|
||||
`/api/v1/libs/search?libraryName=${encodeURIComponent(libraryName)}&query=${encodeURIComponent(query)}`
|
||||
);
|
||||
const data = await res.json();
|
||||
libraryResults = data.results;
|
||||
loadingLibraries = false;
|
||||
}
|
||||
|
||||
async function searchDocs() {
|
||||
if (!selectedLibraryId) return;
|
||||
loadingSnippets = true;
|
||||
const url = new URL('/api/v1/context', window.location.origin);
|
||||
url.searchParams.set('libraryId', selectedLibraryId);
|
||||
url.searchParams.set('query', query);
|
||||
const res = await fetch(url);
|
||||
const data = await res.json();
|
||||
snippets = data.snippets;
|
||||
loadingSnippets = false;
|
||||
async function searchDocs() {
|
||||
if (!selectedLibraryId) return;
|
||||
loadingSnippets = true;
|
||||
const url = new URL('/api/v1/context', window.location.origin);
|
||||
url.searchParams.set('libraryId', selectedLibraryId);
|
||||
url.searchParams.set('query', query);
|
||||
const res = await fetch(url);
|
||||
const data = await res.json();
|
||||
snippets = data.snippets;
|
||||
loadingSnippets = false;
|
||||
|
||||
// Update URL
|
||||
goto(`/search?lib=${encodeURIComponent(selectedLibraryId)}&q=${encodeURIComponent(query)}`, {
|
||||
replaceState: true,
|
||||
keepFocus: true,
|
||||
});
|
||||
}
|
||||
// Update URL
|
||||
goto(`/search?lib=${encodeURIComponent(selectedLibraryId)}&q=${encodeURIComponent(query)}`, {
|
||||
replaceState: true,
|
||||
keepFocus: true
|
||||
});
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
@@ -177,9 +185,9 @@ Use a minimal, zero-dependency approach for v1 — wrap code blocks in `<pre><co
|
||||
```typescript
|
||||
// Optional: lazy-load highlight.js only when code snippets are present
|
||||
async function highlightCode(code: string, language: string): Promise<string> {
|
||||
const hljs = await import('highlight.js/lib/core');
|
||||
// Register only needed languages
|
||||
return hljs.highlight(code, { language }).value;
|
||||
const hljs = await import('highlight.js/lib/core');
|
||||
// Register only needed languages
|
||||
return hljs.highlight(code, { language }).value;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
Reference in New Issue
Block a user