Settings: Focus search on open, add LinkButton for hand cursor

- Settings window now focuses the search input on open (and on `focus-self` re-focus from ⌘,) so users can start typing immediately. Previous "browser tab order" comment never landed focus reliably.
- New `LinkButton` UI primitive in `lib/ui/`: link-styled button (accent text, underline, no border/padding) that owns the only sanctioned `cursor: pointer` in the app — Cmdr globally sets `cursor: default` on `html` and `<a>` for native macOS feel, and stylelint enforces it everywhere else.
- `AppearanceSection` switched both link-styled buttons (`.appearance-link`, `.help-toggle`) to `LinkButton`, dropping the duplicated CSS.
- Documented the convention in `lib/ui/CLAUDE.md`.

Author: vdavid

apps/desktop/src/lib/settings/sections/AppearanceSection.svelte

@@ -6,6 +6,7 @@
     import SettingSelect from '../components/SettingSelect.svelte'
     import SettingToggleGroup from '../components/SettingToggleGroup.svelte'
     import SettingRadioGroup from '../components/SettingRadioGroup.svelte'
+    import LinkButton from '$lib/ui/LinkButton.svelte'
     import { getSettingDefinition, getSetting, setSetting, onSpecificSettingChange } from '$lib/settings'
     import { createShouldShow } from '$lib/settings/settings-search'
     import { openAppearanceSettings } from '$lib/tauri-commands'
