From b147c8e5df75bdeafb1f0eeb2e6ce08e0dec7e37 Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Sat, 5 Oct 2024 18:16:19 +0000
Subject: feature: Persevere the source URL of clipped texts from the
 extension. Fixes #448

---
 apps/web/components/dashboard/bookmarks/AssetCard.tsx |  8 +++++++-
 .../components/dashboard/bookmarks/FooterLinkURL.tsx  | 18 ++++++++++++++++++
 apps/web/components/dashboard/bookmarks/LinkCard.tsx  | 19 +++----------------
 apps/web/components/dashboard/bookmarks/TextCard.tsx  |  8 +++++++-
 .../components/dashboard/preview/BookmarkPreview.tsx  | 11 +----------
 5 files changed, 36 insertions(+), 28 deletions(-)
 create mode 100644 apps/web/components/dashboard/bookmarks/FooterLinkURL.tsx

(limited to 'apps/web/components/dashboard')

diff --git a/apps/web/components/dashboard/bookmarks/AssetCard.tsx b/apps/web/components/dashboard/bookmarks/AssetCard.tsx
index c235e4c8..61b3bc8d 100644
--- a/apps/web/components/dashboard/bookmarks/AssetCard.tsx
+++ b/apps/web/components/dashboard/bookmarks/AssetCard.tsx
@@ -5,8 +5,10 @@ import Link from "next/link";
 
 import type { ZBookmarkTypeAsset } from "@hoarder/shared/types/bookmarks";
 import { getAssetUrl } from "@hoarder/shared-react/utils/assetUtils";
+import { getSourceUrl } from "@hoarder/shared-react/utils/bookmarkUtils";
 
 import { BookmarkLayoutAdaptingCard } from "./BookmarkLayoutAdaptingCard";
