@protobase/ui 0.45.20 → 0.45.21

package/dist/notifications/bell/use-inbox.d.ts

@@ -0,0 +1,239 @@
+import { InboxNotification, InboxPage } from "@protobase/client";
+import { InfiniteData } from "@tanstack/react-query";
+//#region src/notifications/bell/use-inbox.d.ts
+/**
+ * How many of the signed-in user's notifications are unread, at most 100 (show `99+` from there): read on load, every
+ * half minute while the page is visible, on a return to it, and after the user opens or marks one read. It stops
+ * reading once the app refuses the user their history (`historyRefused`).
+ */
+export declare const useUnreadNotifications: ({ enabled }?: {
+  enabled?: boolean;
+}) => import("@tanstack/react-query").UseQueryResult<number, Error>;
+/**
+ * The signed-in user's notifications, newest first, a page at a time: `items` those loaded so far, `fetchNextPage`
+ * the next page while `hasNextPage`. Read only while `enabled`, such as while the panel is open.
+ */
+export declare const useInbox: ({ enabled }?: {
+  enabled?: boolean;
+}) => {
+  items: InboxNotification[];
+  data: InfiniteData<InboxPage, unknown>;
+  error: Error;
+  isError: true;
+  isPending: false;
+  isLoading: false;
+  isLoadingError: false;
+  isRefetchError: true;
+  isSuccess: false;
+  isPlaceholderData: false;
+  status: "error";
+  fetchNextPage: (options?: import("@tanstack/react-query").FetchNextPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<InfiniteData<InboxPage, unknown>, Error>>;
+  fetchPreviousPage: (options?: import("@tanstack/react-query").FetchPreviousPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<InfiniteData<InboxPage, unknown>, Error>>;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  isFetchNextPageError: boolean;
+  isFetchingNextPage: boolean;
+  isFetchPreviousPageError: boolean;
+  isFetchingPreviousPage: boolean;
+  dataUpdatedAt: number;
+  errorUpdatedAt: number;
+  failureCount: number;
+  failureReason: Error | null;
+  errorUpdateCount: number;
+  isFetched: boolean;
+  isFetchedAfterMount: boolean;
+  isFetching: boolean;
+  isInitialLoading: boolean;
+  isPaused: boolean;
+  isRefetching: boolean;
+  isStale: boolean;
+  isEnabled: boolean;
+  refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<InfiniteData<InboxPage, unknown>, Error>>;
+  fetchStatus: import("@tanstack/react-query").FetchStatus;
+} | {
+  items: InboxNotification[];
+  data: InfiniteData<InboxPage, unknown>;
+  error: null;
+  isError: false;
+  isPending: false;
+  isLoading: false;
+  isLoadingError: false;
+  isRefetchError: false;
+  isFetchNextPageError: false;
+  isFetchPreviousPageError: false;
+  isSuccess: true;
+  isPlaceholderData: false;
+  status: "success";
+  fetchNextPage: (options?: import("@tanstack/react-query").FetchNextPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<InfiniteData<InboxPage, unknown>, Error>>;
+  fetchPreviousPage: (options?: import("@tanstack/react-query").FetchPreviousPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<InfiniteData<InboxPage, unknown>, Error>>;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  isFetchingNextPage: boolean;
+  isFetchingPreviousPage: boolean;
+  dataUpdatedAt: number;
+  errorUpdatedAt: number;
+  failureCount: number;
+  failureReason: Error | null;
+  errorUpdateCount: number;
+  isFetched: boolean;
+  isFetchedAfterMount: boolean;
+  isFetching: boolean;
+  isInitialLoading: boolean;
+  isPaused: boolean;
+  isRefetching: boolean;
+  isStale: boolean;
+  isEnabled: boolean;
+  refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<InfiniteData<InboxPage, unknown>, Error>>;
+  fetchStatus: import("@tanstack/react-query").FetchStatus;
+} | {
+  items: InboxNotification[];
+  data: undefined;
+  error: Error;
+  isError: true;
+  isPending: false;
+  isLoading: false;
+  isLoadingError: true;
+  isRefetchError: false;
+  isFetchNextPageError: false;
+  isFetchPreviousPageError: false;
+  isSuccess: false;
+  isPlaceholderData: false;
+  status: "error";
+  fetchNextPage: (options?: import("@tanstack/react-query").FetchNextPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<InfiniteData<InboxPage, unknown>, Error>>;
+  fetchPreviousPage: (options?: import("@tanstack/react-query").FetchPreviousPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<InfiniteData<InboxPage, unknown>, Error>>;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  isFetchingNextPage: boolean;
+  isFetchingPreviousPage: boolean;
+  dataUpdatedAt: number;
+  errorUpdatedAt: number;
+  failureCount: number;
+  failureReason: Error | null;
+  errorUpdateCount: number;
+  isFetched: boolean;
+  isFetchedAfterMount: boolean;
+  isFetching: boolean;
+  isInitialLoading: boolean;
+  isPaused: boolean;
+  isRefetching: boolean;
+  isStale: boolean;
+  isEnabled: boolean;
+  refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<InfiniteData<InboxPage, unknown>, Error>>;
+  fetchStatus: import("@tanstack/react-query").FetchStatus;
+} | {
+  items: InboxNotification[];
+  data: undefined;
+  error: null;
+  isError: false;
+  isPending: true;
+  isLoading: true;
+  isLoadingError: false;
+  isRefetchError: false;
+  isFetchNextPageError: false;
+  isFetchPreviousPageError: false;
+  isSuccess: false;
+  isPlaceholderData: false;
+  status: "pending";
+  fetchNextPage: (options?: import("@tanstack/react-query").FetchNextPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<InfiniteData<InboxPage, unknown>, Error>>;
+  fetchPreviousPage: (options?: import("@tanstack/react-query").FetchPreviousPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<InfiniteData<InboxPage, unknown>, Error>>;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  isFetchingNextPage: boolean;
+  isFetchingPreviousPage: boolean;
+  dataUpdatedAt: number;
+  errorUpdatedAt: number;
+  failureCount: number;
+  failureReason: Error | null;
+  errorUpdateCount: number;
+  isFetched: boolean;
+  isFetchedAfterMount: boolean;
+  isFetching: boolean;
+  isInitialLoading: boolean;
+  isPaused: boolean;
+  isRefetching: boolean;
+  isStale: boolean;
+  isEnabled: boolean;
+  refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<InfiniteData<InboxPage, unknown>, Error>>;
+  fetchStatus: import("@tanstack/react-query").FetchStatus;
+} | {
+  items: InboxNotification[];
+  data: undefined;
+  error: null;
+  isError: false;
+  isPending: true;
+  isLoadingError: false;
+  isRefetchError: false;
+  isFetchNextPageError: false;
+  isFetchPreviousPageError: false;
+  isSuccess: false;
+  isPlaceholderData: false;
+  status: "pending";
+  fetchNextPage: (options?: import("@tanstack/react-query").FetchNextPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<InfiniteData<InboxPage, unknown>, Error>>;
+  fetchPreviousPage: (options?: import("@tanstack/react-query").FetchPreviousPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<InfiniteData<InboxPage, unknown>, Error>>;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  isFetchingNextPage: boolean;
+  isFetchingPreviousPage: boolean;
+  dataUpdatedAt: number;
+  errorUpdatedAt: number;
+  failureCount: number;
+  failureReason: Error | null;
+  errorUpdateCount: number;
+  isFetched: boolean;
+  isFetchedAfterMount: boolean;
+  isFetching: boolean;
+  isLoading: boolean;
+  isInitialLoading: boolean;
+  isPaused: boolean;
+  isRefetching: boolean;
+  isStale: boolean;
+  isEnabled: boolean;
+  refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<InfiniteData<InboxPage, unknown>, Error>>;
+  fetchStatus: import("@tanstack/react-query").FetchStatus;
+} | {
+  items: InboxNotification[];
+  data: InfiniteData<InboxPage, unknown>;
+  isError: false;
+  error: null;
+  isPending: false;
+  isLoading: false;
+  isLoadingError: false;
+  isRefetchError: false;
+  isSuccess: true;
+  isPlaceholderData: true;
+  isFetchNextPageError: false;
+  isFetchPreviousPageError: false;
+  status: "success";
+  fetchNextPage: (options?: import("@tanstack/react-query").FetchNextPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<InfiniteData<InboxPage, unknown>, Error>>;
+  fetchPreviousPage: (options?: import("@tanstack/react-query").FetchPreviousPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<InfiniteData<InboxPage, unknown>, Error>>;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  isFetchingNextPage: boolean;
+  isFetchingPreviousPage: boolean;
+  dataUpdatedAt: number;
+  errorUpdatedAt: number;
+  failureCount: number;
+  failureReason: Error | null;
+  errorUpdateCount: number;
+  isFetched: boolean;
+  isFetchedAfterMount: boolean;
+  isFetching: boolean;
+  isInitialLoading: boolean;
+  isPaused: boolean;
+  isRefetching: boolean;
+  isStale: boolean;
+  isEnabled: boolean;
+  refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<InfiniteData<InboxPage, unknown>, Error>>;
+  fetchStatus: import("@tanstack/react-query").FetchStatus;
+};
+/**
+ * Marks notifications read: `markRead(item)` one, as opening it does, and `markAllRead(newest)` all of them up to the
+ * newest one the user was shown, so one that arrives meanwhile stays unread. The panel and the count show it at once,
+ * and are read again once the server has it.
+ */
+export declare const useMarkNotificationsRead: () => {
+  markRead: (item: InboxNotification) => void;
+  markAllRead: import("@tanstack/react-query").UseMutateFunction<void, Error, InboxNotification, void>;
+  markingAll: boolean;
+};
+//#endregion

package/dist/notifications/bell/use-inbox.js

@@ -0,0 +1,91 @@
+import { keys } from "../../data/query-keys.js";
+import { useClient } from "../../data/api-provider.js";
+import { useCallback } from "react";
+import { isApiError } from "@protobase/client";
+import { useInfiniteQuery, useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+//#region src/notifications/bell/use-inbox.ts
+const unreadRefreshMs = 3e4;
+/** Whether the app keeps the history from the user, as from a session its own sign-in does not mark as theirs. */
+const historyRefused = (error) => isApiError(error) && error.status === 403;
+/**
+* How many of the signed-in user's notifications are unread, at most 100 (show `99+` from there): read on load, every
+* half minute while the page is visible, on a return to it, and after the user opens or marks one read. It stops
+* reading once the app refuses the user their history (`historyRefused`).
+*/
+const useUnreadNotifications = ({ enabled = true } = {}) => {
+	const client = useClient();
+	return useQuery({
+		queryKey: keys.inboxUnread,
+		queryFn: () => client.notifications.unread(),
+		refetchInterval: (query) => historyRefused(query.state.error) ? false : unreadRefreshMs,
+		enabled
+	});
+};
+/**
+* The signed-in user's notifications, newest first, a page at a time: `items` those loaded so far, `fetchNextPage`
+* the next page while `hasNextPage`. Read only while `enabled`, such as while the panel is open.
+*/
+const useInbox = ({ enabled = true } = {}) => {
+	const client = useClient();
+	const query = useInfiniteQuery({
+		queryKey: keys.inboxPages,
+		queryFn: ({ pageParam }) => client.notifications.list(pageParam === "" ? {} : { cursor: pageParam }),
+		initialPageParam: "",
+		getNextPageParam: (page) => page.next ?? void 0,
+		enabled
+	});
+	const items = query.data?.pages.flatMap((page) => page.items) ?? [];
+	return {
+		...query,
+		items
+	};
+};
+const showRead = (queryClient, read) => {
+	const now = (/* @__PURE__ */ new Date()).toISOString();
+	let marked = 0;
+	queryClient.setQueryData(keys.inboxPages, (data) => data && {
+		...data,
+		pages: data.pages.map((page) => ({
+			...page,
+			items: page.items.map((item) => {
+				if (item.readAt !== null || !read(item)) return item;
+				marked += 1;
+				return {
+					...item,
+					readAt: now
+				};
+			})
+		}))
+	});
+	queryClient.setQueryData(keys.inboxUnread, (count) => count === void 0 ? count : Math.max(0, count - marked));
+};
+/**
+* Marks notifications read: `markRead(item)` one, as opening it does, and `markAllRead(newest)` all of them up to the
+* newest one the user was shown, so one that arrives meanwhile stays unread. The panel and the count show it at once,
+* and are read again once the server has it.
+*/
+const useMarkNotificationsRead = () => {
+	const client = useClient();
+	const queryClient = useQueryClient();
+	const settled = () => queryClient.invalidateQueries({ queryKey: keys.inbox });
+	const one = useMutation({
+		mutationFn: (item) => client.notifications.markRead(item.id),
+		onMutate: (item) => showRead(queryClient, (shown) => shown.id === item.id),
+		onSettled: settled
+	});
+	const all = useMutation({
+		mutationFn: (newest) => client.notifications.markAllRead(newest.createdAt),
+		onMutate: (newest) => showRead(queryClient, (shown) => shown.createdAt <= newest.createdAt),
+		onSettled: settled
+	});
+	const markOne = one.mutate;
+	return {
+		markRead: useCallback((item) => {
+			if (item.readAt === null) markOne(item);
+		}, [markOne]),
+		markAllRead: all.mutate,
+		markingAll: all.isPending
+	};
+};
+//#endregion
+export { historyRefused, useInbox, useMarkNotificationsRead, useUnreadNotifications };

package/dist/notifications/push/use-push-notifications.d.ts

@@ -5,7 +5,8 @@ import { PushState } from "./web-push.js";
  * then `unsupported` (hide the button: no Web Push here, such as a tab on iPhone and iPad, or the app has no VAPID key),
  * `off`, `on` or `blocked` (the user refused notifications in the browser's settings). Call `turnOn` straight from a
  * click: the browser asks for permission only then, and without a click by someone signed in as themselves nothing
- * happens. `turnOff` unsubscribes this browser and removes its device.
+ * happens. `turnOff` unsubscribes this browser and removes its device. `state` is read again on a return to the page
+ * and when the browser says the permission changed.
  */
 export declare const usePushNotifications: () => {
   state: "loading" | PushState;

package/dist/notifications/push/use-push-notifications.js

@@ -1,4 +1,5 @@
 import { useAuth } from "../../auth/auth-provider.js";
+import { watchNotificationPermission } from "./watch-permission.js";
 import { useCallback, useEffect, useState } from "react";
 //#region src/notifications/push/use-push-notifications.ts
 /**
@@ -6,7 +7,8 @@ import { useCallback, useEffect, useState } from "react";
 * then `unsupported` (hide the button: no Web Push here, such as a tab on iPhone and iPad, or the app has no VAPID key),
 * `off`, `on` or `blocked` (the user refused notifications in the browser's settings). Call `turnOn` straight from a
 * click: the browser asks for permission only then, and without a click by someone signed in as themselves nothing
-* happens. `turnOff` unsubscribes this browser and removes its device.
+* happens. `turnOff` unsubscribes this browser and removes its device. `state` is read again on a return to the page
+* and when the browser says the permission changed.
 */
 const usePushNotifications = () => {
 	const { push, state: auth } = useAuth();
@@ -14,9 +16,12 @@ const usePushNotifications = () => {
 	const [state, setState] = useState("loading");
 	useEffect(() => {
 		let current = true;
-		push.state().then((read) => current && setState(read));
+		const read = () => void push.state().then((next) => current && setState(next));
+		read();
+		const stop = typeof window === "undefined" ? void 0 : watchNotificationPermission(read);
 		return () => {
 			current = false;
+			stop?.();
 		};
 	}, [push, userId]);
 	return {

package/dist/notifications/push/watch-permission.js

@@ -0,0 +1,31 @@
+//#region src/notifications/push/watch-permission.ts
+/**
+* Calls `onChange` whenever the page's notification permission may have changed until the returned function is called:
+* the Permissions API's change event, as when the user allows notifications from the address bar, and a return to the
+* page, as from the browser's or the phone's settings, which also covers a browser whose Permissions API does not know
+* notifications.
+*/
+const watchNotificationPermission = (onChange, win = window) => {
+	let status;
+	let stopped = false;
+	const visible = () => {
+		if (win.document.visibilityState === "visible") onChange();
+	};
+	win.addEventListener("focus", onChange);
+	win.document.addEventListener("visibilitychange", visible);
+	if ("permissions" in win.navigator) win.navigator.permissions.query({ name: "notifications" }).then((answer) => {
+		if (stopped) return;
+		status = answer;
+		answer.addEventListener("change", onChange);
+	}, (error) => {
+		if (!(error instanceof TypeError)) throw error;
+	});
+	return () => {
+		stopped = true;
+		win.removeEventListener("focus", onChange);
+		win.document.removeEventListener("visibilitychange", visible);
+		status?.removeEventListener("change", onChange);
+	};
+};
+//#endregion
+export { watchNotificationPermission };

package/dist/package.js

@@ -1,5 +1,5 @@
 //#region package.json
-var version = "0.45.20";
+var version = "0.45.21";
 var protobase = { "pluginApi": 1 };
 //#endregion
 export { protobase, version };

package/dist/plugins/plugin-ui.js

@@ -32,7 +32,8 @@ const pluginUi = (plugin, module) => {
 	const shell = ui.shell && {
 		...ui.shell.actions && { actions: within(plugin, ui.shell.actions, "shell.actions") },
 		...ui.shell.rightPanel && { rightPanel: within(plugin, ui.shell.rightPanel, "shell.rightPanel") },
-		...ui.shell.logo && { logo: within(plugin, ui.shell.logo, "shell.logo") }
+		...ui.shell.logo && { logo: within(plugin, ui.shell.logo, "shell.logo") },
+		...ui.shell.bell && { bell: within(plugin, ui.shell.bell, "shell.bell") }
 	};
 	const beforeSignIn = ui.beforeSignIn && within(plugin, ui.beforeSignIn, "beforeSignIn");
 	return {

package/dist/primitives/button.d.ts

@@ -1,9 +1,11 @@
-import { ButtonHTMLAttributes } from "react";
+import { ButtonHTMLAttributes, Ref } from "react";
 //#region src/primitives/button.d.ts
 export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
   variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
-  size?: 'sm' | 'md';
+  /** `icon` is a square of the height of `sm`, for a button with an icon alone. */
+  size?: 'sm' | 'md' | 'icon';
   loading?: boolean;
+  ref?: Ref<HTMLButtonElement>;
 };
 /** A button's classes, for a link that looks like one. */
 export declare const buttonClass: ({ variant, size }?: Pick<ButtonProps, "variant" | "size">) => string;

package/dist/primitives/button.js

@@ -10,7 +10,8 @@ const variants = {
 };
 const sizes = {
 	sm: "h-7 px-2.5 text-body gap-1.5",
-	md: "h-8 px-3 text-body gap-2"
+	md: "h-8 px-3 text-body gap-2",
+	icon: "size-7 text-body"
 };
 /** A button's classes, for a link that looks like one. */
 const buttonClass = ({ variant = "secondary", size = "md" } = {}) => cn("inline-flex shrink-0 items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:opacity-60 disabled:cursor-default", variants[variant], sizes[size]);

package/dist/primitives/popover-menu.js

@@ -3,19 +3,21 @@ import { useEffect, useLayoutEffect, useRef, useState } from "react";
 const gap = 4;
 /**
 * Below the button, or above it when the viewport has no room underneath; its right edge at the button's, or further
-* right when that would push its left edge off the viewport, as for a button near the left edge.
+* right when that would push its left edge off the viewport, as for a button near the left edge. `width` is where a
+* fixed element's `right` counts from.
 */
-const placeMenu = (button, menu) => {
+const placeMenu = (button, menu, width) => {
 	const below = button.bottom + gap;
 	return {
 		top: below + menu.height > window.innerHeight - gap ? Math.max(gap, button.top - gap - menu.height) : below,
-		right: Math.max(gap, Math.min(window.innerWidth - button.right, window.innerWidth - gap - menu.width))
+		right: Math.max(gap, Math.min(width - button.right, width - gap - menu.width))
 	};
 };
 /**
 * A menu opened by a button and drawn fixed, portalled to the body, under or over the button: it closes on a click
-* outside, Escape, and a scroll or resize, which would move the button away from it. `place` is undefined until the
-* menu is measured, so it is drawn hidden for that first frame.
+* outside, Escape, and a scroll or resize, which would move the button away from it; a scroll inside the menu keeps it.
+* `place` is undefined until the menu is measured, so it is drawn hidden for that first frame. The menu is a `ul` unless
+* `T` names another element, such as a panel's `div`.
 */
 const usePopoverMenu = () => {
 	const [open, setOpen] = useState(false);
@@ -27,18 +29,22 @@ const usePopoverMenu = () => {
 			setPlace(void 0);
 			return;
 		}
+		menu.current.style.right = "0px";
+		const width = menu.current.getBoundingClientRect().right;
 		setPlace(placeMenu(button.current.getBoundingClientRect(), {
 			width: menu.current.offsetWidth,
 			height: menu.current.offsetHeight
-		}));
+		}, width));
 	}, [open]);
 	useEffect(() => {
 		if (!open) return;
-		const inside = (target) => button.current?.contains(target) || menu.current?.contains(target);
+		const inside = (target) => target instanceof Node && Boolean(button.current?.contains(target) || menu.current?.contains(target));
 		const close = (event) => {
 			if (event instanceof KeyboardEvent ? event.key === "Escape" : !inside(event.target)) setOpen(false);
 		};
-		const dismiss = () => setOpen(false);
+		const dismiss = (event) => {
+			if (!inside(event.target)) setOpen(false);
+		};
 		document.addEventListener("mousedown", close);
 		document.addEventListener("keydown", close);
 		document.addEventListener("scroll", dismiss, true);