indiekit-endpoint-activitypub/views/partials/ap-notification-card.njk

{# Notification card partial #}

<div class="ap-notification{% if not item.read %} ap-notification--unread{% endif %}{% if item.isDirect %} ap-notification--direct{% endif %}">
  {# Dismiss button #}
  <form method="post" action="{{ mountPath }}/admin/reader/notifications/delete" class="ap-notification__dismiss">
    <input type="hidden" name="_csrf" value="{{ csrfToken }}">
    <input type="hidden" name="uid" value="{{ item.uid }}">
    <button type="submit" class="ap-notification__dismiss-btn" title="{{ __('activitypub.notifications.dismiss') }}">&times;</button>
  </form>

  {# Actor avatar with type badge #}
  <div class="ap-notification__avatar-wrap" data-avatar-fallback>
    {% if item.actorPhoto %}
    <img src="{{ item.actorPhoto }}" alt="{{ item.actorName }}" class="ap-notification__avatar" loading="lazy" crossorigin="anonymous">
    {% endif %}
    <span class="ap-notification__avatar ap-notification__avatar--default" aria-hidden="true">{{ item.actorName[0] | upper if item.actorName else "?" }}</span>
    <span class="ap-notification__type-badge">
      {% if item.type == "like" %}❤{% elif item.type == "boost" %}🔁{% elif item.type == "follow" or item.type == "follow_request" %}👤{% elif item.type == "reply" %}💬{% elif item.type == "mention" %}{% if item.isDirect %}🔒{% else %}@{% endif %}{% elif item.type == "dm" %}✉{% elif item.type == "report" %}⚑{% endif %}
    </span>
  </div>

  {# Notification body #}
  <div class="ap-notification__body">
    <span class="ap-notification__actor">
      <a href="{{ item.actorUrl }}">{{ item.actorName }}</a>
    </span>

    <span class="ap-notification__action">
      {% if item.type == "like" %}
        {{ __("activitypub.notifications.liked") }}
      {% elif item.type == "boost" %}
        {{ __("activitypub.notifications.boostedPost") }}
      {% elif item.type == "follow" %}
        {{ __("activitypub.notifications.followedYou") }}
      {% elif item.type == "follow_request" %}
        {{ __("activitypub.followRequest") }}
      {% elif item.type == "reply" %}
        {{ __("activitypub.notifications.repliedTo") }}
      {% elif item.type == "mention" %}
        {{ __("activitypub.notifications.mentionedYou") }}
      {% elif item.type == "dm" %}
        {{ __("activitypub.messages.sentYouDM") }}
      {% elif item.type == "report" %}
        {{ __("activitypub.reports.sentReport") }}
      {% endif %}
    </span>

    {% if item.targetUrl %}
      <a href="{{ item.targetUrl }}" class="ap-notification__target">
        {{ item.targetName or item.targetUrl }}
      </a>
    {% endif %}

    {% if item.content and item.content.text %}
      <div class="ap-notification__excerpt">
        {{ item.content.text | truncate(200) }}
      </div>
    {% endif %}

    {% if item.type == "reply" or item.type == "mention" %}
      <div class="ap-notification__actions">
        <a href="{{ mountPath }}/admin/reader/compose?replyTo={{ (item.url or item.uid) | urlencode }}" class="ap-notification__reply-btn" title="{{ __('activitypub.reader.actions.reply') }}">
          ↩ {{ __("activitypub.reader.actions.reply") }}
        </a>
        <a href="{{ mountPath }}/admin/reader/post?url={{ (item.url or item.uid) | urlencode }}" class="ap-notification__thread-btn" title="{{ __('activitypub.reader.post.title') }}">
          💬 {{ __("activitypub.notifications.viewThread") }}
        </a>
      </div>
    {% elif item.type == "dm" %}
      <div class="ap-notification__actions">
        <a href="{{ mountPath }}/admin/reader/messages?partner={{ item.actorUrl | urlencode }}" class="ap-notification__thread-btn" title="{{ __('activitypub.messages.title') }}">
          ✉ {{ __("activitypub.messages.viewMessage") }}
        </a>
      </div>
    {% endif %}
  </div>

  {# Timestamp #}
  {% if item.published %}
    <time datetime="{{ item.published }}" class="ap-notification__time" x-data x-relative-time>
      {{ item.published | date("PPp") }}
    </time>
  {% endif %}
</div>