Add command palette, keyboard shortcuts modal, toast notifications, and loading skeletons

[Copilot]

Adds advanced UI features to improve navigation efficiency and user feedback in the Heady Admin Dashboard.

Implementation

Command Palette (command-palette.js)

• Ctrl/Cmd+K trigger with fuzzy search across 15+ commands
• Categories: Navigation, Verticals, Actions, Help
• Recent commands stored in localStorage
• Full keyboard navigation (arrows, Enter, Escape)

Keyboard Shortcuts Modal (shortcuts.js)

• ? key trigger, categorized reference (Navigation, Actions, Modals)
• Alt+D/V/G/A/T/N shortcuts added to main.js

Toast Notifications (toast.js)

• Types: success, error, warning, info
• Auto-dismiss with progress bar, manual close, stacking support

window.toastSystem.showToast({
  type: 'success',
  title: 'Operation Complete',
  message: 'Data saved successfully',
  duration: 5000  // optional, default 5000ms
});

Loading Skeletons (skeletons.css)

• Components: .skeleton-card, .skeleton-text, .skeleton-chart, .skeleton-avatar
• Shimmer animation, light/dark theme support

Styling (modals.css)

• Glassmorphism modals with blur backdrop
• Unified entrance/exit animations
• Toast notification styles with left border accent

Screenshots

Command Palette with Fuzzy Search

Keyboard Shortcuts Modal

Toast Notifications

Light Theme Support

Accessibility

• ARIA labels, keyboard navigation, focus management
• Reduced motion support, high contrast mode
• Mobile responsive, touch-friendly

Files

• New: command-palette.js, shortcuts.js, toast.js, modals.css, skeletons.css, ADVANCED_FEATURES.md, skeleton-demo.html
• Updated: index.html, main.js

No build dependencies. Pure vanilla JS/CSS.

Original prompt

Add Advanced UI Features to Heady Admin Dashboard

Context

Building on the existing UI components in PR #13 and #14, we need to add advanced interactive features to improve user experience and productivity.

Tasks

1. Command Palette (HeadySystems_v13/apps/heady_admin_ui/js/command-palette.js)

Create a Spotlight/VS Code style command palette:

• Triggered by Ctrl+K (Windows/Linux) or Cmd+K (Mac)
• Fuzzy search through commands and navigation
• Commands include:
  • Navigate to Dashboard
  • Navigate to each Vertical (Make, Field, Legacy, Kinetic, Bio, Ed, Guard)
  • Toggle theme (Dark/Light)
  • Open Notifications
  • View Keyboard Shortcuts
  • Search documentation
• Animated modal with glassmorphism effect
• Keyboard navigation (arrow keys, Enter to select, Escape to close)
• Recent commands section

2. Keyboard Shortcuts Help Modal (HeadySystems_v13/apps/heady_admin_ui/js/shortcuts.js)

Create a keyboard shortcuts reference:

• Triggered by pressing ? key
• Display all available shortcuts in a modal:
  • Ctrl/Cmd + K - Open command palette
  • ? - Show keyboard shortcuts
  • Alt + D - Go to Dashboard
  • Alt + V - Go to Verticals
  • Alt + G - Go to Governance
  • Alt + T - Toggle theme
  • Alt + N - Open notifications
  • Escape - Close any modal
• Categorized sections (Navigation, Actions, Modals)
• Glassmorphism modal design matching existing UI

3. Toast Notification System (HeadySystems_v13/apps/heady_admin_ui/js/toast.js)

Create a modern toast notification system:

• Types: success, error, warning, info
• Auto-dismiss with configurable duration (default 5s)
• Manual dismiss with close button
• Stack multiple notifications
• Slide-in animation from top-right
• Progress bar showing time until auto-dismiss
• API: showToast({ type: 'success', title: 'Title', message: 'Message', duration: 5000 })

4. Loading Skeleton Screens (HeadySystems_v13/apps/heady_admin_ui/css/skeletons.css)

Add skeleton loading states:

• Skeleton card component
• Skeleton text lines
• Skeleton chart placeholder
• Shimmer animation effect
• CSS classes: .skeleton, .skeleton-text, .skeleton-card, .skeleton-chart

5. Update Main Files

Update HeadySystems_v13/apps/heady_admin_ui/index.html:

• Add script tags for new JS files
• Add link tag for skeletons.css
• Add modal containers for command palette and shortcuts

Update HeadySystems_v13/apps/heady_admin_ui/js/main.js:

• Initialize command palette
• Initialize shortcuts modal
• Initialize toast system
• Add demo toasts on certain actions

6. CSS Additions (HeadySystems_v13/apps/heady_admin_ui/css/modals.css)

Create modal styles:

• .modal-overlay - Dark backdrop with blur
• .modal-content - Glassmorphism container
• .command-palette - Command palette specific styles
• .shortcuts-modal - Shortcuts modal styles
• Entrance/exit animations

Technical Requirements

• Pure vanilla JavaScript (no dependencies)
• Accessible (ARIA labels, focus management, screen reader support)
• Mobile responsive (hide keyboard shortcuts on mobile, touch-friendly)
• Performance optimized
• Consistent with existing design language

File Structure

HeadySystems_v13/apps/heady_admin_ui/
├── css/
│   ├── modals.css (NEW)
│   └── skeletons.css (NEW)
├── js/
│   ├── command-palette.js (NEW)
│   ├── shortcuts.js (NEW)
│   └── toast.js (NEW)
└── index.html (UPDATE)

Success Criteria

• Command palette opens with Ctrl/Cmd+K and allows quick navigation
• Keyboard shortcuts modal shows all available shortcuts
• Toast notifications display and auto-dismiss correctly
• Skeleton screens provide visual feedback during loading
• All features are accessible and mobile-friendly

This pull request was created from Copilot chat.

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.