feat: add unread notification badge to dock icon

apps/desktop2/src/components/col.tsx

@@ -78,7 +78,7 @@ export function Col({
 				});
 			}
 		};
-	}, []);
+	}, [webview]);
 
 	return (
 		<div className="h-full w-[440px] shrink-0 p-2">

apps/desktop2/src/routes/$account.home.tsx

@@ -120,29 +120,20 @@ function Screen() {
 	}, [columns]);
 
 	useEffect(() => {
-		let unlistenColEvent: Awaited<ReturnType<typeof listen>> | undefined =
-			undefined;
-		let unlistenWindowResize: Awaited<ReturnType<typeof listen>> | undefined =
-			undefined;
+		const unlistenColEvent = listen<EventColumns>("columns", (data) => {
+			if (data.payload.type === "add") add(data.payload.column);
+			if (data.payload.type === "remove") remove(data.payload.label);
+			if (data.payload.type === "set_title")
+				updateName(data.payload.label, data.payload.title);
+		});
 
-		(async () => {
-			if (unlistenColEvent && unlistenWindowResize) return;
-
-			unlistenColEvent = await listen<EventColumns>("columns", (data) => {
-				if (data.payload.type === "add") add(data.payload.column);
-				if (data.payload.type === "remove") remove(data.payload.label);
-				if (data.payload.type === "set_title")
-					updateName(data.payload.label, data.payload.title);
-			});
-
-			unlistenWindowResize = await getCurrent().listen("tauri://resize", () => {
-				startResize();
-			});
-		})();
+		const unlistenWindowResize = getCurrent().listen("tauri://resize", () => {
+			startResize();
+		});
 
 		return () => {
-			if (unlistenColEvent) unlistenColEvent();
-			if (unlistenWindowResize) unlistenWindowResize();
+			unlistenColEvent.then((f) => f());
+			unlistenWindowResize.then((f) => f());
 		};
 	}, []);
 

apps/desktop2/src/routes/$account.tsx

@@ -8,7 +8,7 @@ import {
 	sendNativeNotification,
 } from "@lume/utils";
 import { Outlet, createFileRoute } from "@tanstack/react-router";
-import { UnlistenFn } from "@tauri-apps/api/event";
+import { invoke } from "@tauri-apps/api/core";
 import { getCurrent } from "@tauri-apps/api/window";
 import { useEffect, useState } from "react";
 
