implement nav chrome for bookmark previewer

packages/web/src/app/bookmarks/$bookmarkId.tsx

@@ -1,23 +1,38 @@
-import { createFileRoute, useNavigate } from "@tanstack/react-router"
+import { createFileRoute, useCanGoBack, useNavigate, useRouter } 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 { useCallback, useEffect, useRef } from "react"
 import type { LinkBookmark } from "@markone/core/bookmark"
-import { ActionBar } from "./-action-bar"
+import { ActionBar, BookmarkListActionBar } from "./-action-bar"
+import { Button, LinkButton } from "~/components/button"
+import { useMnemonics } from "~/hooks/use-mnemonics"
+import { useBookmark } from "~/bookmark/api"
+import { atom, useAtom } from "jotai"
 
 export const Route = createFileRoute("/bookmarks/$bookmarkId")({
 	component: RouteComponent,
 })
 
+const actionBarHeight = atom(0)
+const setActionBarHeight = atom(null, (_, set, update: number) => {
+	set(actionBarHeight, update)
+})
+const titleBarHeight = atom(0)
+const setTitleBarHeight = atom(null, (_, set, update: number) => {
+	set(titleBarHeight, update)
+})
+
 function RouteComponent() {
 	return (
 		<Main>
 			<BookmarkListSidebar />
 			<BookmarkPreviewContainer>
 				<BookmarkPreview />
+				<BookmarkPreviewTitleBar />
+				<BookmarkPreviewActionBar />
 			</BookmarkPreviewContainer>
 		</Main>
 	)
@@ -37,9 +52,10 @@ function BookmarkPreviewContainer({ children }: React.PropsWithChildren) {
 
 	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,
-			})}
+			className={clsx(
+				"h-screen border-l border-stone-700 dark:border-stone-300 flex dark:bg-stone-900",
+				layoutMode === LayoutMode.Popup ? "absolute top-0 left-0 right-0 bottom-0 border-l-0" : "relative col-span-3",
+			)}
 		>
 			{children}
 		</div>
@@ -48,7 +64,7 @@ function BookmarkPreviewContainer({ children }: React.PropsWithChildren) {
 
 function BookmarkListSidebar() {
 	return (
-		<div className="flex flex-col py-16 w-full h-screen relative">
+		<div className="relative 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>
@@ -56,7 +72,7 @@ function BookmarkListSidebar() {
 				</h1>
 			</header>
 			<BookmarkListContainer />
-			<ActionBar className="absolute bottom-0 left-0 right-0" />
+			<BookmarkListActionBar className="absolute bottom-0 left-0 right-0" />
 		</div>
 	)
 }
@@ -102,25 +118,126 @@ function BookmarkListContainer() {
 
 function BookmarkPreview() {
 	const { bookmarkId } = Route.useParams()
-	const { data, status } = useAuthenticatedQuery(["bookmarks", `${bookmarkId}.html`], () =>
-		fetchApi(`/bookmark/${bookmarkId}`, {
-			headers: {
-				Accept: "text/html",
-			},
-		}).then((res) => res.text()),
+	const { data: previewHtml, status: previewQueryStatus } = useAuthenticatedQuery(
+		["bookmarks", `${bookmarkId}.html`],
+		() =>
+			fetchApi(`/bookmarks/${bookmarkId}`, {
+				headers: {
+					Accept: "text/html",
+				},
+			}).then((res) => res.text()),
 	)
+	const { data: bookmark, status: bookmarkQueryStatus } = useBookmark(bookmarkId)
+	const [_titleBarHeight] = useAtom(titleBarHeight)
+	const [_actionBarHeight] = useAtom(actionBarHeight)
 
-	switch (status) {
-		case "pending":
-			return (
-				<p>
+	if (previewQueryStatus === "success" && bookmarkQueryStatus === "success") {
+		return (
+			<iframe
+				title={bookmark.id}
+				className="w-full h-full"
+				style={{ paddingTop: _titleBarHeight, paddingBottom: _actionBarHeight }}
+				srcDoc={previewHtml}
+			/>
+		)
+	}
+
+	if (previewQueryStatus === "pending" || bookmarkQueryStatus === "pending") {
+		return (
+			<div className="w-full h-full flex items-center justify-center">
+				<p className="mx-0 my-auto">
 					Loading <LoadingSpinner />
 				</p>
-			)
-		case "success":
-			return <iframe key="preview-iframe" title="asd" className="w-full h-full" srcDoc={data} />
-
-		default:
-			return null
+			</div>
+		)
 	}
+
+	return null
+}
+
+function BookmarkPreviewTitleBar() {
+	const { bookmarkId } = Route.useParams()
+	const layoutMode = useBookmarkPageStore((state) => state.layoutMode)
+	const { data: bookmark, status } = useBookmark(bookmarkId)
+	const [, _setTitleBarHeight] = useAtom(setTitleBarHeight)
+	const headerRef = useRef<HTMLElement | null>(null)
+	const isHidden = status !== "success" || layoutMode !== LayoutMode.Popup || bookmark.kind !== "link"
+
+	useEffect(() => {
+		if (headerRef.current) {
+			_setTitleBarHeight(headerRef.current.clientHeight)
+		} else {
+			_setTitleBarHeight(0)
+		}
+	})
+
+	if (isHidden) {
+		return null
+	}
+
+	const url = new URL(bookmark.url)
+
+	return (
+		<header
+			ref={headerRef}
+			className="absolute top-0 left-0 right-0 flex flex-col items-center bg-stone-200 dark:bg-stone-900 px-2 py-1 border-b-1 border-stone-700 dark:border-stone-300"
+		>
+			<h1 className="text-center">{bookmark.title}</h1>
+			<h2 className="text-center opacity-80 text-sm">{url.host}</h2>
+		</header>
+	)
+}
+
+function BookmarkPreviewActionBar() {
+	const { bookmarkId } = Route.useParams()
+	const navigate = useNavigate()
+	const router = useRouter()
+	const canGoBack = useCanGoBack()
+	const { data: bookmark, status } = useBookmark(bookmarkId)
+	const linkRef = useRef<HTMLAnchorElement | null>(null)
+	const [, _setActionBarHeight] = useAtom(setActionBarHeight)
+
+	useMnemonics(
+		{
+			c: close,
+			o: openLink,
+		},
+		{ ignore: () => false },
+	)
+
+	function close() {
+		if (canGoBack) {
+			router.history.back()
+		} else {
+			navigate({ to: "/bookmarks", replace: true })
+		}
+	}
+
+	function openLink() {
+		linkRef.current?.click()
+	}
+
+	if (status !== "success") {
+		return null
+	}
+
+	return (
+		<ActionBar
+			ref={(el) => {
+				if (el) {
+					_setActionBarHeight(el.clientHeight)
+				}
+			}}
+			className="absolute bottom-0 left-0 right-0"
+		>
+			{bookmark.kind === "link" ? (
+				<LinkButton ref={linkRef} to={bookmark.url}>
+					<span className="underline">O</span>PEN LINK
+				</LinkButton>
+			) : null}
+			<Button onClick={close}>
+				<span className="underline">C</span>LOSE
+			</Button>
+		</ActionBar>
+	)
 }