Render thumb #id as an inline post thumbnail in DText

- New PostThumb component fetches the post through the e621 client (cached 30 minutes, no retries) and renders its preview image linked to the in-app post page, with the post id underneath - Falls back to an external e621 link while loading or when the post cannot be fetched
2026-09-17 09:28:18 -05:00
parent 8e2f5e3395
commit d6c3f90c1f
2 changed files with 61 additions and 6 deletions
@@ -0,0 +1,53 @@
+import { useQuery } from "@tanstack/react-query";
+import { Link } from "react-router-dom";
+
+import { effectiveCredentials, fetchPost } from "@/lib/e621";
+import { useE621 } from "@/store/e621";
+
+export function PostThumb({ postId }: { postId: number }) {
+  const credentials = useE621((state) => state.credentials);
+
+  const query = useQuery({
+    queryKey: ["e621", "post-thumb", postId, credentials?.username ?? ""],
+    queryFn: ({ signal }) =>
+      fetchPost(effectiveCredentials(credentials), postId, signal),
+    staleTime: 30 * 60_000,
+    gcTime: 60 * 60_000,
+    retry: 0,
+  });
+
+  const preview = query.data?.preview.url;
+
+  if (preview) {
+    return (
+      <span className="my-1 inline-block align-top">
+        <Link
+          to={`/online/view/${postId}`}
+          title={`Post #${postId}`}
+          className="group inline-block"
+        >
+          <img
+            src={preview}
+            alt={`Post #${postId}`}
+            loading="lazy"
+            className="max-h-40 rounded border border-ctp-surface0 transition group-hover:border-ctp-surface2"
+          />
+          <span className="mt-0.5 block text-center font-mono text-[10px] text-ctp-overlay0">
+            #{postId}
+          </span>
+        </Link>
+      </span>
+    );
+  }
+
+  return (
+    <a
+      href={`https://e621.net/posts/${postId}`}
+      target="_blank"
+      rel="noreferrer"
+      className="text-ctp-blue hover:underline"
+    >
+      thumb #{postId}
+    </a>
+  );
+}