@@ -118,50 +118,45 @@ function Bell() {
 	const { ark } = Route.useRouteContext();
 	const { account } = Route.useParams();
 
-	const [isRing, setIsRing] = useState(false);
+	const [count, setCount] = useState(0);
 
 	useEffect(() => {
-		let unlisten: UnlistenFn = undefined;
+		const unlisten = getCurrent().listen<string>(
+			"activity",
+			async (payload) => {
+				setCount((prevCount) => prevCount + 1);
+				await invoke("set_badge", { count });
 
-		async function listenNotify() {
-			unlisten = await getCurrent().listen<string>(
-				"activity",
-				async (payload) => {
-					setIsRing(true);
+				const event: Event = JSON.parse(payload.payload);
+				const user = await ark.get_profile(event.pubkey);
+				const userName =
+					user.display_name || user.name || displayNpub(event.pubkey, 16);
 
-					const event: Event = JSON.parse(payload.payload);
-					const user = await ark.get_profile(event.pubkey);
-					const userName =
-						user.display_name || user.name || displayNpub(event.pubkey, 16);
-
-					switch (event.kind) {
-						case Kind.Text: {
-							sendNativeNotification("Mentioned you in a note", userName);
-							break;
-						}
-						case Kind.Repost: {
-							sendNativeNotification("Reposted your note", userName);
-							break;
-						}
-						case Kind.ZapReceipt: {
-							const amount = decodeZapInvoice(event.tags);
-							sendNativeNotification(
-								`Zapped ₿ ${amount.bitcoinFormatted}`,
-								userName,
-							);
-							break;
-						}
-						default:
-							break;
+				switch (event.kind) {
+					case Kind.Text: {
+						sendNativeNotification("Mentioned you in a note", userName);
+						break;
 					}
-				},
-			);
-		}
-
-		if (!unlisten) listenNotify();
+					case Kind.Repost: {
+						sendNativeNotification("Reposted your note", userName);
+						break;
+					}
+					case Kind.ZapReceipt: {
+						const amount = decodeZapInvoice(event.tags);
+						sendNativeNotification(
+							`Zapped ₿ ${amount.bitcoinFormatted}`,
+							userName,
+						);
+						break;
+					}
+					default:
+						break;
+				}
+			},
+		);
 
 		return () => {
-			if (unlisten) unlisten();
+			unlisten.then((f) => f());
 		};
 	}, []);
 
@@ -169,13 +164,13 @@ function Bell() {
 		<button
 			type="button"
 			onClick={() => {
-				setIsRing(false);
+				setCount(0);
 				ark.open_activity(account);
 			}}
 			className="relative inline-flex size-8 items-center justify-center rounded-full text-neutral-800 hover:bg-black/10 dark:text-neutral-200 dark:hover:bg-white/10"
 		>
 			<BellIcon className="size-5" />
-			{isRing ? (
+			{count > 0 ? (
 				<span className="absolute right-0 top-0 block size-2 rounded-full bg-teal-500 ring-1 ring-black/5" />
 			) : null}
 		</button>

apps/desktop2/src/routes/store.tsx

@@ -18,13 +18,13 @@ export const Route = createFileRoute("/store")({
 function Screen() {
 	return (
 		<div className="flex flex-col h-full">
-			<div className="px-3 my-2">
-				<div className="p-1 shrink-0 inline-flex w-full rounded-lg items-center gap-1 bg-black/10 dark:bg-white/10">
+			<div className="px-3 mt-2 mb-1">
+				<div className="p-1 shrink-0 inline-flex w-full rounded-lg items-center gap-1 bg-black/5 dark:bg-white/5">
 					<Link to="/store/official" className="flex-1">
 						{({ isActive }) => (
 							<div
 								className={cn(
-									"inline-flex h-9 w-full items-center justify-center gap-1.5 rounded-md text-sm font-medium leading-tight",
+									"inline-flex h-8 w-full items-center justify-center gap-1.5 rounded-md text-sm font-medium leading-tight",
 									isActive ? "bg-neutral-50 dark:bg-white/10" : "opacity-50",
 								)}
 							>
@@ -37,7 +37,7 @@ function Screen() {
 						{({ isActive }) => (
 							<div
 								className={cn(
-									"inline-flex h-9 w-full items-center justify-center gap-1.5 rounded-md text-sm font-medium leading-tight",
+									"inline-flex h-8 w-full items-center justify-center gap-1.5 rounded-md text-sm font-medium leading-tight",
 									isActive ? "bg-neutral-50 dark:bg-white/10" : "opacity-50",
 								)}
 							>

src-tauri/src/commands/window.rs

@@ -1,3 +1,5 @@
+#[cfg(target_os = "macos")]
+use cocoa::{appkit::NSApp, base::nil, foundation::NSString};
 use std::path::PathBuf;
 use tauri::utils::config::WindowEffectsConfig;
 use tauri::window::Effect;
@@ -166,3 +168,17 @@ pub fn open_window(
 
   Ok(())
 }
+
+#[tauri::command]
+pub fn set_badge(count: i32) {
+  #[cfg(target_os = "macos")]
+  unsafe {
+    let label = if count == 0 {
+      nil
+    } else {
+      NSString::alloc(nil).init_str(&format!("{}", count))
+    };
+    let dock_tile: cocoa::base::id = msg_send![NSApp(), dockTile];
+    let _: cocoa::base::id = msg_send![dock_tile, setBadgeLabel: label];
+  }
+}

src-tauri/src/main.rs

@@ -138,7 +138,8 @@ fn main() {
       commands::window::resize_column,
       commands::window::open_window,
       commands::window::get_path,
-      commands::window::navigate
+      commands::window::navigate,
+      commands::window::set_badge
     ])
     .run(tauri::generate_context!())
     .expect("error while running tauri application")