|
{% extends "base.html" %}
|
|
{% block extra_head %}
|
|
<link rel="stylesheet" href="/static/css/notifications.css">
|
|
{% endblock %}
|
|
{% block content %}
|
|
<div class="notifications-page">
|
|
<div class="notifications-header">
|
|
<h2>Notifications</h2>
|
|
<form method="POST" action="/notifications/mark-all-read" style="display:inline;">
|
|
<button type="submit" class="btn btn-ghost btn-sm"><span class="icon">✅</span>Clear</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="notifications-list">
|
|
{% for group in notification_groups %}
|
|
<div class="notification-group">
|
|
<div class="notification-group-label">{{ group.label }}</div>
|
|
{% for item in group.entries %}
|
|
{% set target_url = item.notification.get('target_url', '') %}
|
|
<div class="notification-card {% if not item.notification['read'] %}unread{% endif %}">
|
|
{% set actor_username = item.actor['username'] if item.actor else '#' %}
|
|
<a href="/profile/{{ actor_username }}" style="flex-shrink:0">
|
|
<img src="{{ avatar_url('multiavatar', actor_username, 32) }}" class="avatar-img avatar-sm" alt="{{ actor_username }}" loading="lazy">
|
|
</a>
|
|
<div class="notification-body">
|
|
<div class="notification-text">{% if target_url %}<a href="{{ target_url }}" style="color:inherit;text-decoration:none">{% endif %}{{ item.notification['message'] }}{% if target_url %}</a>{% endif %}</div>
|
|
<div class="notification-time">{{ item.time_ago }}</div>
|
|
</div>
|
|
<form method="POST" action="/notifications/mark-read/{{ item.notification['uid'] }}" style="display:inline;">
|
|
<button type="submit" class="notification-dismiss" data-uid="{{ item.notification['uid'] }}">×</button>
|
|
</form>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<div class="empty-state">No notifications yet</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endblock %} |