45 lines
1.8 KiB
Plaintext
45 lines
1.8 KiB
Plaintext
<h1>Notifications</h1>
|
|
|
|
<% if (!items || items.length === 0) { %>
|
|
<p class="muted">No notifications yet.</p>
|
|
<% } else { %>
|
|
<ul class="notif-list">
|
|
<% items.forEach(function(item) {
|
|
const isUnread = !item.read_at;
|
|
const actorLabel = item.actor_name || 'Someone';
|
|
const actionLabel = item.action === 'like' ? 'liked' : 'favorited';
|
|
const entityLabel = item.entity_type === 'song' ? 'song' : 'playlist';
|
|
const entityPath = item.entity_type === 'song' ? '/songs/' : '/playlists/';
|
|
const icon = item.action === 'like' ? '👍' : '⭐';
|
|
|
|
// Relative time
|
|
const now = new Date();
|
|
const created = new Date(item.created_at + 'Z');
|
|
const diffMs = now - created;
|
|
const diffMin = Math.floor(diffMs / 60000);
|
|
const diffHr = Math.floor(diffMin / 60);
|
|
const diffDay = Math.floor(diffHr / 24);
|
|
let timeAgo;
|
|
if (diffMin < 1) timeAgo = 'just now';
|
|
else if (diffMin < 60) timeAgo = diffMin + ' minute' + (diffMin === 1 ? '' : 's') + ' ago';
|
|
else if (diffHr < 24) timeAgo = diffHr + ' hour' + (diffHr === 1 ? '' : 's') + ' ago';
|
|
else timeAgo = diffDay + ' day' + (diffDay === 1 ? '' : 's') + ' ago';
|
|
%>
|
|
<li class="notif-item<%= isUnread ? ' unread' : '' %>">
|
|
<span class="notif-icon"><%= icon %></span>
|
|
<div>
|
|
<div class="notif-text">
|
|
<strong><%= actorLabel %></strong> <%= actionLabel %> your <%= entityLabel %>
|
|
<% if (item.entity_slug) { %>
|
|
"<a href="<%= entityPath %><%= item.entity_slug %>"><%= item.entity_title %></a>"
|
|
<% } else { %>
|
|
"<%= item.entity_title %>"
|
|
<% } %>
|
|
</div>
|
|
<div class="notif-time"><%= timeAgo %></div>
|
|
</div>
|
|
</li>
|
|
<% }); %>
|
|
</ul>
|
|
<% } %>
|