2026-06-11 19:46:58 +02:00
|
|
|
import { useEffect, useRef, useState, useSyncExternalStore } from "react";
|
2026-06-17 14:28:29 +02:00
|
|
|
import { createPortal } from "react-dom";
|
feat(i18n): translate remaining components (HU/EN/DE)
Feed, VideoCard, Sidebar, PlayerModal, Channels, Stats, SettingsPanel,
OnboardingWizard, NotificationCenter, Toaster, ErrorBoundary and the relativeTime
helper are now fully translated in Hungarian, English and German, each with its own
locale area file (auto-loaded). Key parity verified across all three languages.
2026-06-15 00:47:04 +02:00
|
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
|
import type { TFunction } from "i18next";
|
2026-06-11 19:46:58 +02:00
|
|
|
import { useQueryClient } from "@tanstack/react-query";
|
2026-06-12 17:39:28 +02:00
|
|
|
import { Bell, Eye, RotateCcw, Search, Trash2 } from "lucide-react";
|
2026-06-11 19:46:58 +02:00
|
|
|
import { api, type FeedFilters } from "../lib/api";
|
2026-06-11 19:26:34 +02:00
|
|
|
import {
|
|
|
|
|
clearAll,
|
|
|
|
|
dismiss,
|
|
|
|
|
getNotifications,
|
|
|
|
|
getUnreadCount,
|
|
|
|
|
markAllRead,
|
2026-06-11 19:46:58 +02:00
|
|
|
notify,
|
2026-06-11 19:26:34 +02:00
|
|
|
subscribe,
|
2026-06-12 17:39:28 +02:00
|
|
|
type VideoHiddenMeta,
|
|
|
|
|
type VideoWatchedMeta,
|
2026-06-11 19:26:34 +02:00
|
|
|
} from "../lib/notifications";
|
|
|
|
|
import { LEVEL_STYLE } from "./Toaster";
|
|
|
|
|
|
feat(i18n): translate remaining components (HU/EN/DE)
Feed, VideoCard, Sidebar, PlayerModal, Channels, Stats, SettingsPanel,
OnboardingWizard, NotificationCenter, Toaster, ErrorBoundary and the relativeTime
helper are now fully translated in Hungarian, English and German, each with its own
locale area file (auto-loaded). Key parity verified across all three languages.
2026-06-15 00:47:04 +02:00
|
|
|
function relTime(ts: number, t: TFunction): string {
|
2026-06-11 19:26:34 +02:00
|
|
|
const s = Math.round((Date.now() - ts) / 1000);
|
feat(i18n): translate remaining components (HU/EN/DE)
Feed, VideoCard, Sidebar, PlayerModal, Channels, Stats, SettingsPanel,
OnboardingWizard, NotificationCenter, Toaster, ErrorBoundary and the relativeTime
helper are now fully translated in Hungarian, English and German, each with its own
locale area file (auto-loaded). Key parity verified across all three languages.
2026-06-15 00:47:04 +02:00
|
|
|
if (s < 60) return t("notifications.time.justNow");
|
2026-06-11 19:26:34 +02:00
|
|
|
const m = Math.round(s / 60);
|
feat(i18n): translate remaining components (HU/EN/DE)
Feed, VideoCard, Sidebar, PlayerModal, Channels, Stats, SettingsPanel,
OnboardingWizard, NotificationCenter, Toaster, ErrorBoundary and the relativeTime
helper are now fully translated in Hungarian, English and German, each with its own
locale area file (auto-loaded). Key parity verified across all three languages.
2026-06-15 00:47:04 +02:00
|
|
|
if (m < 60) return t("notifications.time.minutes", { count: m });
|
2026-06-11 19:26:34 +02:00
|
|
|
const h = Math.round(m / 60);
|
feat(i18n): translate remaining components (HU/EN/DE)
Feed, VideoCard, Sidebar, PlayerModal, Channels, Stats, SettingsPanel,
OnboardingWizard, NotificationCenter, Toaster, ErrorBoundary and the relativeTime
helper are now fully translated in Hungarian, English and German, each with its own
locale area file (auto-loaded). Key parity verified across all three languages.
2026-06-15 00:47:04 +02:00
|
|
|
if (h < 24) return t("notifications.time.hours", { count: h });
|
2026-06-11 19:26:34 +02:00
|
|
|
const d = Math.round(h / 24);
|
feat(i18n): translate remaining components (HU/EN/DE)
Feed, VideoCard, Sidebar, PlayerModal, Channels, Stats, SettingsPanel,
OnboardingWizard, NotificationCenter, Toaster, ErrorBoundary and the relativeTime
helper are now fully translated in Hungarian, English and German, each with its own
locale area file (auto-loaded). Key parity verified across all three languages.
2026-06-15 00:47:04 +02:00
|
|
|
return t("notifications.time.days", { count: d });
|
2026-06-11 19:26:34 +02:00
|
|
|
}
|
|
|
|
|
|
2026-06-11 19:46:58 +02:00
|
|
|
export default function NotificationCenter({
|
|
|
|
|
filters,
|
|
|
|
|
setFilters,
|
2026-06-17 14:28:29 +02:00
|
|
|
variant = "header",
|
2026-06-11 19:46:58 +02:00
|
|
|
}: {
|
|
|
|
|
filters: FeedFilters;
|
|
|
|
|
setFilters: (f: FeedFilters) => void;
|
2026-06-17 14:28:29 +02:00
|
|
|
variant?: "header" | "rail";
|
2026-06-11 19:46:58 +02:00
|
|
|
}) {
|
feat(i18n): translate remaining components (HU/EN/DE)
Feed, VideoCard, Sidebar, PlayerModal, Channels, Stats, SettingsPanel,
OnboardingWizard, NotificationCenter, Toaster, ErrorBoundary and the relativeTime
helper are now fully translated in Hungarian, English and German, each with its own
locale area file (auto-loaded). Key parity verified across all three languages.
2026-06-15 00:47:04 +02:00
|
|
|
const { t } = useTranslation();
|
2026-06-11 19:26:34 +02:00
|
|
|
const notifications = useSyncExternalStore(subscribe, getNotifications, getNotifications);
|
|
|
|
|
const unread = useSyncExternalStore(subscribe, getUnreadCount, getUnreadCount);
|
|
|
|
|
const [open, setOpen] = useState(false);
|
|
|
|
|
const wrap = useRef<HTMLDivElement>(null);
|
2026-06-17 14:28:29 +02:00
|
|
|
const btnRef = useRef<HTMLButtonElement>(null);
|
|
|
|
|
const panelRef = useRef<HTMLDivElement>(null);
|
|
|
|
|
// Rail variant anchors the panel right + above the button (fixed, viewport coords) and
|
|
|
|
|
// portals it to <body> so it escapes the nav's backdrop-filter.
|
|
|
|
|
const [pos, setPos] = useState<{ left: number; bottom: number }>({ left: 0, bottom: 0 });
|
2026-06-11 19:46:58 +02:00
|
|
|
const qc = useQueryClient();
|
|
|
|
|
|
2026-06-17 14:28:29 +02:00
|
|
|
// Close when clicking anywhere outside the button + panel.
|
2026-06-11 19:46:58 +02:00
|
|
|
useEffect(() => {
|
|
|
|
|
if (!open) return;
|
|
|
|
|
function onDown(e: MouseEvent) {
|
2026-06-17 14:28:29 +02:00
|
|
|
const target = e.target as Node;
|
|
|
|
|
if (btnRef.current?.contains(target) || panelRef.current?.contains(target)) return;
|
|
|
|
|
if (variant === "header" && wrap.current?.contains(target)) return;
|
|
|
|
|
setOpen(false);
|
2026-06-11 19:46:58 +02:00
|
|
|
}
|
|
|
|
|
document.addEventListener("mousedown", onDown);
|
|
|
|
|
return () => document.removeEventListener("mousedown", onDown);
|
2026-06-17 14:28:29 +02:00
|
|
|
}, [open, variant]);
|
|
|
|
|
|
|
|
|
|
function toggle() {
|
|
|
|
|
if (!open && variant === "rail") {
|
|
|
|
|
const r = btnRef.current?.getBoundingClientRect();
|
|
|
|
|
if (r) setPos({ left: r.right + 8, bottom: window.innerHeight - r.bottom });
|
|
|
|
|
}
|
|
|
|
|
setOpen((o) => !o);
|
|
|
|
|
}
|
2026-06-11 19:26:34 +02:00
|
|
|
|
|
|
|
|
// Opening the center marks everything read.
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
if (open) markAllRead();
|
|
|
|
|
}, [open, notifications.length]);
|
|
|
|
|
|
2026-06-12 17:39:28 +02:00
|
|
|
function locateHidden(meta: VideoHiddenMeta) {
|
2026-06-11 19:46:58 +02:00
|
|
|
setFilters({
|
|
|
|
|
...filters,
|
|
|
|
|
show: "hidden",
|
|
|
|
|
channelId: meta.channelId || undefined,
|
|
|
|
|
channelName: meta.channelName || undefined,
|
|
|
|
|
});
|
|
|
|
|
setOpen(false);
|
|
|
|
|
}
|
|
|
|
|
|
feat(i18n): translate remaining components (HU/EN/DE)
Feed, VideoCard, Sidebar, PlayerModal, Channels, Stats, SettingsPanel,
OnboardingWizard, NotificationCenter, Toaster, ErrorBoundary and the relativeTime
helper are now fully translated in Hungarian, English and German, each with its own
locale area file (auto-loaded). Key parity verified across all three languages.
2026-06-15 00:47:04 +02:00
|
|
|
function revertState(
|
|
|
|
|
meta: VideoHiddenMeta | VideoWatchedMeta,
|
|
|
|
|
messageKey: "notifications.unhidden" | "notifications.unwatched"
|
|
|
|
|
) {
|
2026-06-11 19:46:58 +02:00
|
|
|
api
|
|
|
|
|
.setState(meta.videoId, "new")
|
|
|
|
|
.then(() => {
|
|
|
|
|
qc.invalidateQueries({ queryKey: ["feed"] });
|
|
|
|
|
qc.invalidateQueries({ queryKey: ["feed-count"] });
|
feat(i18n): translate remaining components (HU/EN/DE)
Feed, VideoCard, Sidebar, PlayerModal, Channels, Stats, SettingsPanel,
OnboardingWizard, NotificationCenter, Toaster, ErrorBoundary and the relativeTime
helper are now fully translated in Hungarian, English and German, each with its own
locale area file (auto-loaded). Key parity verified across all three languages.
2026-06-15 00:47:04 +02:00
|
|
|
notify({ level: "success", message: t(messageKey, { title: meta.title }) });
|
2026-06-11 19:46:58 +02:00
|
|
|
})
|
|
|
|
|
.catch(() => {});
|
|
|
|
|
}
|
|
|
|
|
|
2026-06-17 14:28:29 +02:00
|
|
|
function renderPanel(el: JSX.Element) {
|
|
|
|
|
if (variant !== "rail") return el;
|
|
|
|
|
return createPortal(
|
|
|
|
|
<div style={{ position: "fixed", left: pos.left, bottom: pos.bottom, zIndex: 40 }}>
|
|
|
|
|
{el}
|
|
|
|
|
</div>,
|
|
|
|
|
document.body
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
2026-06-11 19:26:34 +02:00
|
|
|
return (
|
|
|
|
|
<div className="relative" ref={wrap}>
|
|
|
|
|
<button
|
2026-06-17 14:28:29 +02:00
|
|
|
ref={btnRef}
|
|
|
|
|
onClick={toggle}
|
feat(i18n): translate remaining components (HU/EN/DE)
Feed, VideoCard, Sidebar, PlayerModal, Channels, Stats, SettingsPanel,
OnboardingWizard, NotificationCenter, Toaster, ErrorBoundary and the relativeTime
helper are now fully translated in Hungarian, English and German, each with its own
locale area file (auto-loaded). Key parity verified across all three languages.
2026-06-15 00:47:04 +02:00
|
|
|
title={t("notifications.title")}
|
2026-06-11 19:26:34 +02:00
|
|
|
className="relative p-2 rounded-lg text-muted hover:text-fg hover:bg-card transition"
|
|
|
|
|
>
|
|
|
|
|
<Bell className="w-5 h-5" />
|
|
|
|
|
{unread > 0 && (
|
|
|
|
|
<span className="absolute -top-0.5 -right-0.5 min-w-[16px] h-4 px-1 rounded-full bg-accent text-accent-fg text-[10px] font-bold grid place-items-center">
|
|
|
|
|
{unread > 9 ? "9+" : unread}
|
|
|
|
|
</span>
|
|
|
|
|
)}
|
|
|
|
|
</button>
|
|
|
|
|
|
2026-06-17 14:28:29 +02:00
|
|
|
{open &&
|
|
|
|
|
renderPanel(
|
|
|
|
|
<div
|
|
|
|
|
ref={panelRef}
|
|
|
|
|
className={`glass-menu w-80 max-w-[calc(100vw-2rem)] rounded-xl flex flex-col max-h-[70vh] animate-[popIn_0.16s_ease] ${
|
|
|
|
|
variant === "rail" ? "" : "absolute right-0 mt-2 z-30"
|
|
|
|
|
}`}
|
|
|
|
|
>
|
2026-06-11 19:46:58 +02:00
|
|
|
<div className="flex items-center justify-between px-3 py-2 border-b border-border">
|
feat(i18n): translate remaining components (HU/EN/DE)
Feed, VideoCard, Sidebar, PlayerModal, Channels, Stats, SettingsPanel,
OnboardingWizard, NotificationCenter, Toaster, ErrorBoundary and the relativeTime
helper are now fully translated in Hungarian, English and German, each with its own
locale area file (auto-loaded). Key parity verified across all three languages.
2026-06-15 00:47:04 +02:00
|
|
|
<div className="text-sm font-semibold">{t("notifications.title")}</div>
|
2026-06-11 19:46:58 +02:00
|
|
|
{notifications.length > 0 && (
|
|
|
|
|
<button
|
|
|
|
|
onClick={clearAll}
|
|
|
|
|
className="flex items-center gap-1 text-xs text-muted hover:text-accent transition"
|
feat(i18n): translate remaining components (HU/EN/DE)
Feed, VideoCard, Sidebar, PlayerModal, Channels, Stats, SettingsPanel,
OnboardingWizard, NotificationCenter, Toaster, ErrorBoundary and the relativeTime
helper are now fully translated in Hungarian, English and German, each with its own
locale area file (auto-loaded). Key parity verified across all three languages.
2026-06-15 00:47:04 +02:00
|
|
|
title={t("notifications.clearAll")}
|
2026-06-11 19:46:58 +02:00
|
|
|
>
|
|
|
|
|
<Trash2 className="w-3.5 h-3.5" />
|
feat(i18n): translate remaining components (HU/EN/DE)
Feed, VideoCard, Sidebar, PlayerModal, Channels, Stats, SettingsPanel,
OnboardingWizard, NotificationCenter, Toaster, ErrorBoundary and the relativeTime
helper are now fully translated in Hungarian, English and German, each with its own
locale area file (auto-loaded). Key parity verified across all three languages.
2026-06-15 00:47:04 +02:00
|
|
|
{t("notifications.clear")}
|
2026-06-11 19:46:58 +02:00
|
|
|
</button>
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className="overflow-y-auto">
|
|
|
|
|
{notifications.length === 0 ? (
|
feat(i18n): translate remaining components (HU/EN/DE)
Feed, VideoCard, Sidebar, PlayerModal, Channels, Stats, SettingsPanel,
OnboardingWizard, NotificationCenter, Toaster, ErrorBoundary and the relativeTime
helper are now fully translated in Hungarian, English and German, each with its own
locale area file (auto-loaded). Key parity verified across all three languages.
2026-06-15 00:47:04 +02:00
|
|
|
<div className="px-3 py-8 text-center text-sm text-muted">{t("notifications.empty")}</div>
|
2026-06-11 19:46:58 +02:00
|
|
|
) : (
|
|
|
|
|
notifications.map((n) => {
|
|
|
|
|
const { icon: Icon, color } = LEVEL_STYLE[n.level];
|
|
|
|
|
const needsAction = n.requiresInteraction && !n.dismissed;
|
|
|
|
|
const hidden = n.meta?.kind === "video-hidden" ? n.meta : null;
|
2026-06-12 17:39:28 +02:00
|
|
|
const watched = n.meta?.kind === "video-watched" ? n.meta : null;
|
2026-06-11 19:46:58 +02:00
|
|
|
return (
|
|
|
|
|
<div
|
|
|
|
|
key={n.id}
|
|
|
|
|
className={`flex items-start gap-2.5 px-3 py-2.5 border-b border-border/60 ${
|
|
|
|
|
needsAction ? "bg-accent/5" : ""
|
|
|
|
|
}`}
|
|
|
|
|
>
|
|
|
|
|
<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">
|
feat(i18n): translate remaining components (HU/EN/DE)
Feed, VideoCard, Sidebar, PlayerModal, Channels, Stats, SettingsPanel,
OnboardingWizard, NotificationCenter, Toaster, ErrorBoundary and the relativeTime
helper are now fully translated in Hungarian, English and German, each with its own
locale area file (auto-loaded). Key parity verified across all three languages.
2026-06-15 00:47:04 +02:00
|
|
|
<span className="text-[11px] text-muted">{relTime(n.ts, t)}</span>
|
2026-06-11 19:46:58 +02:00
|
|
|
{needsAction && (
|
|
|
|
|
<span className="text-[10px] uppercase tracking-wide font-semibold text-accent">
|
feat(i18n): translate remaining components (HU/EN/DE)
Feed, VideoCard, Sidebar, PlayerModal, Channels, Stats, SettingsPanel,
OnboardingWizard, NotificationCenter, Toaster, ErrorBoundary and the relativeTime
helper are now fully translated in Hungarian, English and German, each with its own
locale area file (auto-loaded). Key parity verified across all three languages.
2026-06-15 00:47:04 +02:00
|
|
|
{t("notifications.actionNeeded")}
|
2026-06-11 19:46:58 +02:00
|
|
|
</span>
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
2026-06-11 19:26:34 +02:00
|
|
|
|
2026-06-11 19:46:58 +02:00
|
|
|
{hidden ? (
|
|
|
|
|
<div className="flex items-center gap-3 mt-1">
|
|
|
|
|
<button
|
|
|
|
|
onClick={() => locateHidden(hidden)}
|
|
|
|
|
className="flex items-center gap-1 text-accent text-sm font-semibold hover:underline"
|
|
|
|
|
>
|
|
|
|
|
<Search className="w-3.5 h-3.5" />
|
feat(i18n): translate remaining components (HU/EN/DE)
Feed, VideoCard, Sidebar, PlayerModal, Channels, Stats, SettingsPanel,
OnboardingWizard, NotificationCenter, Toaster, ErrorBoundary and the relativeTime
helper are now fully translated in Hungarian, English and German, each with its own
locale area file (auto-loaded). Key parity verified across all three languages.
2026-06-15 00:47:04 +02:00
|
|
|
{t("notifications.findInFeed")}
|
2026-06-11 19:46:58 +02:00
|
|
|
</button>
|
|
|
|
|
<button
|
feat(i18n): translate remaining components (HU/EN/DE)
Feed, VideoCard, Sidebar, PlayerModal, Channels, Stats, SettingsPanel,
OnboardingWizard, NotificationCenter, Toaster, ErrorBoundary and the relativeTime
helper are now fully translated in Hungarian, English and German, each with its own
locale area file (auto-loaded). Key parity verified across all three languages.
2026-06-15 00:47:04 +02:00
|
|
|
onClick={() => revertState(hidden, "notifications.unhidden")}
|
2026-06-11 19:46:58 +02:00
|
|
|
className="flex items-center gap-1 text-accent text-sm font-semibold hover:underline"
|
|
|
|
|
>
|
|
|
|
|
<Eye className="w-3.5 h-3.5" />
|
feat(i18n): translate remaining components (HU/EN/DE)
Feed, VideoCard, Sidebar, PlayerModal, Channels, Stats, SettingsPanel,
OnboardingWizard, NotificationCenter, Toaster, ErrorBoundary and the relativeTime
helper are now fully translated in Hungarian, English and German, each with its own
locale area file (auto-loaded). Key parity verified across all three languages.
2026-06-15 00:47:04 +02:00
|
|
|
{t("notifications.unhide")}
|
2026-06-11 19:46:58 +02:00
|
|
|
</button>
|
2026-06-11 19:26:34 +02:00
|
|
|
</div>
|
2026-06-12 17:39:28 +02:00
|
|
|
) : watched ? (
|
|
|
|
|
<div className="flex items-center gap-3 mt-1">
|
|
|
|
|
<button
|
feat(i18n): translate remaining components (HU/EN/DE)
Feed, VideoCard, Sidebar, PlayerModal, Channels, Stats, SettingsPanel,
OnboardingWizard, NotificationCenter, Toaster, ErrorBoundary and the relativeTime
helper are now fully translated in Hungarian, English and German, each with its own
locale area file (auto-loaded). Key parity verified across all three languages.
2026-06-15 00:47:04 +02:00
|
|
|
onClick={() => revertState(watched, "notifications.unwatched")}
|
2026-06-12 17:39:28 +02:00
|
|
|
className="flex items-center gap-1 text-accent text-sm font-semibold hover:underline"
|
|
|
|
|
>
|
|
|
|
|
<RotateCcw className="w-3.5 h-3.5" />
|
feat(i18n): translate remaining components (HU/EN/DE)
Feed, VideoCard, Sidebar, PlayerModal, Channels, Stats, SettingsPanel,
OnboardingWizard, NotificationCenter, Toaster, ErrorBoundary and the relativeTime
helper are now fully translated in Hungarian, English and German, each with its own
locale area file (auto-loaded). Key parity verified across all three languages.
2026-06-15 00:47:04 +02:00
|
|
|
{t("notifications.unwatch")}
|
2026-06-12 17:39:28 +02:00
|
|
|
</button>
|
|
|
|
|
</div>
|
2026-06-11 19:46:58 +02:00
|
|
|
) : (
|
|
|
|
|
n.action &&
|
|
|
|
|
!n.dismissed && (
|
2026-06-11 19:26:34 +02:00
|
|
|
<button
|
|
|
|
|
onClick={() => {
|
|
|
|
|
n.action!.onClick();
|
|
|
|
|
dismiss(n.id);
|
|
|
|
|
}}
|
|
|
|
|
className="mt-1 text-accent text-sm font-semibold hover:underline"
|
|
|
|
|
>
|
|
|
|
|
{n.action.label}
|
|
|
|
|
</button>
|
2026-06-11 19:46:58 +02:00
|
|
|
)
|
|
|
|
|
)}
|
2026-06-11 19:26:34 +02:00
|
|
|
</div>
|
2026-06-11 19:46:58 +02:00
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
})
|
|
|
|
|
)}
|
2026-06-11 19:26:34 +02:00
|
|
|
</div>
|
2026-06-11 19:46:58 +02:00
|
|
|
</div>
|
2026-06-11 19:26:34 +02:00
|
|
|
)}
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
