Changeset c9c6a2d in Klonkt

Timestamp:

06/21/2026 06:38:24 PM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

9a34d31

Parents:

d41f4be

Message:

feat(meldingen): notifications — reply on comment, comment on post, like on post

For every logged-in user (Google visitors/fans and admin). Bell icon in the
header with unread counter + notifications page /notifications (via user menu
desktop + profile sheet mobile; badge also on the mobile Profile tab). Opening =
read. Triggers in comments (reply→comment author, top-level→post author) and
like (→post author); notify() skips notifying yourself. Table notifications
+ NotificationService. NL/EN/DE.

Co-Authored-By: Claude <noreply@…>

Location:

src

Files:

• config/database.js (modified) (1 diff)
• middleware/render.js (modified) (2 diffs)
• routes/comments.js (modified) (4 diffs)
• routes/notifications.js (added)
• routes/posts.js (modified) (3 diffs)
• server.js (modified) (2 diffs)
• services/NotificationService.js (added)
• services/i18n.js (modified) (3 diffs)
• views/pages/notifications.ejs (added)
• views/partials/bottom-tab.ejs (modified) (1 diff)
• views/partials/profile-sheet.ejs (modified) (1 diff)
• views/partials/topnav.ejs (modified) (3 diffs)

src/config/database.js

@@ -252 +252 @@
   `);
 
+  // Meldingen: iemand reageert op je reactie / post, of liket je post. Snapshots
+  // van naam/titel zodat de lijst goedkoop te tonen is zonder joins.
+  db.exec(`
+    CREATE TABLE IF NOT EXISTS notifications (
+      id TEXT PRIMARY KEY,
+      user_id TEXT NOT NULL,
+      type TEXT NOT NULL,
+      actor_id TEXT,
+      actor_name TEXT,
+      post_slug TEXT,
+      post_title TEXT,
+      url TEXT,
+      read INTEGER DEFAULT 0,
+      created_at DATETIME DEFAULT CURRENT_TIMESTAMP
+    );
+    CREATE INDEX IF NOT EXISTS idx_notif_user ON notifications(user_id, read, created_at);
+  `);
+
   // Link-in-bio klikstatistiek (premium #6). Per (site, url) een teller; de
   // link-in-bio-pagina linkt via /links/go/:i dat de klik telt en doorstuurt.

src/middleware/render.js

@@ -19 +19 @@
 import { getSetting } from '../services/SettingsService.js';
 import { isPremium as isPremiumInstance, premiumEnabled, premiumUnlocked } from '../services/PatreonService.js';
+import { unreadCount as notifUnreadCount } from '../services/NotificationService.js';
 import { PLATFORMS as PLATFORMS_CATALOG } from '../services/PlatformIcons.js';
 import { t as i18nT, resolveLang, SUPPORTED as LANGS, LANG_NAMES } from '../services/i18n.js';
@@ -94 +95 @@
     langs: LANGS.map((c) => ({ code: c, name: LANG_NAMES[c], active: c === _lang })),
     timezone: getSetting('timezone') || '',
+    notifUnread: _u ? notifUnreadCount(_u.id) : 0,
     userOwnsSite,
     canSeeBeheer,

src/routes/comments.js

@@ -19 +19 @@
 import { requireAuth } from '../middleware/auth.js';
 import PermissionsService from '../services/PermissionsService.js';
+import { notify } from '../services/NotificationService.js';
 
 const router = express.Router();
@@ -39 +40 @@
 
   const post = db.prepare(
-    'SELECT id, slug FROM posts WHERE site_id = ? AND slug = ? AND status = ?'
+    'SELECT id, slug, title, author_id FROM posts WHERE site_id = ? AND slug = ? AND status = ?'
   ).get(site.id, postSlug, 'published');
   if (!post) return res.status(404).send('Post not found');
@@ -50 +51 @@
   // up to the top-level parent so we never go deeper than 1)
   let resolvedParent = null;
+  let parentAuthorId = null;
   if (parentId) {
     const parent = db.prepare(
-      'SELECT id, parent_comment_id FROM comments WHERE id = ? AND post_id = ?'
+      'SELECT id, parent_comment_id, author_id FROM comments WHERE id = ? AND post_id = ?'
     ).get(parentId, post.id);
     if (!parent) return res.status(400).send('Invalid parent comment');
     resolvedParent = parent.parent_comment_id || parent.id;
+    parentAuthorId = parent.author_id; // ontvanger van de "antwoord"-melding
   }
 
@@ -73 +76 @@
     VALUES (?, ?, ?, ?, ?, ?)
   `).run(commentId, post.id, req.session.user.id, resolvedParent, rawContent, status);
