feat: add notification center with unread badge and mark-as-read

Author: ayesha1145

web/context_processors.py

@@ -19,5 +19,9 @@ def last_modified(request):
 def invitation_notifications(request):
     if request.user.is_authenticated:
         pending_invites = request.user.received_group_invites.filter(status="pending").count()
-        return {"pending_invites_count": pending_invites}
+        unread_notifications = request.user.notifications.filter(read=False).count()
+        return {
+            "pending_invites_count": pending_invites,
+            "unread_notifications_count": unread_notifications,
+        }
     return {}

web/templates/account/notifications.html

@@ -0,0 +1,95 @@
+{% extends "base.html" %}
+{% load static %}
+
+{% block title %}Notifications{% endblock title %}
+
+{% block content %}
+<div class="container mx-auto px-4 py-8 max-w-3xl">
+  <div class="flex items-center justify-between mb-6">
+    <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
+      <i class="fas fa-bell mr-2 text-teal-500"></i> Notifications
+      {% if unread_count %}
+        <span class="ml-2 text-sm font-medium bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-200 px-2 py-0.5 rounded-full">
+          {{ unread_count }} unread
+        </span>
+      {% endif %}
+    </h1>
+    {% if unread_count %}
+      <form method="post" action="{% url 'mark_notifications_read' %}">
+        {% csrf_token %}
+        <input type="hidden" name="filter_type" value="{{ filter_type }}">
+        <button type="submit"
+                class="text-sm px-4 py-2 bg-teal-600 hover:bg-teal-700 text-white rounded-lg transition-colors duration-200">
+          Mark all as read
+        </button>
+      </form>
+    {% endif %}
+  </div>
+
+  <!-- Filter Tabs -->
+  <div class="flex gap-2 mb-6 flex-wrap">
+    <a href="{% url 'notification_list' %}"
+       class="px-3 py-1.5 rounded-full text-sm font-medium transition-colors duration-200
+              {% if not filter_type %}bg-teal-600 text-white{% else %}bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600{% endif %}">
+      All
+    </a>
+    {% for type, label in notifications.model.NOTIFICATION_TYPES %}
+      <a href="{% url 'notification_list' %}?type={{ type }}"
+         class="px-3 py-1.5 rounded-full text-sm font-medium transition-colors duration-200
+                {% if filter_type == type %}bg-teal-600 text-white{% else %}bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600{% endif %}">
+        {{ label }}
+      </a>
+    {% endfor %}
+  </div>
+
+  <!-- Notification List -->
+  <div class="space-y-3">
+    {% for notification in notifications %}
+      <div class="flex items-start gap-4 p-4 rounded-lg border transition-colors duration-200
+                  {% if not notification.read %}bg-teal-50 dark:bg-teal-900/20 border-teal-200 dark:border-teal-800{% else %}bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700{% endif %}">
+        <!-- Icon -->
+        <div class="flex-shrink-0 mt-0.5">
+          {% if notification.notification_type == "success" %}
+            <i class="fas fa-check-circle text-green-500 text-lg"></i>
+          {% elif notification.notification_type == "warning" %}
+            <i class="fas fa-exclamation-triangle text-yellow-500 text-lg"></i>
+          {% elif notification.notification_type == "error" %}
+            <i class="fas fa-times-circle text-red-500 text-lg"></i>
+          {% else %}
+            <i class="fas fa-info-circle text-blue-500 text-lg"></i>
+          {% endif %}
+        </div>
+        <!-- Content -->
+        <div class="flex-1 min-w-0">
+          <div class="flex items-center justify-between gap-2">
+            <p class="font-semibold text-gray-900 dark:text-white text-sm">{{ notification.title }}</p>
+            <span class="text-xs text-gray-400 dark:text-gray-500 whitespace-nowrap">
+              {{ notification.created_at|timesince }} ago
+            </span>
+          </div>
+          <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">{{ notification.message }}</p>
+        </div>
+        <!-- Mark as read -->
+        {% if not notification.read %}
+          <form method="post" action="{% url 'mark_single_notification_read' notification.id %}">
+            {% csrf_token %}
+            <input type="hidden" name="filter_type" value="{{ filter_type }}">
+            <button type="submit"
+                    title="Mark as read"
+                    aria-label="Mark notification as read"
+                    class="flex-shrink-0 text-teal-500 hover:text-teal-700 transition-colors duration-200">
+              <i class="fas fa-check text-sm"></i>
+            </button>
+          </form>
+        {% endif %}
+      </div>
+    {% empty %}
+      <div class="text-center py-16 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+        <i class="fas fa-bell-slash text-4xl text-gray-300 dark:text-gray-600 mb-4"></i>
+        <p class="text-gray-500 dark:text-gray-400 font-medium">No notifications yet</p>
+        <p class="text-sm text-gray-400 dark:text-gray-500 mt-1">You're all caught up!</p>
+      </div>
+    {% endfor %}
+  </div>
+</div>
+{% endblock content %}

