Patterns — VirtualLife AI Imagine DLS

App Shell

The shell is the permanent structural frame of the application. It follows the WhatsApp / VS Code / Outlook pattern: a thin icon sidebar on the left with a broad content area on the right. The title bar and status bar complete the vertical sandwich.

✦ VirtualLife AI Imagine

Page Title Subtitle caption

Content area with glass cards, grids, forms...

16px top-left radius

● Pollinations Ready ● ComfyUI: —

Shell Anatomy

Region	Dimensions	Background	Notes
Title Bar	Full width × h-12.5 (50px)	bg-sidebar	Draggable (`-webkit-app-region: drag`). Contains app icon, gradient title, user pill, window controls.
Sidebar	w-14.5 (58px) × full height	bg-sidebar	Icon-only vertical nav. Fixed width. Active item has left border accent.
Content Area	Remaining space	bg-background + wavy SVG	16px top-left border radius creates the inset effect. Scrollable. Isolated stacking context.
Status Bar	Full width × auto (~28px)	bg-sidebar	Connection status indicators. Right-aligned. Border-top. text-xs.

Why this layout? The thin sidebar maximizes content area (critical for image work) while keeping all pages one click away. The inset content area with its rounded corner creates a visual "window within a window" that separates structural chrome from creative space. This pattern is familiar from VS Code, Outlook, and WhatsApp Desktop.

Navigation

Navigation is icon-only with tooltips on hover. Pages are organized by creative workflow: Create → Browse → Manage → Configure.

Navigation Items

Position	Icon	Page	Shortcut
1 (top)	`Sparkles`	Generate	—
2	`PenLine`	Edit	—
3	`LayoutGrid`	Gallery	—
4	`ArrowUpDown`	Quick Sort	—
5	`Store`	Catalog	—
6	`GitCompareArrows`	Model Compare	—
— spacer —
Bottom - 2	`CircleUser` / `LogIn`	Account	—
Bottom - 1	`Settings`	Settings	—

Sidebar Item Anatomy

State	Left Border	Background	Text
Default	`border-transparent`	transparent	text-sidebar-foreground
Hover	`border-transparent`	bg-sidebar-accent/50	text-sidebar-foreground
Active	border-sidebar-primary (2px)	bg-sidebar-accent	text-sidebar-accent-foreground

Design rationale: Icon-only navigation eliminates the need for translation and keeps the sidebar ultra-narrow. Each icon is chosen for instant recognition of its function. The left border accent on active items follows the VS Code pattern — a clear, accessible active state that doesn't rely on color alone.

Title Bar

The custom title bar replaces the OS native title bar (Electron frame: false). It contains the app icon (BrainCircuit), the animated gradient app title, and standard window controls (minimize, maximize, close). No user information is displayed in the title bar — it stays focused on branding and window management.

Element	Size	Styling
Title text	font-weight: 800	Gradient text (animated 20s, 120° Blue→Pink→Green)
Window buttons	32px × 28px each	rounded-md · hover: rgba(255,255,255,0.1)
Close button hover	32px × 28px	hsl(0, 70%, 50%) — standard red on hover

Login & User Presence

Authentication is optional for some apps but required for others (e.g., VirtualLife AI Imagine requires login to access cloud features). User state lives in the sidebar, keeping the title bar and content area uncluttered.

State	Sidebar Icon	Behavior
Not logged in	`CircleUser` (muted)	Click opens a login dialog. No aggressive CTA or banner — the icon is quietly available.
Logged in	User avatar or initial circle + green dot	Click opens user popover: email, account actions, logout. A small green dot (4px, bottom-right) indicates active session.

Design rationale: Login is positioned at the bottom of the sidebar (above Settings) so it's always accessible but never in the way. The VS Code account icon pattern is the reference — unobtrusive, professional, and consistent with the icon-only sidebar design. No username is shown in the title bar. The green dot indicator uses the same oklch(0.723 0.219 150) success green as status indicators.

Section Pattern

Every page is wrapped in a Section component that provides consistent page-level structure: an optional header (title + subtitle) and a scrollable content area.

Gallery Browse and manage your generated images

img

Section Anatomy

Part	Prop / Condition	Styling
Container	Always	container pt-4 px-4 h-full overflow-clip
Header	When `title` is set	flex items-baseline gap-3 pb-2
Title	Required	text-lg font-semibold leading-tight
Subtitle	Optional	text-sm text-muted-foreground leading-tight
Content area	Main content	h-[calc(100%-2rem)] · vertical scrollbar optional

Content Grids

Image-centric pages use responsive CSS grids that adapt from 1 to 6 columns based on viewport width. Grid gaps are consistent at gap-4 (16px).

