From 67228f24b4abf39878c02c29ad3bd36fd62a6fe3 Mon Sep 17 00:00:00 2001 From: Josh Knapp Date: Sun, 12 Jul 2026 20:56:00 -0700 Subject: [PATCH] =?UTF-8?q?feat(builder):=20item=2011=20=E2=80=94=20Pages?= =?UTF-8?q?=20panel=20hierarchy:=20neutral=20header/footer=20rows,=20outli?= =?UTF-8?q?ne=20Landing=20badge,=20icon+tooltip=20actions?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Header/Footer zone rows switched from a loud amber zoneButtonStyle to a compact neutral zoneRowStyle in the same surface language as the page list (accent border/bg only when active, matching the page list's own "currently open" treatment). The "Appears on all pages" subtitle moved to a tooltip; a fa-pencil hint fades in on row hover (`.zone-row-pencil` CSS already shipped in the previous commit) and swaps to a check icon while editing that zone. The "LANDING" badge (loud amber uppercase + house icon) is now a small outline badge — muted text, 1px border, no fill, no icon. The page-row rename button's raw `✎` HTML entity is now an FA `fa-pencil` icon with `data-tooltip`/`aria-label`; the delete button (already FA fa-trash) got the same tooltip/aria treatment for consistency. Both dropped their native `title` in favor of `data-tooltip` to avoid a double tooltip. Co-Authored-By: Claude Opus 4.8 (1M context) --- craft/src/panels/left/PagesPanel.tsx | 100 +++++++++++---------------- 1 file changed, 42 insertions(+), 58 deletions(-) diff --git a/craft/src/panels/left/PagesPanel.tsx b/craft/src/panels/left/PagesPanel.tsx index 02f1abe..106c930 100644 --- a/craft/src/panels/left/PagesPanel.tsx +++ b/craft/src/panels/left/PagesPanel.tsx @@ -58,18 +58,23 @@ export const PagesPanel: React.FC = () => { .replace(/-+/g, '-'); }; - /* ---------- Zone button style ---------- */ - const zoneButtonStyle = (isActive: boolean): React.CSSProperties => ({ + /* ---------- Zone row style ---------- + * Same neutral surface language as the page-list rows below (Item 11) -- + * header/footer are just two more items in the tree, not a louder, + * differently-colored category. The active/editing state reuses the same + * accent-outline treatment the page list already uses for the active page, + * so there's one consistent "this is what's currently open" affordance. */ + const zoneRowStyle = (isActive: boolean): React.CSSProperties => ({ display: 'flex', alignItems: 'center', gap: 8, width: '100%', - padding: '10px 12px', + padding: '7px 10px', fontSize: 12, - fontWeight: 600, - color: isActive ? '#f59e0b' : '#fbbf24', - background: isActive ? 'rgba(245, 158, 11, 0.15)' : 'rgba(245, 158, 11, 0.06)', - border: `1px solid ${isActive ? 'rgba(245, 158, 11, 0.5)' : 'rgba(245, 158, 11, 0.2)'}`, + fontWeight: isActive ? 600 : 500, + color: isActive ? 'var(--color-accent)' : 'var(--color-text-muted)', + background: isActive ? 'var(--color-accent-subtle)' : 'var(--color-bg-elevated)', + border: `1px solid ${isActive ? 'var(--color-accent)' : 'var(--color-border)'}`, borderRadius: 'var(--radius-md)', cursor: 'pointer', transition: 'all var(--transition-fast)', @@ -78,57 +83,35 @@ export const PagesPanel: React.FC = () => { return (
- {/* Header/Footer zone buttons */} + {/* Header/Footer zone rows */}
@@ -328,18 +311,17 @@ export const PagesPanel: React.FC = () => { title="This is the landing page — published as the root URL (index.html)" style={{ fontSize: 9, - fontWeight: 700, - textTransform: 'uppercase', - letterSpacing: '0.5px', - color: '#fbbf24', - background: 'rgba(245, 158, 11, 0.15)', - border: '1px solid rgba(245, 158, 11, 0.35)', + fontWeight: 600, + letterSpacing: '0.3px', + color: 'var(--color-text-muted)', + background: 'transparent', + border: '1px solid var(--color-border-light)', padding: '1px 5px', borderRadius: 'var(--radius-sm)', flexShrink: 0, }} > - Landing + Landing )}
@@ -359,7 +341,8 @@ export const PagesPanel: React.FC = () => { >