1 files changed, 33 insertions, 9 deletions
diff --git a/apps/web/components/dashboard/preview/ReaderView.tsx b/apps/web/components/dashboard/preview/ReaderView.tsx
index f2f843ee..76070534 100644
--- a/apps/web/components/dashboard/preview/ReaderView.tsx
+++ b/apps/web/components/dashboard/preview/ReaderView.tsx
@@ -1,12 +1,15 @@
 import { FullPageSpinner } from "@/components/ui/full-page-spinner";
-import { toast } from "@/components/ui/use-toast";
-import { api } from "@/lib/trpc";
+import { toast } from "@/components/ui/sonner";
+import { useTranslation } from "@/lib/i18n/client";
+import { useQuery } from "@tanstack/react-query";
+import { FileX } from "lucide-react";
 
 import {
   useCreateHighlight,
   useDeleteHighlight,
   useUpdateHighlight,
 } from "@karakeep/shared-react/hooks/highlights";
+import { useTRPC } from "@karakeep/shared-react/trpc";
 import { BookmarkTypes } from "@karakeep/shared/types/bookmarks";
 
 import BookmarkHTMLHighlighter from "./BookmarkHtmlHighlighter";
@@ -22,11 +25,15 @@ export default function ReaderView({
   style?: React.CSSProperties;
   readOnly: boolean;
 }) {
-  const { data: highlights } = api.highlights.getForBookmark.useQuery({
-    bookmarkId,
-  });
-  const { data: cachedContent, isPending: isCachedContentLoading } =
-    api.bookmarks.getBookmark.useQuery(
+  const { t } = useTranslation();
+  const api = useTRPC();
+  const { data: highlights } = useQuery(
+    api.highlights.getForBookmark.queryOptions({
+      bookmarkId,
+    }),
+  );
+  const { data: cachedContent, isPending: isCachedContentLoading } = useQuery(
+    api.bookmarks.getBookmark.queryOptions(
       {
         bookmarkId,
         includeContent: true,
@@ -37,7 +44,8 @@ export default function ReaderView({
             ? data.content.htmlContent
             : null,
       },
-    );
+    ),
+  );
 
   const { mutate: createHighlight } = useCreateHighlight({
     onSuccess: () => {
@@ -86,7 +94,23 @@ export default function ReaderView({
     content = <FullPageSpinner />;
   } else if (!cachedContent) {
     content = (
-      <div className="text-destructive">Failed to fetch link content ...</div>
+      <div className="flex h-full w-full items-center justify-center p-4">
+        <div className="max-w-sm space-y-4 text-center">
+          <div className="flex justify-center">
+            <div className="flex h-16 w-16 items-center justify-center rounded-full bg-muted">
+              <FileX className="h-8 w-8 text-muted-foreground" />
+            </div>
+          </div>
+          <div className="space-y-2">
+            <h3 className="text-lg font-medium text-foreground">
+              {t("preview.fetch_error_title")}
+            </h3>
+            <p className="text-sm leading-relaxed text-muted-foreground">
+              {t("preview.fetch_error_description")}
+            </p>
+          </div>
+        </div>
+      </div>
     );
   } else {
     content = (