feat: 'In Library' badges, artist images on local pages, MBID-based Tier 3

Three features wired together:

1. 'In Library' badges on explore search results:
   CheckLibraryMBIDs Wails binding batch-checks which search result
   MBIDs exist in the local library. Green badges render on matching
   artist cards and album cards.

2. Artist images on local artist-details page:
   Local artist pages now call GetArtistMBID(name) to resolve the
   MBID from tags, then GetArtistImageURL(mbid) to fetch the cached
   Wikimedia photo. Falls back to initial-letter avatar.

3. Tier 3 search index uses direct MBIDs from tags:
   buildTier3Library now reads artists.mbid column (from audio tags)
   for direct MBID matching, falling back to name matching for
   untagged artists. Eliminates false matches and catches artists
   that name matching misses.
This commit is contained in:
2026-03-26 09:34:57 -04:00
parent b941057a46
commit 8f6a4c6a8e
8 changed files with 177 additions and 12 deletions
@@ -6,6 +6,7 @@ import {
} from 'lit/decorators.js';
import { library } from '@go/models';
import { LibraryController } from '@store/controllers/library-controller';
import { GetArtistImageURL, GetArtistMBID } from '@go/explore/Service';
import '@awesome.me/webawesome/dist/components/icon/icon.js';
import '@components/cover-grid/cover-grid.js';
import { designTokens } from '../../styles/tokens.css';
@@ -18,12 +19,18 @@ export class ArtistDetails extends LitElement {
@property({ type: String, attribute: 'artist-name' })
artistName = '';
@property({ type: String, attribute: 'artist-mbid' })
artistMBID = '';
@state()
private albums: library.Album[] = [];
@state()
private loading = true;
@state()
private artistImageURL = '';
private libraryCtrl = new LibraryController(this);
/** Tracks the store's cached array reference to detect refreshes. */
@@ -99,6 +106,12 @@ export class ArtistDetails extends LitElement {
flex-shrink: 0;
}
.artist-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.artist-avatar .initial {
color: var(
--yj-text-secondary,
@@ -156,6 +169,7 @@ export class ArtistDetails extends LitElement {
override connectedCallback() {
super.connectedCallback();
this.loadAlbums();
this.loadArtistImage();
}
override updated() {
@@ -174,6 +188,31 @@ export class ArtistDetails extends LitElement {
* Data loading
* ================================================================ */
private async loadArtistImage() {
// Resolve MBID from tags if not provided via attribute.
let mbid = this.artistMBID;
if (!mbid && this.artistName) {
try {
mbid = await GetArtistMBID(this.artistName);
} catch {
return;
}
}
if (!mbid) return;
try {
const url = await GetArtistImageURL(mbid);
if (url) {
this.artistImageURL = url;
}
} catch {
// No image — avatar stays as initial letter.
}
}
private async loadAlbums() {
if (!this.artistId) return;
@@ -293,11 +332,14 @@ export class ArtistDetails extends LitElement {
></wa-icon>
</button>
<div class="artist-avatar">
<span class="initial">
${this.getInitial(
this.artistName,
)}
</span>
${this.artistImageURL
? html`<img
src="${this.artistImageURL}"
alt="${this.artistName}"
/>`
: html`<span class="initial">
${this.getInitial(this.artistName)}
</span>`}
</div>
<div class="artist-info">
<h1
@@ -1,7 +1,7 @@
import { LitElement, html, css, nothing } from 'lit';
import { customElement, state, query as litQuery } from 'lit/decorators.js';
import { designTokens } from '../../styles/tokens.css';
import { Search, GetThumbnails, GetArtistImageURL } from '@go/explore/Service';
import { Search, GetThumbnails, GetArtistImageURL, CheckLibraryMBIDs } from '@go/explore/Service';
import type { ThumbnailRequest } from '@go/explore/Service';
import type {
MBSearchResult,
@@ -77,6 +77,7 @@ export class ExploreView extends LitElement {
private debounceTimer: ReturnType<typeof setTimeout> | null = null;
private thumbnailCache = new Map<string, string>();
private artistImageCache = new Map<string, string>();
private libraryMBIDs = new Set<string>();
@litQuery('input') private inputEl!: HTMLInputElement;
@@ -432,6 +433,16 @@ export class ExploreView extends LitElement {
white-space: nowrap;
}
.library-badge {
background: var(--yj-accent, #1db954);
color: #000;
padding: 1px 6px;
border-radius: 3px;
font-size: 10px;
font-weight: 600;
white-space: nowrap;
}
/* ── Track list ── */
.track-list {
display: flex;
@@ -577,6 +588,7 @@ export class ExploreView extends LitElement {
this.results = result;
this.loadThumbnails();
this.loadArtistImages();
this.checkLibrary();
const elapsed = (performance.now() - startTime).toFixed(0);
console.log(
@@ -688,6 +700,39 @@ export class ExploreView extends LitElement {
}
}
/**
* Check which result MBIDs exist in the local library.
*/
private async checkLibrary() {
if (!this.results) return;
const mbids: string[] = [];
for (const a of this.results.artists ?? []) {
if (a.mbid) mbids.push(a.mbid);
}
for (const rg of this.results.releaseGroups ?? []) {
if (rg.mbid) mbids.push(rg.mbid);
}
if (mbids.length === 0) return;
try {
const found = await CheckLibraryMBIDs(mbids);
if (found && Object.keys(found).length > 0) {
for (const mbid of Object.keys(found)) {
this.libraryMBIDs.add(mbid);
}
this.requestUpdate();
}
} catch {
// Library check is non-critical.
}
}
/* ── Top Results ── */
private getTopResults(): ScoredItem[] {
@@ -966,6 +1011,9 @@ export class ExploreView extends LitElement {
${a.country}
</div>`
: nothing}
${this.libraryMBIDs.has(a.mbid)
? html`<div class="library-badge">In Library</div>`
: nothing}
</div>
`;
})}
@@ -1016,6 +1064,9 @@ export class ExploreView extends LitElement {
</div>
<div class="album-artist">${rg.artistCredit}</div>
<div class="album-meta">
${this.libraryMBIDs.has(rg.mbid)
? html`<span class="library-badge">In Library</span>`
: nothing}
${rg.primaryType
? html`<span class="type-badge"
>${rg.primaryType}</span