How ahmadridhoramadhan/browserhome works
Chrome Home Dashboard is a browser-new-tab or standalone React dashboard. The user opens the dashboard, arranges widget windows and shortcuts, and uses clock, weather, prayer, task, notes, and custom-widget features; settings and widget state persist locally, with optional Chrome Sync backup. The sampled App code confirms widget rendering and storage use; README documents additional capabilities whose detailed wiring was not sampled, so uncertain links are omitted.
Main entry points: App.tsx Dashboard app · storage.ts Browser settings storage · PrayerWidget.tsx Prayer schedule · WeatherWidget.tsx Weather widget
Components 22
Dashboard shell
- Dashboard app
src/App.tsx - Widget windows
src/components/WindowFrame.tsx - App shortcuts
src/components/AppShortcuts.tsx - Dashboard controls
src/components/TopBar.tsx
Dashboard widgets
- Clock and date
src/components/widgets/ClockWidget.tsx - Weather widget
src/components/widgets/WeatherWidget.tsx - Weather and city lookup
src/utils/weatherApi.ts - Prayer schedule
src/components/widgets/PrayerWidget.tsx - Prayer calculations
src/utils/prayerCalc.ts - To-do list
src/components/widgets/TodoWidget.tsx - Quick notes
src/components/widgets/NotesWidget.tsx
Custom widgets
- Custom widget editor
src/components/CustomWidgetEditorModal.tsx - Custom widget renderer
src/components/widgets/CustomRendererWidget.tsx - Custom code sandbox
public/sandbox.js - Sandbox frame
src/components/widgets/CustomSandboxFrame.tsx
Settings and persistence
- Background settings
src/components/BackgroundSettingsModal.tsx - Widget catalog
src/components/WidgetCatalogModal.tsx - Backup and sync
src/components/SyncBackupModal.tsx - Browser settings storage
src/utils/storage.ts
Other components
- Dashboard user
- Chrome Sync
- Weather data service
Connections 24
- Dashboard user → Dashboard app: opens
- Dashboard app → Widget windows: renders windows
- Dashboard app → Clock and date: renders
- Dashboard app → Weather widget: renders
- Dashboard app → Prayer schedule: renders
- Dashboard app → To-do list: renders
- Dashboard app → Quick notes: renders
- Dashboard app → Custom widget renderer: renders
- Dashboard app → Browser settings storage: loads and saves
- Weather widget → Weather and city lookup: fetches data
- Weather and city lookup → Weather data service: requests weather
- Prayer schedule → Prayer calculations: fetches times
- Prayer schedule → Weather and city lookup: searches cities
- App shortcuts → Browser settings storage: reads and saves
- Weather widget → Browser settings storage: reads and saves
- Prayer schedule → Browser settings storage: reads and saves
- Backup and sync → Browser settings storage: imports and exports
- Browser settings storage → Chrome Sync: syncs settings
- Custom widget editor → Sandbox frame: previews code
- Sandbox frame → Custom code sandbox: sends render data
- Dashboard app → Dashboard controls: renders controls
- Dashboard app → Background settings: opens settings
- Dashboard app → Widget catalog: opens catalog
- Dashboard app → Backup and sync: opens backup