fix: Maestro note icon - always-visible SVG, consistent 14px size

Note icon now always present at 14x14px (matching text size).
Static state: note sits still on staff lines.
Loading state: same icon bounces. No size jump between states.
Removed ♪ text character in favor of the SVG icon.
This commit is contained in:
rin.kagamine committed 2026-05-31 10:37:32 -04:00
1 parent 9df8a4f865
commit 98cc6b031c
1 file changed
+13 -16
+13 -16
View File
@@ -19,13 +19,13 @@ interface Props {
onStructuredResult?: (fields: PromptStructure, mode: 'generate' | 'complete') => void
}
function BouncingNote() {
function NoteIcon({ bouncing }: { bouncing: boolean }) {
return (
<svg
width="18"
height="18"
width="14"
height="14"
viewBox="0 0 18 18"
className="animate-note-bounce"
className={bouncing ? 'animate-note-bounce' : ''}
aria-hidden="true"
>
{/* Staff lines */}
@@ -91,8 +91,8 @@ export default function MaestroButton({
const mode = prompt.trim() ? 'complete' : 'generate'
const label = mode === 'generate'
? '♪ Maestro Mode'
: '♪ Keep Composing'
? 'Maestro Mode'
: 'Keep Composing'
return (
<button
@@ -109,16 +109,13 @@ export default function MaestroButton({
: "Let Maestro complete your prompt with musical details"
}
>
{isMaestroing ? (
<>
<BouncingNote />
<span className="truncate">
{mode === 'generate' ? 'Dreaming...' : 'Composing...'}
</span>
</>
) : (
<span className="truncate">{label}</span>
)}
<NoteIcon bouncing={isMaestroing} />
<span className="truncate">
{isMaestroing
? (mode === 'generate' ? 'Dreaming...' : 'Composing...')
: label
}
</span>
</button>
)
}