Split settings into tabs; exposure and focus on the home screen

Home screen gains shutter, aperture and ISO as dropdowns plus a focus stepper
(three nudge sizes each way, and AF) where the body drives focus over PTP.
Those three drop out of the read-only strip rather than being shown twice.

Everything is built from what the camera actually reports, so a body without
one of these controls doesn't get it rather than showing something that
silently fails. The 450D marks shutter and aperture readonly unless the mode
dial is somewhere they apply, so the dropdowns disable themselves and say why.
Focus uses the EOS manualfocusdrive steps and autofocusdrive, and warns when
live view is off, which Canon bodies generally require for focus commands.

The settings drawer is now tabbed: app settings stay on the first tab, and
each config section the camera reports gets its own. Empty sections are
dropped, and a selected section that disappears falls back to the first tab.
Tabs wrap rather than scroll - a scrolled-off tab is an undiscoverable one.

Reverts the automatic camera search added in the previous commit, restoring
the Select camera button. Auto-connect could park with no way to reach the
device chooser: WebUSB permissions are per-origin, so a grant on localhost
doesn't carry to the deployed copy, and a camera that's asleep or held by
another app never arrives.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QK7PKpRVoy69Fpa32R8abb

examples/preact/home.js

@@ -16,7 +16,7 @@
  * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA
  */
 
