feat(notifications): unify the two rail indicators into one inbox

Fold the client-side transient bell into the inbox page so there's a single
notification indicator. The inbox now has two groups — "System" (durable,
server-backed) and "Activity" (client-side events with their Unhide/Unwatch/
Find-in-feed actions) — and the nav badge sums both unread counts. The separate
rail bell (NotificationCenter) is removed.

Activity items get a per-item clear (X) alongside the global Clear all. Unhiding
or unwatching a video from anywhere — a card, the toast's Undo, or the inbox —
now quietly resolves the original "Hidden/Watched X" entry (no duplicate "Unhidden
X" toast, no stale entry with a dead action), via a new resolveVideo store helper.

frontend/src/App.tsx

@@ -252,8 +252,6 @@ export default function App() {
         onOpenAbout={() => setAboutOpen(true)}
         onChangeLanguage={changeLanguage}
         language={i18n.language as LangCode}
-        filters={filters}
-        setFilters={setFilters}
       />
       <div className="relative flex-1 min-w-0 flex flex-col">
         <Header
@@ -305,7 +303,7 @@ export default function App() {
           ) : page === "playlists" ? (
             <Playlists canWrite={meQuery.data!.can_write} />
           ) : page === "notifications" ? (
-            <NotificationsPanel />
+            <NotificationsPanel filters={filters} setFilters={setFilters} setPage={setPage} />
           ) : page === "settings" ? (
             <SettingsPanel
               me={meQuery.data!}

frontend/src/components/Feed.tsx

@@ -4,7 +4,7 @@ import { useInfiniteQuery, useQuery, useQueryClient } from "@tanstack/react-quer
 import { ArrowDown, ArrowUp, RefreshCw } from "lucide-react";
 import { api, type FeedFilters, type Video } from "../lib/api";
 import i18n from "../i18n";
-import { notify } from "../lib/notifications";
+import { notify, resolveVideo } from "../lib/notifications";
 import VideoCard from "./VideoCard";
 import PlayerModal from "./PlayerModal";
 
@@ -180,6 +180,10 @@ export default function Feed({
           action: { label: i18n.t("feed.unwatch"), onClick: () => onState(id, "new") },
           meta: { kind: "video-watched", videoId: id, title: v?.title ?? "this video" },
         });
+      } else if (status === "new") {
+        // Unhide / unwatch (from a card, the toast's Undo, or the center): quietly resolve any
+        // stale hide/watch notice for this video so it doesn't linger with a dead action.
+        resolveVideo(id);
       }
     },
     [qc]

frontend/src/components/NavSidebar.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState, useSyncExternalStore } from "react";
 import { createPortal } from "react-dom";
 import { useTranslation } from "react-i18next";
 import { useQuery } from "@tanstack/react-query";
@@ -17,13 +17,13 @@ import {
   Tv,
   UserPlus,
 } from "lucide-react";
-import { api, type FeedFilters, type Me } from "../lib/api";
+import { api, type Me } from "../lib/api";
 import { useLiveQuery } from "../lib/useLiveQuery";
+import { getUnreadCount, subscribe } from "../lib/notifications";
 import type { Page } from "../lib/urlState";
 import { type LangCode } from "../i18n";
 import AvatarImg from "./Avatar";
 import LanguageSwitcher from "./LanguageSwitcher";
-import NotificationCenter from "./NotificationCenter";
 
 // Primary app navigation: a collapsible left rail with icon+label entries (Design C). The
 // modules used to hide under the avatar dropdown; they now live here. Collapsed, it becomes
