move bookmark preview to its own route

2025-05-13 18:34:08 +01:00
parent 7f8b38e218
commit c73082b9c9
10 changed files with 861 additions and 606 deletions
--- a/packages/web/src/app/bookmarks/$bookmarkId.tsx
+++ b/packages/web/src/app/bookmarks/$bookmarkId.tsx
@@ -0,0 +1,126 @@
+import { createFileRoute, useNavigate } from "@tanstack/react-router"
+import { LayoutMode, useBookmarkPageStore } from "./-store"
+import clsx from "clsx"
+import { fetchApi, useAuthenticatedQuery } from "~/api"
+import { LoadingSpinner } from "~/components/loading-spinner"
+import { BookmarkList } from "./-bookmark-list"
+import { useCallback } from "react"
+import type { LinkBookmark } from "@markone/core/bookmark"
+import { ActionBar } from "./-action-bar"
+
+export const Route = createFileRoute("/bookmarks/$bookmarkId")({
+	component: RouteComponent,
+})
+
+function RouteComponent() {
+	return (
+		<Main>
+			<BookmarkListSidebar />
+			<BookmarkPreviewContainer>
+				<BookmarkPreview />
+			</BookmarkPreviewContainer>
+		</Main>
+	)
+}
+
+function Main({ children }: React.PropsWithChildren) {
+	const layoutMode = useBookmarkPageStore((state) => state.layoutMode)
+	return (
+		<main className={clsx("w-full h-full grid", layoutMode === LayoutMode.SideBySide ? "grid-cols-4" : "grid-cols-1")}>
+			{children}
+		</main>
+	)
+}
+
+function BookmarkPreviewContainer({ children }: React.PropsWithChildren) {
+	const layoutMode = useBookmarkPageStore((state) => state.layoutMode)
+
+	return (
+		<div
+			className={clsx("col-span-3 h-screen border-l border-stone-700 dark:border-stone-300 flex dark:bg-stone-900", {
+				"absolute border-l-0": layoutMode === LayoutMode.Popup,
+			})}
+		>
+			{children}
+		</div>
+	)
+}
+
+function BookmarkListSidebar() {
+	return (
+		<div className="flex flex-col py-16 w-full h-screen relative">
+			<header className="mb-4 text-start">
+				<h1 className="font-bold text-start mb-4">
+					<span className="invisible">&nbsp;&gt;&nbsp;</span>
+					YOUR BOOKMARKS
+				</h1>
+			</header>
+			<BookmarkListContainer />
+			<ActionBar className="absolute bottom-0 left-0 right-0" />
+		</div>
+	)
+}
+
+function BookmarkListContainer() {
+	const { bookmarkId } = Route.useParams()
+	const navigate = useNavigate()
+	const { data: bookmarks, status } = useAuthenticatedQuery(["bookmarks"], () =>
+		fetchApi("/bookmarks").then((res) => res.json()),
+	)
+	const handleBookmarkListItemAction = useBookmarkPageStore((state) => state.handleBookmarkListItemAction)
+
+	const onSelectedBookmarkChange = useCallback(
+		(bookmark: LinkBookmark) => {
+			navigate({ to: `/bookmarks/${bookmark.id}` })
+		},
+		[navigate],
+	)
+
+	switch (status) {
+		case "success":
+			return (
+				<BookmarkList
+					alwaysExpandItem
+					bookmarks={bookmarks}
+					selectedBookmarkId={bookmarkId}
+					onSelectionChange={onSelectedBookmarkChange}
+					onItemAction={handleBookmarkListItemAction}
+				/>
+			)
+
+		case "pending":
+			return (
+				<p>
+					Loading <LoadingSpinner />
+				</p>
+			)
+
+		case "error":
+			return <p>error loading bookmarks</p>
+	}
+}
+
+function BookmarkPreview() {
+	const { bookmarkId } = Route.useParams()
+	const { data, status } = useAuthenticatedQuery(["bookmarks", `${bookmarkId}.html`], () =>
+		fetchApi(`/bookmark/${bookmarkId}`, {
+			headers: {
+				Accept: "text/html",
+			},
+		}).then((res) => res.text()),
+	)
+
+	switch (status) {
+		case "pending":
+			return (
+				<p>
+					Loading <LoadingSpinner />
+				</p>
+			)
+		case "success":
+			return <iframe key="preview-iframe" title="asd" className="w-full h-full" srcDoc={data} />
+
+		default:
+			return null
+	}
+}