web/templates/base.html

@@ -375,13 +375,14 @@
                 </span>
               {% endif %}
             </a>
-            <!-- New Notification Button for Invitations -->
-            <a href="{% url 'user_invitations' %}"
-               class="relative hover:underline flex items-center p-2 hover:bg-teal-700 rounded-lg">
+            <!-- Notification Center Button -->
+            <a href="{% url 'notification_list' %}"
+               class="relative hover:underline flex items-center p-2 hover:bg-teal-700 rounded-lg"
+               title="Notifications">
               <i class="fas fa-bell"></i>
-              {% if pending_invites_count %}
+              {% if unread_notifications_count %}
                 <span class="absolute -top-1 -right-1 h-4 w-4 rounded-full bg-red-600 flex items-center justify-center text-white text-xs">
-                  {{ pending_invites_count }}
+                  {{ unread_notifications_count }}
                 </span>
               {% endif %}
             </a>

web/urls.py

@@ -33,6 +33,9 @@
     features_page,
     grade_link,
     notification_preferences,
+    notification_list,
+    mark_notifications_read,
+    mark_single_notification_read,
     sales_analytics,
     sales_data,
     streak_detail,
@@ -91,6 +94,13 @@
     path("accounts/signup/", views.signup_view, name="account_signup"),  # Our custom signup view
     path("accounts/", include("allauth.urls")),
     path("account/notification-preferences/", notification_preferences, name="notification_preferences"),
+    path("account/notifications/", notification_list, name="notification_list"),
+    path("account/notifications/mark-all-read/", mark_notifications_read, name="mark_notifications_read"),
+    path(
+        "account/notifications/<int:notification_id>/read/",
+        mark_single_notification_read,
+        name="mark_single_notification_read",
+    ),
     path("profile/", views.profile, name="profile"),
     path("accounts/profile/", views.profile, name="accounts_profile"),
     path("accounts/delete/", views.delete_account, name="delete_account"),

web/views.py

@@ -6948,6 +6948,69 @@ def award_badge(request):
         return JsonResponse({"success": False, "message": "An internal error occurred"}, status=500)
 
 
+@login_required
+def notification_list(request):
+    """Display all notifications for the current user.
+
+    Args:
+        request: HttpRequest object.
+
+    Returns:
+        Rendered notification center page with notifications.
+    """
+    filter_type = request.GET.get("type", "")
+    notifications = request.user.notifications.all()
+    valid_types = [t[0] for t in Notification.NOTIFICATION_TYPES]
+    if filter_type in valid_types:
+        notifications = notifications.filter(notification_type=filter_type)
+    context = {
+        "notifications": notifications,
+        "filter_type": filter_type,
+        "unread_count": request.user.notifications.filter(read=False).count(),
+    }
+    return render(request, "account/notifications.html", context)
+
+
+@login_required
+def mark_notifications_read(request):
+    """Mark all notifications as read for the current user.
+
+    Args:
+        request: HttpRequest object.
+
+    Returns:
+        Redirect back to notification center.
+    """
+    if request.method == "POST":
+        request.user.notifications.filter(read=False).update(read=True)
+        filter_type = request.POST.get("filter_type", "")
+        if filter_type:
+            return redirect(f"{'/account/notifications/'}?type={filter_type}")
+    return redirect("notification_list")
+
+
+@login_required
+def mark_single_notification_read(request, notification_id):
+    """Mark a single notification as read.
+
+    Args:
+        request: HttpRequest object.
+        notification_id: ID of the notification to mark as read.
+
+    Returns:
+        Redirect back to notification center.
+    """
+    if request.method != "POST":
+        return redirect("notification_list")
+    notification = get_object_or_404(Notification, id=notification_id, user=request.user)
+    notification.read = True
+    notification.save()
+    filter_type = request.POST.get("filter_type", "")
+    if filter_type:
+        return redirect(f"{'/account/notifications/'}?type={filter_type}")
+    return redirect("notification_list")
+
+
 def notification_preferences(request):
     """
     Display and update the notification preferences for the logged-in user.