From 6e104e02a213f254c10550c32fb3ad8fc2b7cf4b Mon Sep 17 00:00:00 2001
From: digital-garbage <133010426+digital-garbage@users.noreply.github.com>
Date: Sun, 4 Oct 2026 15:05:48 +0300
Subject: [PATCH] style: menus, popovers, windows, dialogs, welcome tiles,
 quiet buttons in settings cards

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 app/ui/composer/elements/polish.css | 22 ++++++++++++++++++++++
 app/ui/features/welcome/index.js    | 21 ++++++++++++++++-----
 app/ui/frame.css                    |  7 +++++++
 3 files changed, 45 insertions(+), 5 deletions(-)

diff --git a/app/ui/composer/elements/polish.css b/app/ui/composer/elements/polish.css
index b8161042..a80b6111 100644
--- a/app/ui/composer/elements/polish.css
+++ b/app/ui/composer/elements/polish.css
@@ -65,3 +65,25 @@ body { -webkit-font-smoothing: antialiased; letter-spacing: -.003em; }
 .cx-eyebrow { color: var(--muted); font-weight: var(--fw-semibold); }
 .cx-banner { border-radius: var(--r-4); }
 .cx-chip { border-color: transparent; background: var(--elev-2); }
+
+/* inside a settings card the buttons are quiet: a tinted fill with accent text, never a row of solid amber */
+.cx-settings-row .cx-btn-primary { background: var(--accent-soft); color: var(--accent-hi); }
+.cx-settings-row .cx-btn-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 24%, transparent); }
+.cx-settings-row .cx-btn { background: var(--elev-3); }
+
+/* windows and dialogs: the same rounded card, a deeper shadow, a calmer title bar */
+.cx-window, .cx-modal { border-radius: var(--card-r); border-color: var(--line); }
+.cx-window-bar, .cx-modal-head { background: transparent; border-bottom-color: var(--line); padding: var(--sp-5) var(--sp-7); }
+.cx-window-title, .cx-modal-title { font-weight: var(--fw-semibold); letter-spacing: -.01em; }
+.cx-modal-title { font-size: var(--fs-3); }
+.cx-modal-body { padding: var(--sp-8); }
+.cx-modal-foot { background: transparent; border-top-color: var(--line); padding: var(--sp-5) var(--sp-7); }
+.cx-tabs-underline .cx-tab { font-weight: var(--fw-medium); }
+
+/* menus and popovers: floating cards with pill-shaped rows, like a macOS menu */
+.cx-popover { border-radius: var(--r-5); padding: var(--sp-3); background: var(--elev-3); }
+.cx-menu-item { padding: var(--sp-3) var(--sp-5); border-radius: var(--r-3); font-size: var(--fs-4); }
+.cx-menu-item:hover:not(:disabled), .cx-menu-item.cx-on { background: var(--accent); color: var(--on-accent); }
+.cx-menu-item:hover:not(:disabled) .cx-menu-icon, .cx-menu-item:hover:not(:disabled) .cx-menu-hint { color: inherit; }
+.cx-menu-sep { margin: var(--sp-3) var(--sp-3); }
+.cx-menu-heading { padding: var(--sp-3) var(--sp-5) var(--sp-2); font-size: var(--fs-7); }
diff --git a/app/ui/features/welcome/index.js b/app/ui/features/welcome/index.js
index 7cf22e55..a154d87a 100644
--- a/app/ui/features/welcome/index.js
+++ b/app/ui/features/welcome/index.js
@@ -3,7 +3,15 @@ import { composer as c } from "../../composer/composer.js";
 import { list } from "../../shell/project.js";
 
 const SEEN = "funpack_welcomed";
-const card = (title, hint, onClick) => c.field.default({ label: title, hint, control: c.button.sm({ label: title, tone: "ghost", onClick }) });
+// A tile: title over its one-line hint, the whole tile pressable.
+const card = (title, hint, onClick) => {
+  const node = document.createElement("button");
+  node.type = "button"; node.className = "fp-tile cx-focusable";
+  const t = document.createElement("span"), h = document.createElement("span");
+  t.className = "fp-tile-title"; t.textContent = title; h.className = "fp-tile-hint"; h.textContent = hint;
+  node.append(t, h); node.addEventListener("click", onClick);
+  return { node };
+};
 
 export default {
   id: "welcome",
@@ -24,15 +32,18 @@ export default {
       if (win) return;
       const recent = app.project.project;
       const done = () => { markSeen(); if (win) win.close("done"); };
+      const tiles = c.region.stack({ gap: "sm", children: [
+        card("Update", "Check this install for a newer version", () => app.maintenance.update()), card("Switch branch", "Pick another branch", () => app.maintenance.switchBranch()),
+        card("Restart ComfyUI", "Reload the server without updating", () => app.maintenance.restart()), card("Rollback update", "Undo the last update", () => app.maintenance.rollback())] });
+      tiles.node.classList.add("fp-tiles");
       win = c.modal.generic({
         title: "Welcome to FunPack", size: "lg",
         body: c.region.stack({ gap: "md", children: [
           c.hint.default({ text: "Multi-scene video on a real timeline." }),
           c.button.lg({ label: "Begin", tone: "primary", onClick: done }),
-          ...(recent ? [c.button.sm({ label: `Continue with “${recent.name}”`, tone: "ghost", onClick: done })] : []),
-          c.button.sm({ label: "Load an existing project", tone: "ghost", onClick: load }),
-          c.toolbar.default({ items: [card("Update", "Check this install for a newer version", () => app.maintenance.update()), card("Switch branch", "Pick another branch", () => app.maintenance.switchBranch()),
-            card("Restart ComfyUI", "Reload the server without updating", () => app.maintenance.restart()), card("Rollback update", "Undo the last update", () => app.maintenance.rollback())] }),
+          ...(recent ? [c.button.md({ label: `Continue with “${recent.name}”`, onClick: done })] : []),
+          c.button.md({ label: "Load an existing project", tone: "ghost", onClick: load }),
+          tiles,
         ] }),
         onClose: () => { markSeen(); win = null; },
       });
diff --git a/app/ui/frame.css b/app/ui/frame.css
index a174369e..4cafaa62 100644
--- a/app/ui/frame.css
+++ b/app/ui/frame.css
@@ -61,3 +61,10 @@
 :root.fp-peek:not([data-ui-mode="simple"]) .fp-main > :nth-child(2):hover .cx-panel-body,
 :root.fp-peek.fp-peek-open:not([data-ui-mode="simple"]) .fp-main > :nth-child(2) .cx-panel-body { display: block; }
 :root.fp-peek .fp-split-bottom { display: none; }
+
+/* Welcome: the maintenance actions as a 2x2 of tiles */
+.fp-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-block-start: var(--sp-5); }
+.fp-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: var(--sp-5) var(--sp-6); border: 0; border-radius: var(--r-5); background: var(--elev-2); color: var(--text); text-align: left; cursor: pointer; }
+.fp-tile:hover { background: var(--hover); }
+.fp-tile-title { font-size: var(--fs-4); font-weight: var(--fw-medium); }
+.fp-tile-hint { font-size: var(--fs-6); color: var(--muted); }