Simplify selected card UI

- Remove "Choose a different source" link
- Remove Details toggle
- Simplify meta to just show source (remove length/notes)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
b1rdmania
2025-12-29 15:08:11 +00:00
parent 6fddb140cc
commit c3e30ca491
2 changed files with 1 additions and 34 deletions
-5
View File
@@ -1188,7 +1188,6 @@
<span id="previewState" class="preview-state">Previewing…</span>
<button id="previewStopBtn" type="button" class="linklike" style="display:none;">Stop preview</button>
</div>
<button id="chooseDifferentBtn" type="button" class="linklike">Choose a different source</button>
</div>
<div id="iosAudioBanner" class="ios-audio-banner" aria-live="polite">
@@ -1228,10 +1227,6 @@
</div>
</div>
<details class="details-toggle" id="detailsToggle">
<summary>Details</summary>
<div id="selectedDetails" class="selected-details"></div>
</details>
</div>
</div>
+1 -29
View File
@@ -24,16 +24,13 @@ class MotifApp {
private selectedTitle!: HTMLElement;
private selectedMeta!: HTMLElement;
private selectedDetails!: HTMLElement;
private preGenActions!: HTMLElement;
private preGenSupport!: HTMLElement;
private generatedBlock!: HTMLElement;
private playPauseBtn!: HTMLButtonElement;
private detailsToggle!: HTMLElement;
private previewBtn!: HTMLButtonElement;
private previewStopBtn!: HTMLButtonElement;
private previewState!: HTMLElement;
private chooseDifferentBtn!: HTMLButtonElement;
private isPreviewPlaying = false;
private hasGenerated = false;
@@ -114,16 +111,13 @@ class MotifApp {
this.selectedTitle = document.getElementById('selectedTitle')!;
this.selectedMeta = document.getElementById('selectedMeta')!;
this.selectedDetails = document.getElementById('selectedDetails')!;
this.preGenActions = document.getElementById('preGenActions')!;
this.preGenSupport = document.getElementById('preGenSupport')!;
this.generatedBlock = document.getElementById('generatedBlock')!;
this.playPauseBtn = document.getElementById('playPauseBtn') as HTMLButtonElement;
this.detailsToggle = document.getElementById('detailsToggle')!;
this.previewBtn = document.getElementById('previewBtn') as HTMLButtonElement;
this.previewStopBtn = document.getElementById('previewStopBtn') as HTMLButtonElement;
this.previewState = document.getElementById('previewState')!;
this.chooseDifferentBtn = document.getElementById('chooseDifferentBtn') as HTMLButtonElement;
// Motif controls
this.motifBtn = document.getElementById('motifBtn') as HTMLButtonElement;
@@ -174,7 +168,6 @@ class MotifApp {
// Preview inside selected source only
this.previewBtn.addEventListener('click', () => void this.handlePreviewToggle());
this.previewStopBtn.addEventListener('click', () => this.stopPreview());
this.chooseDifferentBtn.addEventListener('click', () => this.goToResults());
// Use both input and change for iOS compatibility
const seekHandler = (e: Event) => {
const progress = parseFloat((e.target as HTMLInputElement).value) / 100;
@@ -429,18 +422,7 @@ class MotifApp {
// Update UI
const displayTitle = this.cleanSongTitle(result.title);
this.selectedTitle.textContent = displayTitle;
this.selectedMeta.textContent = `Source: ${this.formatSourceLabel(result.source)} · Length: ${this.formatDuration(actualDuration)} · Notes: ${events.length}`;
// Optional details (hidden behind toggle)
const detailParts: string[] = [];
const trackCount = Number(metadata.trackCount);
const tempo = Number(metadata.tempo);
const duration = Number(actualDuration);
if (Number.isFinite(trackCount) && trackCount > 0) detailParts.push(`Tracks: ${trackCount}`);
if (Number.isFinite(tempo) && tempo > 0) detailParts.push(`Tempo: ${Math.round(tempo)} bpm`);
if (Number.isFinite(duration) && duration > 0) detailParts.push(`Length: ${this.formatDuration(duration)}`);
detailParts.push(`Notes: ${events.length}`);
this.selectedDetails.textContent = detailParts.join(' · ');
this.selectedMeta.textContent = `Source: ${this.formatSourceLabel(result.source)}`;
this.updateEmbedSnippet(result.title);
this.updateIOSAudioBanner();
@@ -830,7 +812,6 @@ class MotifApp {
const showPreGen = state === 'selected';
this.preGenActions.style.display = showPreGen ? 'block' : 'none';
this.preGenSupport.style.display = showPreGen ? 'flex' : 'none';
this.detailsToggle.style.display = showPreGen ? 'block' : 'none';
// Generated artifact content
const showGenerated = state === 'generated';
@@ -846,15 +827,6 @@ class MotifApp {
}
}
private goToResults(): void {
this.setState('results');
try {
this.resultsSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
} catch {
// ignore
}
}
private async handlePlayPause(): Promise<void> {
if (!this.hasGenerated) return;