Mockup — Samsung-style edge panel for CMS

← back to mockups gallery 📖 view in HQ viewer

State mockup A017 (artifact id 17) 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 for CMS — swipe to reveal, 2-col grid, expandable

One permanent entry point (the icon) opens a sliding edge panel. 2-col grid of CMS tools, tabbed for second-level grouping, persistent footer for the bottom-bar items. Swipe in, swipe out. Future: second swipe reveals a second tab pane (tools / app-specific / recent).

📱 Edge handle visible (collapsed)

PEEK

COLLAPSED

9:41📶 🔋

S-1

Explore the World of Trees

Bring nature into the classroom.

S-3

What we offer

Books · News · Team · Resources

S-5

Get Started

Ready to bring trees to your classroom?

Footer

📱 Edge panel open — Tools tab

EXPANDED

9:41📶 🔋

S-1

Explore the World of Trees

Bring nature into the classroom.

S-3

What we offer

Books · News · Team · Resources

S-5

Get Started

Ready to bring trees to your classroom?

▦

Structure

⚙

Inspector

🧩

Widgets

🖼

Media

⊟

Layers

🎨

Theme

📐

Layout

↶

History

💬

AI Chat

📡

FvRE

🗄

PB Store

⚡

Triggers

📄

Services

📄

Hero

🎨

Forest

📐

Grid

Bottom bar ▼

👆 How the swipe works

INTERACTION

Open

Swipe from right edge (left-to-right) — Samsung-style
Tap the edge handle (the small green bar) — for those who don't know the gesture
Click the icon (bottom-right floating) — always works as fallback
Keyboard: Ctrl+Shift+D — desktop convenience

Close

Swipe right-to-left on the panel (back the way you came)
Tap outside (the scrim) — anywhere on the page
Press Escape — keyboard
Click the icon again — toggles off

Tab switching

Tap a tab at the top
Swipe left/right on the panel body (horizontal swipe) to flip between tabs
Future: pinch or two-finger swipe reveals a "second" panel — like Samsung's app pair

📐 Why this beats the old 4-edge dock

DESIGN DECISION

What was wrong with the 4-edge dock

4 strips of pills, all visible at once — visual noise
Operator has to know which edge has which tool
On mobile, 16px pills on each side = 32px of permanent chrome eating the viewport
Adding a new tool = adding a pill somewhere → sprawl

What the edge panel fixes

One entry point (the handle) — operator learns the gesture once
2-col grid holds 12+ tools in a small space (more than 4 dock pills ever could)
Tabbed — Tools / Recent / (future: Saved / AI / History). 2nd tab is one swipe away
Bottom footer always visible — the + Section / + Container / + Widget items, no scrolling needed
Page is clean when collapsed — only the 4px handle peeks out
Scrim dims the page so the panel feels focused, not overlaid
Backdrop blur (Samsung-style) — the panel feels like glass, not a slab

The full picture — how all the pieces fit together

1. The single entry point: the edge handle (4px wide)

Sits on the right edge of the viewport, vertically centered
Dark background, thin green line through the middle (the hint)
Drag it → opens the panel. Tap it → opens. Or just swipe from the edge
When the panel is open, the handle merges with it (no double visual)

2. The panel itself — slide-in sheet

280px wide, full height of viewport
Dark background (rgba(10,13,16,0.95)) with backdrop-blur — Samsung-style glass
Slides in from the right with a 300ms cubic-bezier (overshoots slightly, settles)
Scrim fades in behind (40% black) so the page is dimmed but visible

3. Tabs at the top

Currently 2: Tools (the CMS tool grid) and Recent (recently-touched sections)
Future: Saved (the operator's pinned tools), AI (LLM actions), History (undo stack)
Active tab has green underline + tinted background
Swipe horizontally inside the body to flip tabs (the second-swipe gesture)

4. The 2-column icon grid (the body)

12 tools visible in Tools tab. Each cell: icon + name, rounded 8px card, dark background
Hover/active state: green border + tinted background
Badges for "you have history to undo" (the ↶ History cell shows "3")
Each cell tap → opens that tool as a panel (Structure, Inspector, Media, etc.) on the left dock, sliding the edge panel out

5. The footer (always reachable)

Bottom-bar items: + Section / + Container / + Widget
These are the "what to add next" actions — the operator uses them constantly
Always visible at the bottom of the panel, never scrollable away
The arrow ▼ next to "Bottom bar" hints that tapping it expands into a fuller bottom-bar view (the same as before, but in a sheet instead of a docked bar)

6. Why this is better than the old approach

Cleaner default state — only the 4px handle is visible. Visitor mode (Dev OFF) hides even that. Page looks like a normal app
More tools in less space — 12 tools in a 280px panel vs 4 strips of pills eating 32-64px of viewport
Tabbed for organization — Tools / Recent / Saved / AI in the future. Each tab is one swipe away
Bottom-bar footer is persistent — operator never has to scroll to find the + Widget button
Samsung-familiar gesture — most people know edge swipe from their phone. The mental model is already there
The Dev icon is still the entry point — clicking also opens the panel. The handle and the icon do the same thing

7. Future — the second-swipe reveal

Swipe right once → Tools tab. Swipe right again (while panel is open) → opens a SECOND panel on the left side (paired mode, Samsung-style)
Use case: Structure on the right, Inspector on the left. Operator can edit while seeing the structure
Or: Tools on the right, Media library on the left while picking an image
The two panels can be different sizes (e.g. 220px + 280px) — operator can resize the divider