Implement a new sidebar component based on DaisyUI Drawer pattern without
custom CSS variants. The sidebar supports desktop (expanded/collapsed states)
and mobile (overlay drawer) with full accessibility compliance.
Sidebar Implementation:
- Refactor sidebar component with sidebar_header, menu_item, menu_group,
sidebar_footer sub-components
- Add logo (mila.svg) with size-8 (32px) always visible
- Implement toggle button with icon swap (chevron-left/right) for desktop
- Add nested menu support with details/summary (expanded) and dropdown
(collapsed) patterns
- Implement footer with language selector (expanded-only), theme toggle,
and user menu with avatar
- Update layouts.ex to use drawer pattern with data-sidebar-expanded
attribute for state management
CSS & JavaScript:
- Add CSS styles for sidebar state management via data-attribute selectors
- Implement SidebarState JavaScript hook for localStorage persistence
- Add smooth width transitions (w-64 ↔ w-16) for desktop collapsed state
- Add CSS classes for expanded-only, menu-label, and icon visibility
Documentation:
- Add sidebar-analysis-current-state.md: Analysis of current implementation
- Add sidebar-requirements-v2.md: Complete specification for new sidebar
- Add daisyui-drawer-pattern.md: DaisyUI pattern documentation
- Add umsetzung-sidebar.md: Step-by-step implementation guide
Testing:
- Add comprehensive component tests for all sidebar sub-components
- Add integration tests for sidebar state management and mobile drawer
- Extend accessibility tests (ARIA labels, roles, keyboard navigation)
- Add regression tests for duplicate IDs, hover effects, and tooltips
- Ensure full test coverage per specification requirements
Add translations for 'Current Cycle Payment Status' and 'Last Cycle
Payment Status'. Replace length/1 with Enum.empty?/1 in seeds tests
to fix Credo warnings.
Add member without membership fee type. Generate cycles for members
with fee types and set different statuses: all paid, all unpaid, and
mixed (paid/unpaid/suspended). Update tests accordingly.
Make cycle button match PaymentFilterComponent and Columns button style.
Show 'Current Cycle Payment Status' or 'Last Cycle Payment Status'
based on active state. Button shows active state when current cycle
is selected.
Ensure all members created in seeds are assigned to a membership fee type
using round-robin distribution. Add tests to verify all members have fee
types and each fee type has at least one member.
Replace paid_filter with cycle_status_filter that filters based on
membership fee cycle status (last or current cycle). Update
PaymentFilterComponent to use new filter with options All, Paid, Unpaid.
Remove membership fee status filter dropdown. Extend
filter_members_by_cycle_status/3 to support both paid and unpaid filtering.
Update toggle_cycle_view to preserve filter state in URL.
Remove paid field from Member resource, database migration,
tests, seeds, and UI. This field is no longer needed as payment
status is now tracked via membership fee cycles.
Change 'Payment Cycle' to 'Payment Interval' for accuracy.
Adjust width constraints to use min-w-* instead of fixed w-*
for better responsiveness. Use flex-wrap for better layout.
- Remove fuzzy markers from correctly translated strings
- Fix Edit Membership Fee Type translation
- All membership fee UI translations are now complete
- Add translations for all membership fee related UI elements
- Fix fuzzy translations for membership fee types and cycles
- Add translations for cycle management actions
- Add translations for membership fee status and filters
Change 'Save Custom field' to 'Save Custom Field' and
'Save Custom field value' to 'Save Custom Field Value' for consistency.
Update gettext files accordingly.
- Replace 4 LIKE checks with 2 in build_custom_field_filter
- Simplify CASE blocks in migration trigger functions
- ->> operator always returns text, no need for -> + ::text fallback
- Performance improvement: 50% fewer LIKE operations
- Group fields into Personal Data, Custom Fields, and Payment Data sections
- Fix WCAG AA contrast issues and semantic HTML (dt/dd in dl)
- Format mailto links with member name in href attribute
