cheogram-www

created pr with cheogram-www/tauri-alpha.1 on 2026-10-29T17:17:18Z · by 3c31bc8c

commented on 2026-10-29T17:17:19Z · by 3c31bc8c

Changes are available at https://tangled.org/mrry.band/cheogram-www on branch tauri-alpha.

added cheogram-www/tauri-alpha.2 on 2026-11-04T17:46:08Z · by 3c31bc8c


                      1:  45e8ad7 = 1:  45e8ad7 Refactor service worker access


                      2:  fab4022 ! 2:  ce66e8f Move notifications code to one file


                      -:  ------- > 3:  10e3574 Refactor notification code


                      3:  d127ee0 ! 4:  ba0891f npm run tauri init


                      4:  9e006bd = 5:  5b3abf9 Request microphone and camera usage on mac


                      5:  03d4934 = 6:  994a2e9 Tauri file system media store


                      6:  b96216a = 7:  320fa8f Don't register or use serviceworker in tauri


                      7:  faace0a = 8:  e76db17 Open links in browser


                      8:  9c07308 ! 9:  761dd22 Tauri notifications

cmds

checkout latest patchset:

ssh pr.pico.sh pull cheogram-www:tauri-alpha | git am -3

checkout specific patchset revision:

ssh pr.pico.sh pull cheogram-www:tauri-alpha [rev] | git am -3

add changes to patch request:

git format-patch main --stdout | ssh pr.pico.sh cheogram-www:tauri-alpha

add comment to patch request:

ssh pr.pico.sh comment cheogram-www:tauri-alpha "lgtm!"

Patchset `cheogram-www/tauri-alpha.2` on 2026-11-04T17:46:08Z · commit 10e3574

Refactor service worker access

Eric Roberts 2026-10-29T14:50:23Z

Move notifications code to one file

Eric Roberts 2026-11-04T14:34:43Z

→ Refactor notification code

Eric Roberts 2026-11-04T16:17:25Z

npm run tauri init

Eric Roberts 2026-10-16T14:01:30Z

Request microphone and camera usage on mac

Eric Roberts 2026-10-20T19:29:32Z

Tauri file system media store

Eric Roberts 2026-10-16T18:10:16Z

Don't register or use serviceworker in tauri

Eric Roberts 2026-10-19T18:23:24Z

Open links in browser

Eric Roberts 2026-10-20T18:39:35Z

Tauri notifications

Eric Roberts 2026-10-19T19:40:11Z

Refactor notification code

Eric Roberts 2026-11-04T16:17:25Z

We currently have two ways to send notifications, via the service
worker or new Notification. These things should behave the same, and
I think functionally right now they do behave the same, but they don't
actually use the same code paths.

This change adds common click and close handlers that can be used
everywhere, and will be used by the tauri click handling code in the
future.

It also adds a common showNotification which attaches the common
handlers instead of the callsites that want to show a notification doing
it themselves. showNotification will be extended in the future to
support Tauri notifications.

While doing this I realized the service worker repeats a lot of this
constructing notification code as well. But I am leaving it for now.

Semantic diff summary

3 added, 17 modified, 0 signature changed, 0 removed across 5 analyzed files

src/App.tsx

chunk lines 1-4 modified
chunk lines 7-19 modified
chunk lines 66-73 modified
chunk lines 106-113 modified
chunk lines 159-190 modified

src/components/Call.tsx

chunk lines 28-34 modified
chunk lines 129-135 modified
chunk lines 246-260 modified

src/components/LoginRequest.tsx

chunk lines 1-7 modified
chunk lines 15-21 modified
chunk lines 29-35 modified
chunk lines 40-46 modified

src/notifications.ts

type_alias_declaration ChatNotificationData added
type_alias_declaration NotificationData added
type_alias_declaration ShowNotification added
chunk lines 137-160 modified
chunk lines 164-185 modified
chunk lines 187-194 modified

src/sw.tsx

chunk lines 10-16 modified
chunk lines 167-173 modified

+32 -39 src/App.tsx #

......@@ -1,3 +1,4 @@
import { assertNever } from "./assert-never";
import "./App.scss";
import { CircularProgress } from "@mui/material";
import { newAccount } from "./components/Login";

