Tablet Shell Components

The tablet shell provides the desktop OS experience — taskbar, start menu, windows, system tray.

TabletShell.jsx

File: ui/src/shell/TabletShell.jsx

The main container. Renders when useTablet().isOpen is true.

Structure:

<div className="tablet-shell" style={fullScreenOverlay}>
  <Desktop />
  <WindowManager />
  <Taskbar />
  {showSettings && <SettingsPanel />}
</div>

Features:

• Full-screen overlay with backdrop
• Inline settings panel (7 sections, accordion style)
• Settings gear icon in taskbar opens the panel
• Applies uiScale transform via CSS

Desktop.jsx

File: ui/src/shell/Desktop.jsx

Displays app icons on the desktop background.

Props: onOpenSettings

Behavior:

• Filters registeredApps where showOnDesktop !== false
• Grid layout with auto-fill columns based on iconSize
• Double-click to open app
• Renders iconComponent (SVG) → iconText (emoji) → ? fallback

Icon Sizes: small: 36px, medium: 44px, large: 56px

Taskbar.jsx

File: ui/src/shell/Taskbar.jsx

Bottom bar with start button, running apps, settings, and system tray.

Layout:

[⊞ Start] [App1] [App2] ... [⚙ Settings] [SystemTray]

Features:

• Start button with GridIcon, toggles StartMenu
• Running app buttons with SVG icons, click to focus/minimize
• Settings gear icon opens inline settings panel
• SystemTray on the right

StartMenu.jsx

File: ui/src/shell/StartMenu.jsx

App launcher popup above the taskbar.

Features:

• Search bar with magnifying glass icon
• Apps grouped by category with labels
• 4-column grid of app buttons
• Click to open app, closes menu
• Click outside to close
• SVG icons via renderIcon() function

Categories: system, tools, productivity, internet, media, info, developer

SystemTray.jsx

File: ui/src/shell/SystemTray.jsx

Right side of taskbar with notifications, volume, WiFi, and clock.

Components:

• WiFiIcon — Static WiFi indicator
• BellIcon — Toggle notification mute (red when muted)
• VolumeIcon — Click to mute/unmute, double-click opens volume slider
• Clock — Click to open calendar popup

CalendarPopup: Month grid with navigation, today highlight, "Today" button

VolumeSlider: Range input (0-100%), mute toggle, percentage display, persisted to localStorage

Window.jsx

File: ui/src/shell/Window.jsx

Individual application window.

Props: window (id, appId, title, iconComponent, color, x, y, width, height, isMaximized, isMinimized, isFocused, zIndex, component, props)

Features:

• Draggable: Mouse down on titlebar → drag
• Resizable: 8 resize handles (edges + corners)
• Title bar: Icon (SVG/emoji), title, minimize/maximize/close buttons (SVG)
• Backdrop filter: blur(16px) for frosted glass effect
• Minimize: Hides window (preserves state)
• Maximize: Fullscreen within tablet bounds
• Focus: Click to bring to front

Resize Handles: n, s, e, w, ne, nw, se, sw — 8 directions

WindowManager.jsx

File: ui/src/shell/WindowManager.jsx

Renders all open windows from AppContext.windows[].

{windows.map(win => (
  <Window key={win.id} window={win} />
))}

ContextMenu.jsx

File: ui/src/shell/ContextMenu.jsx

Right-click menu on the desktop.

Options:

• Refresh desktop
• Open all apps
• Minimize all windows
• Settings