mirror of
https://github.com/wu736139669/hapi.git
synced 2026-11-08 01:43:07 +00:00
fix(web): align new-session and settings controls (#1578)
This commit is contained in:
@@ -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}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user