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:
parent
47d0799407
commit
119286db63
3 changed files with 32 additions and 7 deletions
|
|
@ -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" },
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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 && (
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue