From 1ef0c5aeba25bb2b56b4240f3ee418fca55f9e4f Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 26 Sep 2026 03:02:37 +0000 Subject: [PATCH] Give the settings page a more polished layout Turn the intro into an accent-tinted header card, replace the numbered section badges with icons, use toggle switches for on/off settings, add focus rings to inputs, and make the integrations and custom action sections full width. Style the notification, portability, and updates panels to match the other sections, and hide release output boxes until they have content. Works with the light theme and every accent color. Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_01BUhabxL4SPejg19jgbSyYN --- index.html | 8 ++++---- src/features.js | 2 +- src/preference-extras.js | 2 +- src/styles.css | 34 ++++++++++++++++++++++++++++++++++ 4 files changed, 40 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 1a4c63b..104a020 100644 --- a/index.html +++ b/index.html @@ -102,16 +102,16 @@

Your workstation,
under control.

Make it yours

A workspace that fits you.

Appearance previews as you edit. Save to keep your changes on this device.

Command Center
-
01

General

A familiar welcome and a useful starting point.

+

General

A familiar welcome and a useful starting point.

-
02

Applications

Use your defaults or choose an app for Command Center.

+

Applications

Use your defaults or choose an app for Command Center.

System default respects VISUAL / EDITOR and TERMINAL, then desktop preferences. Listed apps must already be installed. These choices affect only Command Center.

-
03

Appearance

Small adjustments, a calmer workspace.

+

Appearance

Small adjustments, a calmer workspace.

@@ -119,7 +119,7 @@

Your workstation,
under control.

-
04

Repositories

Control where and how often we look.

+

Repositories

Control where and how often we look.