-import { h } from 'preact';
+import { h, Component } from 'preact';
 import {
   secondsUntilNext,
   formatDuration,
@@ -25,7 +25,9 @@ import {
 import {
   statusReadout,
   configValue,
-  shutterSpeedSeconds
+  shutterSpeedSeconds,
+  exposureControls,
+  detectFocusControls
 } from './config-utils.js';
 
 /** @typedef {import('./settings.js').Prefs} Prefs */
@@ -141,6 +143,177 @@ function SequenceStatus({ state, prefs, voiceSupported, onToggleVoice }) {
   );
 }
 
+/**
+ * A camera setting as a dropdown, with the round-trip to the body surfaced.
+ *
+ * Each change is a USB round-trip that takes the best part of a second, so the
+ * control locks and shows a spinner rather than pretending it was instant and
+ * then snapping back to the old value.
+ *
+ * @extends Component<{
+ *   node: import('web-gphoto2').Config,
+ *   label: string,
+ *   setValue: (name: string, value: any) => Promise<void>
+ * }, { pending: boolean }>
+ */
+class ConfigSelect extends Component {
+  state = { pending: false };
+
+  handleChange = async e => {
+    let value = e.currentTarget.value;
+    this.setState({ pending: true });
+    try {
+      await this.props.setValue(this.props.node.name, value);
+    } finally {
+      this.setState({ pending: false });
+    }
+  };
+
+  render(
+    /** @type {ConfigSelect['props']} */ { node, label },
+    /** @type {ConfigSelect['state']} */ { pending }
+  ) {
+    // Callers only pass menu/radio nodes; the union type doesn't know that.
+    let { choices = [], value } = /** @type {any} */ (node);
+    let locked = node.readonly || pending;
+    return h(
+      'label',
+      { class: 'field' },
+      h(
+        'span',
+        null,
+        label,
+        pending ? h('span', { class: 'mini-spinner' }) : undefined
+      ),
+      h(
+        'select',
+        {
+          value,
+          disabled: locked,
+          title: node.readonly
+            ? `${label} is fixed by the camera in this mode`
+            : undefined,
+          onChange: this.handleChange
+        },
+        choices.map(choice => h('option', { key: choice, value: choice }, choice))
+      )
+    );
+  }
+}
+
+/**
+ * Shutter / aperture / ISO, straight on the home screen.
+ *
+ * @param {{
+ *   config: import('web-gphoto2').Config | undefined,
+ *   setValue: (name: string, value: any) => Promise<void>
+ * }} props
+ */
+function ExposureControls({ config, setValue }) {
+  let controls = exposureControls(config);
+  if (!controls.length) return undefined;
+  let allLocked = controls.every(c => c.node.readonly);
+  let mode = configValue(config, 'autoexposuremode');
+
+  return h(
+    'div',
+    { class: 'card' },
+    h('h3', { class: 'card-title' }, 'Exposure'),
+    h(
+      'div',
+      { class: 'field-grid tight' },
+      controls.map(({ name, label, node }) =>
+        h(ConfigSelect, { key: name, node, label, setValue })
+      )
+    ),
+    allLocked
+      ? h(
+          'p',
+          { class: 'notice' },
+          `The camera is driving exposure itself${
+            mode ? ` in ${mode}` : ''
+          } — switch the mode dial to M to set these from here.`
+        )
+      : undefined
+  );
+}
+
+/**
+ * Focus, where the body supports driving it over PTP.
+ *
+ * @param {{
+ *   config: import('web-gphoto2').Config | undefined,
+ *   setValue: (name: string, value: any) => Promise<void>,
+ *   livePreview: boolean
+ * }} props
+ */
+function FocusControls({ config, setValue, livePreview }) {
+  let { manual, autofocus, mode } = detectFocusControls(config);
+  if (!manual && !autofocus) return undefined;
+
+  // Three nudge sizes per direction, largest on the outside.
+  let step = (choice, glyph, title) =>
+    h(
+      'button',
+      {
+        key: choice,
+        type: 'button',
+        class: 'focus-step',
+        title,
+        onclick: () => setValue(manual.name, choice)
+      },
+      glyph
+    );
+
+  return h(
+    'div',
+    { class: 'card' },
+    h(
+      'h3',
+      { class: 'card-title' },
+      'Focus',
+      mode ? h('span', { class: 'card-title-note' }, String(mode.value)) : undefined
+    ),
+    h(
+      'div',
+      { class: 'focus-row' },
+      manual
+        ? h(
+            'div',
+            { class: 'focus-steps' },
+            h('span', { class: 'focus-end' }, 'Near'),
+            [...manual.near].reverse().map((choice, i) =>
+              step(choice, '◀'.repeat(manual.near.length - i), `Focus nearer — ${choice}`)
+            ),
+            manual.far.map((choice, i) =>
+              step(choice, '▶'.repeat(i + 1), `Focus further — ${choice}`)
+            ),
+            h('span', { class: 'focus-end' }, 'Far')
+          )
+        : undefined,
+      autofocus
+        ? h(
+            'button',
+            {
+              type: 'button',
+              class: 'secondary',
+              title: 'Trigger autofocus',
+              onclick: () => setValue(autofocus, true)
+            },
+            'AF'
+          )
+        : undefined
+    ),
+    manual && !livePreview
+      ? h(
+          'p',
+          { class: 'notice warn' },
+          '⚠ Canon bodies generally only accept focus commands with live view running — turn it back on in Settings.'
+        )
+      : undefined
+  );
+}
+
 /**
  * The one-line description of where the sequence is up to. Shared by the status
  * card and the fullscreen preview overlay.
@@ -209,7 +382,8 @@ export function sequenceSummary(state, prefs) {
  *   canCapture: boolean,
  *   log: { id: number, message: string, kind: string, at: number }[],
  *   voiceSupported: boolean,
- *   onToggleVoice: () => void
+ *   onToggleVoice: () => void,
+ *   setValue: (name: string, value: any) => Promise<void>
  * }} props
  */
 export function Home({
@@ -226,13 +400,18 @@ export function Home({
   canCapture,
   log,
   voiceSupported,
-  onToggleVoice
+  onToggleVoice,
+  setValue
 }) {
   let warnings = running ? [] : sequenceWarnings(prefs, config, hasFolder);
   let plannedSeconds = prefs.unlimited
     ? Infinity
     : prefs.startDelaySeconds + prefs.shots * prefs.intervalSeconds;
-  let readout = statusReadout(config);
+  // Whatever is now an editable control doesn't need repeating as a readout.
+  let readout = statusReadout(
+    config,
+    exposureControls(config).map(c => c.name)
+  );
 
   /** @param {(value: number) => Partial<Prefs>} toPatch */
   let numberHandler = toPatch => e => {
@@ -364,6 +543,9 @@ export function Home({
       )
     ),
 
+    h(ExposureControls, { config, setValue }),
+    h(FocusControls, { config, setValue, livePreview: prefs.livePreview }),
+
     readout.length
       ? h(
           'div',