Give the settings page a more polished layout

index.html

@@ -102,24 +102,24 @@ <h2>Your workstation,<br /><span>under control.</span></h2>
             <div class="settings-intro"><div><p class="eyebrow">Make it yours</p><h2>A workspace that fits you.</h2><p>Appearance previews as you edit. Save to keep your changes on this device.</p></div><span class="version-badge">Command Center</span></div>
             <nav class="settings-links" aria-label="Settings sections"><a href="#section-general">General</a><a href="#section-applications">Applications</a><a href="#section-appearance">Appearance</a><a href="#section-repositories">Repositories</a></nav>
             <div class="settings-layout">
-              <section id="section-general" class="panel settings-section"><div class="section-title"><span>01</span><div><h3>General</h3><p>A familiar welcome and a useful starting point.</p></div></div>
+              <section id="section-general" class="panel settings-section"><div class="section-title"><span aria-hidden="true">⚙</span><div><h3>General</h3><p>A familiar welcome and a useful starting point.</p></div></div>
                 <label class="setting-row" for="pref-name"><span>Display name<small>Shown in your greeting and profile.</small></span><input id="pref-name" maxlength="40" required autocomplete="off"></label>
                 <label class="setting-row" for="pref-startup"><span>Start page<small>Where Command Center opens.</small></span><select id="pref-startup"><option value="dashboard">Dashboard</option><option value="repositories">Repositories</option><option value="toolbox">Toolbox</option><option value="terminal">Terminal</option><option value="sync">System Sync</option><option value="backup">Backup & Restore</option><option value="config">Configuration</option><option value="health">System Health</option><option value="activity">Activity</option><option value="attention">Needs attention</option><option value="services">Services</option><option value="inventory">System inventory</option><option value="operations">Workflows</option><option value="timeline">Change timeline</option><option value="settings">Settings</option></select></label>
               </section>
-              <section id="section-applications" class="panel settings-section"><div class="section-title"><span>02</span><div><h3>Applications</h3><p>Use your defaults or choose an app for Command Center.</p></div></div>
+              <section id="section-applications" class="panel settings-section"><div class="section-title"><span aria-hidden="true">▦</span><div><h3>Applications</h3><p>Use your defaults or choose an app for Command Center.</p></div></div>
                 <label class="setting-row" for="pref-editor"><span>Editor<small>Neovim opens inside your selected terminal.</small></span><select id="pref-editor"><option value="auto">System default</option><option value="kate">Kate</option><option value="nvim">Neovim</option><option value="code">VS Code</option><option value="codium">VSCodium</option><option value="zed">Zed</option></select></label>
                 <label class="setting-row" for="pref-terminal"><span>Terminal<small>Opens in the repository folder.</small></span><select id="pref-terminal"><option value="auto">System default</option><option value="ghostty">Ghostty</option><option value="konsole">Konsole</option><option value="gnome-terminal">GNOME Terminal</option><option value="kitty">Kitty</option><option value="alacritty">Alacritty</option><option value="wezterm">WezTerm</option><option value="foot">Foot</option></select></label>
                 <p class="settings-help">System default respects VISUAL / EDITOR and TERMINAL, then desktop preferences. Listed apps must already be installed. These choices affect only Command Center.</p>
               </section>
