mirror of
https://github.com/jamiepine/voicebox.git
synced 2026-09-16 13:20:39 -07:00
feat(captures): mirror readiness checklist into the settings sidebar
The six-gate checklist only rendered in the CapturesTab empty state, so a user already on the settings page had no single surface showing which gate was red — the inline InputMonitoringNotice covered one, the model pickers covered another, and Accessibility was only hinted at by the auto-paste toggle. Mirror the same component into the right sidebar of the settings page so every gate (STT model, LLM model, Input Monitoring, Accessibility, plus the hotkey toggle in the main column) is always visible while the user configures dictation. New compact prop on DictationReadinessChecklist drops the centered header and empty-state max-width so it fits the 280 px sidebar next to the existing About / Differences blocks. Callers in compact mode own the heading — CapturesPage reuses the existing captures.readiness.title key (present in en / ja / zh-CN / zh-TW already) as an h3 matching the sibling sidebar sections. Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]>
This commit is contained in:
co-authored by
Claude Opus 4.7
parent
687ab2aa16
commit
f21778fcf3
@@ -73,8 +73,20 @@ function progressPercent(task: ActiveDownloadTask | undefined): number | null {
|
||||
*
|
||||
* The chord stays disarmed until every row is green; this is what stops the
|
||||
* "stuck pill" failure mode of pressing the chord with a missing model.
|
||||
*
|
||||
* ``compact`` drops the centered title/subheading block and the
|
||||
* empty-state max-width so the checklist can be embedded in a narrow
|
||||
* sidebar alongside other settings. Callers own their own heading in
|
||||
* that mode (typically an ``<h3>`` that matches the surrounding sidebar
|
||||
* section style).
|
||||
*/
|
||||
export function DictationReadinessChecklist({ readiness }: { readiness: DictationReadiness }) {
|
||||
export function DictationReadinessChecklist({
|
||||
readiness,
|
||||
compact = false,
|
||||
}: {
|
||||
readiness: DictationReadiness;
|
||||
compact?: boolean;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const queryClient = useQueryClient();
|
||||
const { toast } = useToast();
|
||||
@@ -176,15 +188,17 @@ export function DictationReadinessChecklist({ readiness }: { readiness: Dictatio
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="w-full max-w-md mx-auto space-y-2.5">
|
||||
<div className="text-center mb-5 space-y-1">
|
||||
<h2 className="text-base font-semibold text-foreground">
|
||||
{t('captures.readiness.title')}
|
||||
</h2>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{t('captures.readiness.subheading')}
|
||||
</p>
|
||||
</div>
|
||||
<div className={cn('w-full space-y-2.5', !compact && 'max-w-md mx-auto')}>
|
||||
{!compact && (
|
||||
<div className="text-center mb-5 space-y-1">
|
||||
<h2 className="text-base font-semibold text-foreground">
|
||||
{t('captures.readiness.title')}
|
||||
</h2>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{t('captures.readiness.subheading')}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{readiness.stt && (
|
||||
<ChecklistRow
|
||||
|
||||
@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
|
||||
import { AccessibilityNotice } from '@/components/AccessibilityGate/AccessibilityGate';
|
||||
import { InputMonitoringNotice } from '@/components/InputMonitoringGate/InputMonitoringGate';
|
||||
import { CapturePill, type PillState } from '@/components/CapturePill/CapturePill';
|
||||
import { DictationReadinessChecklist } from '@/components/CapturesTab/DictationReadinessChecklist';
|
||||
import { ChordPicker } from '@/components/ChordPicker/ChordPicker';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
@@ -584,6 +585,15 @@ export function CapturesPage() {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Same six-gate checklist the CapturesTab empty state uses.
|
||||
Surfaces missing models / permissions persistently while
|
||||
users configure this page, so a red gate can't hide behind
|
||||
a green toggle. */}
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-sm font-semibold">{t('captures.readiness.title')}</h3>
|
||||
<DictationReadinessChecklist readiness={readiness} compact />
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<h3 className="text-sm font-semibold">{t('settings.captures.sidebar.differencesTitle')}</h3>
|
||||
<ul className="space-y-3 text-sm text-muted-foreground">
|
||||
|
||||
Reference in New Issue
Block a user