......@@ -6,15 +7,13 @@ import * as borogove from "borogove";
import { borogove_persistence_Sqlite as borogoveSqlite } from "borogove/sqlite-wasm";
import * as Sentry from "@sentry/browser";
import { stem } from "porter2";
import { Await, useAsyncValue, Outlet, useParams } from "react-router";
import { ios, webkit, useEffectEvent, serviceWorker } from "./util";
import {
	Await,
	useAsyncValue,
	Outlet,
	useNavigate,
	useParams,
} from "react-router";
import { ios, webkit, href, useEffectEvent, serviceWorker } from "./util";
import { showMessageNotification } from "./notifications";
	showMessageNotification,
	useNotifications,
	NotificationData,
} from "./notifications";
import { SettingsContext, SettingsData } from "./components/Settings";
import { Call } from "./components/Call";
import { LoginRequest } from "./components/LoginRequest";

......@@ -67,7 +66,8 @@ const AppInner = () => {
	const [accounts, setAccounts] = useState(initialAccounts);
	const [settings, setSettings] = useState<SettingsData>(initialSettings);
	const params = useParams();
	const navigate = useNavigate();
	const { showNotification, onNotificationClick, onNotificationClose } =
		useNotifications();

	const notificationEvent = useEffectEvent(
		(

......@@ -106,6 +106,8 @@ const AppInner = () => {
						client.accountId(),
						members[0] ?? message.senderMemberStub(),
						message,
						chat,
						showNotification,
					);
				}
			})();

