[redditmon] inbox: automatically focus on first post in tabs (#1575)

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">

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 (