diff options
Diffstat (limited to 'apps/web/components/dashboard')
7 files changed, 107 insertions, 46 deletions
diff --git a/apps/web/components/dashboard/bookmarks/AssetCard.tsx b/apps/web/components/dashboard/bookmarks/AssetCard.tsx index c9a43575..40f435de 100644 --- a/apps/web/components/dashboard/bookmarks/AssetCard.tsx +++ b/apps/web/components/dashboard/bookmarks/AssetCard.tsx @@ -1,13 +1,14 @@ "use client"; import Image from "next/image"; -import { isBookmarkStillTagging } from "@/lib/bookmarkUtils"; import { api } from "@/lib/trpc"; import type { ZBookmark, ZBookmarkTypeAsset, } from "@hoarder/shared/types/bookmarks"; +import { getAssetUrl } from "@hoarder/shared-react/utils/assetUtils"; +import { isBookmarkStillTagging } from "@hoarder/shared-react/utils/bookmarkUtils"; import { BookmarkLayoutAdaptingCard } from "./BookmarkLayoutAdaptingCard"; @@ -24,7 +25,7 @@ function AssetImage({ return ( <Image alt="asset" - src={`/api/assets/${bookmarkedAsset.assetId}`} + src={getAssetUrl(bookmarkedAsset.assetId)} fill={true} className={className} /> @@ -35,7 +36,7 @@ function AssetImage({ <iframe title={bookmarkedAsset.assetId} className={className} - src={`/api/assets/${bookmarkedAsset.assetId}`} + src={getAssetUrl(bookmarkedAsset.assetId)} /> ); } diff --git a/apps/web/components/dashboard/bookmarks/BookmarkLayoutAdaptingCard.tsx b/apps/web/components/dashboard/bookmarks/BookmarkLayoutAdaptingCard.tsx index 42c4db21..d282c3f4 100644 --- a/apps/web/components/dashboard/bookmarks/BookmarkLayoutAdaptingCard.tsx +++ b/apps/web/components/dashboard/bookmarks/BookmarkLayoutAdaptingCard.tsx @@ -1,7 +1,6 @@ import type { BookmarksLayoutTypes } from "@/lib/userLocalSettings/types"; import React from "react"; import Link from "next/link"; -import { isBookmarkStillTagging } from "@/lib/bookmarkUtils"; import { bookmarkLayoutSwitch, useBookmarkLayout, @@ -10,6 +9,7 @@ import { cn } from "@/lib/utils"; import dayjs from "dayjs"; import type { ZBookmark } from "@hoarder/shared/types/bookmarks"; +import { isBookmarkStillTagging } from "@hoarder/shared-react/utils/bookmarkUtils"; import BookmarkActionBar from "./BookmarkActionBar"; import TagList from "./TagList"; diff --git a/apps/web/components/dashboard/bookmarks/LinkCard.tsx b/apps/web/components/dashboard/bookmarks/LinkCard.tsx index ef0ae6f2..3bb1698f 100644 --- a/apps/web/components/dashboard/bookmarks/LinkCard.tsx +++ b/apps/web/components/dashboard/bookmarks/LinkCard.tsx @@ -1,13 +1,14 @@ "use client"; import Link from "next/link"; -import { - isBookmarkStillCrawling, - isBookmarkStillLoading, -} from "@/lib/bookmarkUtils"; import { api } from "@/lib/trpc"; import type { ZBookmarkTypeLink } from "@hoarder/shared/types/bookmarks"; +import { + getBookmarkLinkImageUrl, + isBookmarkStillCrawling, + isBookmarkStillLoading, +} from "@hoarder/shared-react/utils/bookmarkUtils"; import { BookmarkLayoutAdaptingCard } from "./BookmarkLayoutAdaptingCard"; @@ -33,7 +34,7 @@ function LinkImage({ // A dummy white pixel for when there's no image. // TODO: Better handling for cards with no images const image = - link.imageUrl ?? + getBookmarkLinkImageUrl(link)?.url ?? "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAA1JREFUGFdj+P///38ACfsD/QVDRcoAAAAASUVORK5CYII="; return ( <Link href={link.url} target="_blank"> diff --git a/apps/web/components/dashboard/bookmarks/TextCard.tsx b/apps/web/components/dashboard/bookmarks/TextCard.tsx index 9d5c8d8b..74b3e8e5 100644 --- a/apps/web/components/dashboard/bookmarks/TextCard.tsx +++ b/apps/web/components/dashboard/bookmarks/TextCard.tsx @@ -1,13 +1,13 @@ "use client"; import { useState } from "react"; -import { isBookmarkStillTagging } from "@/lib/bookmarkUtils"; import { api } from "@/lib/trpc"; import { bookmarkLayoutSwitch } from "@/lib/userLocalSettings/bookmarksLayout"; import { cn } from "@/lib/utils"; import Markdown from "react-markdown"; import type { ZBookmark } from "@hoarder/shared/types/bookmarks"; +import { isBookmarkStillTagging } from "@hoarder/shared-react/utils/bookmarkUtils"; import { BookmarkedTextViewer } from "./BookmarkedTextViewer"; import { BookmarkLayoutAdaptingCard } from "./BookmarkLayoutAdaptingCard"; diff --git a/apps/web/components/dashboard/preview/BookmarkPreview.tsx b/apps/web/components/dashboard/preview/BookmarkPreview.tsx index 29e8e39a..581ec4bd 100644 --- a/apps/web/components/dashboard/preview/BookmarkPreview.tsx +++ b/apps/web/components/dashboard/preview/BookmarkPreview.tsx @@ -11,20 +11,21 @@ import { TooltipPortal, TooltipTrigger, } from "@/components/ui/tooltip"; -import { - isBookmarkStillCrawling, - isBookmarkStillLoading, -} from "@/lib/bookmarkUtils"; import { api } from "@/lib/trpc"; import dayjs from "dayjs"; import relativeTime from "dayjs/plugin/relativeTime"; import { CalendarDays, ExternalLink } from "lucide-react"; import type { ZBookmark } from "@hoarder/shared/types/bookmarks"; +import { + isBookmarkStillCrawling, + isBookmarkStillLoading, +} from "@hoarder/shared-react/utils/bookmarkUtils"; import ActionBar from "./ActionBar"; import { AssetContentSection } from "./AssetContentSection"; import { EditableTitle } from "./EditableTitle"; +import LinkContentSection from "./LinkContentSection"; import { NoteEditor } from "./NoteEditor"; import { TextContentSection } from "./TextContentSection"; @@ -90,7 +91,10 @@ export default function BookmarkPreview({ let content; switch (bookmark.content.type) { - case "link": + case "link": { + content = <LinkContentSection bookmark={bookmark} />; + break; + } case "text": { content = <TextContentSection bookmark={bookmark} />; break; diff --git a/apps/web/components/dashboard/preview/LinkContentSection.tsx b/apps/web/components/dashboard/preview/LinkContentSection.tsx new file mode 100644 index 00000000..ff08c661 --- /dev/null +++ b/apps/web/components/dashboard/preview/LinkContentSection.tsx @@ -0,0 +1,77 @@ +import { useState } from "react"; +import { + Select, + SelectContent, + SelectGroup, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/components/ui/select"; +import { ScrollArea } from "@radix-ui/react-scroll-area"; + +import { ZBookmark, ZBookmarkedLink } from "@hoarder/shared/types/bookmarks"; + +function ScreenshotSection({ link }: { link: ZBookmarkedLink }) { + // eslint-disable-next-line @next/next/no-img-element + return <img alt="screenshot" src={`/api/assets/${link.screenshotAssetId}`} />; +} + +function CachedContentSection({ link }: { link: ZBookmarkedLink }) { + let content; + if (!link.htmlContent) { + content = ( + <div className="text-destructive">Failed to fetch link content ...</div> + ); + } else { + content = ( + <div + dangerouslySetInnerHTML={{ + __html: link.htmlContent || "", + }} + className="prose mx-auto dark:prose-invert" + /> + ); + } + return content; +} + +export default function LinkContentSection({ + bookmark, +}: { + bookmark: ZBookmark; +}) { + const [section, setSection] = useState<string>("cached"); + + if (bookmark.content.type != "link") { + throw new Error("Invalid content type"); + } + + let content; + if (section === "cached") { + content = <CachedContentSection link={bookmark.content} />; + } else { + content = <ScreenshotSection link={bookmark.content} />; + } + + return ( + <div className="flex flex-col items-center gap-2"> + <Select onValueChange={setSection} value={section}> + <SelectTrigger className="w-fit"> + <SelectValue /> + </SelectTrigger> + <SelectContent> + <SelectGroup> + <SelectItem value="cached">Cached Content</SelectItem> + <SelectItem + value="screenshot" + disabled={!bookmark.content.screenshotAssetId} + > + Screenshot + </SelectItem> + </SelectGroup> + </SelectContent> + </Select> + <ScrollArea className="h-full">{content}</ScrollArea> + </div> + ); +} diff --git a/apps/web/components/dashboard/preview/TextContentSection.tsx b/apps/web/components/dashboard/preview/TextContentSection.tsx index a73ad722..eba7d28b 100644 --- a/apps/web/components/dashboard/preview/TextContentSection.tsx +++ b/apps/web/components/dashboard/preview/TextContentSection.tsx @@ -4,36 +4,14 @@ import Markdown from "react-markdown"; import type { ZBookmark } from "@hoarder/shared/types/bookmarks"; export function TextContentSection({ bookmark }: { bookmark: ZBookmark }) { - let content; - switch (bookmark.content.type) { - case "link": { - if (!bookmark.content.htmlContent) { - content = ( - <div className="text-destructive"> - Failed to fetch link content ... - </div> - ); - } else { - content = ( - <div - dangerouslySetInnerHTML={{ - __html: bookmark.content.htmlContent || "", - }} - className="prose mx-auto dark:prose-invert" - /> - ); - } - break; - } - case "text": { - content = ( - <Markdown className="prose mx-auto dark:prose-invert"> - {bookmark.content.text} - </Markdown> - ); - break; - } + if (bookmark.content.type != "text") { + throw new Error("Invalid content type"); } - - return <ScrollArea className="h-full">{content}</ScrollArea>; + return ( + <ScrollArea className="h-full"> + <Markdown className="prose mx-auto dark:prose-invert"> + {bookmark.content.text} + </Markdown> + </ScrollArea> + ); } |