Merge pull request #85 from indrazm/delete-post-admin

feat(posts): allow admin to access post dropdown menu

Author: indrazm

apps/platform/src/features/notifications/components/notificationItem.tsx

@@ -1,6 +1,6 @@
 import type { Notification } from "@opencircle/core";
 import { Avatar, Button } from "@opencircle/ui";
-import { useNavigate } from "@tanstack/react-router";
+import { Link, useNavigate } from "@tanstack/react-router";
 import moment from "moment";
 import { renderContent } from "../../posts/utils/contentRendering";
 import { useMarkNotificationAsRead } from "../hooks/useNotifications";
@@ -27,16 +27,16 @@ export const NotificationItem = ({ notification }: NotificationItemProps) => {
 		}
 	};
 
-	const getNotificationMessage = () => {
+	const getNotificationAction = () => {
 		switch (notification.type) {
 			case "mention":
-				return `${notification.sender.username} mentioned you`;
+				return "mentioned you";
 			case "like":
-				return `${notification.sender.username} liked your post`;
+				return "liked your post";
 			case "reply":
-				return `${notification.sender.username} replied to your post`;
+				return "replied to your post";
 			default:
-				return `${notification.sender.username} sent you a notification`;
+				return "sent you a notification";
 		}
 	};
 
@@ -54,44 +54,51 @@ export const NotificationItem = ({ notification }: NotificationItemProps) => {
 	const isContentNotification = ["mention", "reply"].includes(
 		notification.type,
 	);
-	const hasPostId = Boolean(notification.data?.post_id);
 
 	return (
-		<main>
-			<div
-				className="flex gap-3 p-3 transition-colors duration-150 hover:bg-accent"
-				style={{ opacity: notification.is_read ? "50%" : "100%" }}
-			>
-				<Avatar
-					image_url={notification.sender.avatar_url || ""}
-					initials={notification.sender.username.charAt(0).toUpperCase()}
-				/>
+		<main
+			className="cursor-pointer transition-colors duration-150 hover:bg-accent"
+			style={{ opacity: notification.is_read ? "50%" : "100%" }}
+			onClick={handleViewPost}
+		>
+			<div className="flex gap-3 p-3">
+				<Link
+					to="/$username"
+					params={{ username: notification.sender.username }}
+					onClick={(e) => e.stopPropagation()}
+				>
+					<Avatar
+						image_url={notification.sender.avatar_url || ""}
+						initials={notification.sender.username.charAt(0).toUpperCase()}
+					/>
+				</Link>
 				<div className="min-w-0 flex-1 space-y-1">
 					<p className="truncate text-foreground text-sm">
-						{getNotificationMessage()}
+						<Link
+							to="/$username"
+							params={{ username: notification.sender.username }}
+							className="font-medium hover:underline"
+							onClick={(e) => e.stopPropagation()}
+						>
+							{notification.sender.username}
+						</Link>{" "}
+						{getNotificationAction()}
 					</p>
 
 					<p className="text-muted-foreground text-xs">
 						{getTimeAgo(notification.created_at)}
 					</p>
 				</div>
 				<div className="flex items-start gap-2">
-					{hasPostId && (
-						<Button
-							variant="secondary"
-							size="sm"
-							onClick={handleViewPost}
-							className="text-xs"
-						>
-							View
-						</Button>
-					)}
 					{!notification.is_read && (
 						<>
 							<Button
 								variant="secondary"
 								size="sm"
-								onClick={handleMarkAsRead}
+								onClick={(e) => {
+									e.stopPropagation();
+									handleMarkAsRead();
+								}}
 								disabled={isMarkingAsRead}
 								className="text-xs"
 							>

apps/platform/src/features/posts/components/postCard.tsx

@@ -45,7 +45,7 @@ export const PostCard = ({ post }: PostCardProps) => {
 		<main className="relative max-w-2xl space-y-2 border-border border-b p-4">
 			<div className="absolute top-4 right-4 flex items-center justify-center gap-2">
 				{post.is_pinned && <PinIcon className="h-3 w-3 fill-foreground" />}
-				{post.user_id === account?.id && (
+				{(post.user_id === account?.id || account?.role === "admin") && (
 					<DropdownMenu.Root>
 						<DropdownMenu.Trigger asChild>
 							<div className="flex h-6 w-6 items-center justify-center rounded-lg bg-background-secondary">
@@ -57,12 +57,14 @@ export const PostCard = ({ post }: PostCardProps) => {
 							align="end"
 							className="min-w-[80px] overflow-hidden rounded-lg border border-border bg-background-secondary font-medium text-xs shadow-2xl"
 						>
-							<DropdownMenu.Item
-								className="p-3 focus-within:outline-none hover:bg-primary"
-								onClick={() => setIsEditing(true)}
-							>
-								Edit
-							</DropdownMenu.Item>
+							{post.user_id === account?.id && (
+								<DropdownMenu.Item
+									className="p-3 focus-within:outline-none hover:bg-primary"
+									onClick={() => setIsEditing(true)}
+								>
+									Edit
+								</DropdownMenu.Item>
+							)}
 							<DropdownMenu.Item
 								className="p-3 focus-within:outline-none hover:bg-primary"
 								onClick={() => deletePost(post.id)}
@@ -157,8 +159,8 @@ export const PostCard = ({ post }: PostCardProps) => {
 									navigate({ to: "/posts/$id", params: { id: post.id } }),
 								)}
 							</p>
-							<UrlPreview content={post.content} />
 						</div>
+						<UrlPreview content={post.content} />
 						<MediaGallery media={post.medias} />
 					</>
 				)}