# 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**