diff --git a/frontend/src/components/Feed.tsx b/frontend/src/components/Feed.tsx index e157664..87d75ef 100644 --- a/frontend/src/components/Feed.tsx +++ b/frontend/src/components/Feed.tsx @@ -87,6 +87,13 @@ export default function Feed({ 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" }, + }); } } diff --git a/frontend/src/components/NotificationCenter.tsx b/frontend/src/components/NotificationCenter.tsx index 5ba96e4..4603218 100644 --- a/frontend/src/components/NotificationCenter.tsx +++ b/frontend/src/components/NotificationCenter.tsx @@ -1,6 +1,6 @@ import { useEffect, useRef, useState, useSyncExternalStore } from "react"; 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 { clearAll, @@ -10,7 +10,8 @@ import { markAllRead, notify, subscribe, - type NotifMeta, + type VideoHiddenMeta, + type VideoWatchedMeta, } from "../lib/notifications"; import { LEVEL_STYLE } from "./Toaster"; @@ -53,7 +54,7 @@ export default function NotificationCenter({ if (open) markAllRead(); }, [open, notifications.length]); - function locateHidden(meta: NotifMeta) { + function locateHidden(meta: VideoHiddenMeta) { setFilters({ ...filters, show: "hidden", @@ -63,13 +64,13 @@ export default function NotificationCenter({ setOpen(false); } - function unhide(meta: NotifMeta) { + function revertState(meta: VideoHiddenMeta | VideoWatchedMeta, verb: string) { api .setState(meta.videoId, "new") .then(() => { qc.invalidateQueries({ queryKey: ["feed"] }); qc.invalidateQueries({ queryKey: ["feed-count"] }); - notify({ level: "success", message: `Unhidden “${meta.title}”` }); + notify({ level: "success", message: `${verb} “${meta.title}”` }); }) .catch(() => {}); } @@ -113,6 +114,7 @@ export default function NotificationCenter({ 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 (