feat(notifications): notify on 'watched' with an Unwatch action

Mirror the hide flow for watched: marking a video watched (card, modal toggle,
or auto-watch) raises a toast and a bell-history entry with an Unwatch action —
no Find-in-feed, just revert. NotifMeta becomes a discriminated union
(video-hidden | video-watched); unhide/unwatch share one revert-to-new helper.
This commit is contained in:
npeter83 2026-06-12 17:39:28 +02:00
parent 47d0799407
commit 119286db63
3 changed files with 32 additions and 7 deletions

View file

@ -87,6 +87,13 @@ export default function Feed({
channelName: v?.channel_title ?? "", channelName: v?.channel_title ?? "",
}, },
}); });
} else if (status === "watched") {
const v = (query.data?.pages ?? []).flatMap((p) => p.items).find((x) => x.id === id);
notify({
message: v?.title ? `Marked watched “${v.title}` : "Marked watched",
action: { label: "Unwatch", onClick: () => onState(id, "new") },
meta: { kind: "video-watched", videoId: id, title: v?.title ?? "this video" },
});
} }
} }

View file

@ -1,6 +1,6 @@
import { useEffect, useRef, useState, useSyncExternalStore } from "react"; import { useEffect, useRef, useState, useSyncExternalStore } from "react";
import { useQueryClient } from "@tanstack/react-query"; import { useQueryClient } from "@tanstack/react-query";
import { Bell, Eye, Search, Trash2 } from "lucide-react"; import { Bell, Eye, RotateCcw, Search, Trash2 } from "lucide-react";
import { api, type FeedFilters } from "../lib/api"; import { api, type FeedFilters } from "../lib/api";
import { import {
clearAll, clearAll,
@ -10,7 +10,8 @@ import {
markAllRead, markAllRead,
notify, notify,
subscribe, subscribe,
type NotifMeta, type VideoHiddenMeta,
type VideoWatchedMeta,
} from "../lib/notifications"; } from "../lib/notifications";
import { LEVEL_STYLE } from "./Toaster"; import { LEVEL_STYLE } from "./Toaster";
@ -53,7 +54,7 @@ export default function NotificationCenter({
if (open) markAllRead(); if (open) markAllRead();
}, [open, notifications.length]); }, [open, notifications.length]);
function locateHidden(meta: NotifMeta) { function locateHidden(meta: VideoHiddenMeta) {
setFilters({ setFilters({
...filters, ...filters,
show: "hidden", show: "hidden",
@ -63,13 +64,13 @@ export default function NotificationCenter({
setOpen(false); setOpen(false);
} }
function unhide(meta: NotifMeta) { function revertState(meta: VideoHiddenMeta | VideoWatchedMeta, verb: string) {
api api
.setState(meta.videoId, "new") .setState(meta.videoId, "new")
.then(() => { .then(() => {
qc.invalidateQueries({ queryKey: ["feed"] }); qc.invalidateQueries({ queryKey: ["feed"] });
qc.invalidateQueries({ queryKey: ["feed-count"] }); qc.invalidateQueries({ queryKey: ["feed-count"] });
notify({ level: "success", message: `Unhidden${meta.title}` }); notify({ level: "success", message: `${verb}${meta.title}` });
}) })
.catch(() => {}); .catch(() => {});
} }
@ -113,6 +114,7 @@ export default function NotificationCenter({
const { icon: Icon, color } = LEVEL_STYLE[n.level]; const { icon: Icon, color } = LEVEL_STYLE[n.level];
const needsAction = n.requiresInteraction && !n.dismissed; const needsAction = n.requiresInteraction && !n.dismissed;
const hidden = n.meta?.kind === "video-hidden" ? n.meta : null; const hidden = n.meta?.kind === "video-hidden" ? n.meta : null;
const watched = n.meta?.kind === "video-watched" ? n.meta : null;
return ( return (
<div <div
key={n.id} key={n.id}
@ -143,13 +145,23 @@ export default function NotificationCenter({
Find in feed Find in feed
</button> </button>
<button <button
onClick={() => unhide(hidden)} onClick={() => revertState(hidden, "Unhidden")}
className="flex items-center gap-1 text-accent text-sm font-semibold hover:underline" className="flex items-center gap-1 text-accent text-sm font-semibold hover:underline"
> >
<Eye className="w-3.5 h-3.5" /> <Eye className="w-3.5 h-3.5" />
Unhide Unhide
</button> </button>
</div> </div>
) : watched ? (
<div className="flex items-center gap-3 mt-1">
<button
onClick={() => revertState(watched, "Unwatched")}
className="flex items-center gap-1 text-accent text-sm font-semibold hover:underline"
>
<RotateCcw className="w-3.5 h-3.5" />
Unwatch
</button>
</div>
) : ( ) : (
n.action && n.action &&
!n.dismissed && ( !n.dismissed && (

View file

@ -12,13 +12,19 @@ export interface NotifAction {
// Structured payload that lets the Notification Center offer in-app actions even // Structured payload that lets the Notification Center offer in-app actions even
// after a reload (when live `action` callbacks are gone). // after a reload (when live `action` callbacks are gone).
export type NotifMeta = { export type VideoHiddenMeta = {
kind: "video-hidden"; kind: "video-hidden";
videoId: string; videoId: string;
title: string; title: string;
channelId: string; channelId: string;
channelName: string; channelName: string;
}; };
export type VideoWatchedMeta = {
kind: "video-watched";
videoId: string;
title: string;
};
export type NotifMeta = VideoHiddenMeta | VideoWatchedMeta;
export interface Notification { export interface Notification {
id: number; id: number;