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

1 files changed, 30 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>