design.estate/dees-catalog
2
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity
Files
8ad754c9bcccc964ff0fe3e2d0c319b684732040
dees-catalog/readme.plan.md
Juergen Kunz 8ad754c9bc feat(dees-appui-appbar): implement dynamic menu system with support for submenus, shortcuts, and user account features 
feat(dees-contextmenu): adjust menu item positioning for improved alignment
fix(dees-appui-appbar.demo): add demo functionality for app bar with dynamic menu items and user interactions
feat(interfaces): create IAppBarMenuItem interface for enhanced menu item configurations
docs: add comprehensive improvement plan for dees-appui-appbar component
2025-06-16 23:16:25 +00:00

6.7 KiB
Raw Blame History

dees-appui-appbar Improvement Plan

Phase 1: Core Menu System

Menu Data Structure

  • Extend existing plugins.tsclass.website.IMenuItem to create IAppBarMenuItem with additional properties: id, shortcut, submenu, divider, disabled
  • Create IMenuBar interface with menuItems array and onMenuSelect callback
  • Add @property() menuItems to accept menu configuration
  • Add @property() onMenuSelect event handler
  • Consider reusing existing interfaces.ITab for simpler menu scenarios

Basic Menu Rendering

  • Replace hardcoded menu items with dynamic rendering from menuItems property
  • Add support for menu item icons
  • Implement menu item disabled state styling
  • Add menu separator/divider support

Dropdown Implementation

  • Create dropdown container component (consider reusing logic from dees-contextmenu)
  • Implement click to open/close dropdown
  • Add dropdown positioning logic (below menu item)
  • Implement click outside to close
  • Add dropdown arrow/caret indicator
  • Style dropdown with shadows and borders
  • Ensure visual consistency with existing dees-contextmenu component

Keyboard Navigation

  • Add tabindex to menu items
  • Implement Tab navigation between top-level items
  • Add Enter key to open dropdown
  • Implement arrow keys for dropdown navigation
  • Add Escape key to close dropdown
  • 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
  • Add @property() breadcrumbs array
  • Add @property() breadcrumbSeparator (default '>')
  • Implement breadcrumb rendering with separators
  • Add click handlers for navigation
  • Emit 'breadcrumb-navigate' custom event
  • Add breadcrumb truncation for long paths
  • Implement breadcrumb overflow with horizontal scroll

Theme Support

  • Add CSS variables for all colors and sizes
  • Create --appbar-height variable (default 40px)
  • Add --appbar-bg, --appbar-text, --appbar-border variables
  • Implement --appbar-hover and --appbar-active states
  • Add @property() theme with 'light' | 'dark' options
  • Create light theme CSS variables
  • Add theme toggle to demo

Visual Improvements

  • Add smooth transitions for hover states
  • Implement ripple effect on click
  • Add focus ring styles for accessibility
  • Improve menu item padding and spacing
  • Add subtle gradient or texture to appbar

Phase 3: Search & User Account

Search Integration

  • Add search icon in center section
  • Create expandable search input
  • Add @property() showSearch boolean
  • Implement Cmd/Ctrl+K keyboard shortcut
  • Add search input with placeholder
  • Emit 'search-submit' event
  • Add search suggestions dropdown
  • Implement recent searches storage

User Account Section

  • Define IUserAccount interface
  • Add @property() user for user data
  • Render user avatar (with fallback to initials)
  • Display user name
  • Add status indicator (online/offline/busy/away)
  • Create user dropdown menu
  • Add logout/settings options
  • Emit 'user-menu-open' event

Phase 4: Platform & Accessibility

Platform-Specific Features

  • Add @property() platform detection
  • 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
  • Add @property() showWindowControls
  • Handle window controls on different platforms
  • Add minimize/maximize/close functionality
  • Style window controls to match theme

Accessibility (A11Y)

  • Add proper ARIA roles (menubar, menuitem)
  • Implement aria-haspopup for dropdowns
  • 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

  • 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
  • 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