Redesign builder navbar & sidebars to match dashboard glass UI language

[Copilot]

The builder's navbar and sidebars used a flat --film-dark background that looked visually disconnected from the rest of the UI (command palette, keyboard shortcuts modal, context menu), which all share a glassmorphism + amber accent design language.

CSS tokens & component classes (global.css)

• Added shared design tokens: --film-glass, --film-glass-strong, --film-amber-glow, --film-hairline
• New @layer components block with three reusable classes:
  • .glass-surface — backdrop-filter: blur(14px) glass shell with hairline border + ambient amber box-shadow
  • .glass-section — subtle inset card for toolbar pill grouping and CodeBox wrapper
  • .sidebar-handle — amber gradient strip (opacity: 0.3 → 0.8 on hover) for resize rails
• Scrollbar thumb updated from flat white to amber-to-white gradient matching palette

SidebarLayout (SidebarLayout.tsx)

• Outer wrapper: glass-surface rounded-xl overflow-hidden replaces flat dark background
• Header area: elevated rgba(255,255,255,0.025) background + amber hairline separator
• Body: adds px-3 pb-3 for consistent internal spacing

Builder header & asides (builder/index.tsx)

• Header: h-12 → h-14; glass-surface applied (backdrop-blur, amber rim border, ambient shadow); toolbar buttons grouped in a .glass-section chip; CodeBox in its own .glass-section pill; logo gets subtle amber text-shadow
• Sidebars: background: transparent + 8px padding when open; LayerPanel/Inspector each wrapped in a glass-surface rounded-xl shell; resize handles replaced with .sidebar-handle amber gradient divs — all resize logic untouched

// Sidebar aside (before → after)
// Before: flat --film-dark background, 3px invisible hit target handle
// After:
<aside style={{ background: 'transparent', padding: visible ? '8px' : 0 }}>
  <div className="flex-1 min-h-0 glass-surface rounded-xl overflow-hidden flex flex-col">
    <LayerPanel … />
  </div>
  <div onMouseDown={startResizeLeft} className="absolute inset-y-0 right-0 cursor-col-resize" style={{ width: 8 }}>
    <div className="sidebar-handle h-full w-1 ml-auto" />
  </div>
</aside>

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• telemetry.astro.build
  • Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node node /home/REDACTED/work/freeposterapi/freeposterapi/node_modules/.bin/astro build (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

Goal

Redesign the builder navbar and sidebars to visually match the dashboard UI (command palette, keyboard shortcuts menu, context menu) while preserving existing logic and functionality.

Required changes

1. Shared glass & accent tokens

   • Add new CSS variables and utility classes to src/styles/global.css:
     • --film-glass, --film-glass-strong, --film-amber-glow, --film-hairline.
     • Component classes: .glass-surface, .glass-section, .sidebar-handle and updated scrollbar thumb styling to match palette aesthetic.

2. Sidebar shell restyle

   • Update src/components/builder/components/SidebarLayout.tsx to use the new glass surface styling, rounded corners, and padding consistent with palette/shortcuts sheets while keeping layout/children intact.

3. Navbar/header restyle

   • Replace the builder header block in src/components/builder/index.tsx with a glass/blur header that matches the palette style, keeps all existing controls (logo, CodeBox, command palette button, sidebar toggles), and retains the sprocket accent strip.

4. Sidebar rails/handles

   • Adjust left and right <aside> wrappers in builder/index.tsx to add padding, apply glass shells around existing panels, and restyle resize handles using the new .sidebar-handle gradient while keeping resize logic unchanged.

5. Optional harmony touches (if feasible without logic change)

   • Wrap sparse sidebar sections in glass-section containers for consistent card rhythm, without altering data flow or behavior.

Non-goals / constraints

• Do not remove or modify existing functionality, shortcuts, or component logic.
• Keep TypeScript/React logic identical except for styling/container changes.
• Maintain accessibility and responsive behavior (fullscreen mode, lg breakpoint visibility, resize behavior).

Files to modify

• src/styles/global.css
• src/components/builder/components/SidebarLayout.tsx
• src/components/builder/index.tsx
• (Optional minor wraps) existing sidebar content files if needed, but avoid logic changes.

Acceptance criteria

• Builder navbar and sidebars visually match dashboard/palette/shortcut modal language (glass, amber rim light, rounded corners, thin dividers).
• All original controls remain present and functional (logo, CodeBox, toolbar buttons, sidebars, resize handles).
• No regressions to layout resizing, fullscreen behavior, or keyboard shortcuts.
• Tests/build pass.

The following is the prior conversation context from the user's chat exploration (may be truncated):

User: analyze the dashboard and builder(the command palette, keyboard shortcuts menu, right click menu, navbar and sidebars)
i want you to extensively redesign the sidebars and navbar of the builder to exactly match with the design of the dashboard and other elements like command palette, keyboard shortcuts menu, right click menu and stuff
the sidebars and navbar looke very out of place and i want you to throughly redesign those
i give you complete creative freedom to redesign the navbar and sidebars such that it matches with the vibe i.e. colors, design language and everything of the whole website.
make sure in the process you do not lose the original options/modifications/logic of the website (not talking about the layout but the logic and functionalities)
i want you to analyze everything very well and redesign a much better, sleek, clean yet completely matching sidebar and navbar with the overall UI like the menus of command palette and keyboard shortcuts etc.
this is a very precise task so please do it properly.

Assistant: Here’s a focused redesign plan and ready‑to‑drop code to make the builder’s nav + sidebars visually match the dashboard, command palette, keyboard shortcuts menu, and context menu—without changing any logic or available actions.

What changes

• Unify surfaces: dark film‑grain glass, subtle amber rim‑light, and hairline separators identical to the palette/shortcut sheets.
• Shape language: softer 10–12px radii, inset borders, micro‑glows on focus/active to mirror command palette selection.
• Density & spacing: tighter header (56px), 12px internal gutters, consistent 8px icon buttons.
• Handles & dividers: low‑key amber edge hints matching the sprocket strip already in header.
• Scrollbars & labels: same thin amber-on-dark treatment used in palette.

---

1) Add shared glass + accent tokens

@layer base {
  :root {
    --film-glass: rgba(20, 20, 22, 0.82);
    --film-glass-strong: rgba(16, 16, 18, 0.9);
    --film-amber-glow: 0 0 0 1px rgba(196,124,46,0.18), 0 10px 30px rgba(0,0,0,0.45);
    --film-hairline: 1px solid rgba(255,255,255,0.06);
  }
}

/* Glass shells reused by header + sidebars */
@layer components {
  .glass-surface {
    background: linear-gradient(145deg, var(--film-glass), var(--film-glass-strong));
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: var(--film-hairline);
...

</details>



<!-- START COPILOT CODING AGENT SUFFIX -->

*This pull request was created from Copilot chat.*
>

<!-- START COPILOT CODING AGENT TIPS -->
---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more [Copilot coding agent tips](https://gh.io/copilot-coding-agent-tips) in the docs.

[cloudflare-workers-and-pages]

Deploying freeposterapi with    Cloudflare Pages

Latest commit:	e906972
Status:	✅  Deploy successful!
Preview URL:	https://5d19840d.freeposterapi.pages.dev
Branch Preview URL:	https://copilot-redesign-builder-nav.freeposterapi.pages.dev

View logs