feat: polish

packages/ui/src/navigation.tsx

@@ -15,6 +15,7 @@ import { useAtom } from "jotai";
 import { useHotkeys } from "react-hotkeys-hook";
 import { NavLink } from "react-router-dom";
 import { ActiveAccount } from "./account/active";
+import { UnreadActivity } from "./unread";
 
 export function Navigation() {
 	const [isEditorOpen, setIsEditorOpen] = useAtom(editorAtom);
@@ -74,7 +75,7 @@ export function Navigation() {
 						{({ isActive }) => (
 							<div
 								className={cn(
-									"inline-flex aspect-square h-auto w-full items-center justify-center rounded-xl",
+									"relative inline-flex aspect-square h-auto w-full items-center justify-center rounded-xl",
 									isActive
 										? "bg-black/10 text-black dark:bg-white/10 dark:text-white"
 										: "text-black/50 dark:text-neutral-400",
@@ -85,6 +86,7 @@ export function Navigation() {
 								) : (
 									<BellIcon className="size-6" />
 								)}
+								<UnreadActivity />
 							</div>
 						)}
 					</NavLink>

packages/ui/src/unread.tsx

@@ -0,0 +1,14 @@
+import { activityUnreadAtom, compactNumber } from "@lume/utils";
+import { useAtomValue } from "jotai";
+
+export function UnreadActivity() {
+	const total = useAtomValue(activityUnreadAtom);
+
+	if (total <= 0) return null;
+
+	return (
+		<div className="absolute -right-0.5 -top-0.5 inline-flex size-5 items-center justify-center rounded-full bg-teal-500 text-[9px] font-medium text-white">
+			{compactNumber.format(total)}
+		</div>
+	);
+}