From e2e583db742231b0ca87480f8acdf0376500c0e5 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 26 Sep 2026 03:22:05 +0000
Subject: [PATCH] Give the dashboard a more polished layout

Add an accent glow to the welcome banner, larger icons and an accent
top edge on the stat cards, tinted icon tiles and larger text on the
quick action tiles, row hover highlights, and aligned panel headings
with a Shortcuts eyebrow on the quick actions panel. Darken the stat
icons and attention marks in the light theme so they stay readable.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BUhabxL4SPejg19jgbSyYN
---
 src/preference-extras.js |  2 +-
 src/styles.css           | 30 ++++++++++++++++++++++++++++++
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/src/preference-extras.js b/src/preference-extras.js
index 12f66b3..4b5e039 100644
--- a/src/preference-extras.js
+++ b/src/preference-extras.js
@@ -30,7 +30,7 @@ export function createPreferenceExtras({ state, $, escapeHtml: e, draftPreferenc
   $('.settings-links').insertAdjacentHTML('beforeend','<a href="#section-custom">Custom actions</a>');
   $('.settings-intro').insertAdjacentHTML('afterend', `<div class="button-row settings-transfer"><button type="button" id="export-settings" class="secondary-button">Export saved settings</button><button type="button" id="import-settings" class="secondary-button">Import settings…</button><input type="file" id="import-settings-file" accept=".json,application/json" hidden><span id="transfer-status" role="status"></span></div>`);
   document.body.insertAdjacentHTML('beforeend', `<dialog id="import-settings-dialog" class="review-dialog"><h2>Review settings import</h2><p>Your current preferences stay saved until you apply this draft and Save settings.</p><label class="check-row"><input type="checkbox" id="import-machine">Include machine paths, applications, integrations, and custom commands</label><p class="settings-help">Leave unchecked to keep this machine’s connections and commands. The automatic backup health helper always stays local; configure it separately in Settings.</p><pre id="import-preview" class="output"></pre><div class="button-row"><button type="button" id="cancel-import" class="secondary-button">Cancel</button><button type="button" id="apply-import" class="primary-button">Apply to draft</button></div></dialog>`);
-  $('#dashboard-view').insertAdjacentHTML('beforeend', '<section class="panel module-panel"><div class="panel-heading"><h3>Your quick actions</h3><button type="button" class="secondary-button" id="manage-custom">Manage actions</button></div><div id="custom-action-buttons" class="button-row"></div></section>');
+  $('#dashboard-view').insertAdjacentHTML('beforeend', '<section class="panel module-panel"><div class="panel-heading"><div><p class="eyebrow">Shortcuts</p><h3>Your quick actions</h3></div><button type="button" class="secondary-button" id="manage-custom">Manage actions</button></div><div id="custom-action-buttons" class="button-row"></div></section>');
   function changed() { updateDraftStatus(); }
   function read() {
     return validateActions(actions.map((a,index) => Object.fromEntries(['id','name','command','directory','shell','mode'].map(k => [k, k === 'id' ? a.id : $(`[data-action-index="${index}"] [data-field="${k}"]`).value]))));
diff --git a/src/styles.css b/src/styles.css
index f02a72d..b1f9532 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -399,3 +399,33 @@ button:disabled { cursor:default; }
 #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; }
+
+/* Dashboard polish */
+#dashboard-view { --dash-tint: rgba(99,230,255,.12); --dash-tint: color-mix(in srgb, var(--cyan) 14%, transparent); --dash-tint-soft: rgba(99,230,255,.05); --dash-tint-soft: color-mix(in srgb, var(--cyan) 6%, transparent); }
+#dashboard-view .hero-panel { min-height:220px; padding:32px 45px; background:radial-gradient(circle at 85% 30%, var(--dash-tint), transparent 42%), linear-gradient(115deg, var(--surface), var(--bg)); }
+#dashboard-view .hero-panel h2 { font-size:38px; }
+#dashboard-view .hero-panel p { font-size:13px; }
+#dashboard-view .stat-card { position:relative; overflow:hidden; transition:border-color .18s ease, transform .18s ease; }
+#dashboard-view .stat-card::before { content:""; position:absolute; inset:0 0 auto; height:2px; background:linear-gradient(90deg, var(--dash-tint), transparent); }
+#dashboard-view .stat-card:hover { border-color:var(--dash-tint); transform:translateY(-1px); }
+#dashboard-view .stat-icon { flex-basis:42px; height:42px; border-radius:11px; font-size:17px; }
+#dashboard-view .stat-card small { font-size:10px; }
+#dashboard-view .stat-card strong { font-size:20px; }
+#dashboard-view .stat-card span { font-size:10px; }
+#dashboard-view .panel-heading { align-items:flex-end; gap:12px; margin-bottom:12px; }
+#dashboard-view .panel-heading h3 { margin:0; font-size:16px; }
+#dashboard-view .panel-heading .eyebrow { margin-bottom:5px; }
+#dashboard-view .repo-row, #dashboard-view .attention-row { border-radius:8px; transition:background .15s ease; }
+#dashboard-view .repo-row:hover, #dashboard-view .attention-row:hover, #dashboard-view .attention-row:focus-visible { background:var(--dash-tint-soft); }
+#dashboard-view .attention-row .attention-mark { width:28px; height:28px; }
+#dashboard-view .action-grid { gap:11px; }
+#dashboard-view .action-grid button { min-height:100px; padding:16px; }
+#dashboard-view .action-grid button:hover, #dashboard-view .action-grid button:focus-visible { border-color:var(--cyan); background:var(--dash-tint-soft); }
+#dashboard-view .action-symbol { display:grid; place-items:center; width:32px; height:32px; border-radius:9px; background:var(--dash-tint); font-size:16px; }
+#dashboard-view .action-grid strong { margin:12px 0 4px; font-size:13px; }
+#dashboard-view .action-grid small { font-size:11px; }
+:root[data-text-size="large"] #dashboard-view .stat-card span, :root[data-text-size="large"] #dashboard-view .action-grid small { font-size:13px; }
+:root[data-text-size="large"] #dashboard-view .action-grid strong { font-size:15px; }
+:root[data-theme="light"] #dashboard-view .stat-icon.violet { color:#6542bd; }
+:root[data-theme="light"] #dashboard-view .stat-icon.green { color:#196e48; }
+:root[data-theme="light"] #dashboard-view .stat-icon.amber, :root[data-theme="light"] #dashboard-view .attention-mark { color:var(--warning); }