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:
1 parent
9df8a4f865
commit
98cc6b031c
1 file changed
+13
-16
@@ -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>
|
||||
)
|
||||
}
|
||||
Reference in new issue
Block a user