diff --git a/frontend/src/features/online/PostThumb.tsx b/frontend/src/features/online/PostThumb.tsx
new file mode 100644
index 0000000..0378e92
--- /dev/null
+++ b/frontend/src/features/online/PostThumb.tsx
@@ -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 (
+
+
+
+
+ #{postId}
+
+
+
+ );
+ }
+
+ return (
+
+ thumb #{postId}
+
+ );
+}
diff --git a/frontend/src/lib/dtext.tsx b/frontend/src/lib/dtext.tsx
index 0a13448..ea0dc77 100644
--- a/frontend/src/lib/dtext.tsx
+++ b/frontend/src/lib/dtext.tsx
@@ -1,6 +1,7 @@
import type { ReactNode } from "react";
import { Spoiler } from "@/components/Spoiler";
+import { PostThumb } from "@/features/online/PostThumb";
export const DEFAULT_E621_BASE_URL = "https://e621.net";
@@ -51,7 +52,6 @@ const ENTITY_PATHS: Record = {
takedown: "/takedowns/{id}",
record: "/user_feedbacks/{id}",
ticket: "/tickets/{id}",
- thumb: "/posts/{id}",
};
const LINK_RE = new RegExp(
@@ -159,11 +159,13 @@ function linkify(text: string, keyPrefix: string, baseUrl: string): ReactNode[]
} else if (match[11] !== undefined) {
nodes.push();
} else if (match[12] !== undefined && match[13] !== undefined) {
- const path = ENTITY_PATHS[match[12]]?.replace("{id}", match[13]);
- const label = `${match[12]} #${match[13]}`;
- nodes.push(
- path ? anchor(key, `${baseUrl}${path}`, label) : label,
- );
+ if (match[12] === "thumb") {
+ nodes.push();
+ } else {
+ const path = ENTITY_PATHS[match[12]]?.replace("{id}", match[13]);
+ const label = `${match[12]} #${match[13]}`;
+ nodes.push(path ? anchor(key, `${baseUrl}${path}`, label) : label);
+ }
}
lastIndex = regex.lastIndex;
}