diff --git a/src/features.js b/src/features.js index 5742136..962a1a9 100644 --- a/src/features.js +++ b/src/features.js @@ -176,7 +176,7 @@ export function createFeatures(api) { ); $("#section-repositories").insertAdjacentHTML( "afterend", - `
05

System integrations

Use your installed helpers and editable configuration sources.

${button("Detect existing setup", 'id="detect-integrations"')}${button("Check availability", 'id="check-integrations"')}

Check paths and tools using the values below.

${integrationFields.map(([key, label, help]) => ``).join("")}

Credential fields identify an existing wallet entry or password file. Command Center does not ask for or store your backup password.

`, + `

System integrations

Use your installed helpers and editable configuration sources.

${button("Detect existing setup", 'id="detect-integrations"')}${button("Check availability", 'id="check-integrations"')}

Check paths and tools using the values below.

${integrationFields.map(([key, label, help]) => ``).join("")}

Credential fields identify an existing wallet entry or password file. Command Center does not ask for or store your backup password.

`, ); $(".settings-links").insertAdjacentHTML( "beforeend", diff --git a/src/preference-extras.js b/src/preference-extras.js index fd9db28..12f66b3 100644 --- a/src/preference-extras.js +++ b/src/preference-extras.js @@ -26,7 +26,7 @@ export function importDraft(current, imported, includeMachine) { export function createPreferenceExtras({ state, $, escapeHtml: e, draftPreferences, populatePreferences, updateDraftStatus, action, toast, invoke }) { let actions = []; const form = $('#preferences-form'); - $('.settings-layout').insertAdjacentHTML('beforeend', `
06

Custom quick actions

Pin commands to the dashboard. Every run is reviewed first.

Direct commands use quoted arguments without shell expansion. Choose Fish for functions such as full-upgrade. Terminal modes support interactive prompts. Keep passwords out of saved commands and exports.

`); + $('.settings-layout').insertAdjacentHTML('beforeend', `

Custom quick actions

Pin commands to the dashboard. Every run is reviewed first.

Direct commands use quoted arguments without shell expansion. Choose Fish for functions such as full-upgrade. Terminal modes support interactive prompts. Keep passwords out of saved commands and exports.

`); $('.settings-links').insertAdjacentHTML('beforeend','Custom actions'); $('.settings-intro').insertAdjacentHTML('afterend', `
`); document.body.insertAdjacentHTML('beforeend', `

Review settings import

Your current preferences stay saved until you apply this draft and Save settings.

Leave unchecked to keep this machine’s connections and commands. The automatic backup health helper always stays local; configure it separately in Settings.

`);
diff --git a/src/styles.css b/src/styles.css
index 97c911c..f02a72d 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -365,3 +365,37 @@ button:disabled { cursor:default; }
 .history-row { display:grid; grid-template-columns:minmax(120px,auto) minmax(160px,1fr) minmax(130px,auto) minmax(80px,auto) auto; gap:12px; align-items:center; padding:8px 10px; border:1px solid var(--line); border-radius:8px; }
 .history-row small { display:block; color:var(--muted); font-size:11px; }
 @media (max-width: 1200px) { .history-row { grid-template-columns:1fr 1fr; } }
+
+/* Settings page polish */
+#settings-view { --settings-tint: rgba(99,230,255,.12); --settings-tint: color-mix(in srgb, var(--cyan) 14%, transparent); --settings-tint-soft: rgba(99,230,255,.05); --settings-tint-soft: color-mix(in srgb, var(--cyan) 6%, transparent); }
+#settings-view .settings-intro { position:relative; overflow:hidden; align-items:center; padding:28px 30px; border:1px solid var(--line); border-radius:14px; background:radial-gradient(circle at 92% 0%, var(--settings-tint), transparent 45%), linear-gradient(135deg, var(--settings-tint-soft), transparent 60%), var(--surface); }
+#settings-view .settings-intro .eyebrow { color:var(--cyan); }
+#settings-view .settings-intro h2 { font-size:28px; }
+#settings-view .version-badge { border-color:var(--settings-tint); background:var(--settings-tint-soft); color:var(--cyan); font-weight:700; }
+#settings-view .settings-transfer { margin:-12px 0 18px; }
+#settings-view .settings-links { position:sticky; top:0; z-index:3; padding:10px 0; margin-bottom:12px; background:linear-gradient(var(--bg) 70%, transparent); }
+#settings-view .settings-links a { background:var(--surface); font-weight:600; transition:color .15s ease, border-color .15s ease, background .15s ease; }
+#settings-view .settings-links a:hover, #settings-view .settings-links a:focus-visible { background:var(--settings-tint-soft); }
+#settings-view .settings-section { transition:border-color .2s ease; }
+#settings-view .settings-section:hover, #settings-view .settings-section:focus-within { border-color:var(--settings-tint); }
+#settings-view .section-title { align-items:center; padding-bottom:16px; margin-bottom:4px; }
+#settings-view .section-title > span { width:36px; height:36px; border:0; border-radius:10px; background:linear-gradient(145deg, var(--settings-tint), var(--settings-tint-soft)); font-size:17px; }
+#settings-view #section-integrations, #settings-view #section-custom { grid-column:1 / -1; }
+#settings-view .setting-row input:not([type="checkbox"]), #settings-view .setting-row select, #settings-view #pref-roots, #settings-view .integration-field input { transition:border-color .15s ease, box-shadow .15s ease; }
+#settings-view .setting-row input:not([type="checkbox"]):focus, #settings-view .setting-row select:focus, #settings-view #pref-roots:focus, #settings-view .integration-field input:focus { outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px var(--settings-tint); }
+/* Toggle switches */
+#settings-view input[type="checkbox"][role="switch"], #notification-form input[type="checkbox"] { appearance:none; -webkit-appearance:none; position:relative; flex-shrink:0; width:38px; height:22px; margin:0; border:1px solid var(--line); border-radius:999px; background:var(--surface-soft); cursor:pointer; transition:background .18s ease, border-color .18s ease; }
+#settings-view input[type="checkbox"][role="switch"]::after, #notification-form input[type="checkbox"]::after { content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:var(--muted); transition:transform .18s ease, background .18s ease; }
+#settings-view input[type="checkbox"][role="switch"]:checked, #notification-form input[type="checkbox"]:checked { border-color:var(--cyan); background:var(--cyan); }
+#settings-view input[type="checkbox"][role="switch"]:checked::after, #notification-form input[type="checkbox"]:checked::after { transform:translateX(16px); background:var(--accent-ink); }
+#settings-view input[type="checkbox"][role="switch"]:focus-visible, #notification-form input[type="checkbox"]:focus-visible { outline:2px solid var(--cyan); outline-offset:2px; }
+/* Panels added below the preferences form */
+#settings-view .module-panel { padding:23px; }
+#settings-view .module-panel > p, #settings-view .module-panel .panel-heading p { color:var(--muted); font-size:12px; line-height:1.65; margin:0 0 14px; }
+#settings-view .module-panel h3 { font-size:15px; }
+#settings-view pre.output:empty { display:none; }
+#notification-form { gap:0; margin-top:8px; }
+#notification-form > label { display:flex; flex-direction:row-reverse; align-items:center; justify-content:space-between; gap:18px; padding:14px 0; border-top:1px solid var(--line); font-size:13px; }
+#notification-form > .button-row { gap:14px; padding:14px 0 6px; border-top:1px solid var(--line); }
+#notification-form > .button-row label { flex:1; max-width:180px; }
+#notification-form > button { justify-self:start; margin-top:14px; }