@@ -35,8 +35,6 @@ export default function NavSidebar({
   onOpenAbout,
   onChangeLanguage,
   language,
-  filters,
-  setFilters,
 }: {
   me: Me;
   page: Page;
@@ -44,8 +42,6 @@ export default function NavSidebar({
   onOpenAbout: () => void;
   onChangeLanguage: (code: LangCode) => void;
   language: LangCode;
-  filters: FeedFilters;
-  setFilters: (f: FeedFilters) => void;
 }) {
   const { t } = useTranslation();
   const [collapsed, setCollapsed] = useState<boolean>(
@@ -125,7 +121,10 @@ export default function NavSidebar({
     api.notificationUnreadCount,
     { intervalMs: 30000 }
   );
-  const unread = unreadQuery.data?.count ?? 0;
+  // One indicator for both layers: durable server notifications + the client-side transient
+  // events (the former separate bell is now folded into the inbox page).
+  const clientUnread = useSyncExternalStore(subscribe, getUnreadCount, getUnreadCount);
+  const unread = (unreadQuery.data?.count ?? 0) + clientUnread;
 
   type NavItem = { page: Page; icon: typeof Home; label: string; badge?: number };
   // User-facing content modules vs. admin/system modules, separated by a divider in the rail.
@@ -243,7 +242,6 @@ export default function NavSidebar({
           >
             <Info className="w-5 h-5" />
           </button>
-          <NotificationCenter variant="rail" filters={filters} setFilters={setFilters} />
         </div>
         <button
           onClick={() => setPage("settings")}

frontend/src/components/NotificationsPanel.tsx

@@ -1,29 +1,56 @@
+import { useEffect, useSyncExternalStore } from "react";
 import { useTranslation } from "react-i18next";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { Bell, Check, CheckCheck, Trash2, X } from "lucide-react";
-import { api, type AppNotification } from "../lib/api";
+import { Bell, Check, CheckCheck, Eye, RotateCcw, Search, Trash2, X } from "lucide-react";
+import { api, type AppNotification, type FeedFilters } from "../lib/api";
 import { useLiveQuery } from "../lib/useLiveQuery";
+import {
+  clearAll as clearClient,
+  dismiss as dismissClient,
+  getNotifications,
+  getUnreadCount,
+  markAllRead as markAllClientRead,
+  remove as removeClient,
+  resolveVideo,
+  subscribe,
+  type Notification as ClientNotif,
+  type VideoHiddenMeta,
+  type VideoWatchedMeta,
+} from "../lib/notifications";
+import type { Page } from "../lib/urlState";
+import { LEVEL_STYLE } from "./Toaster";
 
-// The durable, server-backed notification center (inbox phase 1). It COEXISTS with the
-// client-side transient bell in the nav rail: the bell is a quick peek at recent toasts kept
-// in localStorage, this is the full, filterable, clearable history synced from the server.
+// The single notification center. "System" = durable, server-backed notifications (inbox
+// phase 1). "Activity" = the client-side transient events (action confirmations, errors, with
+// their inline undo/find actions) that used to live behind a separate bell — folded in here so
+// there's one indicator and one place to look. Transient toasts still pop via the Toaster.
 const POLL_MS = 8000;
 
 function relativeTime(iso: string | null, t: (k: string, o?: any) => string): string {
   if (!iso) return "";
-  const then = new Date(iso).getTime();
-  const secs = Math.max(0, Math.round((Date.now() - then) / 1000));
+  return relativeFromMs(new Date(iso).getTime(), t);
+}
+
+function relativeFromMs(ms: number, t: (k: string, o?: any) => string): string {
+  const secs = Math.max(0, Math.round((Date.now() - ms) / 1000));
   // Reuse the bell's relative-time strings (notifications.time.*) — same format, no dupes.
   if (secs < 60) return t("notifications.time.justNow");
   const mins = Math.round(secs / 60);
   if (mins < 60) return t("notifications.time.minutes", { count: mins });
   const hours = Math.round(mins / 60);
   if (hours < 24) return t("notifications.time.hours", { count: hours });
-  const days = Math.round(hours / 24);
-  return t("notifications.time.days", { count: days });
+  return t("notifications.time.days", { count: Math.round(hours / 24) });
 }
 
-export default function NotificationsPanel() {
+export default function NotificationsPanel({
+  filters,
+  setFilters,
+  setPage,
+}: {
+  filters: FeedFilters;
+  setFilters: (f: FeedFilters) => void;
+  setPage: (p: Page) => void;
+}) {
   const { t } = useTranslation();
   const qc = useQueryClient();
   const q = useLiveQuery<{ items: AppNotification[]; total: number }>(
@@ -31,9 +58,16 @@ export default function NotificationsPanel() {
     () => api.notifications(),
     { intervalMs: POLL_MS }
   );
-  const items = q.data?.items ?? [];
+  const serverItems = q.data?.items ?? [];
+  const clientItems = useSyncExternalStore(subscribe, getNotifications, getNotifications);
+  const clientUnread = useSyncExternalStore(subscribe, getUnreadCount, getUnreadCount);
+
+  // Opening the center marks the (ephemeral) client items read, matching the old bell. Server
+  // items stay unread until acted on individually.
+  useEffect(() => {
+    markAllClientRead();
+  }, []);
 
-  // Any mutation refreshes both the list and the nav badge's unread count.
   const refresh = () => {
     qc.invalidateQueries({ queryKey: ["notifications"] });
     qc.invalidateQueries({ queryKey: ["notif-unread"] });
@@ -43,7 +77,41 @@ export default function NotificationsPanel() {
   const dismissMut = useMutation({ mutationFn: api.dismissNotification, onSuccess: refresh });
   const clearMut = useMutation({ mutationFn: api.clearNotifications, onSuccess: refresh });
 
-  const hasUnread = items.some((n) => !n.read);
+  const serverUnread = serverItems.some((n) => !n.read);
+  const hasAny = serverItems.length > 0 || clientItems.length > 0;
+  const hasUnread = serverUnread || clientUnread > 0;
+
+  function markAll() {
+    markAllClientRead();
+    if (serverUnread) readAllMut.mutate();
+    else refresh();
+  }
+  function clearEverything() {
+    clearClient();
+    clearMut.mutate();
+  }
+
+  // "Find in feed" / undo, ported from the old bell.
+  function locateHidden(meta: VideoHiddenMeta) {
+    setFilters({
+      ...filters,
+      show: "hidden",
+      channelId: meta.channelId || undefined,
+      channelName: meta.channelName || undefined,
+    });
+    setPage("feed");
+  }
+  function revertState(meta: VideoHiddenMeta | VideoWatchedMeta) {
+    api
+      .setState(meta.videoId, "new")
+      .then(() => {
+        qc.invalidateQueries({ queryKey: ["feed"] });
+        qc.invalidateQueries({ queryKey: ["feed-count"] });
+        // Quietly resolve the now-stale notice (no confirmation toast — the change is visible).
+        resolveVideo(meta.videoId);
+      })
+      .catch(() => {});
+  }
 
   return (
     <div className="p-4 max-w-3xl w-full mx-auto space-y-4">
@@ -53,10 +121,10 @@ export default function NotificationsPanel() {
           <div className="font-semibold">{t("inbox.title")}</div>
           <div className="text-xs text-muted">{t("inbox.subtitle")}</div>
         </div>
-        {items.length > 0 && (
+        {hasAny && (
           <div className="flex items-center gap-2">
             <button
-              onClick={() => readAllMut.mutate()}
+              onClick={markAll}
               disabled={!hasUnread || readAllMut.isPending}
               className="inline-flex items-center gap-1.5 text-xs px-2.5 py-1.5 rounded-lg text-muted hover:text-fg hover:bg-card transition disabled:opacity-40"
             >
@@ -64,7 +132,7 @@ export default function NotificationsPanel() {
               {t("inbox.markAllRead")}
             </button>
             <button
-              onClick={() => clearMut.mutate()}
+              onClick={clearEverything}
               disabled={clearMut.isPending}
               className="inline-flex items-center gap-1.5 text-xs px-2.5 py-1.5 rounded-lg text-muted hover:text-fg hover:bg-card transition disabled:opacity-40"
             >
@@ -75,16 +143,22 @@ export default function NotificationsPanel() {
         )}
       </div>
 
-      {q.isLoading && !q.data ? (
+      {q.isLoading && !q.data && clientItems.length === 0 ? (
         <div className="p-8 text-muted text-center">{t("common.loading")}</div>
-      ) : items.length === 0 ? (
+      ) : !hasAny ? (
         <div className="glass rounded-2xl p-10 text-center text-muted">
           <Bell className="w-8 h-8 mx-auto mb-3 opacity-40" />
           {t("inbox.empty")}
         </div>
       ) : (
+        <div className="space-y-4">
+          {serverItems.length > 0 && (
+            <section>
+              <div className="text-xs uppercase tracking-wide text-muted mb-2">
+                {t("inbox.sectionSystem")}
+              </div>
               <div className="flex flex-col gap-2">
-          {items.map((n) => (
+                {serverItems.map((n) => (
                   <NotificationRow
                     key={n.id}
                     n={n}
@@ -94,6 +168,28 @@ export default function NotificationsPanel() {
                   />
                 ))}
               </div>
+            </section>
+          )}
+          {clientItems.length > 0 && (
+            <section>
+              <div className="text-xs uppercase tracking-wide text-muted mb-2">
+                {t("inbox.sectionActivity")}
+              </div>
+              <div className="flex flex-col gap-2">
+                {clientItems.map((n) => (
+                  <ClientActivityRow
+                    key={n.id}
+                    n={n}
+                    t={t}
+                    onFind={locateHidden}
+                    onRevert={revertState}
+                    onRemove={() => removeClient(n.id)}
+                  />
+                ))}
+              </div>
+            </section>
+          )}
+        </div>
       )}
     </div>
   );
@@ -185,3 +281,91 @@ function NotificationRow({
     </div>
   );
 }
+
+function ClientActivityRow({
+  n,
+  t,
+  onFind,
+  onRevert,
+  onRemove,
+}: {
+  n: ClientNotif;
+  t: (k: string, o?: any) => string;
+  onFind: (meta: VideoHiddenMeta) => void;
+  onRevert: (meta: VideoHiddenMeta | VideoWatchedMeta) => void;
+  onRemove: () => void;
+}) {
+  const { icon: Icon, color } = LEVEL_STYLE[n.level];
+  const needsAction = n.requiresInteraction && !n.dismissed;
+  const hidden = n.meta?.kind === "video-hidden" ? n.meta : null;
+  const watched = n.meta?.kind === "video-watched" ? n.meta : null;
+  return (
+    <div
+      className={`glass rounded-xl p-3.5 flex items-start gap-3 ${needsAction ? "ring-1 ring-accent/30" : ""}`}
+    >
+      <Icon className={`w-4 h-4 shrink-0 mt-0.5 ${color}`} />
+      <div className="min-w-0 flex-1">
+        {n.title && <div className="text-sm font-semibold">{n.title}</div>}
+        <div className="text-sm break-words">{n.message}</div>
+        <div className="flex items-center gap-2 mt-0.5">
+          <span className="text-[11px] text-muted">{relativeFromMs(n.ts, t)}</span>
+          {needsAction && (
+            <span className="text-[10px] uppercase tracking-wide font-semibold text-accent">
+              {t("notifications.actionNeeded")}
+            </span>
+          )}
+        </div>
+        {hidden ? (
+          <div className="flex items-center gap-3 mt-1">
+            <button
+              onClick={() => onFind(hidden)}
+              className="flex items-center gap-1 text-accent text-sm font-semibold hover:underline"
+            >
+              <Search className="w-3.5 h-3.5" />
+              {t("notifications.findInFeed")}
+            </button>
+            <button
+              onClick={() => onRevert(hidden)}
+              className="flex items-center gap-1 text-accent text-sm font-semibold hover:underline"
+            >
+              <Eye className="w-3.5 h-3.5" />
+              {t("notifications.unhide")}
+            </button>
+          </div>
+        ) : watched ? (
+          <div className="flex items-center gap-3 mt-1">
+            <button
+              onClick={() => onRevert(watched)}
+              className="flex items-center gap-1 text-accent text-sm font-semibold hover:underline"
+            >
+              <RotateCcw className="w-3.5 h-3.5" />
+              {t("notifications.unwatch")}
+            </button>
+          </div>
+        ) : (
+
+          n.action &&
+          !n.dismissed && (
+            <button
+              onClick={() => {
+                n.action!.onClick();
+                dismissClient(n.id);
+              }}
+              className="mt-1 text-accent text-sm font-semibold hover:underline"
+            >
+              {n.action.label}
+            </button>
+          )
+        )}
+      </div>
+      <button
+        onClick={onRemove}
+        title={t("inbox.dismiss")}
+        aria-label={t("inbox.dismiss")}
+        className="p-1.5 rounded-lg text-muted hover:text-fg hover:bg-card transition shrink-0"
+      >
+        <X className="w-4 h-4" />
+      </button>
+    </div>
+  );
+}

frontend/src/i18n/locales/de/inbox.json

@@ -7,6 +7,8 @@
   "clearAll": "Alle löschen",
   "markRead": "Als gelesen markieren",
   "dismiss": "Verwerfen",
+  "sectionSystem": "System",
+  "sectionActivity": "Aktivität",
   "andMore": "und {{count}} weitere",
   "maintenance": {
     "title": "Videos entfernt",

frontend/src/i18n/locales/en/inbox.json

@@ -7,6 +7,8 @@
   "clearAll": "Clear all",
   "markRead": "Mark read",
   "dismiss": "Dismiss",
+  "sectionSystem": "System",
+  "sectionActivity": "Activity",
   "andMore": "and {{count}} more",
   "maintenance": {
     "title": "Videos removed",

frontend/src/i18n/locales/hu/inbox.json

@@ -7,6 +7,8 @@
   "clearAll": "Összes törlése",
   "markRead": "Olvasottnak jelöl",
   "dismiss": "Elvetés",
+  "sectionSystem": "Rendszer",
+  "sectionActivity": "Tevékenység",
   "andMore": "és még {{count}}",
   "maintenance": {
     "title": "Videók eltávolítva",

frontend/src/lib/notifications.ts

@@ -218,6 +218,21 @@ export function clearAll(): void {
   emit();
 }
 
+/** Remove a single history entry entirely (per-item clear in the notification center). */
+export function remove(id: number): void {
+  const before = items.length;
+  items = items.filter((n) => n.id !== id);
+  if (items.length !== before) emit();
+}
+
+/** Resolve any history entries tied to a video — called when it's unhidden/unwatched so the
+ * now-stale "Hidden/Watched X" notice disappears instead of lingering with a dead action. */
+export function resolveVideo(videoId: string): void {
+  const before = items.length;
+  items = items.filter((n) => n.meta?.videoId !== videoId);
+  if (items.length !== before) emit();
+}
+
 export const getActiveToasts = (): Notification[] => cachedActive;
 export const getNotifications = (): Notification[] => cachedReversed;
 export const getUnreadCount = (): number => cachedUnread;