fix: show only selected post from favorites

src/components/messageStream/MessageStream.tsx

@@ -24,6 +24,7 @@ export function MessageStream({ scope }: MessageStreamProps) {
   const type = sp.get("type") || "all";
   const q = (sp.get("q") || "").trim();
   const sort = sp.get("sort") || "";
+  const singlePostMode = sp.get("single") === "1" && !!sp.get("post");
 
   const params = useMemo(
     () => ({ scope, type, q, sort, lang }),
@@ -55,6 +56,7 @@ export function MessageStream({ scope }: MessageStreamProps) {
   }, [q]);
 
   useEffect(() => {
+    if (singlePostMode) return;
     const el = sentinelRef.current;
     if (!el) return;
     const io = new IntersectionObserver(
@@ -75,7 +77,7 @@ export function MessageStream({ scope }: MessageStreamProps) {
     );
     io.observe(el);
     return () => io.disconnect();
-  }, [loadMore]);
+  }, [loadMore, singlePostMode]);
 
   // When arriving with a `?post=<id>` query (or legacy `#post-<id>` hash),
   // scroll to that bubble — loading more pages until it shows up — then give
@@ -90,13 +92,19 @@ export function MessageStream({ scope }: MessageStreamProps) {
   );
   const [isFetchingTargetPost, setIsFetchingTargetPost] = useState(false);
   const [targetPostFetchFailed, setTargetPostFetchFailed] = useState(false);
-  const targetAlreadyInBaseItems = useMemo(
+  const baseTargetPost = useMemo(
     () =>
-      !!queryTargetPostId &&
-      items.some((post) => post.id === queryTargetPostId),
+      queryTargetPostId
+        ? (items.find((post) => post.id === queryTargetPostId) ?? null)
+        : null,
     [items, queryTargetPostId],
   );
+  const targetAlreadyInBaseItems = !!baseTargetPost;
   const streamItems = useMemo(() => {
+    if (singlePostMode) {
+      if (baseTargetPost) return [baseTargetPost];
+      return resolvedTargetPost ? [resolvedTargetPost] : [];
+    }
     if (
       resolvedTargetPost &&
       !items.some((post) => post.id === resolvedTargetPost.id)
@@ -104,7 +112,7 @@ export function MessageStream({ scope }: MessageStreamProps) {
       return [resolvedTargetPost, ...items];
     }
     return items;
-  }, [items, resolvedTargetPost]);
+  }, [baseTargetPost, items, resolvedTargetPost, singlePostMode]);
   const groups = useGroupedByDay(streamItems, lang);
   // Lock only engages while we are actively running the smooth-scroll animation
   // — not during the wait/pagination phase — so the page never feels frozen
@@ -355,30 +363,40 @@ export function MessageStream({ scope }: MessageStreamProps) {
   // their specific post, not just lazily loading the feed.
   const targetInLoadedItems =
     !!queryTargetPostId && streamItems.some((p) => p.id === queryTargetPostId);
-  const isSearchingDeepTarget =
-    !!queryTargetPostId &&
-    !targetInLoadedItems &&
-    !error &&
-    (isFetchingTargetPost || hasMore || isLoading);
-  const targetNotFoundInStream =
-    !!queryTargetPostId &&
-    !targetInLoadedItems &&
-    !error &&
-    targetPostFetchFailed &&
-    !hasMore &&
-    !isLoading &&
-    streamItems.length > 0;
+  const isSearchingDeepTarget = singlePostMode
+    ? !!queryTargetPostId && !targetInLoadedItems && isFetchingTargetPost
+    : !!queryTargetPostId &&
+      !targetInLoadedItems &&
+      !error &&
+      (isFetchingTargetPost || hasMore || isLoading);
+  const targetNotFoundInStream = singlePostMode
+    ? !!queryTargetPostId &&
+      !targetInLoadedItems &&
+      targetPostFetchFailed &&
+      !isFetchingTargetPost
+    : !!queryTargetPostId &&
+      !targetInLoadedItems &&
+      !error &&
+      targetPostFetchFailed &&
+      !hasMore &&
+      !isLoading &&
+      streamItems.length > 0;
 
   return (
     <div className="mx-auto max-w-full md:max-w-[820px] lg:max-w-[1080px] xl:max-w-[1180px]">
       {/* Filters stay pinned below the global header (which shows the page
           name) so users can switch filters while scrolling. */}
-      <div
-        ref={filterBarRef}
-        className="sticky top-[64px] z-30 bg-ark-bg md:top-[70px]"
-      >
-        <FilterChips type={type} onTypeChange={(v) => updateParam("type", v)} />
-      </div>
+      {!singlePostMode ? (
+        <div
+          ref={filterBarRef}
+          className="sticky top-[64px] z-30 bg-ark-bg md:top-[70px]"
+        >
+          <FilterChips
+            type={type}
+            onTypeChange={(v) => updateParam("type", v)}
+          />
+        </div>
+      ) : null}
 
       <div className="flex flex-col gap-3 px-4 pt-4 md:px-0 md:pt-2">
         {isSearchingDeepTarget ? (
@@ -432,7 +450,7 @@ export function MessageStream({ scope }: MessageStreamProps) {
               </p>
             ) : null}
 
-            {error ? (
+            {!singlePostMode && error ? (
               <div
                 role="alert"
                 className="my-4 flex flex-col gap-3 rounded-xl border border-red-900 bg-red-950/40 px-4 py-3 text-sm text-red-200 sm:flex-row sm:items-center sm:justify-between"
@@ -450,7 +468,7 @@ export function MessageStream({ scope }: MessageStreamProps) {
               </div>
             ) : null}
 
-            {isLoading && !error ? (
+            {!singlePostMode && isLoading && !error ? (
               <div
                 aria-live="polite"
                 aria-label={t("loading")}
@@ -462,7 +480,9 @@ export function MessageStream({ scope }: MessageStreamProps) {
           </>
         )}
 
-        <div ref={sentinelRef} aria-hidden className="h-1" />
+        {!singlePostMode ? (
+          <div ref={sentinelRef} aria-hidden className="h-1" />
+        ) : null}
       </div>
     </div>
   );