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:
James Pine
2026-04-23 19:33:14 -07:00
co-authored by Claude Opus 4.7
parent 687ab2aa16
commit f21778fcf3
2 changed files with 34 additions and 10 deletions
@@ -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">