feat: Display dedicated notifications section for seriouscritter

Co-authored-by: aider (ollama_chat/hf.co/TrevorJS/gemma-4-E4B-it-uncensored-GGUF:Q4_K_M) <aider@aider.chat>

apps/web/src/app/notifications/page.tsx

@@ -8,32 +8,68 @@ import { notificationPath, notificationText, timeAgo, type NotificationListDTO }
 import { Avatar } from '@/components/Avatar';
 import { client, useMe } from '@/lib/api';
 
+const ADMIN_ACTOR_USERNAME = 'seriouscritter';
+
 /** Reactions, comments, new followers and songs sent to you, newest first. Opening it marks them read. */
 export default function NotificationsPage() {
   const { me, loggedOut } = useMe();
   const { mutate } = useSWRConfig();
+  
+  // Fetch all notifications for the user
   const { data, size, setSize, isLoading } = useSWRInfinite<NotificationListDTO>(
     (i, prev: NotificationListDTO | null) => (!me || (i > 0 && !prev?.nextCursor) ? null : ['notifications', prev?.nextCursor ?? null]),
     ([, cursor]: [string, string | null]) => client.notifications(cursor),
     { revalidateOnFocus: false },
   );
-  const items = data?.flatMap((p) => p.notifications) ?? [];
+  
+  const allItems = data?.flatMap((p) => p.notifications) ?? [];
   const unread = data?.[0]?.unread ?? 0;
 
+  // Filter messages specifically from seriouscritter
+  const seriousCritterMessages = allItems.filter(n => n.actor?.username === ADMIN_ACTOR_USERNAME);
+
   // Seen once you've looked: clear the bell (rows stay highlighted until you come back).
   useEffect(() => {
     if (unread) client.markNotificationsRead().then(() => mutate('/notifications'), () => {});
   }, [unread, mutate]);
 
   if (loggedOut) return <p className="muted"><Link href="/login">Log in</Link> to see your notifications.</p>;
+  
   return (
     <div className="stack">
       <h1>Notifications</h1>
-      {items.length === 0 && !isLoading && (
+      
+      {/* Dedicated section for seriouscritter's messages */}
+      {seriousCritterMessages.length > 0 && (
+        <div className="admin-section">
+          <h2 className="muted">From {ADMIN_ACTOR_USERNAME}</h2>
+          <ul className="notifications">
+            {seriousCritterMessages.map((n) => {
+              const { title, body } = notificationText(n);
+              return (
+                <li key={n.id} className={n.read ? '' : 'unread'}>
+                  <Link href={notificationPath(n)} className="notification">
+                    <Avatar user={n.actor} size={40} />
+                    <span className="notification-text">
+                      <strong>{title}</strong>
+                      <span>{body</span >
+                      <span className="muted">{timeAgo(n.createdAt)}</span>
+                    </span>
+                    {n.track?.artworkUrl && <img className="artwork-sm" src={n.track.artworkUrl} alt="" />}
+                  </Link>
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+      )}
+
+      {/* General notifications list */}
+      {allItems.length === 0 && !isLoading && (
         <p className="muted">Nothing yet. Reactions, new followers and songs sent to you show up here.</p>
       )}
       <ul className="notifications">
-        {items.map((n) => {
+        {allItems.map((n) => {
           const { title, body } = notificationText(n);
           return (
             <li key={n.id} className={n.read ? '' : 'unread'}>
@@ -41,7 +77,7 @@ export default function NotificationsPage() {
                 <Avatar user={n.actor} size={40} />
                 <span className="notification-text">
                   <strong>{title}</strong>
-                  <span>{body}</span>
+                  <span>{body</span >
                   <span className="muted">{timeAgo(n.createdAt)}</span>
                 </span>
                 {n.track?.artworkUrl && <img className="artwork-sm" src={n.track.artworkUrl} alt="" />}
@@ -50,11 +86,12 @@ export default function NotificationsPage() {
           );
         })}
       </ul>
+      
       {data?.at(-1)?.nextCursor && (
         <button className="btn" onClick={() => setSize(size + 1)}>
           Show more
         </button>
       )}
-    </div>
+    </div >
   );
 }