feat(web): tag enrichment sources admin card (#1490 Step 4 web)
Add a "Tag enrichment sources" card to the admin integrations page, mirroring the cover-art providers card: per-provider enable toggle + API-key field + Save + Test connection, over /api/admin/tag-sources. Enabling/keying a source (e.g. pasting a Last.fm key) re-opens settled tracks for re-enrichment via the version bump. - admin.ts: TagProvider types + get/update/test functions + createTagProvidersQuery; qk.tagProviders key. - integrations/+page.svelte: the card + local edit state, with MusicBrainz (keyless baseline) and Last.fm (needs a free key) notes. - Tests: admin.tag-sources API test + integrations component tests (render / enable+key save / test connection), plus the mock plumbing the existing suite needs for the new query. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claude Opus 4.8
@@ -13,10 +13,14 @@
|
||||
createCoverProvidersQuery,
|
||||
updateCoverProvider,
|
||||
testCoverProvider,
|
||||
createTagProvidersQuery,
|
||||
updateTagProvider,
|
||||
testTagProvider,
|
||||
updateSMTPConfig,
|
||||
testSMTPConfig,
|
||||
createSMTPConfigQuery,
|
||||
type CoverProvider,
|
||||
type TagProvider,
|
||||
type SMTPConfig
|
||||
} from '$lib/api/admin';
|
||||
import { qk } from '$lib/api/queries';
|
||||
@@ -280,6 +284,62 @@
|
||||
}
|
||||
}
|
||||
|
||||
// ---- Tag enrichment providers ----
|
||||
// Mirrors the cover-art providers panel over /api/admin/tag-sources (#1490).
|
||||
const tagProvidersStore = $derived(createTagProvidersQuery());
|
||||
const tagProvidersQ = $derived($tagProvidersStore);
|
||||
|
||||
let tagLocalState = $state<Record<string, { enabled: boolean; apiKey: string }>>({});
|
||||
let tagTestResults = $state<Record<string, { ok: boolean; duration_ms?: number; error?: string }>>({});
|
||||
let tagSaving = $state<Record<string, boolean>>({});
|
||||
let tagTesting = $state<Record<string, boolean>>({});
|
||||
|
||||
$effect(() => {
|
||||
if (tagProvidersQ.data) {
|
||||
for (const p of tagProvidersQ.data.providers) {
|
||||
if (!tagLocalState[p.id]) {
|
||||
tagLocalState[p.id] = { enabled: p.enabled, apiKey: '' };
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function tagHasChanges(provider: TagProvider): boolean {
|
||||
const local = tagLocalState[provider.id];
|
||||
if (!local) return false;
|
||||
return provider.enabled !== local.enabled || local.apiKey !== '';
|
||||
}
|
||||
|
||||
async function tagSave(provider: TagProvider) {
|
||||
const local = tagLocalState[provider.id];
|
||||
if (!local || !tagHasChanges(provider)) return;
|
||||
const patch: { enabled?: boolean; api_key?: string } = {};
|
||||
if (provider.enabled !== local.enabled) patch.enabled = local.enabled;
|
||||
if (local.apiKey !== '') patch.api_key = local.apiKey;
|
||||
|
||||
tagSaving[provider.id] = true;
|
||||
try {
|
||||
const result = await updateTagProvider(provider.id, patch);
|
||||
tagLocalState[provider.id] = { enabled: result.enabled, apiKey: '' };
|
||||
await client.invalidateQueries({ queryKey: qk.tagProviders() });
|
||||
} catch (_e) {
|
||||
// Inline error surfacing handled by the mutation toast layer; swallow here.
|
||||
} finally {
|
||||
tagSaving[provider.id] = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function tagTest(provider: TagProvider) {
|
||||
tagTesting[provider.id] = true;
|
||||
try {
|
||||
tagTestResults[provider.id] = await testTagProvider(provider.id);
|
||||
} catch (e) {
|
||||
tagTestResults[provider.id] = { ok: false, error: (e as Error).message };
|
||||
} finally {
|
||||
tagTesting[provider.id] = false;
|
||||
}
|
||||
}
|
||||
|
||||
// SMTP config -------------------------------------------------------------
|
||||
|
||||
const smtpStore = $derived(createSMTPConfigQuery());
|
||||
@@ -597,6 +657,108 @@
|
||||
<p class="text-sm text-text-muted">No providers registered.</p>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<!-- Tag enrichment providers -->
|
||||
<section class="space-y-4 rounded-xl border border-border bg-surface p-5">
|
||||
<div>
|
||||
<h3 class="font-display text-lg font-medium text-text-primary">Tag enrichment sources</h3>
|
||||
<p class="mt-1 text-sm text-text-secondary">
|
||||
Folksonomy style/mood tags fetched per track and folded into each
|
||||
listener's taste profile alongside the raw file genre — so "Rock"
|
||||
gains "post-punk / shoegaze / melancholic". All enabled sources are
|
||||
merged. Enabling or disabling a source re-opens previously-processed
|
||||
tracks for a fresh pass.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{#if tagProvidersQ.data}
|
||||
{#each tagProvidersQ.data.providers as provider (provider.id)}
|
||||
<article class="rounded-lg border border-border bg-background p-4 space-y-3">
|
||||
<header class="flex items-baseline justify-between gap-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<h4 class="font-display text-base font-medium text-text-primary">{provider.display_name}</h4>
|
||||
<span
|
||||
class="h-1.5 w-1.5 rounded-full {provider.enabled ? 'bg-action-primary' : 'bg-text-muted'}"
|
||||
title={provider.enabled ? 'Active' : 'Disabled'}
|
||||
></span>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-1">
|
||||
{#each provider.supports as cap}
|
||||
<span class="rounded bg-surface px-1.5 py-0.5 text-xs text-text-secondary">{cap.replace('_', ' ')}</span>
|
||||
{/each}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{#if tagLocalState[provider.id]}
|
||||
<div class="grid gap-2 sm:grid-cols-[auto_1fr] items-center">
|
||||
<label class="text-sm text-text-secondary" for="tag-enabled-{provider.id}">Enabled</label>
|
||||
<div>
|
||||
<input id="tag-enabled-{provider.id}" type="checkbox"
|
||||
bind:checked={tagLocalState[provider.id].enabled} />
|
||||
</div>
|
||||
|
||||
{#if provider.requires_api_key}
|
||||
<label class="text-sm text-text-secondary" for="tag-key-{provider.id}">API key</label>
|
||||
<div class="flex items-center gap-2">
|
||||
<input id="tag-key-{provider.id}" type="password"
|
||||
placeholder={provider.api_key_set ? '••• (saved — leave empty to keep)' : 'Paste your API key to enable this source'}
|
||||
bind:value={tagLocalState[provider.id].apiKey}
|
||||
class="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 font-mono text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-accent flex-1" />
|
||||
{#if provider.api_key_set}
|
||||
<span class="text-xs text-text-secondary whitespace-nowrap">✓ Set</span>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2 pt-1">
|
||||
<button type="button"
|
||||
disabled={!tagHasChanges(provider) || tagSaving[provider.id]}
|
||||
onclick={() => tagSave(provider)}
|
||||
class="inline-flex items-center gap-2 rounded-md bg-action-primary px-3 py-1.5 text-sm text-action-fg disabled:opacity-50">
|
||||
{tagSaving[provider.id] ? 'Saving…' : 'Save changes'}
|
||||
</button>
|
||||
{#if provider.testable}
|
||||
<button type="button"
|
||||
disabled={tagTesting[provider.id]}
|
||||
onclick={() => tagTest(provider)}
|
||||
class="inline-flex items-center gap-2 rounded-md border border-border bg-transparent px-3 py-1.5 text-sm text-text-secondary hover:text-text-primary disabled:opacity-50">
|
||||
{tagTesting[provider.id] ? 'Testing…' : 'Test connection'}
|
||||
</button>
|
||||
{/if}
|
||||
{#if tagTestResults[provider.id]}
|
||||
{#if tagTestResults[provider.id].ok}
|
||||
<p class="text-sm text-action-primary">
|
||||
OK{tagTestResults[provider.id].duration_ms ? ` (${tagTestResults[provider.id].duration_ms}ms)` : ''}
|
||||
</p>
|
||||
{:else}
|
||||
<p class="text-sm text-error">
|
||||
Failed — {tagTestResults[provider.id].error}
|
||||
</p>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if provider.id === 'musicbrainz'}
|
||||
<p class="text-xs text-text-muted">
|
||||
Keyless and on by default — the always-available baseline. Matches tags by
|
||||
recording MBID, so coverage tracks how well your library is MusicBrainz-tagged.
|
||||
</p>
|
||||
{:else if provider.id === 'lastfm'}
|
||||
<p class="text-xs text-text-muted">
|
||||
Name-based (artist + title), so it covers tracks without an MBID. Requires a free
|
||||
API key — get one at <a class="underline" href="https://www.last.fm/api/account/create" target="_blank" rel="noopener noreferrer">last.fm/api</a>.
|
||||
</p>
|
||||
{/if}
|
||||
</article>
|
||||
{/each}
|
||||
{:else if tagProvidersQ.isPending}
|
||||
<p class="text-sm text-text-muted">Loading…</p>
|
||||
{:else}
|
||||
<p class="text-sm text-text-muted">No providers registered.</p>
|
||||
{/if}
|
||||
</section>
|
||||
<!-- SMTP / email config -->
|
||||
<section class="space-y-4 rounded-xl border border-border bg-surface p-5">
|
||||
<div>
|
||||
|
||||
Reference in New Issue
Block a user