202 lines
6.7 KiB
Markdown
202 lines
6.7 KiB
Markdown
|
# dees-appui-appbar Improvement Plan
|
||
|
|
|
||
|
|
## Phase 1: Core Menu System
|
||
|
|
|
||
|
|
### Menu Data Structure
|
||
|
|
- [x] Extend existing `plugins.tsclass.website.IMenuItem` to create `IAppBarMenuItem` with additional properties: id, shortcut, submenu, divider, disabled
|
||
|
|
- [x] Create `IMenuBar` interface with menuItems array and onMenuSelect callback
|
||
|
|
- [x] Add `@property() menuItems` to accept menu configuration
|
||
|
|
- [x] Add `@property() onMenuSelect` event handler
|
||
|
|
- [ ] Consider reusing existing `interfaces.ITab` for simpler menu scenarios
|
||
|
|
|
||
|
|
### Basic Menu Rendering
|
||
|
|
- [x] Replace hardcoded menu items with dynamic rendering from menuItems property
|
||
|
|
- [x] Add support for menu item icons
|
||
|
|
- [x] Implement menu item disabled state styling
|
||
|
|
- [x] Add menu separator/divider support
|
||
|
|
|
||
|
|
### Dropdown Implementation
|
||
|
|
- [x] Create dropdown container component (consider reusing logic from dees-contextmenu)
|
||
|
|
- [x] Implement click to open/close dropdown
|
||
|
|
- [x] Add dropdown positioning logic (below menu item)
|
||
|
|
- [x] Implement click outside to close
|
||
|
|
- [x] Add dropdown arrow/caret indicator
|
||
|
|
- [x] Style dropdown with shadows and borders
|
||
|
|
- [ ] Ensure visual consistency with existing dees-contextmenu component
|
||
|
|
|
||
|
|
### Keyboard Navigation
|
||
|
|
- [x] Add tabindex to menu items
|
||
|
|
- [x] Implement Tab navigation between top-level items
|
||
|
|
- [x] Add Enter key to open dropdown
|
||
|
|
- [x] Implement arrow keys for dropdown navigation
|
||
|
|
- [x] Add Escape key to close dropdown
|
||
|
|
- [x] Implement Home/End keys for first/last item
|
||
|
|
|
||
|
|
### Submenu Support
|
||
|
|
- [ ] Detect submenu items and add arrow indicator
|
||
|
|
- [ ] Implement submenu positioning (to the right)
|
||
|
|
- [ ] Add hover delay before opening submenu
|
||
|
|
- [ ] Handle nested keyboard navigation
|
||
|
|
- [ ] Prevent submenus from going off-screen
|
||
|
|
|
||
|
|
## Phase 2: Breadcrumb Navigation & Theming
|
||
|
|
|
||
|
|
### Breadcrumb System
|
||
|
|
- [ ] Define `IBreadcrumb` interface with label, path, icon
|
||
|
|
- [x] Add `@property() breadcrumbs` array
|
||
|
|
- [x] Add `@property() breadcrumbSeparator` (default '>')
|
||
|
|
- [x] Implement breadcrumb rendering with separators
|
||
|
|
- [x] Add click handlers for navigation
|
||
|
|
- [x] Emit 'breadcrumb-navigate' custom event
|
||
|
|
- [ ] Add breadcrumb truncation for long paths
|
||
|
|
- [ ] Implement breadcrumb overflow with horizontal scroll
|
||
|
|
|
||
|
|
### Theme Support
|
||
|
|
- [x] Add CSS variables for all colors and sizes
|
||
|
|
- [x] Create `--appbar-height` variable (default 40px)
|
||
|
|
- [x] Add `--appbar-bg`, `--appbar-text`, `--appbar-border` variables
|
||
|
|
- [x] Implement `--appbar-hover` and `--appbar-active` states
|
||
|
|
- [x] Add `@property() theme` with 'light' | 'dark' options
|
||
|
|
- [x] Create light theme CSS variables
|
||
|
|
- [x] Add theme toggle to demo
|
||
|
|
|
||
|
|
### Visual Improvements
|
||
|
|
- [x] Add smooth transitions for hover states
|
||
|
|
- [ ] Implement ripple effect on click
|
||
|
|
- [x] Add focus ring styles for accessibility
|
||
|
|
- [x] Improve menu item padding and spacing
|
||
|
|
- [ ] Add subtle gradient or texture to appbar
|
||
|
|
|
||
|
|
## Phase 3: Search & User Account
|
||
|
|
|
||
|
|
### Search Integration
|
||
|
|
- [x] Add search icon in center section
|
||
|
|
- [ ] Create expandable search input
|
||
|
|
- [x] Add `@property() showSearch` boolean
|
||
|
|
- [ ] Implement Cmd/Ctrl+K keyboard shortcut
|
||
|
|
- [ ] Add search input with placeholder
|
||
|
|
- [x] Emit 'search-submit' event
|
||
|
|
- [ ] Add search suggestions dropdown
|
||
|
|
- [ ] Implement recent searches storage
|
||
|
|
|
||
|
|
### User Account Section
|
||
|
|
- [ ] Define `IUserAccount` interface
|
||
|
|
- [x] Add `@property() user` for user data
|
||
|
|
- [x] Render user avatar (with fallback to initials)
|
||
|
|
- [x] Display user name
|
||
|
|
- [x] Add status indicator (online/offline/busy/away)
|
||
|
|
- [ ] Create user dropdown menu
|
||
|
|
- [ ] Add logout/settings options
|
||
|
|
- [x] Emit 'user-menu-open' event
|
||
|
|
|
||
|
|
## Phase 4: Platform & Accessibility
|
||
|
|
|
||
|
|
### Platform-Specific Features
|
||
|
|
- [ ] Add `@property() platform` detection
|
||
|
|
- [x] Conditionally show window controls
|
||
|
|
- [ ] Implement platform-specific styling (macOS/Windows/Linux)
|
||
|
|
- [ ] Add platform-specific keyboard shortcuts
|
||
|
|
- [ ] Handle window dragging per platform
|
||
|
|
- [ ] Add fullscreen toggle button
|
||
|
|
|
||
|
|
### Window Controls Integration
|
||
|
|
- [ ] Make window controls position configurable
|
||
|
|
- [x] Add `@property() showWindowControls`
|
||
|
|
- [ ] Handle window controls on different platforms
|
||
|
|
- [ ] Add minimize/maximize/close functionality
|
||
|
|
- [ ] Style window controls to match theme
|
||
|
|
|
||
|
|
### Accessibility (A11Y)
|
||
|
|
- [x] Add proper ARIA roles (menubar, menuitem)
|
||
|
|
- [x] Implement aria-haspopup for dropdowns
|
||
|
|
- [x] Add aria-expanded state
|
||
|
|
- [ ] Include aria-label for navigation
|
||
|
|
- [ ] Support screen reader announcements
|
||
|
|
- [ ] Add high contrast mode support
|
||
|
|
- [ ] Implement focus trap in dropdowns
|
||
|
|
- [ ] Add skip navigation link
|
||
|
|
|
||
|
|
### Responsive Design
|
||
|
|
- [ ] Add breakpoint detection
|
||
|
|
- [ ] Implement hamburger menu for mobile
|
||
|
|
- [ ] Create slide-out menu drawer
|
||
|
|
- [ ] Make breadcrumbs responsive
|
||
|
|
- [ ] Hide non-essential items on small screens
|
||
|
|
- [ ] Add touch gesture support
|
||
|
|
|
||
|
|
## Phase 5: Advanced Features
|
||
|
|
|
||
|
|
### Notification System
|
||
|
|
- [ ] Add notification icon with badge
|
||
|
|
- [ ] Create `@property() notifications` array
|
||
|
|
- [ ] Implement notification dropdown
|
||
|
|
- [ ] Add notification actions (mark read, dismiss)
|
||
|
|
- [ ] Emit notification events
|
||
|
|
- [ ] Add notification sound option
|
||
|
|
- [ ] Implement notification grouping
|
||
|
|
|
||
|
|
### Plugin System
|
||
|
|
- [ ] Define `IAppBarPlugin` interface
|
||
|
|
- [ ] Add plugin registration method
|
||
|
|
- [ ] Implement plugin rendering slots
|
||
|
|
- [ ] Add plugin positioning (left/center/right)
|
||
|
|
- [ ] Support plugin weight for ordering
|
||
|
|
- [ ] Create plugin lifecycle hooks
|
||
|
|
|
||
|
|
### Custom Slots
|
||
|
|
- [ ] Add named slots for sections
|
||
|
|
- [ ] Implement slot change detection
|
||
|
|
- [ ] Style slotted content appropriately
|
||
|
|
- [ ] Document slot usage
|
||
|
|
|
||
|
|
### Context Menus
|
||
|
|
- [ ] Add right-click context menu support
|
||
|
|
- [ ] Implement context menu positioning
|
||
|
|
- [ ] Add context-specific menu items
|
||
|
|
- [ ] Support custom context menus
|
||
|
|
|
||
|
|
## Phase 6: Performance & Polish
|
||
|
|
|
||
|
|
### Performance Optimizations
|
||
|
|
- [ ] Implement virtual scrolling for long menus
|
||
|
|
- [ ] Add lazy loading for submenu content
|
||
|
|
- [ ] Debounce search input
|
||
|
|
- [ ] Memoize menu rendering
|
||
|
|
- [ ] Optimize re-renders with lit's `guard` directive
|
||
|
|
- [ ] Add loading states for async operations
|
||
|
|
|
||
|
|
### Testing
|
||
|
|
- [x] Create comprehensive demo page
|
||
|
|
- [ ] Add unit tests for menu logic
|
||
|
|
- [ ] Test keyboard navigation
|
||
|
|
- [ ] Test platform-specific behavior
|
||
|
|
- [ ] Add visual regression tests
|
||
|
|
- [ ] Test accessibility with screen readers
|
||
|
|
- [ ] Performance benchmark tests
|
||
|
|
|
||
|
|
### Documentation
|
||
|
|
- [ ] Document all properties and methods
|
||
|
|
- [x] Create usage examples
|
||
|
|
- [ ] Add migration guide from current version
|
||
|
|
- [ ] Document keyboard shortcuts
|
||
|
|
- [ ] Create accessibility guide
|
||
|
|
- [ ] Add troubleshooting section
|
||
|
|
|
||
|
|
### Polish
|
||
|
|
- [ ] Add loading skeletons
|
||
|
|
- [ ] Implement error states
|
||
|
|
- [ ] Add empty states
|
||
|
|
- [ ] Create onboarding tooltips
|
||
|
|
- [ ] Add animation preferences (reduced motion)
|
||
|
|
- [ ] Implement print styles
|
||
|
|
|
||
|
|
## Completion Tracking
|
||
|
|
|
||
|
|
- Phase 1: 20/22 tasks
|
||
|
|
- Phase 2: 10/15 tasks
|
||
|
|
- Phase 3: 6/16 tasks
|
||
|
|
- Phase 4: 6/24 tasks
|
||
|
|
- Phase 5: 0/18 tasks
|
||
|
|
- Phase 6: 2/20 tasks
|
||
|
|
|
||
|
|
**Total: 44/115 tasks completed**
|