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

backend/templates/forms/layouts/stacked.html

@@ -0,0 +1,106 @@
+{% comment %}
+Stacked Form Layout
+===================
+
+Renders form fields in a vertical stacked layout (default form layout).
+
+Purpose:
+    Provides a standard vertical form layout where each field takes
+    full width with labels above inputs.
+
+Usage Examples:
+    Basic form:
+        {% include 'forms/layouts/stacked.html' with form=form %}
+
+    With fieldsets:
+        {% include 'forms/layouts/stacked.html' with form=form show_fieldsets=True %}
+
+    Exclude fields:
+        {% include 'forms/layouts/stacked.html' with form=form exclude='password2' %}
+
+Parameters:
+    Required:
+    - form: Django form object
+
+    Optional:
+    - exclude: Comma-separated field names to exclude
+    - fields: Comma-separated field names to include (if set, only these are shown)
+    - show_fieldsets: Group fields by fieldset (default: False)
+    - show_help: Show help text (default: True)
+    - show_required: Show required indicator (default: True)
+    - submit_text: Submit button text (default: 'Submit')
+    - submit_class: Submit button CSS class (default: 'btn-primary')
+    - show_cancel: Show cancel button (default: False)
+    - cancel_url: URL for cancel button
+    - cancel_text: Cancel button text (default: 'Cancel')
+    - form_class: Additional CSS classes for form wrapper
+
+Dependencies:
+    - forms/partials/form_field.html
+    - forms/partials/field_error.html
+    - Tailwind CSS
+
+Accessibility:
+    - Uses fieldset/legend for grouped fields
+    - Labels properly associated with inputs
+    - Error summary at top for screen readers
+{% endcomment %}
+
+{% load common_filters %}
+
+{% with show_help=show_help|default:True show_required=show_required|default:True submit_text=submit_text|default:'Submit' %}
+
+<div class="form-layout-stacked {{ form_class }}">
+    {# Non-field errors at top #}
+    {% if form.non_field_errors %}
+    <div class="mb-4 p-4 rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800"
+         role="alert">
+        <div class="flex items-start gap-2">
+            <i class="fas fa-exclamation-circle text-red-500 mt-0.5" aria-hidden="true"></i>
+            <div>
+                <h3 class="text-sm font-medium text-red-800 dark:text-red-200">Please correct the following errors:</h3>
+                <ul class="mt-1 text-sm text-red-700 dark:text-red-300 list-disc list-inside">
+                    {% for error in form.non_field_errors %}
+                    <li>{{ error }}</li>
+                    {% endfor %}
+                </ul>
+            </div>
+        </div>
+    </div>
+    {% endif %}
+
+    {# Form fields #}
+    {% for field in form %}
+        {% if field.is_hidden %}
+            {{ field }}
+        {% elif fields %}
+            {# Only show specified fields #}
+            {% if field.name in fields %}
+                {% include 'forms/partials/form_field.html' with field=field show_help=show_help required_indicator=show_required %}
+            {% endif %}
+        {% elif exclude %}
+            {# Exclude specified fields #}
+            {% if field.name not in exclude %}
+                {% include 'forms/partials/form_field.html' with field=field show_help=show_help required_indicator=show_required %}
+            {% endif %}
+        {% else %}
+            {% include 'forms/partials/form_field.html' with field=field show_help=show_help required_indicator=show_required %}
+        {% endif %}
+    {% endfor %}
+
+    {# Form actions #}
+    {% if show_actions|default:True %}
+    <div class="flex items-center justify-end gap-3 mt-6 pt-4 border-t border-gray-200 dark:border-gray-700">
+        {% if show_cancel and cancel_url %}
+        <a href="{{ cancel_url }}" class="btn-secondary {{ cancel_class }}">
+            {{ cancel_text|default:'Cancel' }}
+        </a>
+        {% endif %}
+        <button type="submit" class="{{ submit_class|default:'btn-primary' }}">
+            {{ submit_text }}
+        </button>
+    </div>
+    {% endif %}
+</div>
+
+{% endwith %}