Dashboard

Dashboard is a Tiger-style widget overlay for ryOS with draggable widgets for at-a-glance information. Press F4 to toggle. Includes 8 widgets: Clock, Calendar, Weather, Stocks, iPod, Translation, Dictionary, and Sticky Note.

Overview

Dashboard provides a Tiger-style widget overlay for ryOS with draggable widgets for at-a-glance information. It includes 8 widgets—Clock (analog with digital time, auto dark mode), Calendar (mini month view with events), Weather (geolocation-based), Stocks (real market data via yahoo-finance2), iPod (playback controls), Translation, Dictionary, and Sticky Note. Widgets can be flipped to show settings, added via a + button or menu bar, and dragged to rearrange (touch and mouse support). Framer Motion powers the animations.

Features

8 Widgets: Clock (analog with digital time, auto dark mode), Calendar (mini month view with events), Weather (geolocation-based), Stocks (real market data via yahoo-finance2), iPod (playback controls), Translation, Dictionary, Sticky Note

Widget back panels with settings: Flip widgets to configure (timezone, stocks symbols, languages, etc.)
Add widgets: Use the + button or menu bar to add widgets
Drag to rearrange: Touch and mouse support for repositioning
Tiger-style visual design: Polished UI with Framer Motion animations
F4 keyboard shortcut: Toggle Dashboard on or off
Safe-area support: Optimized for mobile displays

User Guide

Getting Started

Press F4 or launch Dashboard from the application launcher. Widgets load automatically. Use the + button or menu bar to add widgets.

Key Actions

Toggle Dashboard: Press F4 to open or close
Reposition Widgets: Drag any widget to move it (touch or mouse)
Configure Widgets: Flip a widget to its back panel to access settings
View Weather: Grant location permission when prompted to enable the weather widget
Manage Widgets: Use the menu bar for widget management

Tips & Shortcuts

F4 and Escape both close the dashboard
The calendar widget syncs with Calendar app events
Stocks widget uses real market data from yahoo-finance2
Clock widget automatically switches to dark mode in low light

Technical Details

Window Configuration

Dashboard typically runs as an overlay or full-screen panel rather than a standard window.

Component Architecture

src/apps/dashboard/components/DashboardAppComponent.tsx — Main overlay component
src/apps/dashboard/components/DashboardMenuBar.tsx — Menu bar with widget management
Widget components in src/components/layout/dashboard/:
- ClockWidget.tsx — Analog/digital clock with auto dark mode
- CalendarWidget.tsx — Mini calendar with events
- WeatherWidget.tsx — Weather with geolocation
- StocksWidget.tsx — Real stock data widget
- IpodWidget.tsx — iPod playback controls
- TranslationWidget.tsx — Translation widget
- DictionaryWidget.tsx — Dictionary lookup widget
- StickyNoteWidget.tsx — Sticky note widget
- WidgetChrome.tsx — Shared widget wrapper with drag, flip, and settings

Hooks & Utilities

src/apps/dashboard/hooks/useDashboardLogic.ts — Widget state and layout management

State Management

src/stores/useDashboardStore.ts — Zustand store for widget positions, visibility, and settings

Related Apps

Calendar: Full calendar app; events appear in the Dashboard calendar widget

Control Panels: System settings for themes and wallpapers shown on the desktop