Integrate Django Cotton for modular frontend components

Integrates django-cotton into the project by adding it to INSTALLED_APPS and pyproject.toml, and refactors base.html to use cotton components for the auth modal and toast container, creating new component files for these elements.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: eff39de1-3afa-446d-a965-acaf61837fc7
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/d6d61dac-164d-45dd-929f-7dcdfd771b64/eff39de1-3afa-446d-a965-acaf61837fc7/jGCMVeA

backend/templates/cotton/ui/toast.html

@@ -0,0 +1,76 @@
+{% comment %}
+Cotton Toast Container Component
+Converts the existing toast container to use Django Cotton's component system
+{% endcomment %}
+
+{% load static %}
+
+<!-- Cotton Toast Container Component -->
+<c-vars
+  container_classes="{{ container_classes|default:'fixed top-4 right-4 z-50 space-y-2 max-w-sm' }}"
+  toast_classes="{{ toast_classes|default:'p-4 rounded-lg shadow-lg border backdrop-blur-sm transition-all duration-300 flex items-start gap-3' }}"
+  icon_classes="{{ icon_classes|default:'w-5 h-5 flex-shrink-0 mt-0.5' }}"
+  content_classes="{{ content_classes|default:'flex-grow min-w-0' }}"
+  close_classes="{{ close_classes|default:'p-1 hover:bg-black/10 rounded transition-colors flex-shrink-0' }}"
+  progress_classes="{{ progress_classes|default:'absolute bottom-0 left-0 h-1 bg-current opacity-30 transition-all duration-100 ease-linear' }}"
+/>
+
+<div 
+  x-data="{}"
+  x-show="$store.toast.toasts.length > 0"
+  x-cloak
+  class="{{ container_classes }}"
+>
+  <template x-for="toast in $store.toast.toasts" :key="toast.id">
+    <div
+      x-show="toast.visible"
+      x-transition:enter="transition ease-out duration-300"
+      x-transition:enter-start="transform opacity-0 scale-95 translate-x-full"
+      x-transition:enter-end="transform opacity-100 scale-100 translate-x-0"
+      x-transition:leave="transition ease-in duration-200"
+      x-transition:leave-start="transform opacity-100 scale-100 translate-x-0"
+      x-transition:leave-end="transform opacity-0 scale-95 translate-x-full"
+      class="{{ toast_classes }}"
+      :class="{
+        'bg-green-50 border-green-200 text-green-800': toast.type === 'success',
+        'bg-red-50 border-red-200 text-red-800': toast.type === 'error',
+        'bg-blue-50 border-blue-200 text-blue-800': toast.type === 'info',
+        'bg-yellow-50 border-yellow-200 text-yellow-800': toast.type === 'warning'
+      }"
+    >
+      <!-- Toast Icon -->
+      <div class="{{ icon_classes }}">
+        <i 
+          :class="{
+            'fas fa-check-circle text-green-600': toast.type === 'success',
+            'fas fa-exclamation-circle text-red-600': toast.type === 'error',
+            'fas fa-info-circle text-blue-600': toast.type === 'info',
+            'fas fa-exclamation-triangle text-yellow-600': toast.type === 'warning'
+          }"
+        ></i>
+      </div>
+
+      <!-- Toast Content -->
+      <div class="{{ content_classes }}">
+        <p class="font-medium text-sm" x-text="toast.message"></p>
+        <p x-show="toast.description" class="text-xs opacity-90 mt-1" x-text="toast.description"></p>
+      </div>
+
+      <!-- Close Button -->
+      <button
+        @click="$store.toast.remove(toast.id)"
+        class="{{ close_classes }}"
+        type="button"
+      >
+        <i class="fas fa-times w-4 h-4"></i>
+      </button>
+
+      <!-- Progress Bar (if duration is set) -->
+      <div 
+        x-show="toast.duration"
+        class="{{ progress_classes }}"
+        :style="`width: ${toast.progress}%`"
+      ></div>
+    </div>
+  </template>
+</div>