+import FooterLinkURL from "./FooterLinkURL";
 
 function AssetImage({
   bookmark,
@@ -55,7 +57,11 @@ export default function AssetCard({
   return (
     <BookmarkLayoutAdaptingCard
       title={bookmarkedAsset.title ?? bookmarkedAsset.content.fileName}
-      footer={null}
+      footer={
+        getSourceUrl(bookmarkedAsset) && (
+          <FooterLinkURL url={getSourceUrl(bookmarkedAsset)} />
+        )
+      }
       bookmark={bookmarkedAsset}
       className={className}
       wrapTags={true}
diff --git a/apps/web/components/dashboard/bookmarks/FooterLinkURL.tsx b/apps/web/components/dashboard/bookmarks/FooterLinkURL.tsx
new file mode 100644
index 00000000..cc91a7e7
--- /dev/null
+++ b/apps/web/components/dashboard/bookmarks/FooterLinkURL.tsx
@@ -0,0 +1,18 @@
+import Link from "next/link";
+
+export default function FooterLinkURL({ url }: { url: string | null }) {
+  if (!url) {
+    return null;
+  }
+  const parsedUrl = new URL(url);
+  return (
+    <Link
+      className="line-clamp-1 hover:text-foreground"
+      href={url}
+      target="_blank"
+      rel="noreferrer"
+    >
+      {parsedUrl.host}
+    </Link>
+  );
+}
diff --git a/apps/web/components/dashboard/bookmarks/LinkCard.tsx b/apps/web/components/dashboard/bookmarks/LinkCard.tsx
index dc189b10..86eed9e7 100644
--- a/apps/web/components/dashboard/bookmarks/LinkCard.tsx
+++ b/apps/web/components/dashboard/bookmarks/LinkCard.tsx
@@ -6,10 +6,12 @@ import Link from "next/link";
 import type { ZBookmarkTypeLink } from "@hoarder/shared/types/bookmarks";
 import {
   getBookmarkLinkImageUrl,
+  getSourceUrl,
   isBookmarkStillCrawling,
 } from "@hoarder/shared-react/utils/bookmarkUtils";
 
 import { BookmarkLayoutAdaptingCard } from "./BookmarkLayoutAdaptingCard";
+import FooterLinkURL from "./FooterLinkURL";
 
 function LinkTitle({ bookmark }: { bookmark: ZBookmarkTypeLink }) {
   const link = bookmark.content;
@@ -68,21 +70,6 @@ function LinkImage({
   );
 }
 
-function LinkUrl({ bookmark }: { bookmark: ZBookmarkTypeLink }) {
-  const link = bookmark.content;
-  const parsedUrl = new URL(link.url);
-  return (
-    <Link
-      className="line-clamp-1 hover:text-foreground"
-      href={link.url}
-      target="_blank"
-      rel="noreferrer"
-    >
-      {parsedUrl.host}
-    </Link>
-  );
-}
-
 export default function LinkCard({
   bookmark: bookmarkLink,
   className,
@@ -93,7 +80,7 @@ export default function LinkCard({
   return (
     <BookmarkLayoutAdaptingCard
       title={<LinkTitle bookmark={bookmarkLink} />}
-      footer={<LinkUrl bookmark={bookmarkLink} />}
+      footer={<FooterLinkURL url={getSourceUrl(bookmarkLink)} />}
       bookmark={bookmarkLink}
       wrapTags={false}
       image={(_layout, className) => (
diff --git a/apps/web/components/dashboard/bookmarks/TextCard.tsx b/apps/web/components/dashboard/bookmarks/TextCard.tsx
index 9876d904..9d6c1df1 100644
--- a/apps/web/components/dashboard/bookmarks/TextCard.tsx
+++ b/apps/web/components/dashboard/bookmarks/TextCard.tsx
@@ -5,8 +5,10 @@ import { bookmarkLayoutSwitch } from "@/lib/userLocalSettings/bookmarksLayout";
 import { cn } from "@/lib/utils";
 
 import type { ZBookmarkTypeText } from "@hoarder/shared/types/bookmarks";
+import { getSourceUrl } from "@hoarder/shared-react/utils/bookmarkUtils";
 
 import { BookmarkLayoutAdaptingCard } from "./BookmarkLayoutAdaptingCard";
+import FooterLinkURL from "./FooterLinkURL";
 
 export default function TextCard({
   bookmark,
@@ -22,7 +24,11 @@ export default function TextCard({
       <BookmarkLayoutAdaptingCard
         title={bookmark.title}
         content={<MarkdownComponent>{bookmarkedText.text}</MarkdownComponent>}
-        footer={null}
+        footer={
+          getSourceUrl(bookmark) && (
+            <FooterLinkURL url={getSourceUrl(bookmark)} />
+          )
+        }
         wrapTags={true}
         bookmark={bookmark}
         className={className}
diff --git a/apps/web/components/dashboard/preview/BookmarkPreview.tsx b/apps/web/components/dashboard/preview/BookmarkPreview.tsx
index 1f099725..5e2764f4 100644
--- a/apps/web/components/dashboard/preview/BookmarkPreview.tsx
+++ b/apps/web/components/dashboard/preview/BookmarkPreview.tsx
@@ -18,6 +18,7 @@ import relativeTime from "dayjs/plugin/relativeTime";
 import { CalendarDays, ExternalLink } from "lucide-react";
 
 import {
+  getSourceUrl,
   isBookmarkStillCrawling,
   isBookmarkStillLoading,
 } from "@hoarder/shared-react/utils/bookmarkUtils";
@@ -66,16 +67,6 @@ function CreationTime({ createdAt }: { createdAt: Date }) {
   );
 }
 
-function getSourceUrl(bookmark: ZBookmark) {
-  if (bookmark.content.type === BookmarkTypes.LINK) {
-    return bookmark.content.url;
-  }
-  if (bookmark.content.type === BookmarkTypes.ASSET) {
-    return bookmark.content.sourceUrl;
-  }
-  return null;
-}
-
 export default function BookmarkPreview({
   bookmarkId,
   initialData,
-- 
cgit v1.2.3-70-g09d2