@@ -68,8 +69,8 @@
         <SettingRow id="appearance.appColor" label={appColorDef.label} description="" split {searchQuery}>
             {#snippet descriptionContent()}
                 To change your system theme color, go to
-                <button type="button" class="appearance-link" onclick={() => void openAppearanceSettings()}
-                    >{isMacOS() ? 'System Settings > Appearance' : 'your system appearance settings'}</button
+                <LinkButton onclick={() => void openAppearanceSettings()}
+                    >{isMacOS() ? 'System Settings > Appearance' : 'your system appearance settings'}</LinkButton
                 >.
             {/snippet}
             <div class="app-color-options">
@@ -173,13 +174,11 @@
                                 <div class="format-preview">
                                     Preview: <strong>{formatPreview(customFormat)}</strong>
                                 </div>
-                                <button
-                                    type="button"
-                                    class="help-toggle"
-                                    onclick={() => (showFormatHelp = !showFormatHelp)}
-                                >
-                                    {showFormatHelp ? 'Hide format help' : 'Show format help'}
-                                </button>
+                                <span class="help-toggle-wrapper">
+                                    <LinkButton onclick={() => (showFormatHelp = !showFormatHelp)}>
+                                        {showFormatHelp ? 'Hide format help' : 'Show format help'}
+                                    </LinkButton>
+                                </span>
                                 {#if showFormatHelp}
                                     <div class="format-help">
                                         <h4>Format placeholders</h4>
@@ -265,22 +264,6 @@
         font-size: var(--font-size-sm);
     }
 
-    .appearance-link {
-        color: var(--color-accent-text);
-        font-size: var(--font-size-sm);
-        text-decoration: underline;
-        padding: 0;
-        background: none;
-        border: none;
-    }
-
-    .appearance-link:hover {
-        /* Keep the a11y-safe accent-text color on hover; add underline for visual
-           affordance instead of switching to the lighter `--color-accent-hover`
-           which doesn't meet 4.5:1 on white. */
-        text-decoration: underline;
-    }
-
     .date-time-setting {
         /* Fill the split column; min-width prevents collapse */
         width: 100%;
@@ -319,14 +302,8 @@
         font-family: var(--font-mono);
     }
 
-    .help-toggle {
+    .help-toggle-wrapper {
         align-self: flex-start;
-        padding: 0;
-        background: none;
-        border: none;
-        color: var(--color-accent-text);
-        font-size: var(--font-size-sm);
-        text-decoration: underline;
     }
 
     .format-help {

apps/desktop/src/lib/ui/CLAUDE.md

@@ -9,6 +9,7 @@ Reusable UI components used across the entire desktop app.
 | `ModalDialog.svelte`     | Central modal container: overlay, dragging, Escape, focus, MCP tracking  |
 | `dialog-registry.ts`     | `SOFT_DIALOG_REGISTRY` array — single source of truth for all dialog IDs |
 | `Button.svelte`          | Styled button with variant and size props                                |
+| `LinkButton.svelte`      | Link-styled button; the only sanctioned `cursor: pointer` in the app     |
 | `CommandBox.svelte`      | Copyable terminal command (monospace + Copy button)                      |
 | `LoadingIcon.svelte`     | Animated spinner with progressive status text                            |
 | `AlertDialog.svelte`     | Single-action confirmation dialog built on `ModalDialog`                 |
@@ -82,6 +83,21 @@ inside `{ html }` tooltips. The `html` variant renders via `innerHTML` — only
 Variants: `primary` | `secondary` (default) | `danger`. Sizes: `regular` (default) | `mini`. Extends
 `HTMLButtonAttributes` so all native button attributes pass through.
 
+## LinkButton
+
+Use this for any "link" that's actually an in-app action (open settings, toggle help, etc.). It renders a `<button>`
+styled as a link and is the **only** place in the app that opts back into `cursor: pointer` — Cmdr globally sets
+`cursor: default` on `html` and `<a>` for native macOS feel (`app.css:363-366`), and stylelint blocks `cursor: pointer`
+everywhere else (`.stylelintrc.mjs:38`). Don't roll your own link-styled button with raw CSS; the cursor opt-in stays in
+one place by convention.
+
+Hover keeps the resting accent-text color (the lighter `--color-accent-hover` doesn't meet 4.5:1 contrast on white) —
+the underline is enough affordance.
+
+Real `<a>` tags for external URLs are a different concern: they go through `openExternalUrl()` (or the markdown link
+delegate in `ErrorPane`) and need SvelteKit's `resolve()` for internal routes. Don't extend `LinkButton` to cover those
+without thinking through the navigation layer.
+
 ## LoadingIcon
 
 Progressive status text driven by props (mutually exclusive, evaluated top-down):

apps/desktop/src/lib/ui/LinkButton.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+
+    interface Props {
+        type?: 'button' | 'submit'
+        disabled?: boolean
+        onclick?: (e: MouseEvent) => void
+        'aria-label'?: string
+        children: Snippet
+    }
+
+    const { type = 'button', disabled = false, onclick, 'aria-label': ariaLabel, children }: Props = $props()
+</script>
+
+<button class="link-button" {type} {disabled} {onclick} aria-label={ariaLabel}>
+    {@render children()}
+</button>
+
+<style>
+    .link-button {
+        font: inherit;
+        color: var(--color-accent-text);
+        text-decoration: underline;
+        background: none;
+        border: none;
+        padding: 0;
+        /* Cmdr sets `cursor: default` globally on `html` and `a` for native feel.
+           Links opt back in here — the only sanctioned `cursor: pointer` in the app. */
+        /* stylelint-disable-next-line declaration-property-value-disallowed-list */
+        cursor: pointer;
+    }
+
+    .link-button:hover {
+        /* Keep the a11y-safe accent-text color on hover; the lighter
+           --color-accent-hover doesn't meet 4.5:1 on white. Underline is enough
+           affordance — already present in the resting state. */
+        text-decoration: underline;
+    }
+
+    .link-button:focus-visible {
+        outline: 2px solid var(--color-accent);
+        outline-offset: 1px;
+        box-shadow: var(--shadow-focus-contrast);
+    }
+
+    .link-button:disabled {
+        opacity: 0.4;
+        cursor: not-allowed;
+        pointer-events: none;
+    }
+</style>

apps/desktop/src/routes/settings/+page.svelte

@@ -113,16 +113,25 @@
 
             initialized = true
 
-            // Focus will be handled naturally by the browser's tab order
             await tick()
 
+            // Focus the search input on open so users can start typing immediately.
+            const searchInput = document.querySelector('.search-input')
+            if (searchInput instanceof HTMLElement) {
+                searchInput.focus()
+            }
+
             // Listen for focus-self events (from ⌘, when window is already open).
             // Self-focusing is needed because cross-window setFocus() doesn't reliably
             // bring a window to front on macOS.
             unlistenFocusSelf = await listen('focus-self', () => {
                 // setTimeout(0) defers past the originating keydown handler —
                 // without it, macOS restores focus to the main window.
-                setTimeout(() => void getCurrentWindow().setFocus(), 0)
+                setTimeout(() => {
+                    void getCurrentWindow().setFocus()
+                    const input = document.querySelector('.search-input')
+                    if (input instanceof HTMLElement) input.focus()
+                }, 0)
             })
 
             log.debug('Settings page ready')