fix(web): align new-session and settings controls (#1578)

This commit is contained in:
Ananovo
2026-08-15 11:14:12 +08:00
committed by GitHub
parent ad72229923
commit e0354b09c0
7 changed files with 23 additions and 21 deletions
@@ -13,7 +13,7 @@ export function ActionButtons(props: {
const { t } = useTranslation()
return (
<div className="flex gap-2 px-3 pt-3 pb-[calc(env(safe-area-inset-bottom)+1rem)]">
<div className="flex w-full justify-end gap-2 px-3 pt-3 pb-[calc(env(safe-area-inset-bottom)+1rem)]">
<Button
variant="secondary"
onClick={props.onCancel}
+1 -1
View File
@@ -1498,7 +1498,7 @@ export function NewSession(props: {
)
return (
<div className="flex flex-col divide-y divide-[var(--app-divider)]">
<div className="flex flex-col divide-y divide-[var(--app-divider)] [&>div]:pr-[10px] lg:[&>div]:pr-3">
<MachineSelector
machines={props.machines}
machineId={machineId}
@@ -89,7 +89,7 @@ export function CompanionPairing({ baseUrl }: CompanionPairingProps) {
type="button"
variant="outline"
onClick={() => setRevealed(true)}
className="self-start"
className="self-center"
>
{t('settings.companion.showQr')}
</Button>
@@ -29,7 +29,7 @@ export function CheckIcon(props: { className?: string }) {
export function SettingsPageContent(props: { description?: string; children: ReactNode }) {
return (
<div className="mx-auto w-full max-w-[720px] space-y-5 px-3 py-4 lg:px-6 lg:py-6">
<div className="mx-auto w-full max-w-[720px] space-y-5 pl-3 pr-[10px] py-4 lg:px-6 lg:py-6">
<div>
{props.description ? <p className="text-sm text-[var(--app-hint)]">{props.description}</p> : null}
</div>
@@ -291,7 +291,7 @@ export function TranscriptionProviderOnboard(props: {
{error ? <p className="text-xs text-red-500">{error}</p> : null}
{message ? <p className="text-xs text-[var(--app-hint)]">{message}</p> : null}
<div className="flex flex-wrap gap-2">
<div className="flex flex-wrap items-center justify-end gap-2">
<Button type="button" size="sm" disabled={busy || selected?.editable === false} onClick={() => void save()}>
{t('settings.voice.credentials.save')}
</Button>
@@ -130,14 +130,14 @@ export function VoicePersonaControls(props: {
onChange={(e) => setIdentity(e.target.value === DEFAULT_VOICE_IDENTITY ? '' : e.target.value)}
rows={6} maxLength={VOICE_IDENTITY_MAX_LENGTH} spellCheck={false}
className="w-full resize-y rounded-md border border-[var(--app-border)] bg-[var(--app-bg)] px-2 py-2 font-mono text-xs leading-relaxed text-[var(--app-fg)]" />
<div className="flex flex-wrap gap-2">
<div className="flex flex-wrap items-center justify-end gap-2">
<span className="text-xs text-[var(--app-hint)]">
{prefs.identity.trim() ? props.t('settings.voice.identity.customized') : props.t('settings.voice.identity.default')}
</span>
<button type="button" onClick={resetIdentity}
className="rounded-md border border-[var(--app-border)] px-2 py-1 text-xs text-[var(--app-fg)] hover:bg-[var(--app-subtle-bg)]">
{props.t('settings.voice.identity.reset')}
</button>
<span className="text-xs text-[var(--app-hint)]">
{prefs.identity.trim() ? props.t('settings.voice.identity.customized') : props.t('settings.voice.identity.default')}
</span>
</div>
</div>
)}
@@ -156,7 +156,7 @@ export function VoicePersonaControls(props: {
onChange={(e) => setCharacter(e.target.value === DEFAULT_VOICE_CHARACTER ? '' : e.target.value)}
rows={8} maxLength={VOICE_CHARACTER_MAX_LENGTH} spellCheck={false}
className="w-full resize-y rounded-md border border-[var(--app-border)] bg-[var(--app-bg)] px-2 py-2 font-mono text-xs leading-relaxed text-[var(--app-fg)]" />
<div className="flex flex-wrap items-center gap-2">
<div className="flex flex-wrap items-center justify-end gap-2">
<button type="button" onClick={resetCharacter}
className="rounded-md border border-[var(--app-border)] px-2 py-1 text-xs text-[var(--app-fg)] hover:bg-[var(--app-subtle-bg)]">
{props.t('settings.voice.character.reset')}
@@ -190,11 +190,11 @@ export function VoicePersonaControls(props: {
<ChevronDownIcon className={`shrink-0 transition-transform ${deliveryOpen ? 'rotate-180' : ''}`} />
</button>
{deliveryOpen && (
<div className="space-y-1 border-t border-[var(--app-divider)] bg-[var(--app-subtle-bg)]/40 pb-2">
<p className="px-3 pt-2 text-xs text-[var(--app-hint)]">
<div className="space-y-2 border-t border-[var(--app-divider)] bg-[var(--app-subtle-bg)]/40 px-3 py-3">
<p className="text-xs text-[var(--app-hint)]">
{props.t('settings.voice.character.presetSlidersHint')}
</p>
<label className="block px-3 pt-1">
<label className="block">
<span className="mb-1 block text-sm text-[var(--app-fg)]">
{props.t('settings.voice.character.preset.label')}
</span>
+10 -8
View File
@@ -55,14 +55,16 @@ export default function SettingsStoragePage() {
}}
/>
) : null}
<button
type="button"
onClick={() => void query.refetch()}
disabled={query.isFetching}
className="rounded-lg bg-[var(--app-button)] px-3 py-2 text-sm font-medium text-[var(--app-button-text)] disabled:opacity-50"
>
{query.isFetching ? t('settings.storage.refreshing') : t('settings.storage.refresh')}
</button>
<div className="flex justify-end">
<button
type="button"
onClick={() => void query.refetch()}
disabled={query.isFetching}
className="rounded-lg bg-[var(--app-button)] px-3 py-2 text-sm font-medium text-[var(--app-button-text)] disabled:opacity-50"
>
{query.isFetching ? t('settings.storage.refreshing') : t('settings.storage.refresh')}
</button>
</div>
</SettingsPageContent>
)
}