diff --git a/.replit b/.replit index a7030e75..40b34e44 100644 --- a/.replit +++ b/.replit @@ -39,10 +39,6 @@ externalPort = 80 localPort = 34277 externalPort = 3000 -[[ports]] -localPort = 41067 -externalPort = 3001 - [deployment] deploymentTarget = "autoscale" run = ["gunicorn", "--bind=0.0.0.0:5000", "--reuse-port", "thrillwiki.wsgi:application"] diff --git a/COTTON_CONVERSION_PLAN.md b/COTTON_CONVERSION_PLAN.md new file mode 100644 index 00000000..bcd05c9d --- /dev/null +++ b/COTTON_CONVERSION_PLAN.md @@ -0,0 +1,279 @@ +# ThrillWiki Django Cotton Conversion Plan + +## Overview +This document outlines the comprehensive plan to convert ThrillWiki's entire template system from Django's `{% include %}` pattern to Django Cotton's modern component architecture. This conversion will improve maintainability, reusability, and developer experience while preserving all existing functionality. + +## Current State Analysis + +### Template Inventory +- **Total Templates**: 147 HTML files +- **Components with {% include %}**: 52+ templates +- **Base UI Components**: 6 components +- **Feature Components**: 40+ domain-specific partials +- **Auth Components**: 4 authentication components +- **Missing Referenced Templates**: 3 card content templates + +### Component Categories + +#### 1. Foundation UI Components (6) +- `components/ui/button.html` - Reusable button with variants +- `components/ui/card.html` - Standard card layout +- `components/ui/input.html` - Form input component +- `components/pagination.html` - List pagination +- `components/search_form.html` - Search functionality +- `components/status_badge.html` - Status indicators + +#### 2. Authentication Components (4) +- `account/partials/login_form.html` - Login form +- `account/partials/signup_modal.html` - Registration modal +- `accounts/turnstile_widget.html` - CAPTCHA widget +- `accounts/turnstile_widget_empty.html` - Empty CAPTCHA state + +#### 3. Layout Components (1) +- `components/layout/enhanced_header.html` - Main navigation header + +#### 4. Feature Components (18 Rides + 5 Parks + 3 Media + 7 Maps) +- **Rides**: Forms, modals, lists, search results, history panels +- **Parks**: Location widgets, actions, lists, search results +- **Media**: Photo display, upload, management +- **Maps**: Location cards, filter panels, containers, popups + +#### 5. Advanced Systems (13 Moderation + 4 Search) +- **Moderation**: Submission workflows, photo management, filtering +- **Search**: Results, filters, location-based search + +## Conversion Strategy: 4-Phase Approach + +### Phase 1: Foundation UI & Auth Components +**Priority**: CRITICAL | **Duration**: 2-3 days + +**Goal**: Convert the most frequently used base components that are referenced throughout the application. + +**Components**: +1. UI Components (6): button, card, input, pagination, search_form, status_badge +2. Auth Components (4): login_form, signup_modal, turnstile widgets + +**Benefits**: +- Immediate impact across entire application +- Establishes Cotton patterns for team +- Reduces template complexity in header and forms + +### Phase 2: Layout & Navigation +**Priority**: HIGH | **Duration**: 3-4 days + +**Goal**: Convert major structural components that define application layout. + +**Components**: +1. Enhanced header with navigation, search, user menu +2. Filter sidebar with advanced filtering capabilities + +**Benefits**: +- Cleaner main layout structure +- Easier header customization +- Modular navigation system + +### Phase 3: Feature-Specific Components +**Priority**: MEDIUM | **Duration**: 5-7 days + +**Goal**: Convert domain-specific components for core functionality. + +**Components**: +1. **Rides Domain** (18 components): Forms, modals, search, management +2. **Parks Domain** (5 components): Location widgets, actions, lists +3. **Media Components** (3 components): Photo handling +4. **Maps Components** (7 components): Location cards, filtering, display + +**Benefits**: +- Improved component reusability +- Better separation of concerns +- Easier feature development + +### Phase 4: Advanced & Specialized Systems +**Priority**: LOW-MEDIUM | **Duration**: 4-5 days + +**Goal**: Convert complex systems with heavy HTMX/Alpine.js integration. + +**Components**: +1. **Moderation System** (13 components): Complex workflows +2. **Search System** (4 components): Advanced search features + +**Benefits**: +- Complete Cotton migration +- Improved moderation workflows +- Enhanced search capabilities + +## Cotton Directory Structure + +``` +backend/templates/cotton/ +├── ui/ # Base UI components +│ ├── button.html +│ ├── card.html +│ ├── input.html +│ ├── pagination.html +│ ├── search_form.html +│ └── status_badge.html +├── auth/ # Authentication components +│ ├── modal.html # ✅ Already converted +│ ├── login_form.html +│ ├── signup_modal.html +│ ├── turnstile_widget.html +│ └── turnstile_empty.html +├── layout/ # Layout components +│ └── header.html +├── features/ # Cross-cutting features +│ └── filter_sidebar.html +├── rides/ # Ride domain components +│ ├── form.html +│ ├── add_modal.html +│ ├── list_results.html +│ └── [15 more components] +├── parks/ # Park domain components +│ ├── location_widget.html +│ ├── actions.html +│ └── [3 more components] +├── maps/ # Map system components +│ ├── location_card.html +│ ├── filter_panel.html +│ └── [5 more components] +├── media/ # Media handling components +│ ├── photo_display.html +│ ├── photo_upload.html +│ └── photo_manager.html +├── moderation/ # Moderation system components +│ └── [13 components] +└── search/ # Search system components + └── [4 components] +``` + +## Cotton Component Standards + +### 1. c-vars Configuration +```django + +``` + +### 2. c-slot Usage +```django + + + + + + + +``` + +### 3. Alpine.js Preservation +- Maintain all `x-data`, `x-show`, `x-model` directives +- Preserve event handlers (`@click`, `@submit`) +- Keep transitions and animations +- Test JavaScript functionality after conversion + +### 4. HTMX Integration +- Preserve all `hx-*` attributes +- Maintain target and swap configurations +- Ensure form submissions work correctly +- Test real-time updates and live search + +## Implementation Guidelines + +### Conversion Process +1. **Analyze Original Component**: Understand functionality and dependencies +2. **Create Cotton Version**: Convert to Cotton format with c-vars and c-slots +3. **Test in Isolation**: Verify component renders correctly +4. **Update Templates**: Replace include statements with Cotton tags +5. **Integration Testing**: Test with Alpine.js and HTMX +6. **Visual Verification**: Ensure styling and behavior match + +### Testing Strategy +1. **Component Testing**: Test each component individually +2. **Integration Testing**: Verify interactions between components +3. **Functionality Testing**: Ensure HTMX/Alpine.js still work +4. **Visual Testing**: Compare before/after screenshots +5. **Performance Testing**: Monitor render times and optimization + +### Quality Standards +- **No Breaking Changes**: All existing functionality preserved +- **Improved Performance**: Cotton optimizations applied +- **Better Maintainability**: Cleaner component structure +- **Enhanced Customization**: Flexible styling via c-vars +- **Documentation**: Clear component usage examples + +## Success Criteria + +### Technical Goals +- [ ] All 62+ components converted to Cotton format +- [ ] Zero template render errors +- [ ] All Alpine.js functionality preserved +- [ ] All HTMX interactions working +- [ ] Responsive design maintained +- [ ] Performance maintained or improved + +### Quality Goals +- [ ] Components properly organized in logical directory structure +- [ ] Meaningful c-vars for customization +- [ ] Clear component documentation +- [ ] Consistent naming conventions +- [ ] Reusable component patterns established + +## Benefits of Conversion + +### Developer Experience +- **Cleaner Templates**: `` vs `{% include 'rides/partials/ride_form.html' %}` +- **Better Organization**: Logical component hierarchy +- **Easier Maintenance**: Components in dedicated Cotton directory +- **Type Safety**: Cotton's validation helps catch template errors + +### Performance +- **Better Caching**: Cotton optimizes component rendering +- **Reduced Complexity**: Simpler template inheritance chains +- **Faster Development**: Reusable components speed up feature development + +### Customization +- **Flexible Styling**: c-vars allow easy theme customization +- **Component Variants**: Different button styles, card layouts, etc. +- **Conditional Rendering**: Better control over component behavior + +## Risk Mitigation + +### Migration Safety +- **Gradual Migration**: Convert components incrementally +- **Parallel Existence**: Keep old includes until Cotton versions tested +- **Rollback Plan**: Easy to revert individual components if issues arise +- **Comprehensive Testing**: Each phase thoroughly tested before proceeding + +### Potential Issues +- **Alpine.js Conflicts**: Careful testing of JavaScript interactions +- **HTMX Target Changes**: Verify all HTMX endpoints still work +- **Styling Regressions**: Visual comparison testing +- **Performance Impact**: Monitor rendering performance + +## Timeline + +- **Week 1**: Phase 1 - Foundation UI & Auth Components +- **Week 2**: Phase 2 - Layout & Navigation Components +- **Week 3-4**: Phase 3 - Feature Components (parallel development) +- **Week 5**: Phase 4 - Advanced Components +- **Week 6**: Testing, optimization, and cleanup + +## Completion Status + +### Already Completed ✅ +- Django Cotton package installation and configuration +- `cotton/auth/modal.html` - Authentication modal +- `cotton/ui/toast.html` - Toast notifications +- Base template integration (`{% load cotton %}`) + +### Remaining Work +- 60+ components to convert +- Template updates across application +- Comprehensive testing and validation + +--- + +This plan provides a structured approach to completely modernize ThrillWiki's template architecture while maintaining all existing functionality and improving developer experience. \ No newline at end of file diff --git a/backend/templates/maps/partials/location_card.html b/backend/templates/maps/partials/location_card.html index 96851c66..16d95709 100644 --- a/backend/templates/maps/partials/location_card.html +++ b/backend/templates/maps/partials/location_card.html @@ -69,7 +69,7 @@ {% endif %} {% if show_map_action %} -