Architecture: What premium features should be added to dock-layout to make...

Documentation for Sessions

🏗️ Architecture: What premium features should be added to dock-layout to make...

Date: 2026-03-08
Time: 17:34:32 UTC
Session: gspace1-192.6
Agent: angular
Confidence: 90%
Status: ✅ Documented

📋 Decision Context

Question:

What premium features should be added to dock-layout to make it best-in-class vs Dockview/Golden Layout/VSCode?

Task: Add premium features to dock-layout library

🎯 Decision Made

Chosen:

Implemented 6 premium features: Preview Tabs (VSCode pattern), Pinned Tabs (compact icon-only), MRU tab activation on close (Zed pattern), Named Layout Presets (JetBrains), Locked Groups (Dockview), Zen Mode (VSCode). Plus 5 quality features: tab overflow with dropdown, keyboard arrow nav, splitter double-click reset, dirty tab close confirmation, improved drag threshold.

Options Considered:

Focus on accessibility (ARIA, screen reader)
Focus on responsive/mobile layout
Focus on premium tab features (preview, pin, MRU) + layout presets
Focus on performance (virtual scrolling, lazy loading)

💭 Reasoning

Research across Dockview, Golden Layout 2, FlexLayout, Lumino, VSCode, JetBrains, Zed, Chrome DevTools identified features our library was missing. Prioritized by real user impact: (1) Preview tabs + MRU close are the highest impact-to-effort — they eliminate tab clutter (the #1 UX complaint). (2) Named presets (save/restore layouts) is JetBrains' killer feature, trivial on our architecture. (3) Locked groups and Zen mode are small effort, big UX. Rejected: responsive mobile layout (studio is desktop-only), RTL support (no current need), virtual scrolling for 100+ tabs (premature). Data model additions: PanelLayoutNode.pinned, PanelLayoutNode.preview, TabsLayoutNode.locked, NamedPreset interface.

📁 Files Involved

libs/libs-ui/dock-layout/src/lib/models/layout-node.model.ts
libs/libs-ui/dock-layout/src/lib/services/dock-layout.service.ts
libs/libs-ui/dock-layout/src/lib/services/dock-state.service.ts
libs/libs-ui/dock-layout/src/lib/components/dock-tab/dock-tab.component.ts
libs/libs-ui/dock-layout/src/lib/components/dock-tabs/dock-tabs.component.ts
libs/libs-ui/dock-layout/src/lib/components/dock-container/dock-container.component.html
libs/libs-ui/dock-layout/src/lib/components/dock-container/dock-container.component.scss

🔗 Related

Decision ID: dev_1772991272141_ted2fqv
Session: 192
Workspace: gspace1

Auto-generated by MCP Smart Consolidation