Client shell components (yuv)
Client Shell
Section titled “Client Shell”The foundational container for Shell Applications, providing the structural layout and shell app navigation frame. It orchestrates header, sidebar, and main content while wiring routing, settings, and global interactions.
Design Purpose
- Base Container
- Delivers the primary app frame with header, navigation, and content regions.
- App Integration
- Hosts shell apps and coordinates their initialization and navigation.
- Global Drop Zone
- Exposes a shell-wide file drop area for uploads.
Visual Design
- Grid Structure
- CSS Grid with defined areas for header, sidebar, and main content.
- Responsive Layout
- Desktop shows header + sidebar; mobile stacks header, content, then navigation.
- Busy Indicator
- Global progress bar communicates loading states across the shell.
- Fullscreen Canvas
- Uses absolute positioning to occupy the full viewport cleanly.
Interaction
- App Navigation
- Users switch between shell apps via sidebar; routes update the main outlet.
- File Drag & Drop
- Dropping files anywhere triggers upload affordances with visual feedback.
- Busy Feedback
- Long operations surface a non-blocking progress indicator.
- Accessible Flow
- Semantic regions and focus order support keyboard and screen readers.
Configuration
- Shell Config
- Receives app registry and shell config
- Routing Setup
- Defines app routes, initial redirect after login, and navigation handling.
App Header
Section titled “App Header”A flexible header component for Shell Apps providing consistent structure, app identity, and dynamic content slots. It supports actions, search, and notifications through a slot-based projection system for adaptable layouts.
Design Purpose
- Unified App Header
- Ensures a consistent header layout across all shell applications.
- Slot System
- Offers flexible projection areas for app-wide, global actions, in-app-search, and in-app-notifications.
- App Identity
- Displays shell client app logo, current shell app title, and optional claim to establish brand and context.
Visual Design
- Slot Areas
- Distinct grid areas for actions, search, notifications.
- Progress Bar
- Indeterminate progress bar displayed at the bottom during busy states.
Sidebar Nav Component
Section titled “Sidebar Nav Component”Primary vertical navigation rail for the shell client with shell app switching, shell notifications, custom actions, and user options.
Design Purpose
- App Navigation
- Provides the main entry points to shell apps via a vertical rail.
- Notification Access
- Surfaces shell notifications with badge counts and level hints.
- Custom Actions
- Exposes shell-specific actions as configurable buttons.
- User Options
- Includes settings access and logout.
Visual Design
- Layout
- Fixed-width vertical bar with logo area, app list, and a bottom actions section.
- Iconography
- App entries use SVG or Material symbols with optional labels and tooltips.
- Notification Badges
- Badges indicate unread counts; colors reflect notification level severity.
- Active App State
- Clear highlight of the current app using state-layer and color tokens.