refactor(ui): simplify prompt recording indicator
This commit is contained in:
@@ -605,7 +605,7 @@ export default function PromptInput(props: PromptInputProps) {
|
||||
</Show>
|
||||
}
|
||||
>
|
||||
<span class="prompt-voice-timer">{formatVoiceTimer(voiceInput.elapsedMs())}</span>
|
||||
<Mic class="h-4 w-4" aria-hidden="true" />
|
||||
</Show>
|
||||
</button>
|
||||
</Show>
|
||||
@@ -760,10 +760,3 @@ export default function PromptInput(props: PromptInputProps) {
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function formatVoiceTimer(elapsedMs: number): string {
|
||||
const totalSeconds = Math.max(0, Math.floor(elapsedMs / 1000))
|
||||
const minutes = Math.floor(totalSeconds / 60)
|
||||
const seconds = totalSeconds % 60
|
||||
return `${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`
|
||||
}
|
||||
|
||||
@@ -220,6 +220,16 @@
|
||||
color: var(--button-danger-text, var(--text-inverted, #ffffff));
|
||||
}
|
||||
|
||||
.prompt-voice-button.is-recording:hover:not(:disabled) {
|
||||
background-color: var(--button-danger-hover-bg, rgba(239, 68, 68, 0.9));
|
||||
color: var(--button-danger-text, var(--text-inverted, #ffffff));
|
||||
}
|
||||
|
||||
.prompt-voice-button.is-recording:active:not(:disabled) {
|
||||
background-color: var(--button-danger-active-bg, rgba(239, 68, 68, 1));
|
||||
color: var(--button-danger-text, var(--text-inverted, #ffffff));
|
||||
}
|
||||
|
||||
.prompt-nav-voice-button {
|
||||
min-width: 1.75rem;
|
||||
width: 1.75rem;
|
||||
@@ -228,8 +238,8 @@
|
||||
}
|
||||
|
||||
.prompt-nav-voice-button.is-recording {
|
||||
min-width: 3.5rem;
|
||||
width: auto;
|
||||
min-width: 1.75rem;
|
||||
width: 1.75rem;
|
||||
}
|
||||
|
||||
.prompt-voice-button:disabled {
|
||||
|
||||
Reference in New Issue
Block a user