Experimental UI overhaul #256
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Header adapts interface based on current page type - Search pages show integrated SearchInterface component - Non-search pages maintain clean minimal header - Context-aware CSS styling for search vs non-search states - Enhanced responsive layout with centered search area
- Complete media search route with proper element - Simplify search-interface.css removing complex responsive overrides - Refine focus styles for input elements with primary border - Clean up CSS architecture for better maintainability - Add search-interface.css import to main CSS entry point
- Complete media search route with proper element - Simplify search-interface.css removing complex responsive overrides - Refine focus styles for input elements with primary border - Clean up CSS architecture for better maintainability - Add search-interface.css import to main CSS entry point
- PageToolbar as main container with responsive management - PageToolbarSection for logical tool groupings - PageToolbarButton with icon-over-label design pattern - PageToolbarSeparator for visual tool separation - PageToolbarOverflowMenuItem for responsive overflow handling
- useSmartToolbarLayout for intelligent responsive overflow management - Performance-optimized with measurement-based calculations - Priority-based tool hiding system (1=highest, 3=lowest) - ToolButton utility component for consistent button patterns
- Complete page-toolbar styling with responsive behavior - Icon-over-label button design following Radarr patterns - Smooth animations and transitions for overflow management - Mobile-first responsive design with touch-optimized targets - Design token integration throughout all components
- Context-aware SearchToolbar with intelligent tool selection - Enhanced Layout component supporting toolbar architecture - Radarr-style layout structure with header/toolbar/sidebar/content - Complete CSS import integration for all toolbar components - Search page detection and conditional toolbar rendering
- PageToolbarButton with icon-over-label design and state management - PageToolbarOverflowMenuItem for responsive overflow handling - PageToolbarSeparator for visual tool grouping and organization - Support for disabled, loading states and click handling
- Comprehensive page-toolbar-button styling with accessibility states - Clean separator styling for tool grouping - Utility tool-button styles for consistent button patterns - Advanced search-toolbar styles with overflow animations - Mobile-first responsive design with touch-optimized targets
- Enhanced page-layout structure with page-main-content container - Proper toolbar positioning and z-index management - Complete CSS import integration for all toolbar components - Flexible layout supporting header/toolbar/sidebar/content structure
- Add PageToolbarOverflowMenuItem for responsive overflow handling - Add PageToolbarSeparator for visual toolbar organization - Complete CSS system with separator, search-toolbar, and tool-button styles - Finalize comprehensive Radarr-inspired toolbar architecture - Mobile-first responsive design with accessibility compliance
- Add PageToolbarOverflowMenuItem for responsive overflow handling - Add PageToolbarSeparator for visual toolbar organization - Complete CSS system with separator, search-toolbar, and tool-button styles - Finalize comprehensive Radarr-inspired toolbar architecture - Mobile-first responsive design with accessibility compliance
- Always show theme toggle in header regardless of page type - Implement two-section toolbar layout (dynamic left, constant right) - Update button width calculations for more compact design (56px min-width) - Enhance separator styling with better color and positioning - Reorganize SearchToolbar tools by priority (View/Sort/Filter always visible) - Clean up CSS for consistent spacing and visual hierarchy
- Implement two-section toolbar layout (dynamic left, constant right) - Update button width calculations for more compact design (56px min-width) - Enhance separator styling with better color and positioning - Reorganize SearchToolbar tools by priority (View/Sort/Filter always visible) - Clean up CSS for consistent spacing and visual hierarchy
- Implement two-section toolbar layout (dynamic left, constant right) - Update button width calculations for more compact design (56px min-width) - Enhance separator styling with better color and positioning - Reorganize SearchToolbar tools by priority (View/Sort/Filter always visible) - Clean up CSS for consistent spacing and visual hierarchy
- Move Search components into dedicated Search/ directory - Move Toolbar components into dedicated ToolBar/ directory - Consolidate CSS into organized Toolbar/ directory structure - Update import paths in Layout and PageHeader components - Maintain component functionality while improving code organization
- Move Search components into dedicated Search/ directory - Move Toolbar components into dedicated ToolBar/ directory - Consolidate CSS into organized Toolbar/ directory structure - Update import paths across Layout, PageSidebar, and pages - Remove deprecated hooks and CSS files - Maintain component functionality while improving code organization
- Add comprehensive error boundary components (Page, Feature, Error page) - Enhance GlobalErrorContext and ToastContext with improved state management - Update App.jsx with refined provider hierarchy and error handling - Add dedicated error styling and dev page components - Consolidate CSS architecture with new error handling styles - Update main CSS index with improved component organization
…er protection - Add sophisticated PageErrorBoundary with multiple recovery options (retry, navigation, clipboard) - Implement FeatureErrorBoundary for component-level error isolation - Enhance App.jsx with comprehensive route-level error protection - Update Layout.jsx to integrate FeatureErrorBoundary around critical components - Enhance GlobalErrorContext and ToastContext with improved state management - Add ErrorTestPage for error boundary validation and development testing - Update documentation with comprehensive error handling architecture details - Add dedicated error styling and CSS organization improvements
…r directory - Move error boundary components into focused error/ directory structure - Remove deprecated ErrorBoundaryUsage.md documentation - Update ErrorBoundaryTest.jsx to work with new component organization - Maintain error handling functionality while improving code structure
- Move error components from ui/src/components/error/ to ui/src/components/ root level - Consolidate error boundaries into test-ui/src/components/error/ directory - Update import paths in test-ui App.jsx and Layout.jsx to use error/ directory - Enhance ErrorBoundaryTest.jsx to work with reorganized component structure - Update test-ui documentation to reflect new error component organization - Maintain error handling functionality while improving import clarity
- Add complete page implementations for all route endpoints (12+ pages) - Implement Spinner component with corresponding CSS styling - Update App.jsx with Splash dashboard page and refined route structure - Enhanced PageSidebar with 5-item navigation including Settings hierarchy - Update useSearchPageDetection hook for improved route awareness - Add spinner.css import to main CSS index for loading states - Implement utility constants directory for shared application data - Update documentation with advanced component organization and hook architecture - Establish foundation for full DAPS test UI functionality
- Add ApiTestPage with comprehensive API endpoint testing capabilities - Implement useApiData hook for consistent API data fetching patterns - Create dedicated API utilities directory with client architecture - Add api-test.css for API testing page styling and layout - Update App.jsx with new /dev/api-test route and error boundary - Update CSS index with pages directory import for organized styling - Enhance backend jobs.py with improved error handling and logging - Update test-ui documentation with comprehensive development guide and canary check
…okens - Update dark theme with improved contrast ratios and color consistency - Refine light theme with better visual hierarchy and readability - Maintain WCAG 2.1 AA compliance across both theme variants - Ensure consistent color token usage throughout design system
…ttings integration - Add complete field registry system with input, select, checkbox, textarea, and custom components - Implement FormBuilder with schema-driven form generation and validation - Create DapsSettingsPage with real DAPS configuration form integration - Add FormTestPage for comprehensive form system testing and validation - Establish form styling architecture with dedicated CSS components - Add FORM-SYSTEM-CONTEXT documentation for development guidance - Update App.jsx with new development routes for settings and form testing - Create user acceptance test HTML for form functionality validation - Implement field-level validation with error state management
…theme integration - Enhance NumberField and PasswordField with improved validation and accessibility - Add comprehensive field placeholder system for incomplete field types - Refine CheckboxField with better state management and styling - Update FormRenderer with enhanced error handling and layout options - Expand base CSS with improved form foundation styles - Enhance form component CSS with consistent field styling patterns - Add comprehensive form input system with hover, focus, and disabled states - Update dark/light themes with complete form input color system and opacity variants - Enhance DapsSettingsPage with field completion tracking and progress visualization - Add field type implementation status with visual indicators and statistics
…rst design system - Reorganize CSS into semantic directory structure (ui/, layout/, search/, error/, forms/) - Implement utility-first CSS system with form-utilities and list-utilities - Migrate all component CSS to utility-based architecture with proper cascade layers - Add comprehensive dev page styles in dedicated dev/ directory - Update form components to use utility classes with component-specific extensions - Enhance ErrorTestPage with detailed error demonstration sections and improved UX - Add SettingsTestPage (renamed from DapsSettingsPage) for better development organization - Update App.jsx with SettingsTestPage route and complete dev page coverage - Maintain design token consistency while improving maintainability and scalability
…sign consistency - Migrate all components to use unified .btn .btn--variant .btn--size class system - Update error boundary components with consistent button styling and accessibility - Replace custom button styles with unified system in all form fields and placeholders - Add dedicated field-color-list.css for improved color list field styling - Update FormRenderer and NumberField with unified button classes and proper semantics - Enhance ApiTestPage with unified button system for consistent development tools - Maintain component-specific styling extensions while using unified button foundation - Improve accessibility with consistent button patterns across entire application
utils architecture Move FormRenderer and validation utilities to centralized utils/forms/ directory for better modularity and reusability across components
Clean up obsolete FormRenderer, validation utilities, FormTestPage, and user acceptance test artifacts following architecture consolidation
- Remove search-specific toolbar conditional rendering - Replace SearchToolbar with generic PageToolbar component - Add ToolbarProvider wrapper around Layout content - Remove useSearchPageDetection hook usage from Layout - Remove handleToolAction callback specific to search - Simplify Layout by delegating toolbar logic to context - Maintain same toolbar positioning and error boundary protection
- Replace inline Button components with ToolBar in GeneralSettingsPage - Replace inline Button components with ToolBar in UISettingsPage - Replace inline Button components with ToolBar in ModuleSettingsPage - Register toolbar content via useToolbar hook in all settings pages - Remove save/reset buttons from PageHeader actions prop - Move all action buttons to toolbar for consistent UX - Add toolbar cleanup on component unmount - Maintain existing save/reset functionality and keyboard shortcuts
- Add warning, info, muted, surface variants to ButtonBase - Add utility class overrides: bgClass, textClass, sizeClass, hoverClass - Implement override precedence: variant → utility override → className - Separate bg/text/size/hover into independent override props - Add comprehensive JSDoc with usage examples and precedence rules - Pass utility overrides through Button component to ButtonBase - Update InstanceCard to use warning variant for Edit button - Maintain backward compatibility with existing variant API - Add PropTypes validation for all new props and variants
- Add GET /api/notifications to retrieve all module notifications
- Add GET /api/notifications/{module_id} for module-specific notifications
- Add POST /api/notifications to create/update notification config
- Add DELETE /api/notifications/{module_id} to remove configurations
- Validate module names against MODULES registry
- Add NotificationUpdateRequest Pydantic schema
- Import save_config and load_config for configuration persistence
- Extend existing test endpoint with full CRUD capabilities
- Add automatic cleanup of jobs older than 7 days on worker initialization - Clean both 'success' and 'error' status jobs from jobs table - Log cleanup summary with count of deleted jobs - Prevent job table bloat in long-running deployments - Maintain webhook jobs separately (no cleanup)
- Create NotificationCard component for service config display - Add ServiceIcon component for Discord, Notifiarr, Email icons - Create notificationsAPI client with fetch, create, update, delete methods - Add NOTIFICATIONS_SCHEMA with service-specific field definitions - Implement test notification functionality per service - Add 5-minute cache TTL for notification requests - Support Discord (webhook), Notifiarr (API key), Email (SMTP) services
- Create NotificationsPage with module-based notification management - Add real notificationsAPI integration for fetch/create/update/delete - Implement test notification functionality with toast feedback - Add loading and error states for API operations - Use ToolBar component for Save/Reset actions via toolbar registration - Support per-module, per-service notification configuration - Add keyboard shortcuts (Ctrl+S save, Ctrl+R reset) - Display notifications grouped by module with NotificationCard components
- Add notifications route to App.jsx with PageErrorBoundary - Export notificationsAPI from API index for consolidated access - Export ServiceIcon and Modal from UI component index - Add Material Symbols Rounded font to index.html for icon variants - Refine Layout component indentation and structure - Add Phase 5 completion note to App.jsx documentation - Minor formatting cleanup in ModuleSettingsPage and useApiData
- Move Accordion and AccordionItem to ui/ directory for better organization - Move Modal to dedicated modals/ directory for consistency - Move PageToolbar to ToolBar/ directory with related components - Update all import paths across components and pages - Remove redundant code comments for cleaner readability - Add humanize utility integration to InstancesPage and NotificationCard - Implement notification edit and delete modals (complete CRUD workflow) - Implement notification test functionality with toast feedback - Add ServiceIcon integration to InstancesPage for consistent icon rendering - Clean up FormContext, useApiData, and StatValue implementations
system with primitive composition - Implement 6 semantic log primitives (LogLevel, LogDateTime, LogFilePath, LogNumber, LogQuoted, LogHighlight) - Add 5 control toolbar components (ModuleSelect, LogFileSelect, SearchInput, ActionButtons, CollapseButton) - Create LogControls compound component with context-based composition - Follow composition-first architecture matching DAPS field system patterns - Enable semantic syntax highlighting with color-coded log levels - Support collapsible control toolbar with keyboard shortcuts - Provide barrel exports for clean component imports
file-based access model - Replace complex streaming/alerting API with simple file access - Add fetchLogModules for module listing - Add fetchLogFiles for file retrieval by module - Add fetchLogContent for text content fetching (direct fetch, not JSON) - Add getLogDownloadUrl for browser download support - Add uploadLogToPaste for external dpaste.com sharing - Remove unused streaming, alerting, and statistics endpoints - Reduce API surface from 266 lines to 117 lines - Focus on core file viewing functionality
real-time monitoring - Create Logs page composing LogControls and log display primitives - Integrate useLogModules, useLogFiles, useLogContent hooks - Support module/file selection with dropdown navigation - Enable search highlighting and auto-refresh polling - Add download and upload (dpaste) functionality - Implement responsive layout with collapsible controls - Provide comprehensive error handling and loading states
validation page - Create /dev/log-performance route for performance testing - Enable isolated testing of log rendering with large datasets - Validate primitive composition performance - Support manual performance regression testing - Follow established /dev/* route pattern
routing - Replace placeholder logs route with production Logs page - Add /dev/log-performance test route with PageErrorBoundary - Import Logs page and LogPerformance test page - Update logs route description to 'Real-time log viewer with search and download' - Maintain consistent PageErrorBoundary wrapping for all routes - Follow established routing patterns
…ents - Format NotificationCard, ServiceIcon with proper line breaks - Apply consistent formatting to InstancesPage and NotificationsPage - Improve code readability with multi-line JSX where appropriate - Maintain functionality while adhering to Prettier 100-char width rule - No logic changes, formatting only"
SelectBase to support children pattern - Add support for both options array and children patterns - Enable <SelectBase><option>...</option></SelectBase> usage - Maintain backward compatibility with options prop - Update JSDoc with dual usage pattern documentation - Provide flexibility for custom option rendering
responsive layout system for log controls - Add viewport-aware layout switching at 1200px breakpoint - Stacked layout for narrow viewports (full-width rows with collapse toggle) - Horizontal layout for wide viewports (single-row with flex wrapping) - Integrate UIStateContext for viewport detection - Improve JSDoc documentation with layout mode descriptions
LogFileSelect to SelectBase primitive - Replace raw select element with SelectBase primitive - Remove manual styling classes in favor of primitive's built-in styles - Add JSDoc documentation noting SelectBase usage - Maintain all functionality with composition-first architecture
SearchInput to InputBase primitive - Replace raw input element with InputBase primitive - Simplify className (primitive handles base styling) - Add JSDoc documentation noting InputBase usage - Maintain clear button positioning with pr-10 utility
React import to ActionButtons - Add React import for consistency with project standards - Resolve potential linting issues
class - Hide scrollbar while maintaining scroll functionality - Cross-browser support (Firefox, Chrome, Safari, IE/Edge) - Cleaner visual appearance for scrollable containers
class and apply scrollbar-hidden utility - Fix typo in border class (border-defaul → border-divider) - Apply scrollbar-hidden utility for cleaner log output display - Consistent border styling across empty and populated states
responsive layout system for log controls - Add viewport-aware layout switching at 1200px breakpoint - Stacked layout for narrow viewports (full-width rows with collapse toggle) - Horizontal layout for wide viewports (single-row with flex wrapping) - Integrate UIStateContext for viewport detection - Improve JSDoc documentation with layout mode descriptions
LogFileSelect to SelectBase primitive - Replace raw select element with SelectBase primitive - Remove manual styling classes in favor of primitive's built-in styles - Add JSDoc documentation noting SelectBase usage - Maintain all functionality with composition-first architecture
React imports to log control components - Add React import to ModuleSelect for JSX transformation - Add React import to CollapseButton for JSX transformation - Fix file permissions for log control components (644→755) - Ensures compatibility with React 17+ JSX transform
- Set executable bit for 329 project files (644→755) - Includes backend API files, test-ui components, and utilities - Ensures consistent file permissions across development environments - No functional changes - permissions normalization only
- Merge test-ui and ui into single frontend/ directory
- Adopt test-ui's composition-first architecture as foundation
- Update Makefile to point to frontend/ instead of ui/
- Preserve 240 source files from test-ui architecture:
- 8 field primitives composing into 28+ field types
- FormContext with Form.Section/Header/Actions compounds
- ToolBar compound component system
- Error boundary primitives
- Complete CSS utility system with layers
- Remove deprecated dual-frontend structure (test-ui + ui)
- Maintain all development tooling (ESLint, Prettier, Stylelint)
- Keep 14 /dev/* test routes for component development
- React 19.1.1 + Vite 6.0.0 + React Router 7.7.0 stack
- Port remains 5174 with API proxy to localhost:8000
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Complete frontend architecture overhaul that consolidates the dual UI system into a unified
composition-first architecture built on React 19.1.1. This PR represents 262 commits of systematic
frontend reconstruction, eliminating architectural debt while establishing professional development
patterns for DAPS.