feat: add notification screen

packages/ui/src/container.tsx

@@ -14,11 +14,16 @@ export function Container({
 	className?: string;
 }) {
 	return (
-		<div className={cn("flex h-screen w-screen flex-col", className)}>
+		<div
+			className={cn(
+				"bg-transparent flex h-screen w-screen flex-col",
+				className,
+			)}
+		>
 			{withDrag ? (
 				<div
 					data-tauri-drag-region
-					className="flex h-11 w-full shrink-0 items-center justify-end pr-2"
+					className="bg-transparent flex h-11 w-full shrink-0 items-center justify-end pr-2"
 				>
 					{withNavigate ? (
 						<div className="flex items-center gap-1">

packages/ui/src/note/activity.tsx

@@ -0,0 +1,26 @@
+import { cn } from "@lume/utils";
+import { useNoteContext } from "./provider";
+import { User } from "../user";
+
+export function NoteActivity({ className }: { className?: string }) {
+	const event = useNoteContext();
+	const mentions = event.tags
+		.filter((tag) => tag[0] === "p")
+		.map((tag) => tag[1]);
+
+	return (
+		<div className={cn("-mt-3 mb-2", className)}>
+			<div className="text-neutral-700 dark:text-neutral-300 inline-flex items-baseline gap-2 w-full overflow-hidden">
+				<div className="shrink-0 text-sm font-medium">To:</div>
+				{mentions.splice(0, 4).map((mention) => (
+					<User.Provider key={mention} pubkey={mention}>
+						<User.Root>
+							<User.Name className="text-sm font-medium" />
+						</User.Root>
+					</User.Provider>
+				))}
+				{mentions.length > 4 ? "..." : ""}
+			</div>
+		</div>
+	);
+}

packages/ui/src/note/buttons/reply.tsx

@@ -18,7 +18,7 @@ export function NoteReply({ large = false }: { large?: boolean }) {
 						className={cn(
 							"inline-flex items-center justify-center text-neutral-800 dark:text-neutral-200",
 							large
-								? "bg-neutral-100 dark:bg-white/10 h-7 gap-1.5 w-24 text-sm font-medium hover:text-blue-500 hover:bg-neutral-200 dark:hover:bg-white/20"
+								? "rounded-full bg-neutral-100 dark:bg-white/10 h-7 gap-1.5 w-24 text-sm font-medium hover:text-blue-500 hover:bg-neutral-200 dark:hover:bg-white/20"
 								: "size-7",
 						)}
 					>

packages/ui/src/note/buttons/zap.tsx

@@ -31,7 +31,7 @@ export function NoteZap({ large = false }: { large?: boolean }) {
 			className={cn(
 				"inline-flex items-center justify-center text-neutral-800 dark:text-neutral-200",
 				large
-					? "bg-neutral-100 dark:bg-white/10 h-7 gap-1.5 w-24 text-sm font-medium hover:text-blue-500 hover:bg-neutral-200 dark:hover:bg-white/20"
+					? "rounded-full bg-neutral-100 dark:bg-white/10 h-7 gap-1.5 w-24 text-sm font-medium hover:text-blue-500 hover:bg-neutral-200 dark:hover:bg-white/20"
 					: "size-7",
 			)}
 		>

packages/ui/src/note/child.tsx

@@ -1,8 +1,6 @@
 import { useEvent } from "@lume/ark";
 import { cn } from "@lume/utils";
-import { useTranslation } from "react-i18next";
 import { Note } from ".";
-import { User } from "../user";
 
 export function NoteChild({
 	eventId,

packages/ui/src/note/content.tsx

@@ -82,7 +82,6 @@ export function NoteContent({
 						target="_blank"
 						rel="noreferrer"
 						className="line-clamp-1 text-blue-500 hover:text-blue-600"
-						onClick={(e) => e.stopPropagation()}
 					>
 						{match}
 					</a>

packages/ui/src/note/contentLarge.tsx

@@ -145,7 +145,9 @@ export function NoteContentLarge({
 
 	return (
 		<div className={cn("select-text", className)}>
-			<div className="text-[15px] text-balance content-break leading-normal">{content}</div>
+			<div className="text-[15px] text-balance content-break leading-normal">
+				{content}
+			</div>
 		</div>
 	);
 }

packages/ui/src/note/index.ts

@@ -1,3 +1,4 @@
+import { NoteActivity } from "./activity";
 import { NoteOpenThread } from "./buttons/open";
 import { NoteReply } from "./buttons/reply";
 import { NoteRepost } from "./buttons/repost";
@@ -24,4 +25,5 @@ export const Note = {
 	Open: NoteOpenThread,
 	Child: NoteChild,
 	Thread: NoteThread,
+	Activity: NoteActivity,
 };