......@@ -157,41 +159,32 @@ const AppInner = () => {

	useEffect(() => {
		if (!serviceWorker) return;
		const handler = (event: MessageEvent) => {
			const accountId = event.data?.data?.accountId;
			const chatId = event.data?.data?.chatId;
			if (event.data.event === "notificationclick") {
				navigate(
					href("/accounts/:accountId/chats/:chatId", { accountId, chatId }) +
						`#message:${event.data.data.messageId}`,
				);
				if (event.data.data.type === borogove.MessageType.MessageCall) {
					if (event.data.data.callStatus === "propose") {
						setTimeout(
							() => accounts[accountId]?.client?.getChat(chatId)?.acceptCall(),
							100,
						);
					}
				}
			}
			if (event.data.event === "notificationclose") {
				if (event.data.data.type === borogove.MessageType.MessageCall) {
					setTimeout(() => {
						const chat = accounts[accountId]?.client?.getChat(chatId);
						if (
							chat &&
							chat.callStatus() === borogove.calls.CallStatus.Incoming
						) {
							chat.hangup();
						}
					}, 100);
				}
		const handler = (
			event: MessageEvent<{
				event: "notificationclick" | "notificationclose";
				data: NotificationData;
			}>,
		) => {
			const { event: action, data } = event.data;
			const chat =
				data.type === "loginRequest"
					? null
					: (accounts[data.accountId]?.client.getChat(data.chatId) ?? null);
			switch (action) {
				case "notificationclick":
					onNotificationClick(data, chat);
					break;
				case "notificationclose":
					onNotificationClose(data, chat);
					break;
				default:
					return assertNever(action);
			}
		};
		serviceWorker.addEventListener("message", handler);

		return () => serviceWorker.removeEventListener("message", handler);
	}, [accounts, navigate]);
	}, [accounts, onNotificationClick, onNotificationClose]);

	return (
		<SettingsContext.Provider value={settings}>

+5 -4 src/components/Call.tsx #

......@@ -28,7 +28,7 @@ import {

import { AvatarWithPlaceholder } from "./AvatarWithPlaceholder";
import { href, useEffectEvent, readyServiceWorker } from "../util";
import { showCallNotification } from "../notifications";
import { showCallNotification, useNotifications } from "../notifications";

const playTone = (frequency1: number, frequency2: number, duration: number) => {
	const audioContext = new AudioContext();

......@@ -129,6 +129,7 @@ export const Call = ({
	accounts: Record<string, { client: borogove.Client }>;
}) => {
	const navigate = useNavigate();
	const { showNotification } = useNotifications();
	const [searchParams] = useSearchParams();

	const [showDtmf, setShowDtmf] = useState(false);

......@@ -245,15 +246,15 @@ export const Call = ({
		if (
			callStatus === borogove.calls.CallStatus.Incoming &&
			callAccountId &&
			call
			callChat
		) {
			playingCancelledRef.current = false;
			play = playRingtone;
			(async () => {
				notificationRef.current = await showCallNotification(
					callAccountId,
					call,
					callChat?.getDisplayName() ?? call.get_chatId(),
					callChat,
					showNotification,
				);
			})();
		}

+7 -3 src/components/LoginRequest.tsx #

......@@ -1,4 +1,7 @@
import { showLoginRequestNotification } from "../notifications";
import {
	showLoginRequestNotification,
	useNotifications,
} from "../notifications";
import * as borogove from "borogove";
import { Paper } from "@mui/material";
import Draggable from "react-draggable";

......@@ -12,6 +15,7 @@ export const LoginRequest = ({
}: {
	accounts: Record<string, { client: borogove.Client }>;
}) => {
	const { showNotification } = useNotifications();
	const [loginRequest, setLoginRequest] =
		useState<borogove.LoginRequest | null>(null);
	const [reqAccountId, setReqAccountId] = useState<string | null>(null);

......@@ -25,7 +29,7 @@ export const LoginRequest = ({
					client.addLoginRequestListener((req) => {
						setLoginRequest(req);
						setReqAccountId(accountId);
						showLoginRequestNotification(req);
						showLoginRequestNotification(req, showNotification);
					}),
				];
			}),

......@@ -36,7 +40,7 @@ export const LoginRequest = ({
				accounts[accountId].client.removeEventListener(t);
			}
		};
	}, [accounts, setLoginRequest, setReqAccountId]);
	}, [accounts, setLoginRequest, setReqAccountId, showNotification]);

	return (
		<>

+108 -48 src/notifications.ts #

......@@ -1,10 +1,106 @@
import { useCallback } from "react";
import { useNavigate } from "react-router";
import { assertNever } from "./assert-never";
import * as borogove from "borogove";
import { href, readyServiceWorker } from "./util";

type ChatNotificationData = {
	accountId: string;
	chatId: string;
	messageId?: string | null;
};

export type NotificationData =
	| ({ type: borogove.MessageType } & ChatNotificationData)
	| { type: "loginRequest" };

const chatUrl = ({ accountId, chatId, messageId }: ChatNotificationData) =>
	href("/accounts/:accountId/chats/:chatId", { accountId, chatId }) +
	(messageId ? `#message:${messageId}` : "");

const onNotificationClose = (
	data: NotificationData,
	chat: borogove.Chat | null,
) => {
	switch (data.type) {
		case "loginRequest":
		case borogove.MessageType.MessageChat:
		case borogove.MessageType.MessageChannel:
		case borogove.MessageType.MessageChannelPrivate:
			return;
		case borogove.MessageType.MessageCall:
			if (chat?.callStatus() === borogove.calls.CallStatus.Incoming)
				chat.hangup();
			return;
		default:
			return assertNever(data);
	}
};

export const useNotifications = () => {
	const navigate = useNavigate();

	const onNotificationClick = useCallback(
		(data: NotificationData, chat: borogove.Chat | null) => {
			switch (data.type) {
				case "loginRequest":
					return;
				case borogove.MessageType.MessageChat:
				case borogove.MessageType.MessageChannel:
				case borogove.MessageType.MessageChannelPrivate:
					navigate(chatUrl(data));
					return;
				case borogove.MessageType.MessageCall:
					navigate(chatUrl(data));
					if (chat?.callStatus() === borogove.calls.CallStatus.Incoming)
						chat.acceptCall();
					return;
				default:
					return assertNever(data);
			}
		},
		[navigate],
	);

	const showNotification = useCallback<ShowNotification>(
		async (title, options, chat) => {
			const worker = await readyServiceWorker;
			if (worker) {
				await worker.showNotification(title, options);
				return null;
			} else {
				const notification = new Notification(title, options);
				let clicked = false;
				notification.addEventListener("click", () => {
					clicked = true;
					onNotificationClick(options.data, chat);
				});

				notification.addEventListener("close", () => {
					if (!clicked) onNotificationClose(options.data, chat);
				});

				return notification;
			}
		},
		[onNotificationClick],
	);

	return { showNotification, onNotificationClick, onNotificationClose };
};

export type ShowNotification = (
	title: string,
	options: NotificationOptions & { data: NotificationData },
	chat: borogove.Chat | null,
) => Promise<Notification | null>;

export const showMessageNotification = async (
	accountId: string,
	sender: borogove.Member,
	message: borogove.ChatMessage,
	chat: borogove.Chat,
	showNotification: ShowNotification,
) => {
	if (!Notification?.permission) return;

......@@ -41,40 +137,24 @@ export const showMessageNotification = async (
		timestamp: new Date(message.timeSent).getTime(),
		vibrate: [50, 50, 50],
		data: {
			type: message.type,
			accountId,
			chatId: message.chatId(),
			messageId: message.serverId || message.localId,
			timestamp: message.timeSent,
		},
	};
	if (serviceWorker) {
		await serviceWorker.showNotification(title, options);
	} else {
		const notif = new Notification(title, options);
		notif.addEventListener("click", () => {
			history.pushState(
				null,
				"",
				href("/accounts/:accountId/chats/:chatId", {
					accountId: accountId,
					chatId: message.chatId(),
				}) + `#message:${message.serverId || message.localId}`,
			);
			window.dispatchEvent(new PopStateEvent("popstate")); // Notify React Router
		});
		return notif;
	}
	return showNotification(title, options, chat);
};

export const showCallNotification = async (
	accountId: string,
	session: borogove.calls.Session,
	callerDisplayName: string,
	chat: borogove.Chat,
	showNotification: ShowNotification,
) => {
	if (!Notification?.permission) return null;

	const serviceWorker = await readyServiceWorker;
	const tag = accountId + ">" + session.get_chatId() + ">call";
	const tag = accountId + ">" + chat.chatId + ">call";
	if (serviceWorker) {
		const notifs = await serviceWorker.getNotifications({
			tag: tag,

......@@ -84,38 +164,22 @@ export const showCallNotification = async (
	}
	const title = "Incoming Call";
	const options = {
		body: "From " + callerDisplayName,
		body: "From " + chat.getDisplayName(),
		tag: tag,
		vibrate: [50, 100, 50, 100],
		data: {
			accountId: accountId,
			chatId: session.get_chatId(),
			type: borogove.MessageType.MessageCall,
			callStatus: "propose",
			chatId: chat.chatId,
			type: borogove.MessageType.MessageCall as const,
		},
	};

	let notification = null;
	if (serviceWorker) {
		await serviceWorker.showNotification(title, options);
	} else {
		notification = new Notification(title, options);

		let clicked = false;
		notification.addEventListener("click", () => {
			clicked = true;
			session.accept();
		});
		notification.addEventListener("close", () => {
			if (!clicked) session.hangup();
		});
	}

	return notification;
	return showNotification(title, options, chat);
};

export const showLoginRequestNotification = async (
	req: borogove.LoginRequest,
	showNotification: ShowNotification,
) => {
	if (!Notification?.permission) return null;

......@@ -123,12 +187,8 @@ export const showLoginRequestNotification = async (
	const options = {
		body: req.method + " " + req.url,
		tag: req.id,
		data: { type: "loginRequest" as const },
	};

	const serviceWorker = await readyServiceWorker;
	if (serviceWorker) {
		await serviceWorker.showNotification(title, options);
	} else {
		new Notification(title, options);
	}
	return showNotification(title, options, null);
};

+2 -1 src/sw.tsx #

......@@ -10,6 +10,7 @@
// You can also remove this file if you'd prefer not to use a
// service worker, and the Workbox build step will be skipped.

import type { NotificationData } from "./notifications";
import { precacheAndRoute, createHandlerBoundToURL } from "workbox-precaching";
import { clientsClaim } from "workbox-core";
import { ExpirationPlugin } from "workbox-expiration";

......@@ -166,7 +167,7 @@ self.addEventListener("push", (event: PushEvent) => {
					notif.type === borogove.MessageType.MessageCall
						? [50, 100, 50, 100]
						: [50, 50, 50],
				data: { ...notif, raw: raw },
				data: { ...notif, raw } satisfies NotificationData & { raw: string },
			});
		})(),
	);

...	...		@@ -245,15 +246,15 @@ export const Call = ({
245	246		if (
246	247		callStatus === borogove.calls.CallStatus.Incoming &&
247	248		callAccountId &&
248		-	call
	249	+	callChat
249	250		) {
250	251		playingCancelledRef.current = false;
251	252		play = playRingtone;
252	253		(async () => {
253	254		notificationRef.current = await showCallNotification(
254	255		callAccountId,
255		-	call,
256		-	callChat?.getDisplayName() ?? call.get_chatId(),
	256	+	callChat,
	257	+	showNotification,
257	258		);
258	259		})();
259	260		}

...	...		@@ -1,3 +1,4 @@
	1	+	import { assertNever } from "./assert-never";
1	2		import "./App.scss";
2	3		import { CircularProgress } from "@mui/material";
3	4		import { newAccount } from "./components/Login";

...	...		@@ -6,15 +7,13 @@ import * as borogove from "borogove";
6	7		import { borogove_persistence_Sqlite as borogoveSqlite } from "borogove/sqlite-wasm";
7	8		import * as Sentry from "@sentry/browser";
8	9		import { stem } from "porter2";
	10	+	import { Await, useAsyncValue, Outlet, useParams } from "react-router";
	11	+	import { ios, webkit, useEffectEvent, serviceWorker } from "./util";
9	12		import {
10		-	Await,
11		-	useAsyncValue,
12		-	Outlet,
13		-	useNavigate,
14		-	useParams,
15		-	} from "react-router";
16		-	import { ios, webkit, href, useEffectEvent, serviceWorker } from "./util";
17		-	import { showMessageNotification } from "./notifications";
	13	+	showMessageNotification,
	14	+	useNotifications,
	15	+	NotificationData,
	16	+	} from "./notifications";
18	17		import { SettingsContext, SettingsData } from "./components/Settings";
19	18		import { Call } from "./components/Call";
20	19		import { LoginRequest } from "./components/LoginRequest";

...	...		@@ -67,7 +66,8 @@ const AppInner = () => {
67	66		const [accounts, setAccounts] = useState(initialAccounts);
68	67		const [settings, setSettings] = useState<SettingsData>(initialSettings);
69	68		const params = useParams();
70		-	const navigate = useNavigate();
	69	+	const { showNotification, onNotificationClick, onNotificationClose } =
	70	+	useNotifications();
71	71
72	72		const notificationEvent = useEffectEvent(
73	73		(

...	...		@@ -106,6 +106,8 @@ const AppInner = () => {
106	106		client.accountId(),
107	107		members[0] ?? message.senderMemberStub(),
108	108		message,
	109	+	chat,
	110	+	showNotification,
109	111		);
110	112		}
111	113		})();

...	...		@@ -157,41 +159,32 @@ const AppInner = () => {
157	159
158	160		useEffect(() => {
159	161		if (!serviceWorker) return;
160		-	const handler = (event: MessageEvent) => {
161		-	const accountId = event.data?.data?.accountId;
162		-	const chatId = event.data?.data?.chatId;
163		-	if (event.data.event === "notificationclick") {
164		-	navigate(
165		-	href("/accounts/:accountId/chats/:chatId", { accountId, chatId }) +
166		-	`#message:${event.data.data.messageId}`,
167		-	);
168		-	if (event.data.data.type === borogove.MessageType.MessageCall) {
169		-	if (event.data.data.callStatus === "propose") {
170		-	setTimeout(
171		-	() => accounts[accountId]?.client?.getChat(chatId)?.acceptCall(),
172		-	100,
173		-	);
174		-	}
175		-	}
176		-	}
177		-	if (event.data.event === "notificationclose") {
178		-	if (event.data.data.type === borogove.MessageType.MessageCall) {
179		-	setTimeout(() => {
180		-	const chat = accounts[accountId]?.client?.getChat(chatId);
181		-	if (
182		-	chat &&
183		-	chat.callStatus() === borogove.calls.CallStatus.Incoming
184		-	) {
185		-	chat.hangup();
186		-	}
187		-	}, 100);
188		-	}
	162	+	const handler = (
	163	+	event: MessageEvent<{
	164	+	event: "notificationclick" \| "notificationclose";
	165	+	data: NotificationData;
	166	+	}>,
	167	+	) => {
	168	+	const { event: action, data } = event.data;
	169	+	const chat =
	170	+	data.type === "loginRequest"
	171	+	? null
	172	+	: (accounts[data.accountId]?.client.getChat(data.chatId) ?? null);
	173	+	switch (action) {
	174	+	case "notificationclick":
	175	+	onNotificationClick(data, chat);
	176	+	break;
	177	+	case "notificationclose":
	178	+	onNotificationClose(data, chat);
	179	+	break;
	180	+	default:
	181	+	return assertNever(action);
189	182		}
190	183		};
191	184		serviceWorker.addEventListener("message", handler);
192	185
193	186		return () => serviceWorker.removeEventListener("message", handler);
194		-	}, [accounts, navigate]);
	187	+	}, [accounts, onNotificationClick, onNotificationClose]);
195	188
196	189		return (
197	190		<SettingsContext.Provider value={settings}>

...	...		@@ -28,7 +28,7 @@ import {
28	28
29	29		import { AvatarWithPlaceholder } from "./AvatarWithPlaceholder";
30	30		import { href, useEffectEvent, readyServiceWorker } from "../util";
31		-	import { showCallNotification } from "../notifications";
	31	+	import { showCallNotification, useNotifications } from "../notifications";
32	32
33	33		const playTone = (frequency1: number, frequency2: number, duration: number) => {
34	34		const audioContext = new AudioContext();

...	...		@@ -129,6 +129,7 @@ export const Call = ({
129	129		accounts: Record<string, { client: borogove.Client }>;
130	130		}) => {
131	131		const navigate = useNavigate();
	132	+	const { showNotification } = useNotifications();
132	133		const [searchParams] = useSearchParams();
133	134
134	135		const [showDtmf, setShowDtmf] = useState(false);

...	...		@@ -1,4 +1,7 @@
1		-	import { showLoginRequestNotification } from "../notifications";
	1	+	import {
	2	+	showLoginRequestNotification,
	3	+	useNotifications,
	4	+	} from "../notifications";
2	5		import * as borogove from "borogove";
3	6		import { Paper } from "@mui/material";
4	7		import Draggable from "react-draggable";

...	...		@@ -12,6 +15,7 @@ export const LoginRequest = ({
12	15		}: {
13	16		accounts: Record<string, { client: borogove.Client }>;
14	17		}) => {
	18	+	const { showNotification } = useNotifications();
15	19		const [loginRequest, setLoginRequest] =
16	20		useState<borogove.LoginRequest \| null>(null);
17	21		const [reqAccountId, setReqAccountId] = useState<string \| null>(null);

...	...		@@ -25,7 +29,7 @@ export const LoginRequest = ({
25	29		client.addLoginRequestListener((req) => {
26	30		setLoginRequest(req);
27	31		setReqAccountId(accountId);
28		-	showLoginRequestNotification(req);
	32	+	showLoginRequestNotification(req, showNotification);
29	33		}),
30	34		];
31	35		}),

...	...		@@ -36,7 +40,7 @@ export const LoginRequest = ({
36	40		accounts[accountId].client.removeEventListener(t);
37	41		}
38	42		};
39		-	}, [accounts, setLoginRequest, setReqAccountId]);
	43	+	}, [accounts, setLoginRequest, setReqAccountId, showNotification]);
40	44
41	45		return (
42	46		<>

...	...		@@ -1,10 +1,106 @@
	1	+	import { useCallback } from "react";
	2	+	import { useNavigate } from "react-router";
	3	+	import { assertNever } from "./assert-never";
1	4		import * as borogove from "borogove";
2	5		import { href, readyServiceWorker } from "./util";
3	6
	7	+	type ChatNotificationData = {
	8	+	accountId: string;
	9	+	chatId: string;
	10	+	messageId?: string \| null;
	11	+	};
	12	+
	13	+	export type NotificationData =
	14	+	\| ({ type: borogove.MessageType } & ChatNotificationData)
	15	+	\| { type: "loginRequest" };
	16	+
	17	+	const chatUrl = ({ accountId, chatId, messageId }: ChatNotificationData) =>
	18	+	href("/accounts/:accountId/chats/:chatId", { accountId, chatId }) +
	19	+	(messageId ? `#message:${messageId}` : "");
	20	+
	21	+	const onNotificationClose = (
	22	+	data: NotificationData,
	23	+	chat: borogove.Chat \| null,
	24	+	) => {
	25	+	switch (data.type) {
	26	+	case "loginRequest":
	27	+	case borogove.MessageType.MessageChat:
	28	+	case borogove.MessageType.MessageChannel:
	29	+	case borogove.MessageType.MessageChannelPrivate:
	30	+	return;
	31	+	case borogove.MessageType.MessageCall:
	32	+	if (chat?.callStatus() === borogove.calls.CallStatus.Incoming)
	33	+	chat.hangup();
	34	+	return;
	35	+	default:
	36	+	return assertNever(data);
	37	+	}
	38	+	};
	39	+
	40	+	export const useNotifications = () => {
	41	+	const navigate = useNavigate();
	42	+
	43	+	const onNotificationClick = useCallback(
	44	+	(data: NotificationData, chat: borogove.Chat \| null) => {
	45	+	switch (data.type) {
	46	+	case "loginRequest":
	47	+	return;
	48	+	case borogove.MessageType.MessageChat:
	49	+	case borogove.MessageType.MessageChannel:
	50	+	case borogove.MessageType.MessageChannelPrivate:
	51	+	navigate(chatUrl(data));
	52	+	return;
	53	+	case borogove.MessageType.MessageCall:
	54	+	navigate(chatUrl(data));
	55	+	if (chat?.callStatus() === borogove.calls.CallStatus.Incoming)
	56	+	chat.acceptCall();
	57	+	return;
	58	+	default:
	59	+	return assertNever(data);
	60	+	}
	61	+	},
	62	+	[navigate],
	63	+	);
	64	+
	65	+	const showNotification = useCallback<ShowNotification>(
	66	+	async (title, options, chat) => {
	67	+	const worker = await readyServiceWorker;
	68	+	if (worker) {
	69	+	await worker.showNotification(title, options);
	70	+	return null;
	71	+	} else {
	72	+	const notification = new Notification(title, options);
	73	+	let clicked = false;
	74	+	notification.addEventListener("click", () => {
	75	+	clicked = true;
	76	+	onNotificationClick(options.data, chat);
	77	+	});
	78	+
	79	+	notification.addEventListener("close", () => {
	80	+	if (!clicked) onNotificationClose(options.data, chat);
	81	+	});
	82	+
	83	+	return notification;
	84	+	}
	85	+	},
	86	+	[onNotificationClick],
	87	+	);
	88	+
	89	+	return { showNotification, onNotificationClick, onNotificationClose };
	90	+	};
	91	+
	92	+	export type ShowNotification = (
	93	+	title: string,
	94	+	options: NotificationOptions & { data: NotificationData },
	95	+	chat: borogove.Chat \| null,
	96	+	) => Promise<Notification \| null>;
	97	+
4	98		export const showMessageNotification = async (
5	99		accountId: string,
6	100		sender: borogove.Member,
7	101		message: borogove.ChatMessage,
	102	+	chat: borogove.Chat,
	103	+	showNotification: ShowNotification,
8	104		) => {
9	105		if (!Notification?.permission) return;
10	106

...	...		@@ -41,40 +137,24 @@ export const showMessageNotification = async (
41	137		timestamp: new Date(message.timeSent).getTime(),
42	138		vibrate: [50, 50, 50],
43	139		data: {
	140	+	type: message.type,
44	141		accountId,
45	142		chatId: message.chatId(),
46	143		messageId: message.serverId \|\| message.localId,
47		-	timestamp: message.timeSent,
48	144		},
49	145		};
50		-	if (serviceWorker) {
51		-	await serviceWorker.showNotification(title, options);
52		-	} else {
53		-	const notif = new Notification(title, options);
54		-	notif.addEventListener("click", () => {
55		-	history.pushState(
56		-	null,
57		-	"",
58		-	href("/accounts/:accountId/chats/:chatId", {
59		-	accountId: accountId,
60		-	chatId: message.chatId(),
61		-	}) + `#message:${message.serverId \|\| message.localId}`,
62		-	);
63		-	window.dispatchEvent(new PopStateEvent("popstate")); // Notify React Router
64		-	});
65		-	return notif;
66		-	}
	146	+	return showNotification(title, options, chat);
67	147		};
68	148
69	149		export const showCallNotification = async (
70	150		accountId: string,
71		-	session: borogove.calls.Session,
72		-	callerDisplayName: string,
	151	+	chat: borogove.Chat,
	152	+	showNotification: ShowNotification,
73	153		) => {
74	154		if (!Notification?.permission) return null;
75	155
76	156		const serviceWorker = await readyServiceWorker;
77		-	const tag = accountId + ">" + session.get_chatId() + ">call";
	157	+	const tag = accountId + ">" + chat.chatId + ">call";
78	158		if (serviceWorker) {
79	159		const notifs = await serviceWorker.getNotifications({
80	160		tag: tag,

...	...		@@ -84,38 +164,22 @@ export const showCallNotification = async (
84	164		}
85	165		const title = "Incoming Call";
86	166		const options = {
87		-	body: "From " + callerDisplayName,
	167	+	body: "From " + chat.getDisplayName(),
88	168		tag: tag,
89	169		vibrate: [50, 100, 50, 100],
90	170		data: {
91	171		accountId: accountId,
92		-	chatId: session.get_chatId(),
93		-	type: borogove.MessageType.MessageCall,
94		-	callStatus: "propose",
	172	+	chatId: chat.chatId,
	173	+	type: borogove.MessageType.MessageCall as const,
95	174		},
96	175		};
97	176
98		-	let notification = null;
99		-	if (serviceWorker) {
100		-	await serviceWorker.showNotification(title, options);
101		-	} else {
102		-	notification = new Notification(title, options);
103		-
104		-	let clicked = false;
105		-	notification.addEventListener("click", () => {
106		-	clicked = true;
107		-	session.accept();
108		-	});
109		-	notification.addEventListener("close", () => {
110		-	if (!clicked) session.hangup();
111		-	});
112		-	}
113		-
114		-	return notification;
	177	+	return showNotification(title, options, chat);
115	178		};
116	179
117	180		export const showLoginRequestNotification = async (
118	181		req: borogove.LoginRequest,
	182	+	showNotification: ShowNotification,
119	183		) => {
120	184		if (!Notification?.permission) return null;
121	185

...	...		@@ -123,12 +187,8 @@ export const showLoginRequestNotification = async (
123	187		const options = {
124	188		body: req.method + " " + req.url,
125	189		tag: req.id,
	190	+	data: { type: "loginRequest" as const },
126	191		};
127	192
128		-	const serviceWorker = await readyServiceWorker;
129		-	if (serviceWorker) {
130		-	await serviceWorker.showNotification(title, options);
131		-	} else {
132		-	new Notification(title, options);
133		-	}
	193	+	return showNotification(title, options, null);
134	194		};

...	...		@@ -10,6 +10,7 @@
10	10		// You can also remove this file if you'd prefer not to use a
11	11		// service worker, and the Workbox build step will be skipped.
12	12
	13	+	import type { NotificationData } from "./notifications";
13	14		import { precacheAndRoute, createHandlerBoundToURL } from "workbox-precaching";
14	15		import { clientsClaim } from "workbox-core";
15	16		import { ExpirationPlugin } from "workbox-expiration";

...	...		@@ -166,7 +167,7 @@ self.addEventListener("push", (event: PushEvent) => {
166	167		notif.type === borogove.MessageType.MessageCall
167	168		? [50, 100, 50, 100]
168	169		: [50, 50, 50],
169		-	data: { ...notif, raw: raw },
	170	+	data: { ...notif, raw } satisfies NotificationData & { raw: string },
170	171		});
171	172		})(),
172	173		);

cheogram-www

Patchset cheogram-www/tauri-alpha.2 on 2026-11-04T17:46:08Z · commit 10e3574

Patchset `cheogram-www/tauri-alpha.2` on 2026-11-04T17:46:08Z · commit 10e3574