From f503a4cdcd557bb8d5e9a18ef38e368a5e2fcb69 Mon Sep 17 00:00:00 2001 From: Yangshun Date: Wed, 2 Jul 2025 10:48:46 +0800 Subject: [PATCH] [socialmon] ui: tweaks --- apps/socialmon/src/app/(projects)/page.tsx | 3 +- .../app/(projects)/projects/create/page.tsx | 4 +- apps/socialmon/src/app/RootLayout.tsx | 3 +- .../src/app/projects/[projectSlug]/layout.tsx | 2 +- .../[projectSlug]/posts/[id]/page.tsx | 4 +- .../components/activity/ActivityLogList.tsx | 6 ++- .../posts}/PostDetailPage.tsx | 4 +- .../components/posts/PostList/PostDetail.tsx | 3 +- .../components/posts/PostList/PostItem.tsx | 20 +++++---- .../components/posts/PostList/PostList.tsx | 36 +++++++++------- .../posts/PostList/PostMetadata.tsx | 42 +++++++++++-------- .../posts/PostList/PostResponse.tsx | 5 +-- .../posts/PostRelevancyActionButton.tsx | 1 + .../components/posts/comments/PostComment.tsx | 1 - .../project}/ProjectCreatePage.tsx | 0 .../src/components/project/ProjectForm.tsx | 2 +- .../ProjectProductToAdvertiseInput.tsx | 2 +- .../project}/ProjectsPage.tsx | 26 ++++++------ .../src/components/ui/Navbar/Navbar.tsx | 8 ++-- .../src/components/users/UserCard.tsx | 1 - 20 files changed, 95 insertions(+), 78 deletions(-) rename apps/socialmon/src/{app/projects/[projectSlug]/posts/[id] => components/posts}/PostDetailPage.tsx (97%) rename apps/socialmon/src/{app/(projects)/projects/create => components/project}/ProjectCreatePage.tsx (100%) rename apps/socialmon/src/{app/(projects) => components/project}/ProjectsPage.tsx (90%) diff --git a/apps/socialmon/src/app/(projects)/page.tsx b/apps/socialmon/src/app/(projects)/page.tsx index 36e9ebec9..afb8b5a50 100644 --- a/apps/socialmon/src/app/(projects)/page.tsx +++ b/apps/socialmon/src/app/(projects)/page.tsx @@ -1,11 +1,10 @@ import type { Metadata } from 'next'; import { redirectToLoginPageIfNotLoggedIn } from '~/components/auth/redirectToLoginPageIfNotLoggedIn'; +import ProjectsPage from '~/components/project/ProjectsPage'; import { getUser } from '~/app/lib/auth'; -import ProjectsPage from './ProjectsPage'; - export const metadata: Metadata = { description: 'Social moderator', title: 'SocialMon | Projects', diff --git a/apps/socialmon/src/app/(projects)/projects/create/page.tsx b/apps/socialmon/src/app/(projects)/projects/create/page.tsx index f2cb4dc88..39efe903c 100644 --- a/apps/socialmon/src/app/(projects)/projects/create/page.tsx +++ b/apps/socialmon/src/app/(projects)/projects/create/page.tsx @@ -1,9 +1,9 @@ import type { Metadata } from 'next'; import { notFound } from 'next/navigation'; -import { getUser } from '~/app/lib/auth'; +import ProjectCreatePage from '~/components/project/ProjectCreatePage'; -import ProjectCreatePage from './ProjectCreatePage'; +import { getUser } from '~/app/lib/auth'; export const metadata: Metadata = { description: 'Social moderator', diff --git a/apps/socialmon/src/app/RootLayout.tsx b/apps/socialmon/src/app/RootLayout.tsx index aa723fc9d..408b3d3b4 100644 --- a/apps/socialmon/src/app/RootLayout.tsx +++ b/apps/socialmon/src/app/RootLayout.tsx @@ -17,7 +17,8 @@ export default function RootLayout({ children }: Props) { - +
{children}
 diff --git a/apps/socialmon/src/app/projects/[projectSlug]/layout.tsx b/apps/socialmon/src/app/projects/[projectSlug]/layout.tsx index b5b08259d..446488f68 100644 --- a/apps/socialmon/src/app/projects/[projectSlug]/layout.tsx +++ b/apps/socialmon/src/app/projects/[projectSlug]/layout.tsx @@ -34,7 +34,7 @@ export default async function Layout({ children, params }: Props) { return (
- + {children}
diff --git a/apps/socialmon/src/app/projects/[projectSlug]/posts/[id]/page.tsx b/apps/socialmon/src/app/projects/[projectSlug]/posts/[id]/page.tsx index c8e247c41..58f4907c3 100644 --- a/apps/socialmon/src/app/projects/[projectSlug]/posts/[id]/page.tsx +++ b/apps/socialmon/src/app/projects/[projectSlug]/posts/[id]/page.tsx @@ -1,8 +1,8 @@ import { notFound } from 'next/navigation'; -import prisma from '~/server/prisma'; +import PostDetailPage from '~/components/posts/PostDetailPage'; -import PostDetailPage from './PostDetailPage'; +import prisma from '~/server/prisma'; type Props = Readonly<{ params: { diff --git a/apps/socialmon/src/components/activity/ActivityLogList.tsx b/apps/socialmon/src/components/activity/ActivityLogList.tsx index bbfe8f7ad..b99ab16c9 100644 --- a/apps/socialmon/src/components/activity/ActivityLogList.tsx +++ b/apps/socialmon/src/components/activity/ActivityLogList.tsx @@ -49,7 +49,11 @@ export default function ActivityLogList() { {hasNextPage && (
-
diff --git a/apps/socialmon/src/app/projects/[projectSlug]/posts/[id]/PostDetailPage.tsx b/apps/socialmon/src/components/posts/PostDetailPage.tsx similarity index 97% rename from apps/socialmon/src/app/projects/[projectSlug]/posts/[id]/PostDetailPage.tsx rename to apps/socialmon/src/components/posts/PostDetailPage.tsx index 9cd5dd7db..c6cc96b9e 100644 --- a/apps/socialmon/src/app/projects/[projectSlug]/posts/[id]/PostDetailPage.tsx +++ b/apps/socialmon/src/components/posts/PostDetailPage.tsx @@ -71,14 +71,14 @@ export default function PostDetailPage({ post }: Props) { } return ( -
+
diff --git a/apps/socialmon/src/components/posts/PostList/PostDetail.tsx b/apps/socialmon/src/components/posts/PostList/PostDetail.tsx index 698259f77..3b3dc6606 100644 --- a/apps/socialmon/src/components/posts/PostList/PostDetail.tsx +++ b/apps/socialmon/src/components/posts/PostList/PostDetail.tsx @@ -97,7 +97,7 @@ export default function PostDetail({ return (
- {post.title} + {post.title} @@ -108,7 +108,6 @@ export default function PostDetail({ className="prose" /> - {!post.reply && ( <> diff --git a/apps/socialmon/src/components/posts/PostList/PostItem.tsx b/apps/socialmon/src/components/posts/PostList/PostItem.tsx index 3e5463498..5a57472b8 100644 --- a/apps/socialmon/src/components/posts/PostList/PostItem.tsx +++ b/apps/socialmon/src/components/posts/PostList/PostItem.tsx @@ -1,4 +1,4 @@ -import { Box, Title } from '@mantine/core'; +import { Anchor, Box, Title } from '@mantine/core'; import clsx from 'clsx'; import Link from 'next/link'; @@ -34,17 +34,21 @@ export default function PostItem({ - {post.title} + )}> + + + {post.title} + + page.posts); return ( -
+
setActiveTab(value as PostTab)}> - Unreplied - Replied - Irrelevant - All + + Unreplied + + + Replied + + + Irrelevant + + + All + -
+
{projectData?.postsLastFetchedAt && (
- + Fetched{' '}
- - {!isLoading && posts?.length === 0 && ( No post found )} - -
+ {posts?.map((post) => ( ))} - {hasNextPage && (
)} -
+
); } diff --git a/apps/socialmon/src/components/posts/PostList/PostMetadata.tsx b/apps/socialmon/src/components/posts/PostList/PostMetadata.tsx index 7e581fcae..ccb3759fd 100644 --- a/apps/socialmon/src/components/posts/PostList/PostMetadata.tsx +++ b/apps/socialmon/src/components/posts/PostList/PostMetadata.tsx @@ -1,9 +1,7 @@ -import { Badge, Button, Pill, Text, Tooltip } from '@mantine/core'; +import { Anchor, Badge, Button, Pill, Text, Tooltip } from '@mantine/core'; import Link from 'next/link'; import { RiArrowRightUpLine, RiCheckLine } from 'react-icons/ri'; -import RelativeTimestamp from '~/components/common/datetime/RelativeTimestamp'; - import type { PostExtended } from '~/types'; import { redditPermalinkToUrl } from '../utils'; @@ -16,7 +14,7 @@ type Props = Readonly<{ showViewPost?: boolean; }>; -function PostMetadata({ +export default function PostMetadata({ post, showMarkedAsIrrelevant, showRepliedBadge, @@ -27,32 +25,43 @@ function PostMetadata({
-
- - - + + {new Intl.DateTimeFormat(undefined, { + day: 'numeric', + hour: 'numeric', + hour12: true, + minute: '2-digit', + month: 'long', + weekday: 'long', + year: 'numeric', + }).format(post.createdAt)} -
- - {post.subreddit} + + + {post.subreddit} + +
- {showViewPost && ( )}
- {post.keywords.length > 0 && (
{post.keywords.map((keyword) => ( @@ -62,7 +71,6 @@ function PostMetadata({ ))}
)} - {post.reply && showRepliedBadge && (
} size="xs"> @@ -73,12 +81,10 @@ function PostMetadata({ {post.relevancy === 'IRRELEVANT' && showMarkedAsIrrelevant && (
} size="xs"> - Marked as Irrelevant + Marked as irrelevant
)}
); } - -export default PostMetadata; diff --git a/apps/socialmon/src/components/posts/PostList/PostResponse.tsx b/apps/socialmon/src/components/posts/PostList/PostResponse.tsx index 669236a9c..573383144 100644 --- a/apps/socialmon/src/components/posts/PostList/PostResponse.tsx +++ b/apps/socialmon/src/components/posts/PostList/PostResponse.tsx @@ -32,12 +32,11 @@ export default function PostResponse({ rightSection={} target="_blank" variant="subtle"> - View Reply + View reply
- - {/* Fallback to showing the stored relied if fetching reply failed */} + {/* Fallback to showing the stored reply if fetching reply failed */} {!isFetchingComments && !comments?.data?.children?.length ? ( {relevancy === PostRelevancy.IRRELEVANT ? 'Mark as relevant' diff --git a/apps/socialmon/src/components/posts/comments/PostComment.tsx b/apps/socialmon/src/components/posts/comments/PostComment.tsx index 238e6cb02..7944932f0 100644 --- a/apps/socialmon/src/components/posts/comments/PostComment.tsx +++ b/apps/socialmon/src/components/posts/comments/PostComment.tsx @@ -83,7 +83,6 @@ export default function PostComment({ className, comment, level }: Props) {
- - +