feat: add a warning about viewing archives inline. fixes #2286

3 files changed, 33 insertions, 1 deletions

diff --git a/apps/web/components/dashboard/preview/LinkContentSection.tsx b/apps/web/components/dashboard/preview/LinkContentSection.tsx
index 75b6df14..bdf5faf1 100644
--- a/apps/web/components/dashboard/preview/LinkContentSection.tsx
+++ b/apps/web/components/dashboard/preview/LinkContentSection.tsx
@@ -16,7 +16,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { useTranslation } from "@/lib/i18n/client";
+import { Trans, useTranslation } from "@/lib/i18n/client";
 import { useReaderSettings } from "@/lib/readerSettings";
 import {
   AlertTriangle,
@@ -24,6 +24,7 @@ import {
   BookOpen,
   Camera,
   ExpandIcon,
+  Info,
   Video,
 } from "lucide-react";
 import { useSession } from "next-auth/react";
@@ -237,6 +238,34 @@ export default function LinkContentSection({
             </Tooltip>
           </>
         )}
+        {section === "archive" && (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div className="flex h-10 items-center gap-1 rounded-md border border-blue-500/50 bg-blue-50 px-3 text-blue-700 dark:bg-blue-950 dark:text-blue-300">
+                <Info className="h-4 w-4" />
+              </div>
+            </TooltipTrigger>
+            <TooltipContent side="bottom" className="max-w-sm">
+              <p className="text-sm">
+                <Trans
+                  i18nKey="preview.archive_info"
+                  components={{
+                    1: (
+                      <Link
+                        prefetch={false}
+                        href={`/api/assets/${bookmark.content.fullPageArchiveAssetId ?? bookmark.content.precrawledArchiveAssetId}`}
+                        download
+                        className="font-medium underline"
+                      >
+                        link
+                      </Link>
+                    ),
+                  }}
+                />
+              </p>
+            </TooltipContent>
+          </Tooltip>
+        )}
       </div>
       {content}
     </div>
diff --git a/apps/web/lib/i18n/client.ts b/apps/web/lib/i18n/client.ts
index 1c56a88a..0704ce87 100644
--- a/apps/web/lib/i18n/client.ts
+++ b/apps/web/lib/i18n/client.ts
@@ -4,6 +4,7 @@ import i18next from "i18next";
 import resourcesToBackend from "i18next-resources-to-backend";
 import {
   initReactI18next,
+  Trans as TransOrg,
   useTranslation as useTranslationOrg,
 } from "react-i18next";
 
@@ -30,4 +31,5 @@ i18next
   });
 
 export const useTranslation = useTranslationOrg;
+export const Trans = TransOrg;
 export const i18n = i18next;
diff --git a/apps/web/lib/i18n/locales/en/translation.json b/apps/web/lib/i18n/locales/en/translation.json
index 08dc33e4..672d3e58 100644
--- a/apps/web/lib/i18n/locales/en/translation.json
+++ b/apps/web/lib/i18n/locales/en/translation.json
@@ -715,6 +715,7 @@
     "view_original": "View Original",
     "cached_content": "Cached Content",
     "reader_view": "Reader View",
+    "archive_info": "Archives may not render correctly inline if they require Javascript. For best results, <1>download it and open in your browser</1>.",
     "tabs": {
       "content": "Content",
       "details": "Details"