Owner requests (2026-10-10/11): 1. "Instead of showing no calendar like it does now It should just show no upcoming appointments but if there are appointments it should show a calendar with the days and times highlighted for each appointment" 2. "We should properly stylize the calendar to fit with each theme correctly" 3. "Should also be a relatively small widget basically about the size of the weather widget" Changes (status/ only — frontend): - Chip: empty state now says "No upcoming appointments" (the calendar IS connected — the old "No calendar" string was wrong); with events it shows title + day/time with .cal-chip-when accent highlight. Chip CSS keeps the existing weather-widget proportions (padding 4px 10px, 0.85rem, pill). - Modal: month GRID (cal-grid, 7 columns, prev/next month nav) with: appointment days highlighted (accent-tinted background + border), today ring, per-event dots with time tooltips; Upcoming list kept below with day/time emphasis. Sources manager unchanged functionally, restyled via CSS vars. - Theming: every color via CSS variables (--fg/--muted/--accent/--border/ --base/--hover/--error). Per-theme overrides for dark-accent themes where small accent text fails contrast on dark surfaces (taxi/ocean/ solarized-dark get brightened chip-when/dots; black gets its red accent; solarized-light dark-on-light). User/custom themes derive automatically via color-mix(--accent, white). No hardcoded hex in the shared rules. Bug fixed en route: escapeHtml was previously expected as a global (never defined in this file — latent XSS/ReferenceError if another bundle didn't provide it). Now defined locally. Verification: node --check clean; DC-168 smoke harness (DOM shim) proves empty chip → "No upcoming appointments", events chip → title + highlighted when-span, modal grid renders correct day-cell counts with cal-day/cal-dow structure; eslint 0 errors (parser-options run).
DashCaddy Onboarding System
This directory contains the JavaScript modules for the user onboarding tooltip system.
Files
- onboarding.js - Main entry point, initializes the onboarding system
- tour-manager.js - Orchestrates the onboarding flow and manages tour state
- progress-tracker.js - Manages persistent storage of user progress
- tooltip-definitions.js - Defines all tooltip content and positioning
- dns-template-selector.js - Presents DNS server template options
- theme-adapter.js - Ensures tooltips match the current dashboard theme
Load Order
The scripts are loaded in the following order (as defined in status/index.html):
- progress-tracker.js
- theme-adapter.js
- tooltip-definitions.js
- dns-template-selector.js
- tour-manager.js
- onboarding.js (main initialization)
Dependencies
- Driver.js - Loaded from CDN (https://cdn.jsdelivr.net/npm/driver.js@1.3.1/)
- Dashboard CSS variables (for theming)
- Browser localStorage API (for progress tracking)
Integration
The onboarding system integrates with:
- Dashboard theme system (via CSS variables)
- App template selector (for DNS server deployment)
- Local storage (for progress persistence)
Development
Each module is wrapped in an IIFE (Immediately Invoked Function Expression) to avoid global namespace pollution. Modules communicate through well-defined interfaces and the window object where necessary.