Add standardized HTMX conventions, interaction patterns, and migration guide for ThrillWiki UX

backend/templates/components/status_badge.html

@@ -1,22 +1,86 @@
 {% comment %}
-Reusable status badge component with consistent styling.
-Usage: {% include 'components/status_badge.html' with status="OPERATING" %}
-Usage (clickable): {% include 'components/status_badge.html' with status="OPERATING" clickable=True %}
+Status Badge Component
+======================
+
+A unified, reusable status badge component for parks, rides, and other entities.
+
+Purpose:
+    Displays a status badge with consistent styling across the application.
+    Supports both static display and interactive HTMX-powered refresh.
+
+Usage Examples:
+    Basic badge (uses park_tags for config):
+        {% include 'components/status_badge.html' with status='OPERATING' %}
+
+    Clickable badge:
+        {% include 'components/status_badge.html' with status='OPERATING' clickable=True %}
+
+    Interactive badge with HTMX (for moderators):
+        {% include 'components/status_badge.html' with status=park.status badge_id='park-header-badge' refresh_url=park_badge_url refresh_trigger='park-status-changed' scroll_target='park-status-section' can_edit=perms.parks.change_park %}
+
+    Manual status display (without park_tags config lookup):
+        {% include 'components/status_badge.html' with status=obj.status status_display=obj.get_status_display manual_mode=True %}
+
+    Manual mode with custom classes:
+        {% include 'components/status_badge.html' with status=obj.status status_display=obj.get_status_display status_classes='bg-blue-100 text-blue-800' manual_mode=True %}
+
+Parameters:
+    Required:
+    - status: The status value (e.g., 'OPERATING', 'CLOSED_TEMP')
+
+    Optional (auto mode - uses park_tags):
+    - clickable: Enable click interactions (default: False)
+
+    Optional (HTMX mode):
+    - badge_id: ID for HTMX targeting
+    - refresh_url: URL for HTMX refresh on trigger
+    - refresh_trigger: HTMX trigger event name (e.g., 'park-status-changed')
+    - scroll_target: Element ID to scroll to on click
+    - can_edit: Whether user can edit/click the badge (default: False)
+
+    Optional (manual mode):
+    - manual_mode: Use status_display instead of park_tags config lookup (default: False)
+    - status_display: Human-readable status text (used when manual_mode=True)
+    - status_classes: CSS classes for badge styling (default: 'bg-gray-100 text-gray-800')
+
+    Optional (styling):
+    - size: Size variant 'sm', 'md', 'lg' (default: 'md')
+
+Status Classes (auto mode - defined in park_tags):
+    - OPERATING: Green (bg-green-100 text-green-800)
+    - CLOSED_TEMP: Yellow (bg-yellow-100 text-yellow-800)
+    - CLOSED_PERM: Red (bg-red-100 text-red-800)
+    - CONSTRUCTION: Orange (bg-orange-100 text-orange-800)
+    - DEMOLISHED: Gray (bg-gray-100 text-gray-800)
+    - RELOCATED: Purple (bg-purple-100 text-purple-800)
+    - SBNO: Amber (bg-amber-100 text-amber-800)
+
+Dependencies:
+    - park_tags template tags (for get_status_config filter, only needed in auto mode)
+    - HTMX (optional, for interactive features)
+    - Font Awesome icons (for dropdown indicator)
+
+Accessibility:
+    - Uses semantic button or span based on interactivity
+    - Provides appropriate focus states
+    - Uses color + text for status indication
 {% endcomment %}
 
 {% load park_tags %}
 
-{% with status_config=status|get_status_config %}
-<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ status_config.classes }}
-             {% if clickable %}cursor-pointer transition-all hover:ring-2 hover:ring-blue-500{% endif %}">
-    {% if status_config.icon %}
-    <svg class="-ml-0.5 mr-1.5 h-2 w-2" fill="currentColor" viewBox="0 0 8 8">
-        <circle cx="4" cy="4" r="3" />
-    </svg>
-    {% endif %}
-    {{ status_config.label }}
-    {% if clickable %}
-    <i class="fas fa-chevron-down ml-1.5 text-xs"></i>
-    {% endif %}
-</span>
+{# Determine sizing classes #}
+{% with size=size|default:'md' %}
+{% if size == 'sm' %}
+    {% with size_classes='px-2 py-0.5 text-xs' icon_size='h-1.5 w-1.5' %}
+        {% include 'components/status_badge_inner.html' %}
+    {% endwith %}
+{% elif size == 'lg' %}
+    {% with size_classes='px-4 py-1.5 text-sm' icon_size='h-2.5 w-2.5' %}
+        {% include 'components/status_badge_inner.html' %}
+    {% endwith %}
+{% else %}
+    {% with size_classes='px-2.5 py-0.5 text-xs' icon_size='h-2 w-2' %}
+        {% include 'components/status_badge_inner.html' %}
+    {% endwith %}
+{% endif %}
 {% endwith %}