+
+  // Melding (alleen bij een zichtbare reactie): antwoord → de auteur van de reactie
+  // waarop gereageerd is; top-level reactie → de auteur van de post. notify() slaat
+  // jezelf-notificeren over.
+  if (status === 'approved') {
+    const url = `${res.locals.siteUrlBase || ''}/${post.slug}#comment-${commentId}`;
+    const actorId = req.session.user.id;
+    const actorName = req.session.user.username;
+    if (parentId) {
+      notify({ userId: parentAuthorId, actorId, actorName, type: 'reply', postSlug: post.slug, postTitle: post.title, url });
+    } else {
+      notify({ userId: post.author_id, actorId, actorName, type: 'comment', postSlug: post.slug, postTitle: post.title, url });
+    }
+  }
 
   // Where to land after submit:

src/routes/posts.js

@@ -10 +10 @@
 import { renderPage } from '../middleware/render.js';
 import { recordPageview, recordPostView } from '../services/StatsService.js';
+import { notify } from '../services/NotificationService.js';
 import PermissionsService from '../services/PermissionsService.js';
 import MarkdownService from '../services/MarkdownService.js';
@@ -405 +406 @@
 router.post('/posts/:id/like', requireAuth, (req, res) => {
   const userId = req.session.user.id;
-  const post = db.prepare('SELECT id, status FROM posts WHERE id = ?').get(req.params.id);
+  const post = db.prepare('SELECT id, status, slug, title, author_id FROM posts WHERE id = ?').get(req.params.id);
   if (!post) return res.status(404).send('Post niet gevonden');
   if (post.status !== 'published') return res.status(403).send('Niet beschikbaar');
@@ -414 +415 @@
   } else {
     db.prepare('INSERT OR IGNORE INTO post_likes (post_id, user_id) VALUES (?, ?)').run(post.id, userId);
+    // Melding voor de post-auteur (notify slaat jezelf-liken over).
+    notify({
+      userId: post.author_id, actorId: userId, actorName: req.session.user.username, type: 'like',
+      postSlug: post.slug, postTitle: post.title, url: (res.locals.siteUrlBase || '') + '/' + post.slug,
+    });
   }
   const likeCount = db.prepare('SELECT COUNT(*) AS c FROM post_likes WHERE post_id = ?').get(post.id).c;

src/server.js

@@ -27 +27 @@
 import authRoutes from './routes/auth.js';
 import accountRoutes from './routes/account.js';
+import notificationsRoutes from './routes/notifications.js';
 import adminRoutes from './routes/admin.js';
 import adminAudioRoutes from './routes/admin-audio.js';
@@ -257 +258 @@
 app.use('/auth', authRoutes);
 app.use('/account', accountRoutes);
+app.use('/notifications', notificationsRoutes);
 app.use('/admin/audio', adminAudioRoutes);
 app.use('/admin/playlists', adminPlaylistsRoutes);

src/services/i18n.js

@@ -25 +25 @@
     'nav.new_post': 'Nieuwe post',
     'nav.language': 'Taal',
+    'nav.notifications': 'Meldingen',
+    'notif.title': 'Meldingen', 'notif.empty': 'Nog geen meldingen.', 'notif.someone': 'Iemand',
+    'notif.reply': '{actor} reageerde op je reactie', 'notif.comment': '{actor} reageerde op je post', 'notif.like': '{actor} vindt je post leuk',
     'switch.agenda': 'Agenda',
     'switch.solo': 'Solo',
@@ -999 +1002 @@
     'nav.new_post': 'New post',
     'nav.language': 'Language',
+    'nav.notifications': 'Notifications',
+    'notif.title': 'Notifications', 'notif.empty': 'No notifications yet.', 'notif.someone': 'Someone',
+    'notif.reply': '{actor} replied to your comment', 'notif.comment': '{actor} commented on your post', 'notif.like': '{actor} liked your post',
     'switch.agenda': 'Agenda',
     'switch.solo': 'Solo',
@@ -1964 +1970 @@
     'nav.new_post': 'Neuer Beitrag',
     'nav.language': 'Sprache',
+    'nav.notifications': 'Benachrichtigungen',
+    'notif.title': 'Benachrichtigungen', 'notif.empty': 'Noch keine Benachrichtigungen.', 'notif.someone': 'Jemand',
+    'notif.reply': '{actor} hat auf deinen Kommentar geantwortet', 'notif.comment': '{actor} hat deinen Beitrag kommentiert', 'notif.like': '{actor} gefällt dein Beitrag',
     'switch.agenda': 'Termine',
     'switch.solo': 'Solo',

src/views/partials/bottom-tab.ejs

@@ -107 +107 @@
       <% } %>
       <span class="bottom-tab-label"><%= t('tab.profile') %></span>