Image Grid (Gallery / Generate)

1

2

3

4

5

6

7

8

9

10

11

12

grid-cols-1 → sm:2 → md:3 → lg:4 → xl:5 → 2xl:6

Breakpoint	Columns	Min Width
Default	1	0px
sm	2	640px
md	3	768px
lg	4	1024px
xl	5	1280px
2xl	6	1536px

Catalog Grid

The catalog uses a slightly different grid: grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4. Cards use aspect-3/4 (portrait) for model preview images.

Model Compare Grid

The compare page uses a CSS Grid with explicit column definitions: grid-template-columns: 240px repeat(N, 256px) 64px. Row height is fixed at 256px. This creates a spreadsheet-like grid with sticky headers and row labels.

Grid rules: 1) Always use gap-4 between grid items. 2) Image tiles use aspect-square by default (1:1). 3) Gallery scroll area has generous horizontal padding (px-12) to prevent images from touching the edges. 4) Grid pagination uses content grouping (by date) with sticky group headers.

Toolbars

Toolbars provide contextual controls above content areas. They use compact components and are visually light — never competing with the content they serve.

Gallery Toolbar

Toolbar Anatomy

Element	Height	Styling
Container	auto	px-4 pb-3 space-y-3 shrink-0
Search input	h-8	Relative positioned with icon left, `max-w-md`
Toolbar buttons	h-8	Compact ghost/outline buttons, text-xs
Vertical separator	h-6	orientation="vertical"
Filter panel	auto	rounded-lg border bg-card/50 p-3 space-y-3

Selection Bar

When items are selected in the gallery, a selection bar appears: bg-primary/10 px-3 py-2 rounded-lg. It contains a count indicator, compact action buttons (h-7 text-xs), and a "Deselect all" button.

Group Headers (Sticky)

When gallery content is grouped by date, sticky headers use the Glass Heavy recipe: bg-card/80 backdrop-blur-sm sticky top-0 z-10 py-2 px-3 rounded-lg border border-border/50.

Page Templates

Each page follows one of three layout archetypes. Consistency across pages means users build muscle memory quickly.

1. Form Page (Generate, Edit, Settings)

Vertical stack of collapsible glass cards (VLCards), each containing a form group. Scrollable content with a right padding buffer (pr-8).

Structure: Section → VLCard → form fields (flex-col gap-4) → action button at bottom.

Generate Create images from text

Model

Prompt

✦ Generate

2. Grid Page (Gallery, Catalog)

Toolbar on top, scrollable image grid below. The toolbar stays pinned while the grid scrolls. Optional filter panel expands below the toolbar.

Structure: Section → toolbar (shrink-0) → scroll area (flex-1 overflow-y-auto) → responsive grid.

Gallery

3. Focus Page (Quick Sort)

Single-item focus with flanking action buttons. The entire viewport is dedicated to one piece of content at a time. Side controls and bottom info strip.

Structure: flex-col h-full → filter bar (optional) → flex-row center (action btns + content + action btns) → info strip.

✕

✓

★

Image (swipeable)

Template selection guide: If the page is about creating or configuring → Form Page. If it's about browsing a collection → Grid Page. If it's about one item at a time → Focus Page.

Layering Model

The interface is built in visual layers that create depth without heavy shadows. Glass surfaces at varying opacities are the primary mechanism for layering.

Layer 5: Overlays z-50+ · Dialogs, fullscreen, toasts

Layer 4: Sticky elements z-10–50 · Group headers, selection bars

Layer 3: Interactive surfaces z-auto · Cards, image tiles, toolbars

Layer 2: Content cards z-auto · VLCards, settings sections

Layer 1: Background z-0 · Wavy SVG, bg-background

Layer 0: Chrome Fixed · Sidebar, title bar, status bar

Layer	Glass Level	z-index	Elements
0 – Chrome	Solid (opaque)	Fixed/100	Sidebar, title bar, status bar
1 – Background	—	0	Wavy SVG, bg-background, gradient canvas
2 – Content	Light (10%)	auto	VLCards, form sections, settings panels
3 – Interactive	Medium (40%)	auto	Image tiles, filter panels, edit overlays
4 – Sticky	Heavy (80%)	10–50	Group headers, selection bars, popovers
5 – Overlay	Scrim (black/80)	50+	Dialogs, fullscreen viewer, toasts

Key insight: Glass opacity increases with z-elevation. Background content shows through less as layers stack upward. This creates natural visual hierarchy — the most interactive surfaces demand the most attention by being more opaque, while content cards recede into the ambient background.