- Created static/css/components/feed-cards.css (280 lines):
* Comprehensive styles for feed/news cards
* Classes: .feed-header, .feed-stream, .feed-card, .feed-hd, .feed-ava
* Includes variants: compact, borderless, highlighted
* Responsive design with mobile breakpoints
* Replaces duplicated styles found in 6+ templates
- Created static/css/components/ios-search.css (160 lines):
* iOS-style search component
* Classes: .ios-search, .ios-search-input, .ios-search-clear
* Size variants: sm, lg
* Auto-showing clear button
* Replaces duplicated styles found in 4+ templates
- Updated static/css/components/index.css:
* Added imports for feed-cards.css and ios-search.css
* Added import for variables.css
* Provides single entry point for all CSS components
Benefits:
- Eliminates ~150 lines of duplicated CSS across templates
- Centralized styling for consistent UI
- Easy to maintain and update
- Uses CSS custom properties from variables.css
- Ready for use in new features
Next: Replace inline styles in templates with component imports
Tests: All 12 static file tests passing ✅
- Created static/js/components/listFilter.js:
* Universal list filtering component with search support
* Replaces duplicated applyFilter() functions found in 7 templates
* Features:
- Configurable match functions (default or custom)
- Debounced search input for performance
- Support for data-attribute matching
- Support for selector-based matching
- Optional empty state message
- Optional clear button
- Flexible hiding methods (display/class)
- Updated static/js/components/index.js:
* Exports ListFilter and helper functions
* Added createDataAttrMatcher() helper
* Added createSelectorMatcher() helper
Component ready for use in templates to replace inline applyFilter() implementations.
Tests: All 12 static file tests passing ✅
Next: Replace applyFilter() usage in templates with ListFilter component