-              <section id="section-appearance" class="panel settings-section"><div class="section-title"><span>03</span><div><h3>Appearance</h3><p>Small adjustments, a calmer workspace.</p></div></div>
+              <section id="section-appearance" class="panel settings-section"><div class="section-title"><span aria-hidden="true">◐</span><div><h3>Appearance</h3><p>Small adjustments, a calmer workspace.</p></div></div>
                 <label class="setting-row" for="pref-theme"><span>Theme<small>System follows your desktop’s light or dark preference.</small></span><select id="pref-theme"><option value="dark">Dark</option><option value="light">Light</option><option value="system">System</option></select></label>
                 <label class="setting-row" for="pref-text-size"><span>Text size</span><select id="pref-text-size"><option value="normal">Standard</option><option value="large">Larger</option></select></label>
                 <label class="setting-row" for="pref-hero"><span>Dashboard welcome banner</span><input id="pref-hero" type="checkbox" role="switch"></label>
                 <label class="setting-row" for="pref-accent"><span>Accent color</span><select id="pref-accent"><option value="cyan">Glacier · Cyan</option><option value="violet">Dusk · Violet</option><option value="green">Mint · Green</option></select></label>
                 <label class="setting-row" for="pref-density"><span>Repository density</span><select id="pref-density"><option value="comfortable">Comfortable</option><option value="compact">Compact</option></select></label>
                 <label class="setting-row" for="pref-motion"><span>Reduce motion<small>Disable decorative animation. Your system motion preference is also respected.</small></span><input id="pref-motion" type="checkbox" role="switch"></label>
               </section>
-              <section id="section-repositories" class="panel settings-section"><div class="section-title"><span>04</span><div><h3>Repositories</h3><p>Control where and how often we look.</p></div></div>
+              <section id="section-repositories" class="panel settings-section"><div class="section-title"><span aria-hidden="true">⌘</span><div><h3>Repositories</h3><p>Control where and how often we look.</p></div></div>
                 <label class="setting-row" for="pref-layout"><span>Repository layout</span><select id="pref-layout"><option value="cards">Cards</option><option value="list">List</option></select></label>
                 <label class="setting-row" for="pref-sort"><span>Default sort<small>The toolbar can change sorting for this session.</small></span><select id="pref-sort"><option value="name">Name A–Z</option><option value="name-desc">Name Z–A</option><option value="attention">Needs attention first</option></select></label>
                 <label class="setting-row" for="pref-paths"><span>Show repository paths</span><input id="pref-paths" type="checkbox" role="switch"></label>

src/features.js

@@ -176,7 +176,7 @@ export function createFeatures(api) {
     );
     $("#section-repositories").insertAdjacentHTML(
       "afterend",
-      `<section id="section-integrations" class="panel settings-section integration-section"><div class="section-title"><span>05</span><div><h3>System integrations</h3><p>Use your installed helpers and editable configuration sources.</p></div></div><div class="button-row">${button("Detect existing setup", 'id="detect-integrations"')}${button("Check availability", 'id="check-integrations"')}</div><p id="integration-check-status" role="status">Check paths and tools using the values below.</p><div id="integration-check-results"></div>${integrationFields.map(([key, label, help]) => `<label class="integration-field" for="integration-${key}"><span>${label}<small>${help}</small></span><input id="integration-${key}" ${key === "backupMaxHours" ? 'type="number" min="1" max="8760"' : 'type="text"'} autocomplete="off"></label>`).join("")}<p class="settings-help">Credential fields identify an existing wallet entry or password file. Command Center does not ask for or store your backup password.</p></section>`,
+      `<section id="section-integrations" class="panel settings-section integration-section"><div class="section-title"><span aria-hidden="true">⇄</span><div><h3>System integrations</h3><p>Use your installed helpers and editable configuration sources.</p></div></div><div class="button-row">${button("Detect existing setup", 'id="detect-integrations"')}${button("Check availability", 'id="check-integrations"')}</div><p id="integration-check-status" role="status">Check paths and tools using the values below.</p><div id="integration-check-results"></div>${integrationFields.map(([key, label, help]) => `<label class="integration-field" for="integration-${key}"><span>${label}<small>${help}</small></span><input id="integration-${key}" ${key === "backupMaxHours" ? 'type="number" min="1" max="8760"' : 'type="text"'} autocomplete="off"></label>`).join("")}<p class="settings-help">Credential fields identify an existing wallet entry or password file. Command Center does not ask for or store your backup password.</p></section>`,
     );
     $(".settings-links").insertAdjacentHTML(
       "beforeend",