@burdenoff/fe-libs 2026.527.2 → 2026.527.4

package/dist/chrome/NotificationCenter.js

@@ -1,705 +1,80 @@
-import { useCallback as e, useEffect as t, useRef as n, useState as r } from "react";
-import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
-import { gql as s } from "@apollo/client";
+import { BellButton as e } from "./notificationCenter/BellButton.js";
+import { sortNotifications as t } from "./notificationCenter/constants.js";
+import { NotificationFilters as n } from "./notificationCenter/NotificationFilters.js";
+import { NotificationFooter as r } from "./notificationCenter/NotificationFooter.js";
+import { NotificationHeader as i } from "./notificationCenter/NotificationHeader.js";
+import { NotificationList as a } from "./notificationCenter/NotificationList.js";
+import { NotificationPanel as o } from "./notificationCenter/NotificationPanel.js";
+import { useNotificationCenter as s } from "./notificationCenter/useNotificationCenter.js";
+import { useEscapeClose as c, useOutsideClickClose as l, usePanelChrome as u } from "./notificationCenter/usePanelChrome.js";
+import { useCallback as d, useRef as f, useState as p } from "react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
 //#region src/chrome/NotificationCenter.tsx
-var c = s`
-  query GetNotifications($filter: NotificationFilterInput, $limit: Int, $offset: Int) {
-    notifications(filter: $filter, limit: $limit, offset: $offset) {
-      items {
-        id
-        title
-        message
-        type
-        priority
-        status
-        channel
-        appName
-        redirectUrl
-        isRead
-        readAt
-        createdAt
-      }
-      total
-      hasMore
-    }
-  }
-`, l = s`
-  query GetMyUnreadNotificationCount($filter: NotificationFilterInput) {
-    myUnreadNotificationCount(filter: $filter)
-  }
-`, u = s`
-  subscription MyUnreadNotificationCountStream($filter: NotificationFilterInput) {
-    myUnreadNotificationCountStream(filter: $filter)
-  }
-`, d = s`
-  query MyCountsByApp {
-    myNotificationCountsByApp
-  }
-`, f = s`
-  mutation MarkAsRead($id: ID!) {
-    markNotificationAsRead(id: $id) {
-      id
-      isRead
-      readAt
-      status
-    }
-  }
-`, p = s`
-  mutation MarkAllRead {
-    markAllMyNotificationsAsRead {
-      success
-      count
-    }
-  }
-`, m = s`
-  mutation DeleteNotification($id: ID!) {
-    deleteNotification(id: $id)
-  }
-`, h = {
-	URGENT: {
-		color: "text-status-error-text",
-		bgColor: "bg-status-error-bg",
-		label: "Urgent",
-		order: 0
-	},
-	HIGH: {
-		color: "text-status-warning-text",
-		bgColor: "bg-status-warning-bg",
-		label: "High",
-		order: 1
-	},
-	MEDIUM: {
-		color: "text-status-info-text",
-		bgColor: "bg-status-info-bg",
-		label: "Medium",
-		order: 2
-	},
-	LOW: {
-		color: "text-text-tertiary",
-		bgColor: "bg-bg-muted",
-		label: "Low",
-		order: 3
-	}
-}, g = {
-	SYSTEM: {
-		icon: "⚙️",
-		label: "System"
-	},
-	ALERT: {
-		icon: "⚠️",
-		label: "Alert"
-	},
-	TRANSACTIONAL: {
-		icon: "📋",
-		label: "Transaction"
-	},
-	MARKETING: {
-		icon: "📣",
-		label: "Marketing"
-	}
-}, _ = [
-	{
-		value: "all",
-		label: "All"
-	},
-	{
-		value: "unread",
-		label: "Unread"
-	},
-	{
-		value: "read",
-		label: "Read"
-	}
-], v = [
-	{
-		value: "ALL",
-		label: "All"
-	},
-	{
-		value: "SYSTEM",
-		label: "System"
-	},
-	{
-		value: "ALERT",
-		label: "Alert"
-	},
-	{
-		value: "TRANSACTIONAL",
-		label: "Transactional"
-	},
-	{
-		value: "MARKETING",
-		label: "Marketing"
-	}
-];
-function y(e) {
-	let t = Date.now() - new Date(e).getTime(), n = Math.floor(t / 1e3), r = Math.floor(n / 60), i = Math.floor(r / 60), a = Math.floor(i / 24);
-	return n < 60 ? "Just now" : r < 60 ? `${r}m ago` : i < 24 ? `${i}h ago` : a < 7 ? `${a}d ago` : new Date(e).toLocaleDateString();
-}
-function ee(e, t) {
-	let n = [...e];
-	switch (t) {
-		case "newest": return n.sort((e, t) => new Date(t.createdAt).getTime() - new Date(e.createdAt).getTime());
-		case "oldest": return n.sort((e, t) => new Date(e.createdAt).getTime() - new Date(t.createdAt).getTime());
-		case "priority": return n.sort((e, t) => (h[e.priority]?.order ?? 99) - (h[t.priority]?.order ?? 99));
-		default: return n;
-	}
-}
-var te = ({ notification: e, onMarkAsRead: t, onDelete: n, onRedirect: r }) => {
-	let { id: i, title: s, message: c, type: l, priority: u, appName: d, redirectUrl: f, isRead: p, createdAt: m } = e, _ = h[u] ?? h.MEDIUM, v = g[l] ?? {
-		icon: "🔔",
-		label: l
-	};
-	return /* @__PURE__ */ o("div", {
-		className: `group relative flex gap-3 p-3 rounded-card border transition-all duration-150 cursor-pointer ${p ? "bg-bg-canvas border-border-subtle" : "bg-bg-elevated border-border-default shadow-sm"} hover:bg-action-ghost-bg-hover`,
-		onClick: () => {
-			p || t(i), f && r(f);
-		},
-		role: "button",
-		tabIndex: 0,
-		onKeyDown: (e) => {
-			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), p || t(i), f && r(f));
-		},
-		children: [
-			!p && /* @__PURE__ */ a("div", { className: "absolute top-3 left-1.5 w-2 h-2 rounded-full bg-action-primary-bg" }),
-			/* @__PURE__ */ a("div", {
-				className: "flex-shrink-0 mt-0.5 ml-2",
-				children: /* @__PURE__ */ a("span", {
-					className: "text-base",
-					"aria-hidden": "true",
-					children: v.icon
-				})
-			}),
-			/* @__PURE__ */ o("div", {
-				className: "flex-1 min-w-0",
-				children: [
-					/* @__PURE__ */ o("div", {
-						className: "flex items-start justify-between gap-2",
-						children: [/* @__PURE__ */ a("h4", {
-							className: `text-sm truncate ${p ? "font-normal text-text-secondary" : "font-semibold text-text-primary"}`,
-							children: s
-						}), /* @__PURE__ */ o("div", {
-							className: "flex-shrink-0 flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity",
-							children: [!p && /* @__PURE__ */ a("button", {
-								onClick: (e) => {
-									e.stopPropagation(), t(i);
-								},
-								className: "p-1 rounded hover:bg-bg-muted text-text-tertiary hover:text-text-primary",
-								title: "Mark as read",
-								"aria-label": "Mark as read",
-								children: /* @__PURE__ */ a("svg", {
-									className: "w-3.5 h-3.5",
-									fill: "none",
-									stroke: "currentColor",
-									viewBox: "0 0 24 24",
-									children: /* @__PURE__ */ a("path", {
-										strokeLinecap: "round",
-										strokeLinejoin: "round",
-										strokeWidth: 2,
-										d: "M5 13l4 4L19 7"
-									})
-								})
-							}), /* @__PURE__ */ a("button", {
-								onClick: (e) => {
-									e.stopPropagation(), n(i);
-								},
-								className: "p-1 rounded hover:bg-bg-muted text-text-tertiary hover:text-status-error-text",
-								title: "Dismiss",
-								"aria-label": "Dismiss notification",
-								children: /* @__PURE__ */ a("svg", {
-									className: "w-3.5 h-3.5",
-									fill: "none",
-									stroke: "currentColor",
-									viewBox: "0 0 24 24",
-									children: /* @__PURE__ */ a("path", {
-										strokeLinecap: "round",
-										strokeLinejoin: "round",
-										strokeWidth: 2,
-										d: "M6 18L18 6M6 6l12 12"
-									})
-								})
-							})]
-						})]
-					}),
-					/* @__PURE__ */ a("p", {
-						className: "text-xs text-text-secondary line-clamp-2 mt-0.5",
-						children: c
-					}),
-					/* @__PURE__ */ o("div", {
-						className: "flex items-center gap-2 mt-1.5 flex-wrap",
-						children: [
-							/* @__PURE__ */ a("span", {
-								className: `inline-flex items-center px-1.5 py-0.5 text-[10px] font-medium rounded ${_.bgColor} ${_.color}`,
-								children: _.label
-							}),
-							d && /* @__PURE__ */ a("span", {
-								className: "inline-flex items-center px-1.5 py-0.5 text-[10px] font-medium rounded bg-bg-muted text-text-tertiary",
-								children: d
-							}),
-							/* @__PURE__ */ a("span", {
-								className: "text-[10px] text-text-tertiary",
-								children: y(m)
-							}),
-							f && /* @__PURE__ */ o("button", {
-								onClick: (e) => {
-									e.stopPropagation(), r(f);
-								},
-								className: "inline-flex items-center gap-0.5 text-[10px] text-action-primary-bg hover:underline",
-								"aria-label": "Open link",
-								children: ["Open", /* @__PURE__ */ a("svg", {
-									className: "w-2.5 h-2.5",
-									fill: "none",
-									stroke: "currentColor",
-									viewBox: "0 0 24 24",
-									children: /* @__PURE__ */ a("path", {
-										strokeLinecap: "round",
-										strokeLinejoin: "round",
-										strokeWidth: 2,
-										d: "M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-									})
-								})]
-							})
-						]
-					})
-				]
-			})
-		]
-	});
-}, b = () => /* @__PURE__ */ o("div", {
-	className: "flex gap-3 p-3 rounded-card border border-border-subtle animate-pulse",
-	children: [/* @__PURE__ */ a("div", { className: "w-6 h-6 rounded bg-bg-muted flex-shrink-0" }), /* @__PURE__ */ o("div", {
-		className: "flex-1 space-y-2",
-		children: [
-			/* @__PURE__ */ a("div", { className: "h-4 bg-bg-muted rounded w-3/4" }),
-			/* @__PURE__ */ a("div", { className: "h-3 bg-bg-muted rounded w-full" }),
-			/* @__PURE__ */ o("div", {
-				className: "flex gap-2",
-				children: [/* @__PURE__ */ a("div", { className: "h-3 bg-bg-muted rounded w-12" }), /* @__PURE__ */ a("div", { className: "h-3 bg-bg-muted rounded w-16" })]
-			})
-		]
-	})]
-}), ne = ({ client: s, onViewAll: h, compact: y = !1, pollInterval: ne = 3e4, lazy: x = !1 }) => {
-	let S = n(null), [C, w] = r(!1), [T, E] = r(!1), [D, O] = r([]), [k, A] = r(0), [j, M] = r({}), [N, P] = r(0), [F, I] = r(!1), [L, R] = r(null), [z, B] = r("all"), [V, H] = r("ALL"), [U, W] = r("ALL"), [G, re] = r("newest");
-	t(() => {
-		let e = window.matchMedia("(max-width: 767px)");
-		E(e.matches);
-		let t = (e) => E(e.matches);
-		return e.addEventListener("change", t), () => e.removeEventListener("change", t);
-	}, []), t(() => {
-		if (!C || T) return;
-		let e = (e) => {
-			S.current && !S.current.contains(e.target) && w(!1);
-		};
-		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-	}, [C, T]), t(() => {
-		if (!C) return;
-		let e = (e) => {
-			e.key === "Escape" && w(!1);
-		};
-		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
-	}, [C]);
-	let K = n(s);
-	t(() => {
-		K.current = s;
-	}, [s]);
-	let q = e(async () => {
-		try {
-			let e = (await K.current.query({
-				query: l,
-				variables: { filter: {
-					channel: "IN_APP",
-					archived: !1
-				} },
-				fetchPolicy: "network-only"
-			})).data;
-			A(e?.myUnreadNotificationCount ?? 0);
-		} catch {}
-	}, []), [J, ie] = r(!1);
-	t(() => {
-		let e = () => ie(!0);
-		if (typeof window < "u" && "requestIdleCallback" in window) {
-			let t = window.requestIdleCallback(e, { timeout: 2e3 });
-			return () => {
-				window.cancelIdleCallback?.(t);
-			};
-		}
-		let t = setTimeout(e, 500);
-		return () => clearTimeout(t);
-	}, []), t(() => {
-		if (x || !J) return;
-		q();
-		let e = K.current.subscribe({
-			query: u,
-			variables: { filter: {
-				channel: "IN_APP",
-				archived: !1
-			} },
-			fetchPolicy: "no-cache"
-		}).subscribe({
-			next: (e) => {
-				let t = e.data;
-				typeof t?.myUnreadNotificationCountStream == "number" && A(t.myUnreadNotificationCountStream);
-			},
-			error: () => {}
-		}), t = setInterval(q, 300 * 1e3);
-		return () => {
-			e.unsubscribe(), clearInterval(t);
-		};
-	}, [
-		q,
-		x,
-		J
-	]);
-	let Y = e(async () => {
-		I(!0), R(null);
-		try {
-			let e = {
-				channel: "IN_APP",
-				archived: !1
-			};
-			z === "unread" && (e.isRead = !1), z === "read" && (e.isRead = !0), V !== "ALL" && (e.type = V), U !== "ALL" && (e.appName = U);
-			let t = (await K.current.query({
-				query: c,
-				variables: {
-					filter: e,
-					limit: 20,
-					offset: 0
-				},
-				fetchPolicy: "network-only"
-			})).data?.notifications;
-			t && (O(t.items ?? []), P(t.total ?? 0));
-		} catch (e) {
-			R(e instanceof Error ? e.message : "Failed to load notifications");
-		} finally {
-			I(!1);
-		}
-	}, [
-		z,
-		V,
-		U
-	]), X = e(async () => {
-		try {
-			let e = (await K.current.query({
-				query: d,
-				fetchPolicy: "network-only"
-			})).data;
-			M(e?.myNotificationCountsByApp ?? {});
-		} catch {}
-	}, []);
-	t(() => {
-		C && (x && q(), Y(), X(), q());
-	}, [
-		C,
-		Y,
-		X,
-		q,
-		x
-	]);
-	let ae = e(() => {
-		w((e) => !e);
-	}, []), oe = e(async (e) => {
-		try {
-			await K.current.mutate({
-				mutation: f,
-				variables: { id: e }
-			}), O((t) => t.map((t) => t.id === e ? {
-				...t,
-				isRead: !0,
-				readAt: (/* @__PURE__ */ new Date()).toISOString()
-			} : t)), A((e) => Math.max(0, e - 1));
-		} catch (e) {
-			console.error("Failed to mark notification as read:", e);
-		}
-	}, []), se = e(async () => {
-		try {
-			await K.current.mutate({ mutation: p }), O((e) => e.map((e) => ({
-				...e,
-				isRead: !0,
-				readAt: e.readAt || (/* @__PURE__ */ new Date()).toISOString()
-			}))), A(0);
-		} catch (e) {
-			console.error("Failed to mark all notifications as read:", e);
-		}
-	}, []), ce = e(async (e) => {
-		try {
-			await K.current.mutate({
-				mutation: m,
-				variables: { id: e }
-			});
-			let t = D.find((t) => t.id === e);
-			O((t) => t.filter((t) => t.id !== e)), P((e) => Math.max(0, e - 1)), t && !t.isRead && A((e) => Math.max(0, e - 1));
-		} catch (e) {
-			console.error("Failed to delete notification:", e);
-		}
-	}, [D]), le = e((e) => {
+var g = ({ client: g, onViewAll: _, compact: v = !1, pollInterval: y = 3e4, lazy: b = !1 }) => {
+	let x = f(null), [S, C] = p(!1), [w, T] = p("all"), [E, D] = p("ALL"), [O, k] = p("ALL"), [A, j] = p("newest"), M = d(() => C(!1), []), N = d(() => C((e) => !e), []), { isMobile: P } = u();
+	l(S, P, x, M), c(S, M);
+	let { notifications: F, unreadCount: I, countsByApp: L, totalCount: R, loading: z, error: B, fetchNotifications: V, handleMarkAsRead: H, handleMarkAllAsRead: U, handleDelete: W } = s({
+		client: g,
+		isOpen: S,
+		lazy: b,
+		filterTab: w,
+		typeFilter: E,
+		appFilter: O
+	}), G = d((e) => {
 		window.open(e, "_blank", "noopener,noreferrer");
-	}, []), ue = e(() => {
-		w(!1), h?.();
-	}, [h]), Z = ee(D, G), Q = Object.entries(j).filter(([e]) => e && e !== "null").sort((e, t) => t[1] - e[1]), $ = /* @__PURE__ */ o("div", {
-		className: "flex flex-col h-full",
-		children: [
-			/* @__PURE__ */ o("div", {
-				className: "flex items-center justify-between p-4 border-b border-border-subtle",
-				children: [/* @__PURE__ */ o("div", {
-					className: "flex items-center gap-2",
-					children: [
-						T && /* @__PURE__ */ a("button", {
-							onClick: () => w(!1),
-							className: "p-1 rounded-button hover:bg-action-ghost-bg-hover text-text-primary",
-							"aria-label": "Close",
-							children: /* @__PURE__ */ a("svg", {
-								className: "w-5 h-5",
-								fill: "none",
-								stroke: "currentColor",
-								viewBox: "0 0 24 24",
-								children: /* @__PURE__ */ a("path", {
-									strokeLinecap: "round",
-									strokeLinejoin: "round",
-									strokeWidth: 2,
-									d: "M15 19l-7-7 7-7"
-								})
-							})
-						}),
-						/* @__PURE__ */ a("svg", {
-							className: "w-5 h-5 text-text-primary",
-							fill: "none",
-							stroke: "currentColor",
-							viewBox: "0 0 24 24",
-							children: /* @__PURE__ */ a("path", {
-								strokeLinecap: "round",
-								strokeLinejoin: "round",
-								strokeWidth: 2,
-								d: "M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
-							})
-						}),
-						/* @__PURE__ */ a("h2", {
-							className: "text-sm font-semibold text-text-primary",
-							children: "Notifications"
-						}),
-						k > 0 && /* @__PURE__ */ a("span", {
-							className: "inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 text-xs font-semibold text-action-primary-text bg-action-primary-bg rounded-full",
-							children: k > 9 ? "9+" : k
-						})
-					]
-				}), /* @__PURE__ */ o("div", {
-					className: "flex items-center gap-2",
-					children: [k > 0 && /* @__PURE__ */ a("button", {
-						onClick: se,
-						className: "text-xs text-action-primary-bg hover:underline font-medium",
-						children: "Mark all read"
-					}), !T && /* @__PURE__ */ a("button", {
-						onClick: () => w(!1),
-						className: "p-1 rounded-button hover:bg-action-ghost-bg-hover text-text-tertiary",
-						"aria-label": "Close panel",
-						children: /* @__PURE__ */ a("svg", {
-							className: "w-4 h-4",
-							fill: "none",
-							stroke: "currentColor",
-							viewBox: "0 0 24 24",
-							children: /* @__PURE__ */ a("path", {
-								strokeLinecap: "round",
-								strokeLinejoin: "round",
-								strokeWidth: 2,
-								d: "M6 18L18 6M6 6l12 12"
-							})
-						})
-					})]
-				})]
-			}),
-			/* @__PURE__ */ o("div", {
-				className: "px-4 pt-3 pb-2 space-y-2 border-b border-border-subtle",
+	}, []), K = d(() => {
+		C(!1), _?.();
+	}, [_]), q = t(F, A), J = Object.entries(L).filter(([e]) => e && e !== "null").sort((e, t) => t[1] - e[1]);
+	return /* @__PURE__ */ h("div", {
+		ref: x,
+		className: "relative",
+		children: [/* @__PURE__ */ m(e, {
+			unreadCount: I,
+			isOpen: S,
+			onToggle: N
+		}), S && /* @__PURE__ */ m(o, {
+			isMobile: P,
+			onClose: M,
+			children: /* @__PURE__ */ h("div", {
+				className: "flex flex-col h-full",
 				children: [
-					/* @__PURE__ */ a("div", {
-						className: "flex gap-1",
-						children: _.map((e) => /* @__PURE__ */ a("button", {
-							onClick: () => B(e.value),
-							className: `px-3 py-1 text-xs font-medium rounded-full transition-colors ${z === e.value ? "bg-action-primary-bg text-action-primary-text" : "bg-bg-muted text-text-secondary hover:bg-action-ghost-bg-hover"}`,
-							children: e.label
-						}, e.value))
+					/* @__PURE__ */ m(i, {
+						isMobile: P,
+						unreadCount: I,
+						onClose: M,
+						onMarkAllAsRead: U
+					}),
+					/* @__PURE__ */ m(n, {
+						filterTab: w,
+						typeFilter: E,
+						appFilter: O,
+						sortBy: A,
+						appNames: J,
+						onFilterTabChange: T,
+						onTypeFilterChange: D,
+						onAppFilterChange: k,
+						onSortByChange: j
 					}),
-					/* @__PURE__ */ o("div", {
-						className: "flex flex-wrap items-center gap-1",
-						children: [v.map((e) => /* @__PURE__ */ o("button", {
-							onClick: () => H(e.value),
-							className: `px-2 py-0.5 text-[11px] font-medium rounded-full whitespace-nowrap transition-colors ${V === e.value ? "bg-bg-elevated text-text-primary border border-border-default" : "text-text-tertiary hover:text-text-secondary hover:bg-bg-muted"}`,
-							children: [e.value !== "ALL" && g[e.value] && /* @__PURE__ */ a("span", {
-								className: "mr-0.5",
-								children: g[e.value].icon
-							}), e.label]
-						}, e.value)), /* @__PURE__ */ o("select", {
-							value: G,
-							onChange: (e) => re(e.target.value),
-							className: "ml-auto text-[11px] text-text-secondary bg-transparent border-none cursor-pointer focus:outline-none",
-							"aria-label": "Sort notifications",
-							children: [
-								/* @__PURE__ */ a("option", {
-									value: "newest",
-									children: "Newest"
-								}),
-								/* @__PURE__ */ a("option", {
-									value: "oldest",
-									children: "Oldest"
-								}),
-								/* @__PURE__ */ a("option", {
-									value: "priority",
-									children: "Priority"
-								})
-							]
-						})]
+					/* @__PURE__ */ m(a, {
+						loading: z,
+						error: B,
+						notifications: q,
+						filterTab: w,
+						typeFilter: E,
+						appFilter: O,
+						onRetry: V,
+						onMarkAsRead: H,
+						onDelete: W,
+						onRedirect: G
 					}),
-					Q.length > 1 && /* @__PURE__ */ o("div", {
-						className: "flex flex-wrap gap-1",
-						children: [/* @__PURE__ */ a("button", {
-							onClick: () => W("ALL"),
-							className: `px-2 py-0.5 text-[11px] font-medium rounded-full whitespace-nowrap transition-colors ${U === "ALL" ? "bg-bg-elevated text-text-primary border border-border-default" : "text-text-tertiary hover:text-text-secondary hover:bg-bg-muted"}`,
-							children: "All Apps"
-						}), Q.map(([e, t]) => /* @__PURE__ */ o("button", {
-							onClick: () => W(e),
-							className: `px-2 py-0.5 text-[11px] font-medium rounded-full whitespace-nowrap transition-colors ${U === e ? "bg-bg-elevated text-text-primary border border-border-default" : "text-text-tertiary hover:text-text-secondary hover:bg-bg-muted"}`,
-							children: [e, /* @__PURE__ */ o("span", {
-								className: "ml-1 text-text-tertiary",
-								children: [
-									"(",
-									t,
-									")"
-								]
-							})]
-						}, e))]
+					q.length > 0 && /* @__PURE__ */ m(r, {
+						totalCount: R,
+						onViewAll: _ ? K : void 0
 					})
 				]
-			}),
-			/* @__PURE__ */ a("div", {
-				className: "flex-1 overflow-y-auto",
-				children: F ? /* @__PURE__ */ o("div", {
-					className: "p-3 space-y-2",
-					children: [
-						/* @__PURE__ */ a(b, {}),
-						/* @__PURE__ */ a(b, {}),
-						/* @__PURE__ */ a(b, {})
-					]
-				}) : L ? /* @__PURE__ */ o("div", {
-					className: "flex flex-col items-center justify-center p-8 text-center",
-					children: [
-						/* @__PURE__ */ a("svg", {
-							className: "w-10 h-10 text-status-error-text mb-3",
-							fill: "none",
-							stroke: "currentColor",
-							viewBox: "0 0 24 24",
-							children: /* @__PURE__ */ a("path", {
-								strokeLinecap: "round",
-								strokeLinejoin: "round",
-								strokeWidth: 2,
-								d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"
-							})
-						}),
-						/* @__PURE__ */ a("p", {
-							className: "text-sm text-text-secondary mb-2",
-							children: "Failed to load notifications"
-						}),
-						/* @__PURE__ */ a("button", {
-							onClick: Y,
-							className: "text-xs text-action-primary-bg hover:underline font-medium",
-							children: "Try again"
-						})
-					]
-				}) : Z.length === 0 ? /* @__PURE__ */ o("div", {
-					className: "flex flex-col items-center justify-center p-8 text-center",
-					children: [
-						/* @__PURE__ */ a("svg", {
-							className: "w-12 h-12 text-text-tertiary mb-3",
-							fill: "none",
-							stroke: "currentColor",
-							viewBox: "0 0 24 24",
-							children: /* @__PURE__ */ a("path", {
-								strokeLinecap: "round",
-								strokeLinejoin: "round",
-								strokeWidth: 1.5,
-								d: "M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
-							})
-						}),
-						/* @__PURE__ */ a("p", {
-							className: "text-sm font-medium text-text-primary",
-							children: "You're all caught up!"
-						}),
-						/* @__PURE__ */ a("p", {
-							className: "text-xs text-text-tertiary mt-1",
-							children: z !== "all" || V !== "ALL" || U !== "ALL" ? "No notifications match your filters" : "No notifications yet"
-						})
-					]
-				}) : /* @__PURE__ */ a("div", {
-					className: "p-2 space-y-1.5",
-					children: Z.map((e) => /* @__PURE__ */ a(te, {
-						notification: e,
-						onMarkAsRead: oe,
-						onDelete: ce,
-						onRedirect: le
-					}, e.id))
-				})
-			}),
-			Z.length > 0 && /* @__PURE__ */ a("div", {
-				className: "p-3 border-t border-border-subtle",
-				children: /* @__PURE__ */ o("div", {
-					className: "flex items-center justify-between",
-					children: [/* @__PURE__ */ o("span", {
-						className: "text-[11px] text-text-tertiary",
-						children: [
-							N,
-							" notification",
-							N === 1 ? "" : "s"
-						]
-					}), h && /* @__PURE__ */ a("button", {
-						onClick: ue,
-						className: "text-xs text-action-primary-bg hover:underline font-medium",
-						children: "View All"
-					})]
-				})
 			})
-		]
-	});
-	return /* @__PURE__ */ o("div", {
-		ref: S,
-		className: "relative",
-		children: [
-			/* @__PURE__ */ o("button", {
-				onClick: ae,
-				className: "relative p-2 hover:bg-action-ghost-bg-hover rounded-button text-text-primary",
-				"aria-label": `Notifications${k > 0 ? ` (${k} unread)` : ""}`,
-				"aria-expanded": C,
-				"aria-haspopup": "true",
-				children: [/* @__PURE__ */ a("svg", {
-					className: "w-icon-md h-icon-md",
-					fill: "none",
-					stroke: "currentColor",
-					viewBox: "0 0 24 24",
-					children: /* @__PURE__ */ a("path", {
-						strokeLinecap: "round",
-						strokeLinejoin: "round",
-						strokeWidth: 2,
-						d: "M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
-					})
-				}), k > 0 && /* @__PURE__ */ a("span", {
-					className: "absolute -top-0.5 -right-0.5 flex items-center justify-center min-w-[18px] h-[18px] px-1 text-[10px] font-bold text-action-primary-text bg-action-primary-bg rounded-full border-2 border-bg-elevated",
-					children: k > 9 ? "9+" : k
-				})]
-			}),
-			C && !T && /* @__PURE__ */ a("div", {
-				className: "absolute right-0 top-full mt-2 w-[calc(100vw-1.5rem)] sm:w-[420px] max-h-[600px] bg-bg-elevated border border-border-subtle rounded-card shadow-popover z-50 overflow-hidden flex flex-col",
-				role: "dialog",
-				"aria-label": "Notifications panel",
-				children: $
-			}),
-			C && T && /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a("div", {
-				className: "fixed inset-0 bg-black/50 z-[60]",
-				onClick: () => w(!1),
-				"aria-hidden": "true"
-			}), /* @__PURE__ */ a("div", {
-				className: "fixed inset-x-0 bottom-0 top-0 bg-bg-elevated z-[70] flex flex-col",
-				role: "dialog",
-				"aria-label": "Notifications panel",
-				children: $
-			})] })
-		]
+		})]
 	});
 };
 //#endregion
-export { ne as NotificationCenter };
+export { g as NotificationCenter };