<script lang="ts">
|
import { onDestroy, onMount } from 'svelte'
|
import { Call, Events } from '@wailsio/runtime'
|
import ToggleSwitch from '../shared/ToggleSwitch.svelte'
|
import { t } from '../../lib/i18n'
|
import { autoHide, soundFeedback, copyToClipboard, autoPasteExperiment, startAtLogin, hotkeyVK, hotkeyMode } from '../../lib/stores/config'
|
import { deviceName, engineStatus, engineHardwareInfo } from '../../lib/stores/app'
|
import { hotkeyName } from '../../lib/stores/indicator'
|
|
interface InputDevice {
|
name: string
|
isDefault: boolean
|
}
|
|
interface TextOutputResult {
|
ok?: boolean
|
needsPermission?: boolean
|
directInserted?: boolean
|
fallbackAvailable?: boolean
|
createdAt?: string
|
}
|
|
interface ClipboardFallbackResult {
|
ok?: boolean
|
prepared?: boolean
|
restored?: boolean
|
token?: string
|
}
|
|
let autoHideVal = $state(true)
|
let soundFeedbackVal = $state(true)
|
let copyToClipboardVal = $state(true)
|
let autoPasteExperimentVal = $state(false)
|
let startAtLoginVal = $state(false)
|
let hideDockIconVal = $state(false)
|
let settingsLoaded = $state(false)
|
let device = $state('Default')
|
let status = $state('loading')
|
let hwInfo = $state('')
|
let currentKeyName = $state('')
|
let hotkeyModeVal: 'tap' | 'hold' = $state('hold')
|
let isRecording = $state(false)
|
let hintText = $state('')
|
let devices = $state<InputDevice[]>([])
|
let showDeviceDropdown = $state(false)
|
let activeKeyHandler: ((e: KeyboardEvent) => void) | null = null
|
let textOutput = $state<TextOutputResult | null>(null)
|
let outputStatusText = $state('')
|
let outputActionText = $state('')
|
let fallbackToken = $state('')
|
let fallbackPrepared = $state(false)
|
let fallbackBusy = $state(false)
|
let lastOutputCreatedAt = $state('')
|
|
const unsub1 = autoHide.subscribe(v => { autoHideVal = v })
|
const unsub2 = startAtLogin.subscribe(v => { startAtLoginVal = v })
|
const unsub3 = deviceName.subscribe(v => { device = v })
|
const unsub4 = engineStatus.subscribe(v => { status = v })
|
const unsub5 = engineHardwareInfo.subscribe(v => { hwInfo = v })
|
const unsub6 = hotkeyName.subscribe(k => { currentKeyName = k })
|
const unsub7 = soundFeedback.subscribe(v => { soundFeedbackVal = v })
|
const unsub8 = copyToClipboard.subscribe(v => { copyToClipboardVal = v })
|
const unsub9 = hotkeyMode.subscribe(v => { hotkeyModeVal = v })
|
const unsub10 = autoPasteExperiment.subscribe(v => { autoPasteExperimentVal = v })
|
|
onDestroy(() => {
|
unsub1(); unsub2(); unsub3(); unsub4(); unsub5(); unsub6(); unsub7(); unsub8(); unsub9(); unsub10()
|
clearHotkeyCapture()
|
})
|
|
// Load actual device name from backend on mount
|
async function loadDeviceName() {
|
try {
|
const name: any = await Call.ByName('voicesnap/services.AudioService.GetDeviceName')
|
if (name) {
|
device = name
|
deviceName.set(name)
|
}
|
} catch {}
|
}
|
loadDeviceName()
|
|
async function loadSettings() {
|
try {
|
const isStartup: any = await Call.ByName('voicesnap/services.ConfigService.IsStartupEnabled')
|
startAtLogin.set(!!isStartup)
|
startAtLoginVal = !!isStartup
|
} catch {}
|
try {
|
const ah: any = await Call.ByName('voicesnap/services.ConfigService.GetAutoHide')
|
autoHide.set(ah)
|
autoHideVal = ah
|
} catch {}
|
try {
|
const sf: any = await Call.ByName('voicesnap/services.ConfigService.GetSoundFeedback')
|
soundFeedback.set(sf)
|
soundFeedbackVal = sf
|
} catch {}
|
try {
|
const copy: any = await Call.ByName('voicesnap/services.ConfigService.GetCopyToClipboard')
|
copyToClipboard.set(copy)
|
copyToClipboardVal = copy
|
} catch {}
|
try {
|
const autoPaste: any = await Call.ByName('voicesnap/services.ConfigService.GetAutoPasteExperiment')
|
autoPasteExperiment.set(!!autoPaste)
|
autoPasteExperimentVal = !!autoPaste
|
} catch {}
|
try {
|
const mode: any = await Call.ByName('voicesnap/services.ConfigService.GetHotkeyMode')
|
const normalized = mode === 'tap' ? 'tap' : 'hold'
|
hotkeyMode.set(normalized)
|
hotkeyModeVal = normalized
|
} catch {}
|
try {
|
const vk: any = await Call.ByName('voicesnap/services.HotkeyService.GetCurrentHotkey')
|
if (typeof vk === 'number') {
|
hotkeyVK.set(vk)
|
}
|
const name: any = await Call.ByName('voicesnap/services.HotkeyService.GetHotkeyName')
|
if (typeof name === 'string') {
|
hotkeyName.set(name)
|
currentKeyName = name
|
}
|
} catch {}
|
try {
|
const hideDock: any = await Call.ByName('voicesnap/services.ConfigService.GetHideDockIcon')
|
hideDockIconVal = !!hideDock
|
} catch {}
|
settingsLoaded = true
|
}
|
loadSettings()
|
|
onMount(() => {
|
const offTextOutputUpdated = Events.On('text-output:updated', () => {
|
void refreshTextOutput()
|
})
|
const pollTextOutput = window.setInterval(() => {
|
void refreshTextOutput(true)
|
}, 1000)
|
void refreshTextOutput()
|
return () => {
|
window.clearInterval(pollTextOutput)
|
offTextOutputUpdated()
|
}
|
})
|
|
async function onAutoHideChange(checked: boolean) {
|
autoHide.set(checked)
|
try {
|
await Call.ByName('voicesnap/services.ConfigService.SetAutoHide', checked)
|
} catch {}
|
}
|
|
async function onSoundFeedbackChange(checked: boolean) {
|
soundFeedback.set(checked)
|
try {
|
await Call.ByName('voicesnap/services.ConfigService.SetSoundFeedback', checked)
|
} catch {}
|
}
|
|
async function onCopyToClipboardChange(checked: boolean) {
|
copyToClipboard.set(checked)
|
try {
|
await Call.ByName('voicesnap/services.ConfigService.SetCopyToClipboard', checked)
|
} catch {}
|
}
|
|
async function onAutoPasteExperimentChange(checked: boolean) {
|
autoPasteExperiment.set(checked)
|
try {
|
await Call.ByName('voicesnap/services.ConfigService.SetAutoPasteExperiment', checked)
|
} catch {}
|
}
|
|
async function onHotkeyModeChange(mode: 'tap' | 'hold') {
|
hotkeyMode.set(mode)
|
hotkeyModeVal = mode
|
try {
|
await Call.ByName('voicesnap/services.ConfigService.SetHotkeyMode', mode)
|
} catch {}
|
}
|
|
async function onStartAtLoginChange(checked: boolean) {
|
startAtLogin.set(checked)
|
try {
|
await Call.ByName('voicesnap/services.ConfigService.SetStartupEnabled', checked)
|
} catch {}
|
}
|
|
async function onHideDockIconChange(checked: boolean) {
|
hideDockIconVal = checked
|
try {
|
await Call.ByName('voicesnap/services.ConfigService.SetHideDockIcon', checked)
|
} catch {}
|
}
|
|
async function refreshTextOutput(preserveActionText = false) {
|
try {
|
const result: TextOutputResult = await Call.ByName('voicesnap/services.TextOutputService.GetLastResult')
|
const nextOutputCreatedAt = outputResultKey(result)
|
const isNewOutput = !!nextOutputCreatedAt && !!lastOutputCreatedAt && nextOutputCreatedAt !== lastOutputCreatedAt
|
if (isNewOutput) {
|
fallbackToken = ''
|
fallbackPrepared = false
|
outputActionText = ''
|
}
|
if (nextOutputCreatedAt) {
|
lastOutputCreatedAt = nextOutputCreatedAt
|
}
|
textOutput = result || null
|
outputStatusText = textOutputStatus(result)
|
if (!isNewOutput && !preserveActionText && !fallbackPrepared) {
|
outputActionText = ''
|
}
|
} catch {
|
textOutput = null
|
outputStatusText = t('settings.textOutputUnavailable')
|
}
|
}
|
|
async function prepareClipboardFallback() {
|
if (fallbackPrepared) return
|
fallbackBusy = true
|
try {
|
const result: ClipboardFallbackResult = await Call.ByName('voicesnap/services.TextOutputService.PrepareLastClipboardFallback')
|
if (result?.ok && result?.prepared && result?.token) {
|
fallbackToken = result.token
|
fallbackPrepared = true
|
outputActionText = t('settings.textOutputFallbackPrepared')
|
} else {
|
outputActionText = t('settings.textOutputFallbackUnavailable')
|
}
|
} catch {
|
outputActionText = t('settings.textOutputFallbackUnavailable')
|
} finally {
|
fallbackBusy = false
|
void refreshTextOutput()
|
}
|
}
|
|
async function restoreClipboardFallback() {
|
if (!fallbackToken) return
|
fallbackBusy = true
|
try {
|
const result: ClipboardFallbackResult = await Call.ByName('voicesnap/services.TextOutputService.RestoreClipboardFallback', fallbackToken)
|
fallbackToken = ''
|
fallbackPrepared = false
|
if (result?.ok && result?.restored) {
|
outputActionText = t('settings.textOutputClipboardRestored')
|
} else {
|
outputActionText = t('settings.textOutputClipboardKept')
|
}
|
} catch {
|
outputActionText = t('settings.textOutputClipboardRestoreFailed')
|
} finally {
|
fallbackBusy = false
|
void refreshTextOutput(true)
|
}
|
}
|
|
function textOutputStatus(result: TextOutputResult | null | undefined): string {
|
if (!hasOutputResult(result)) {
|
return t('settings.textOutputNoResult')
|
}
|
if (result.ok && result.directInserted) {
|
return t('settings.textOutputInserted')
|
}
|
if (result.ok) {
|
return t('settings.textOutputCompleted')
|
}
|
if (result.needsPermission) {
|
return t('settings.textOutputNeedsPermission')
|
}
|
if (result.fallbackAvailable) {
|
return t('settings.textOutputFallbackAvailable')
|
}
|
return t('settings.textOutputFailed')
|
}
|
|
function hasOutputResult(result: TextOutputResult | null | undefined): result is TextOutputResult {
|
if (!result) return false
|
if (result.ok || result.needsPermission || result.directInserted || result.fallbackAvailable) return true
|
return !!outputResultKey(result)
|
}
|
|
function outputResultKey(result: TextOutputResult | null | undefined): string {
|
const createdAt = result?.createdAt || ''
|
if (!createdAt || createdAt.startsWith('0001-')) return ''
|
return createdAt
|
}
|
|
async function toggleDeviceDropdown() {
|
if (showDeviceDropdown) {
|
showDeviceDropdown = false
|
return
|
}
|
try {
|
const list: any = await Call.ByName('voicesnap/services.AudioService.ListInputDevices')
|
devices = list || []
|
} catch {
|
devices = []
|
}
|
if (devices.length > 0) {
|
showDeviceDropdown = true
|
}
|
}
|
|
async function selectDevice(dev: InputDevice) {
|
showDeviceDropdown = false
|
device = dev.name
|
deviceName.set(dev.name)
|
try {
|
await Call.ByName('voicesnap/services.AudioService.SetDevice', dev.name)
|
} catch {}
|
}
|
|
function closeDropdown(e: MouseEvent) {
|
const target = e.target as HTMLElement
|
if (!target.closest('.device-selector')) {
|
showDeviceDropdown = false
|
}
|
}
|
|
async function startRecordingHotkey() {
|
clearHotkeyCapture()
|
isRecording = true
|
hintText = t('hotkeys.pressAnyKey')
|
|
try {
|
await Call.ByName('voicesnap/services.HotkeyService.StartRecordingHotkey')
|
} catch {}
|
|
function onKey(e: KeyboardEvent) {
|
e.preventDefault()
|
e.stopPropagation()
|
|
if (isHotkeyCaptureCancel(e)) {
|
hintText = t('status.cancelled')
|
clearHotkeyCapture()
|
return
|
}
|
|
const vk = mapKeyToVK(e)
|
if (vk > 0) {
|
isRecording = false
|
hintText = t('hotkeys.updated')
|
hotkeyVK.set(vk)
|
|
;(async () => {
|
try {
|
await Call.ByName('voicesnap/services.HotkeyService.SetHotkey', vk)
|
const name: any = await Call.ByName('voicesnap/services.HotkeyService.GetKeyName', vk)
|
if (typeof name === 'string') {
|
hotkeyName.set(name)
|
currentKeyName = name
|
}
|
} catch {}
|
try {
|
await Call.ByName('voicesnap/services.HotkeyService.StopRecordingHotkey')
|
} catch {}
|
})()
|
|
clearHotkeyCapture()
|
}
|
}
|
|
activeKeyHandler = onKey
|
document.addEventListener('keydown', onKey)
|
}
|
|
function isHotkeyCaptureCancel(e: KeyboardEvent): boolean {
|
return e.key === 'Escape' || e.key === 'Esc'
|
}
|
|
function clearHotkeyCapture() {
|
if (activeKeyHandler) {
|
document.removeEventListener('keydown', activeKeyHandler)
|
activeKeyHandler = null
|
}
|
if (isRecording) {
|
isRecording = false
|
void Call.ByName('voicesnap/services.HotkeyService.StopRecordingHotkey').catch(() => {})
|
}
|
}
|
|
function mapKeyToVK(e: KeyboardEvent): number {
|
switch (e.key) {
|
case 'Control': return e.location === 1 ? 0xA2 : e.location === 2 ? 0xA3 : 0x11
|
case 'Alt': return e.location === 1 ? 0xA4 : e.location === 2 ? 0xA5 : 0x12
|
case 'Shift': return e.location === 1 ? 0xA0 : e.location === 2 ? 0xA1 : 0x10
|
case 'CapsLock': return 0x14
|
case ' ': return 0x20
|
case 'Tab': return 0x09
|
case 'Enter': return 0x0D
|
case 'Escape': return 0x1B
|
case 'Meta': return e.location === 1 ? 0x5B : 0x5C
|
default:
|
if (e.key.length === 1) {
|
const code = e.key.toUpperCase().charCodeAt(0)
|
if (code >= 0x41 && code <= 0x5A) return code
|
if (code >= 0x30 && code <= 0x39) return code
|
}
|
if (e.key.startsWith('F') && e.key.length <= 3) {
|
const num = parseInt(e.key.substring(1))
|
if (num >= 1 && num <= 12) return 0x70 + num - 1
|
}
|
return 0
|
}
|
}
|
</script>
|
|
<div class="page">
|
<!-- Header -->
|
<div class="header">
|
<h1 class="tagline">{t('home.tagline')}</h1>
|
<p class="app-desc">{hotkeyModeVal === 'tap' ? t('home.modeHintTap') : t('home.modeHintHold')}</p>
|
</div>
|
|
<!-- Hotkey -->
|
<div class="section">
|
<div class="hotkey-display">
|
<div class="hotkey-info">
|
<span class="hotkey-label">{t('home.hotkeyLabel')}</span>
|
<div class="hotkey-key" class:recording={isRecording} class:unset={!isRecording && !currentKeyName}>
|
{isRecording ? '...' : (currentKeyName || t('hotkeys.unset'))}
|
</div>
|
</div>
|
<button class="change-btn" onclick={startRecordingHotkey} disabled={isRecording}>
|
{currentKeyName ? t('hotkeys.change') : t('hotkeys.set')}
|
</button>
|
</div>
|
|
{#if !currentKeyName && !isRecording}
|
<p class="hint">{t('hotkeys.unsetDesc')}</p>
|
{/if}
|
|
{#if hintText}
|
<p class="hint" class:recording={isRecording}>{hintText}</p>
|
{/if}
|
|
<div class="divider"></div>
|
|
<div class="setting-row">
|
<div class="setting-info">
|
<span class="setting-label">{t('settings.hotkeyMode')}</span>
|
<span class="setting-desc">
|
{hotkeyModeVal === 'tap' ? t('settings.hotkeyModeTapDesc') : t('settings.hotkeyModeHoldDesc')}
|
</span>
|
</div>
|
<div class="segmented" role="group" aria-label={t('settings.hotkeyMode')}>
|
<button
|
class:active={hotkeyModeVal === 'tap'}
|
onclick={() => onHotkeyModeChange('tap')}
|
>
|
{t('settings.hotkeyModeTap')}
|
</button>
|
<button
|
class:active={hotkeyModeVal === 'hold'}
|
onclick={() => onHotkeyModeChange('hold')}
|
>
|
{t('settings.hotkeyModeHold')}
|
</button>
|
</div>
|
</div>
|
|
</div>
|
|
<!-- Engine + Device -->
|
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
<div class="section" onclick={closeDropdown}>
|
<div class="setting-row">
|
<div class="setting-info">
|
<span class="setting-label">{t('about.engineMode')}</span>
|
<span class="setting-value">
|
<span class="status-dot" class:green={status === 'ready'} class:orange={status === 'loading'} class:red={status === 'error'}></span>
|
{#if status === 'ready'}
|
{hwInfo}
|
{:else if status === 'loading'}
|
{t('status.loading')}
|
{:else}
|
{t('status.engineNotReady')}
|
{/if}
|
</span>
|
</div>
|
</div>
|
|
<div class="divider"></div>
|
|
<div class="setting-row">
|
<div class="setting-info">
|
<span class="setting-label">{t('settings.inputDevice')}</span>
|
</div>
|
<div class="device-selector">
|
<button class="device-btn" onclick={toggleDeviceDropdown}>
|
<span class="device-name">{device}</span>
|
<svg class="chevron" class:open={showDeviceDropdown} width="10" height="6" viewBox="0 0 10 6" fill="none">
|
<path d="M1 1L5 5L9 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
</svg>
|
</button>
|
{#if showDeviceDropdown && devices.length > 0}
|
<div class="device-dropdown">
|
{#each devices as dev}
|
<button
|
class="device-option"
|
class:selected={dev.name === device}
|
onclick={() => selectDevice(dev)}
|
>
|
{dev.name}
|
{#if dev.name === device}
|
<svg width="12" height="9" viewBox="0 0 12 9" fill="none">
|
<path d="M1 4L4.5 7.5L11 1" stroke="var(--color-blue)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
</svg>
|
{/if}
|
</button>
|
{/each}
|
</div>
|
{/if}
|
</div>
|
</div>
|
</div>
|
|
<!-- Toggles -->
|
{#if settingsLoaded}
|
<div class="section">
|
<div class="setting-row">
|
<div class="setting-info">
|
<span class="setting-label">{t('settings.soundFeedback')}</span>
|
<span class="setting-desc">{t('settings.soundFeedbackDesc')}</span>
|
</div>
|
<ToggleSwitch checked={soundFeedbackVal} onchange={onSoundFeedbackChange} />
|
</div>
|
|
<div class="divider"></div>
|
|
<div class="setting-row">
|
<div class="setting-info">
|
<span class="setting-label">{t('settings.copyToClipboard')}</span>
|
<span class="setting-desc">{t('settings.copyToClipboardDesc')}</span>
|
</div>
|
<ToggleSwitch checked={copyToClipboardVal} onchange={onCopyToClipboardChange} />
|
</div>
|
|
<div class="divider"></div>
|
|
<div class="setting-row">
|
<div class="setting-info">
|
<span class="setting-label">{t('settings.autoPasteExperiment')}</span>
|
<span class="setting-desc">{t('settings.autoPasteExperimentDesc')}</span>
|
</div>
|
<ToggleSwitch checked={autoPasteExperimentVal} onchange={onAutoPasteExperimentChange} />
|
</div>
|
|
<div class="divider"></div>
|
|
<div class="text-output-panel">
|
<div class="setting-info">
|
<span class="setting-label">{t('settings.textOutputTitle')}</span>
|
<span class="setting-desc">{t('settings.textOutputDesc')}</span>
|
</div>
|
<div class="text-output-status" class:success={!!textOutput?.ok} class:warn={!!textOutput && !textOutput.ok}>
|
{outputStatusText || t('settings.textOutputNoResult')}
|
</div>
|
{#if outputActionText}
|
<div class="fallback-message">{outputActionText}</div>
|
{/if}
|
<div class="fallback-actions">
|
<button class="secondary-btn" onclick={() => refreshTextOutput()} disabled={fallbackBusy}>
|
{t('settings.textOutputRefresh')}
|
</button>
|
<button
|
class="primary-btn"
|
onclick={prepareClipboardFallback}
|
disabled={fallbackBusy || fallbackPrepared || !textOutput?.fallbackAvailable}
|
>
|
{t('settings.textOutputUseClipboard')}
|
</button>
|
{#if fallbackPrepared}
|
<button class="secondary-btn" onclick={restoreClipboardFallback} disabled={fallbackBusy || !fallbackToken}>
|
{t('settings.textOutputRestoreClipboard')}
|
</button>
|
{/if}
|
</div>
|
</div>
|
|
<div class="divider"></div>
|
|
<div class="setting-row">
|
<div class="setting-info">
|
<span class="setting-label">{t('settings.autoHide')}</span>
|
<span class="setting-desc">{t('settings.autoHideDesc')}</span>
|
</div>
|
<ToggleSwitch checked={autoHideVal} onchange={onAutoHideChange} />
|
</div>
|
|
<div class="divider"></div>
|
|
<div class="setting-row">
|
<div class="setting-info">
|
<span class="setting-label">{t('settings.startAtLogin')}</span>
|
<span class="setting-desc">{t('settings.startAtLoginDesc')}</span>
|
</div>
|
<ToggleSwitch checked={startAtLoginVal} onchange={onStartAtLoginChange} />
|
</div>
|
|
<div class="divider"></div>
|
|
<div class="setting-row">
|
<div class="setting-info">
|
<span class="setting-label">{t('settings.hideDockIcon')}</span>
|
<span class="setting-desc">{t('settings.hideDockIconDesc')}</span>
|
</div>
|
<ToggleSwitch checked={hideDockIconVal} onchange={onHideDockIconChange} />
|
</div>
|
</div>
|
{/if}
|
</div>
|
|
<style>
|
.header {
|
margin-bottom: var(--spacing-xl);
|
}
|
|
.tagline {
|
font-size: 22px;
|
font-weight: 700;
|
}
|
|
.app-desc {
|
font-size: var(--font-size-sm);
|
color: var(--color-secondary-label);
|
margin-top: 6px;
|
}
|
|
.section {
|
background: var(--color-bg-grouped-secondary);
|
border-radius: var(--radius-md);
|
padding: var(--spacing-lg);
|
margin-bottom: var(--spacing-md);
|
}
|
|
/* Hotkey */
|
.hotkey-display {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
}
|
|
.hotkey-info {
|
display: flex;
|
align-items: center;
|
gap: var(--spacing-md);
|
}
|
|
.hotkey-label {
|
font-size: var(--font-size-base);
|
font-weight: 500;
|
}
|
|
.hotkey-key {
|
display: inline-flex;
|
align-items: center;
|
justify-content: center;
|
min-width: 56px;
|
padding: 5px 14px;
|
background: var(--color-bg-secondary);
|
border-radius: var(--radius-sm);
|
font-family: var(--font-family);
|
font-size: var(--font-size-lg);
|
font-weight: 600;
|
color: var(--color-blue);
|
}
|
|
.hotkey-key.recording {
|
color: var(--color-orange);
|
animation: pulse 1s infinite;
|
}
|
|
.hotkey-key.unset {
|
color: var(--color-secondary-label);
|
font-size: var(--font-size-base);
|
font-weight: 500;
|
}
|
|
@keyframes pulse {
|
0%, 100% { opacity: 1; }
|
50% { opacity: 0.5; }
|
}
|
|
.change-btn {
|
padding: 6px 2px;
|
background: transparent;
|
border: none;
|
font-size: var(--font-size-sm);
|
font-weight: 500;
|
color: var(--color-blue);
|
cursor: pointer;
|
transition: opacity var(--transition-fast);
|
}
|
|
.change-btn:hover { opacity: 0.65; }
|
.change-btn:disabled { opacity: 0.4; cursor: not-allowed; }
|
|
.hint {
|
margin-top: var(--spacing-sm);
|
font-size: var(--font-size-sm);
|
color: var(--color-secondary-label);
|
}
|
|
.hint.recording {
|
color: var(--color-blue);
|
}
|
|
/* Settings rows */
|
.status-dot {
|
display: inline-block;
|
width: 7px;
|
height: 7px;
|
border-radius: 50%;
|
background: var(--color-blue);
|
margin-right: 4px;
|
vertical-align: middle;
|
}
|
|
.status-dot.green { background: var(--color-green); }
|
.status-dot.orange { background: var(--color-orange); }
|
.status-dot.red { background: var(--color-red); }
|
|
.setting-row {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: var(--spacing-xs) 0;
|
}
|
|
.setting-info {
|
display: flex;
|
flex-direction: column;
|
gap: 2px;
|
}
|
|
.setting-label {
|
font-size: var(--font-size-base);
|
font-weight: 500;
|
}
|
|
.setting-value {
|
font-size: var(--font-size-sm);
|
color: var(--color-secondary-label);
|
}
|
|
.setting-desc {
|
font-size: var(--font-size-xs);
|
color: var(--color-tertiary-label);
|
}
|
|
.text-output-panel {
|
display: flex;
|
flex-direction: column;
|
gap: var(--spacing-sm);
|
padding: var(--spacing-xs) 0;
|
}
|
|
.text-output-status {
|
display: inline-flex;
|
align-self: flex-start;
|
padding: 4px 10px;
|
border-radius: var(--radius-sm);
|
background: var(--color-bg-secondary);
|
color: var(--color-secondary-label);
|
font-size: var(--font-size-sm);
|
font-weight: 500;
|
}
|
|
.text-output-status.success {
|
color: var(--color-green);
|
}
|
|
.text-output-status.warn {
|
color: var(--color-orange);
|
}
|
|
.fallback-message {
|
color: var(--color-secondary-label);
|
font-size: var(--font-size-sm);
|
line-height: 1.4;
|
}
|
|
.fallback-actions {
|
display: flex;
|
flex-wrap: wrap;
|
gap: var(--spacing-sm);
|
}
|
|
.primary-btn,
|
.secondary-btn {
|
border: none;
|
border-radius: var(--radius-sm);
|
padding: 7px 12px;
|
font-size: var(--font-size-sm);
|
font-weight: 600;
|
cursor: pointer;
|
}
|
|
.primary-btn {
|
background: var(--color-blue);
|
color: white;
|
}
|
|
.secondary-btn {
|
background: var(--color-bg-secondary);
|
color: var(--color-label);
|
}
|
|
.primary-btn:disabled,
|
.secondary-btn:disabled {
|
opacity: 0.5;
|
cursor: not-allowed;
|
}
|
|
.segmented {
|
display: inline-grid;
|
grid-template-columns: 1fr 1fr;
|
min-width: 148px;
|
padding: 2px;
|
border-radius: var(--radius-sm);
|
background: var(--color-bg-secondary);
|
flex-shrink: 0;
|
}
|
|
.segmented button {
|
min-width: 66px;
|
height: 30px;
|
padding: 0 12px;
|
border: none;
|
border-radius: calc(var(--radius-sm) - 2px);
|
background: transparent;
|
color: var(--color-secondary-label);
|
font-size: var(--font-size-sm);
|
font-weight: 500;
|
cursor: pointer;
|
transition: background var(--transition-fast), color var(--transition-fast);
|
}
|
|
.segmented button.active {
|
background: var(--color-blue);
|
color: white;
|
}
|
|
.divider {
|
height: 1px;
|
background: var(--color-separator);
|
margin: var(--spacing-sm) 0;
|
}
|
|
/* Device selector */
|
.device-selector {
|
position: relative;
|
}
|
|
.device-btn {
|
display: flex;
|
align-items: center;
|
gap: 6px;
|
padding: 4px 0;
|
background: transparent;
|
border: none;
|
font-size: var(--font-size-sm);
|
color: var(--color-secondary-label);
|
cursor: pointer;
|
transition: opacity var(--transition-fast);
|
}
|
|
.device-btn:hover { opacity: 0.65; }
|
|
.device-name {
|
max-width: 200px;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
|
.chevron {
|
color: var(--color-tertiary-label);
|
transition: transform 0.2s ease;
|
flex-shrink: 0;
|
}
|
|
.chevron.open {
|
transform: rotate(180deg);
|
}
|
|
.device-dropdown {
|
position: absolute;
|
right: 0;
|
top: calc(100% + 4px);
|
min-width: 240px;
|
max-width: 320px;
|
background: var(--color-bg-grouped-secondary);
|
border: 1px solid var(--color-separator);
|
border-radius: var(--radius-sm);
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
|
z-index: 100;
|
overflow: hidden;
|
}
|
|
.device-option {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
width: 100%;
|
padding: 8px 12px;
|
background: transparent;
|
border: none;
|
font-size: var(--font-size-sm);
|
color: var(--color-label);
|
cursor: pointer;
|
text-align: left;
|
transition: background 0.15s ease;
|
}
|
|
.device-option:hover {
|
background: var(--color-bg-secondary);
|
}
|
|
.device-option.selected {
|
color: var(--color-blue);
|
font-weight: 500;
|
}
|
|
.device-option + .device-option {
|
border-top: 1px solid var(--color-separator);
|
}
|
</style>
|
