feature: Persevere the source URL of clipped texts from the extension.

Fixes hoarder-app#448

apps/browser-extension/src/background/background.ts

@@ -60,7 +60,7 @@ async function handleContextMenuClick(info: chrome.contextMenus.OnClickData) {
       newBookmark = {
         type: BookmarkTypes.TEXT,
         text: info.selectionText,
-        // TODO: Include a source url in the snippet
+        sourceUrl: info.pageUrl,
       };
     } else if (info.srcUrl ?? info.linkUrl ?? info.pageUrl) {
       newBookmark = {

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}

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>
+  );
+}

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) => (

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}

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,

packages/db/drizzle/0028_melodic_norrin_radd.sql

@@ -0,0 +1 @@
+ALTER TABLE `bookmarkTexts` ADD `sourceUrl` text;