+      <% if (typeof notifUnread !== 'undefined' && notifUnread > 0) { %>
+        <span class="bottom-tab-badge" aria-label="<%= notifUnread %> ongelezen meldingen"><%= notifUnread > 99 ? '99+' : notifUnread %></span>
+      <% } %>
     </button>
   <% } else { %>

src/views/partials/profile-sheet.ejs

@@ -53 +53 @@
           <svg class="psi-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
           <span class="psi-label">Account</span>
+          <svg class="psi-chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 18 15 12 9 6"/></svg>
+        </a>
+      </li>
+      <li role="none">
+        <a href="/notifications" class="profile-sheet-item" role="menuitem" data-close-sheet>
+          <svg class="psi-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
+          <span class="psi-label"><%= t('nav.notifications') %><% if (typeof notifUnread !== 'undefined' && notifUnread > 0) { %> (<%= notifUnread %>)<% } %></span>
           <svg class="psi-chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 18 15 12 9 6"/></svg>
         </a>

src/views/partials/topnav.ejs

@@ -103 +103 @@
         <a class="nav-btn" href="<%= _siteUrlBase %>/prutter" aria-label="Prutter (DMs)" title="Prutter">
           <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
+        </a>
+      <% } %>
+
+      <% if (user) { %>
+        <a class="nav-btn nav-notif" href="/notifications" aria-label="<%= t('nav.notifications') %>" title="<%= t('nav.notifications') %>"
+           hx-get="/notifications?partial=1" hx-target="#pcms-main" hx-swap="innerHTML" hx-push-url="/notifications" hx-indicator="#pcms-loading">
+          <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
+          <% if (typeof notifUnread !== 'undefined' && notifUnread > 0) { %><span class="notif-badge"><%= notifUnread > 9 ? '9+' : notifUnread %></span><% } %>
         </a>
       <% } %>
@@ -137 +145 @@
                 <svg class="udi-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                 <span><%= t('nav.account') %></span>
+              </a>
+              <a href="/notifications" role="menuitem" class="udi"
+                 hx-get="/notifications?partial=1" hx-target="#pcms-main" hx-swap="innerHTML"
+                 hx-push-url="/notifications" hx-indicator="#pcms-loading">
+                <svg class="udi-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
+                <span><%= t('nav.notifications') %><% if (typeof notifUnread !== 'undefined' && notifUnread > 0) { %> (<%= notifUnread %>)<% } %></span>
               </a>
               <a href="/favorieten" role="menuitem" class="udi"
@@ -558 +572 @@
 .ss-all { display: block; margin-top: .35rem; padding: .55rem .6rem; border-top: 1px solid var(--rule); color: var(--accent); font-weight: 600; text-decoration: none; font-size: .9rem; }
 .ss-all:hover { text-decoration: underline; }
+/* Meldingen-bel + ongelezen-badge */
+.nav-notif { position: relative; }
+.notif-badge {
+  position: absolute; top: 1px; right: 1px;
+  min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
+  display: inline-flex; align-items: center; justify-content: center;
+  background: #e0245e; color: #fff; font-size: 10px; font-weight: 700;
+  border-radius: 999px; line-height: 1; pointer-events: none;
+}
 </style>