- Documented common.css (245 lines of shared classes)
- Explained dependency hierarchy: variables → common → feed-cards → components
- Added import order guidelines (critical for correct rendering)
- Documented naming conventions: BEM-like with prefixes
- Listed all eliminated duplication (.btn-icon, .badge-status, .chip, etc.)
- Added maintenance checklists and troubleshooting
- Preserved old README as README_OLD.md
Architecture now clear for all developers:
- Check common.css first before creating new classes
- Use variables.css for all sizing/colors
- Follow import order: variables → common → components
- 0% duplication, 100% maintainability
- Created static/css/components/base-app.css (280 lines)
* Layout system (sidebar, navbar, rightbar)
* Base typography and form controls
* Notification bell, mobile FAB
* Feed elements and ghost buttons
* Alpha headers and action buttons
- Created static/css/components/ios-components.css (440 lines)
* iOS-style cards, lists, and cells
* Avatars, badges, chips
* Collapse triggers and accordions
* Department inline editor
* Skills UI, activity block
* Icon button variants
- Removed 380 lines of inline styles from base.html
- All tests passing (17 OK)
- Created static/js/components/teamWheel.js (329 lines)
- Replaced 207-line inline script in department_scripts.html with ES6 module import
- Features: auto-scroll, manual control (mouse/touch/wheel), member focus, fallback
- All 12 tests passing
- 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
