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

backend/templates/forms/layouts/inline.html

@@ -0,0 +1,149 @@
+{% comment %}
+Inline Form Layout
+==================
+
+Renders form fields horizontally with labels inline with inputs.
+
+Purpose:
+    Provides an inline/horizontal form layout where labels appear
+    to the left of inputs on larger screens.
+
+Usage Examples:
+    Basic inline form:
+        {% include 'forms/layouts/inline.html' with form=form %}
+
+    Custom label width:
+        {% include 'forms/layouts/inline.html' with form=form label_width='w-1/4' %}
+
+Parameters:
+    Required:
+    - form: Django form object
+
+    Optional:
+    - exclude: Comma-separated field names to exclude
+    - fields: Comma-separated field names to include
+    - label_width: Label column width class (default: 'w-1/3')
+    - 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
+    - form_class: Additional CSS classes for form wrapper
+
+Dependencies:
+    - forms/partials/form_field.html
+    - Tailwind CSS
+
+Accessibility:
+    - Labels properly associated with inputs
+    - Responsive - stacks on mobile
+{% endcomment %}
+
+{% load common_filters %}
+
+{% with show_help=show_help|default:True show_required=show_required|default:True label_width=label_width|default:'w-1/3' submit_text=submit_text|default:'Submit' %}
+
+<div class="form-layout-inline {{ form_class }}">
+    {# Non-field errors #}
+    {% 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">
+        <ul class="text-sm text-red-700 dark:text-red-300 space-y-1">
+            {% for error in form.non_field_errors %}
+            <li class="flex items-start gap-2">
+                <i class="fas fa-exclamation-circle mt-0.5" aria-hidden="true"></i>
+                {{ error }}
+            </li>
+            {% endfor %}
+        </ul>
+    </div>
+    {% endif %}
+
+    {# Form fields - inline layout #}
+    {% for field in form %}
+        {% if field.is_hidden %}
+            {{ field }}
+        {% elif fields %}
+            {% if field.name in fields %}
+                <div class="mb-4 sm:flex sm:items-start">
+                    <label for="{{ field.id_for_label }}"
+                           class="block mb-1 sm:mb-0 sm:{{ label_width }} sm:pt-2 sm:pr-4 sm:text-right text-sm font-medium text-gray-700 dark:text-gray-300">
+                        {{ field.label }}
+                        {% if show_required and field.field.required %}
+                        <span class="text-red-500" aria-hidden="true">*</span>
+                        {% endif %}
+                    </label>
+                    <div class="flex-1">
+                        {{ field|add_class:'w-full px-3 py-2 text-sm border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white' }}
+                        {% if field.errors %}
+                        {% include 'forms/partials/field_error.html' with errors=field.errors %}
+                        {% endif %}
+                        {% if show_help and field.help_text %}
+                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">{{ field.help_text }}</p>
+                        {% endif %}
+                    </div>
+                </div>
+            {% endif %}
+        {% elif exclude %}
+            {% if field.name not in exclude %}
+                <div class="mb-4 sm:flex sm:items-start">
+                    <label for="{{ field.id_for_label }}"
+                           class="block mb-1 sm:mb-0 sm:{{ label_width }} sm:pt-2 sm:pr-4 sm:text-right text-sm font-medium text-gray-700 dark:text-gray-300">
+                        {{ field.label }}
+                        {% if show_required and field.field.required %}
+                        <span class="text-red-500" aria-hidden="true">*</span>
+                        {% endif %}
+                    </label>
+                    <div class="flex-1">
+                        {{ field|add_class:'w-full px-3 py-2 text-sm border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white' }}
+                        {% if field.errors %}
+                        {% include 'forms/partials/field_error.html' with errors=field.errors %}
+                        {% endif %}
+                        {% if show_help and field.help_text %}
+                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">{{ field.help_text }}</p>
+                        {% endif %}
+                    </div>
+                </div>
+            {% endif %}
+        {% else %}
+            <div class="mb-4 sm:flex sm:items-start">
+                <label for="{{ field.id_for_label }}"
+                       class="block mb-1 sm:mb-0 sm:{{ label_width }} sm:pt-2 sm:pr-4 sm:text-right text-sm font-medium text-gray-700 dark:text-gray-300">
+                    {{ field.label }}
+                    {% if show_required and field.field.required %}
+                    <span class="text-red-500" aria-hidden="true">*</span>
+                    {% endif %}
+                </label>
+                <div class="flex-1">
+                    {{ field|add_class:'w-full px-3 py-2 text-sm border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white' }}
+                    {% if field.errors %}
+                    {% include 'forms/partials/field_error.html' with errors=field.errors %}
+                    {% endif %}
+                    {% if show_help and field.help_text %}
+                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">{{ field.help_text }}</p>
+                    {% endif %}
+                </div>
+            </div>
+        {% endif %}
+    {% endfor %}
+
+    {# Form actions - aligned with inputs #}
+    {% if show_actions|default:True %}
+    <div class="sm:flex sm:items-center mt-6 pt-4 border-t border-gray-200 dark:border-gray-700">
+        <div class="sm:{{ label_width }}"></div>
+        <div class="flex-1 flex items-center justify-start gap-3">
+            <button type="submit" class="{{ submit_class|default:'btn-primary' }}">
+                {{ submit_text }}
+            </button>
+            {% if show_cancel and cancel_url %}
+            <a href="{{ cancel_url }}" class="btn-secondary">
+                {{ cancel_text|default:'Cancel' }}
+            </a>
+            {% endif %}
+        </div>
+    </div>
+    {% endif %}
+</div>
+
+{% endwith %}