Mockup — Samsung edge panel v2 (33% max, no dock conflict)

← back to mockups gallery 📖 view in HQ viewer

State mockup A018 (artifact id 18) file mtime 2026-07-28 08:24:05 UTC thread: pre-HQ (uploaded before Mavis HQ existed)

Samsung edge panel design exploration — 7 mockups, 35 min of iteration

These 7 standalone HTML mockups are the design exploration that produced freshvibe-cms@46bbfa3 feat(edge-panel): add generic CMS edge tools panel (v0.4.2) on 2026-07-28 10:30:05 UTC. The 2-col grid (Samsung pattern), the "show me everything" framing, and the dock-conflict mitigation all appear here before they appear in code. Uploaded directly to VPS (no Mavis session tracked) — predates Mavis HQ by ~30 hours. See runtime/edge-panel/edge-panel.js in freshvibe-cms@46bbfa3 for the implementation that shipped.

Samsung-style edge panel v2 — additive, 33% max width, dock untouched

The edge panel is a second way to see the same tools, NOT a replacement for the 4-edge dock. The dock stays. The edge panel is the "I'm lost, show me everything" view. Width: 220px mobile (56%), 280px tablet (36%), 360px desktop (25% at 1440px), capped at 33vw.

📱 Mobile 390px

PANEL 220px (56%)

MOBILE 170px free · 220px panel

9:41📶 🔋

S-1

Explore the World of Trees

Bring nature into the classroom with beautifully illustrated, curriculum-aligned resources.

S-3

What we offer

Books · News · Team · Resources

S-5

Get Started

Ready to bring trees to your classroom?

Footer

🏠Home

📚Books

📰News

👤Account

▦

Structure

⚙

Inspector

🧩

Widgets

🖼

Media

⊟

Layers

🎨

Theme

↶

History

💬

AI Chat

Bottom bar ▼

📱 Tablet 768px

PANEL 280px (36%)

TABLET 200px free · 280px panel

9:41📶 🔋

Explore the World of Trees

Bring nature into the classroom with beautifully illustrated, curriculum-aligned resources that make learning about trees fun, engaging, and meaningful.

What we offer

Books · News · Team · Resources · Pricing · Contact

Get Started

▦

Structure

⚙

Inspector

🧩

Widgets

🖼

Media

⊟

Layers

🎨

Theme

📐

Layout

↶

History

💬

AI Chat

📡

FvRE

Bottom bar ▼

🖥️ Desktop 1440px

PANEL 360px (25%)

DESKTOP 1080px free · 360px panel (25% — under 33% cap)

🏠

📚

📰

👥

⚙️

Explore the World of Trees

Bring nature into the classroom with beautifully illustrated, curriculum-aligned resources.

What we offer

Books · News · Team · Resources · Pricing

Get Started

▦

Structure

⚙

Inspector

🧩

Widgets

🖼

Media

⊟

Layers

🎨

Theme

📐

Layout

↶

History

💬

AI Chat

📡

FvRE

🗄

⚡

Triggers

Bottom bar ▼

📐 Width rules

RESPONSIVE

Breakpoints

Mobile (≤600px): 220px panel (~56% of 390px viewport)
Tablet (601-1023px): 280px panel (~36% of 768px)
Desktop (≥1024px): 360px panel (~25% of 1440px)
Hard cap: max-width: 33vw — never more than ⅓ of viewport, no matter the screen

Why 33%? Samsung's edge panel is consistently 22-30% of screen width across devices. 33% is the upper bound — a panel wider than that starts hiding the app's content. 170px of free space (mobile) is enough to keep the page interactive behind the scrim.

Operator can resize

Drag the left edge of the panel inward or outward
Min: 200px (below that 2-col grid breaks)
Max: 33vw (the cap)
Resized width persists in localStorage

🔗 Coexistence with 4-edge dock

ADDITIVE

The dock stays exactly as it is

4-edge dock: same pills, same drag/dock logic, same panel system. No changes.
Edge panel: a separate, additive floating panel that gives a stronger overview
Both can be open at the same time — the dock's pills become mini "minimize to dock" actions inside the edge panel

What the edge panel is for

"I'm lost, where am I?" — Structure tab is right there in 2-col grid
"What tools do I have?" — 12 icons visible at once, all clickable
"Quick add" — persistent footer, no scrolling
"Recent activity" — Recent tab shows where I've been

What the edge panel is NOT

It's not a replacement for the dock
It's not the only entry point — pills still work
It doesn't move dock panels or take over their state
It doesn't change the Dev toggle or setDevMode

When you click an icon in the edge panel

The edge panel slides out (or stays — user setting)
The corresponding dock panel opens on its dock (Structure on the left, Inspector on the right, etc.)
The page focuses on that tool
Same behavior as clicking the dock pill directly

Key decisions (the thinking through)

1. Width — 33% max, but use Samsung's actual numbers as floor

Hard cap: 33vw — never more than ⅓ of viewport, regardless of screen size
Min: 200px — below that, 2-col grid breaks and labels overflow
Default by viewport: 220px (mobile), 280px (tablet), 360px (desktop)
Operator can drag-resize between 200px and 33vw. Width persists in localStorage
Why not Samsung's 82% on mobile? Samsung optimizes for single-hand reach. We optimize for "see the app behind" — operator is editing, not launching. 56% mobile / 25% desktop leaves enough context

2. Additive, not replacement

The 4-edge dock system stays exactly as it is — pills, drag, dock, detach, all unchanged
The edge panel is a second way to access the same tools, with a stronger overview
Both can be open simultaneously — the edge panel is just a launcher, not a state container
Clicking a tool in the edge panel opens the corresponding dock panel — the edge panel then slides out (or stays, user setting)

3. Entry points stay the same

Edge handle (4-6px wide, right edge): visible when dev mode is on, swipe to open
Dev toggle (the icon, bottom-right): still works, also opens the edge panel
Dock pills: still work as direct tool launchers — they're the quick path for known tools
Edge panel: the "show me everything" path — when the operator doesn't remember which dock has which tool

4. The 2-col grid stays the right call

At 220px (mobile), 2 cells of ~95px each — icon (18px) + name (9px) fits with 8px padding
At 360px (desktop), 2 cells of ~165px each — more breathing room, room for badges
3-col would be too cramped on mobile, 1-col would be too tall on desktop
2-col is the Samsung pattern and it works

5. Footer is the + Section / + Container / + Widget

These are the "what to add" actions, used constantly during editing
Always visible at the bottom, never scrollable away
The arrow ▼ hints at "expand to full bottom bar" — but that's the dock, not duplicated
Operator can also access via dock pills, or via tree slot right-click

6. Tabs grow into the future

Tools (now): the 12 CMS tools
Recent (now): recently-touched sections
Saved (future): operator's pinned tools / favorites
AI (future): LLM actions (generate / modify / analyze)
History (future): undo stack visualization
Horizontal swipe inside the body flips between tabs

7. What I did NOT change

Did not change the dock system (4 edges, pills, drag, dock, detach)
Did not change the Dev toggle (still icon, bottom-right, setDevMode)
Did not change the inspector, structure panel, or any other panel
Did not change the setDevMode API or behavior
Edge panel is a new, optional, additive component