From 66ec297eee28ecfda031577db75741b4a3002873 Mon Sep 17 00:00:00 2001
From: Zhou Yuhang <54398705+xquisite0@users.noreply.github.com>
Date: Mon, 28 Jul 2025 10:44:39 +0800
Subject: [PATCH] [redditmon] inbox: automatically focus on first post in tabs
 (#1575)

---
 .../posts/InterceptedPostDetailClient.tsx     | 11 ++++++++++
 .../src/components/posts/PostsContext.tsx     | 21 +++++++++++++++++++
 2 files changed, 32 insertions(+)

diff --git a/apps/redditmon/src/components/posts/InterceptedPostDetailClient.tsx b/apps/redditmon/src/components/posts/InterceptedPostDetailClient.tsx
index b28e5cc8c..529f094c5 100644
--- a/apps/redditmon/src/components/posts/InterceptedPostDetailClient.tsx
+++ b/apps/redditmon/src/components/posts/InterceptedPostDetailClient.tsx
@@ -34,6 +34,8 @@ export default function InterceptedPostDetailClient({
     handlePrevPost,
     markPostRelevancy,
     markPostReplyStatus,
+    posts,
+    selectedPostId,
   } = usePostsContext();
 
   const toggleRelevant = () => {
@@ -68,6 +70,15 @@ export default function InterceptedPostDetailClient({
     };
   }, [disableScope, enableScope]);
 
+  // Check if the current post is still valid in the context
+  const isPostValidInCurrentContext =
+    selectedPostId === post.id && posts.some((p) => p.id === post.id);
+
+  // If the post is not valid in the current context, don't render the detail
+  if (!isPostValidInCurrentContext) {
+    return null;
+  }
+
   return (
     <div className="flex h-full flex-col">
       <div className="flex-1 overflow-y-auto">
diff --git a/apps/redditmon/src/components/posts/PostsContext.tsx b/apps/redditmon/src/components/posts/PostsContext.tsx
index c8b33c8ad..34b167ac7 100644
--- a/apps/redditmon/src/components/posts/PostsContext.tsx
+++ b/apps/redditmon/src/components/posts/PostsContext.tsx
@@ -59,6 +59,8 @@ export function PostsProvider({
   const params = useParams();
   const utils = trpc.useUtils();
 
+  const prevActiveTabRef = useRef<PostListTab>(activeTab);
+
   // Store navigation context before mutations to handle auto-navigation
   const navigationContextRef = useRef<{
     currentIndex: number;
@@ -169,6 +171,25 @@ export function PostsProvider({
     }
   }, [params?.id]);
 
+  useEffect(() => {
+    const hasTabChanged = prevActiveTabRef.current !== activeTab;
+
+    prevActiveTabRef.current = activeTab;
+
+    if (hasTabChanged) {
+      setSelectedPostId(null);
+
+      return;
+    }
+
+    if (!isLoading && posts.length > 0 && !selectedPostId) {
+      const firstPostId = posts[0]!.id;
+
+      setSelectedPostId(firstPostId);
+      router.push(`/projects/${projectSlug}/posts/${firstPostId}`);
+    }
+  }, [posts, selectedPostId, isLoading, projectSlug, router, activeTab]);
+  
   // Auto-load next page when user reaches the last post
   useEffect(() => {
     if (