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
+11
-14
@@ -19,13 +19,13 @@ interface Props {
|
|||||||
onStructuredResult?: (fields: PromptStructure, mode: 'generate' | 'complete') => void
|
onStructuredResult?: (fields: PromptStructure, mode: 'generate' | 'complete') => void
|
||||||
}
|
}
|
||||||
|
|
||||||
function BouncingNote() {
|
function NoteIcon({ bouncing }: { bouncing: boolean }) {
|
||||||
return (
|
return (
|
||||||
<svg
|
<svg
|
||||||
width="18"
|
width="14"
|
||||||
height="18"
|
height="14"
|
||||||
viewBox="0 0 18 18"
|
viewBox="0 0 18 18"
|
||||||
className="animate-note-bounce"
|
className={bouncing ? 'animate-note-bounce' : ''}
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
>
|
>
|
||||||
{/* Staff lines */}
|
{/* Staff lines */}
|
||||||
@@ -91,8 +91,8 @@ export default function MaestroButton({
|
|||||||
|
|
||||||
const mode = prompt.trim() ? 'complete' : 'generate'
|
const mode = prompt.trim() ? 'complete' : 'generate'
|
||||||
const label = mode === 'generate'
|
const label = mode === 'generate'
|
||||||
? '♪ Maestro Mode'
|
? 'Maestro Mode'
|
||||||
: '♪ Keep Composing'
|
: 'Keep Composing'
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<button
|
<button
|
||||||
@@ -109,16 +109,13 @@ export default function MaestroButton({
|
|||||||
: "Let Maestro complete your prompt with musical details"
|
: "Let Maestro complete your prompt with musical details"
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
{isMaestroing ? (
|
<NoteIcon bouncing={isMaestroing} />
|
||||||
<>
|
|
||||||
<BouncingNote />
|
|
||||||
<span className="truncate">
|
<span className="truncate">
|
||||||
{mode === 'generate' ? 'Dreaming...' : 'Composing...'}
|
{isMaestroing
|
||||||
|
? (mode === 'generate' ? 'Dreaming...' : 'Composing...')
|
||||||
|
: label
|
||||||
|
}
|
||||||
</span>
|
</span>
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<span className="truncate">{label}</span>
|
|
||||||
)}
|
|
||||||
</button>
|
</button>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
Reference in new issue
Block a user