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

packages/web/src/app/bookmarks/-action-bar.tsx

@@ -1,12 +1,30 @@
 import { Button } from "~/components/button"
-import { ActiveDialog, LayoutMode, useBookmarkPageStore } from "./-store"
+import { ActiveDialog, useBookmarkPageStore } from "./-store"
 import { useNavigate } from "@tanstack/react-router"
 import { useCallback } from "react"
 import { useLogOut } from "~/auth"
 import { useMnemonics } from "~/hooks/use-mnemonics"
 import { twMerge } from "tailwind-merge"
 
-function ActionBar({ className }: { className?: string }) {
+function ActionBar({
+	ref,
+	className,
+	children,
+}: React.PropsWithChildren<{ ref?: React.RefCallback<HTMLDivElement>; className?: string }>) {
+	return (
+		<div
+			ref={ref}
+			className={twMerge(
+				"bg-stone-200 dark:bg-stone-900 border-t-1 flex flex-row justify-center py-4 space-x-4",
+				className,
+			)}
+		>
+			{children}
+		</div>
+	)
+}
+
+function BookmarkListActionBar({ className }: { className?: string }) {
 	const setActiveDialog = useBookmarkPageStore((state) => state.setActiveDialog)
 
 	useMnemonics(
@@ -21,12 +39,7 @@ function ActionBar({ className }: { className?: string }) {
 	}
 
 	return (
-		<div
-			className={twMerge(
-				"bg-stone-200 dark:bg-stone-900 border-t-1 flex flex-row justify-center py-4 space-x-4",
-				className,
-			)}
-		>
+		<ActionBar className={className}>
 			<Button onClick={addBookmark}>
 				<span className="underline">A</span>DD
 			</Button>
@@ -34,7 +47,7 @@ function ActionBar({ className }: { className?: string }) {
 				<span className="underline">S</span>EARCH
 			</Button>
 			<LogOutButton />
-		</div>
+		</ActionBar>
 	)
 }
 
@@ -54,4 +67,4 @@ function LogOutButton() {
 	)
 }
 
-export { ActionBar }
+export { ActionBar, BookmarkListActionBar }

packages/web/src/app/bookmarks/-bookmark-list.tsx

@@ -3,7 +3,7 @@ import { Link } from "@tanstack/react-router"
 import { createStore, useStore } from "zustand"
 import { useEffect, useCallback, createContext, useRef, memo, useContext } from "react"
 import { useMnemonics } from "~/hooks/use-mnemonics"
-import { useBookmarkPageStore, ActiveDialog, LayoutMode } from "./-store"
+import { useBookmarkPageStore, ActiveDialog } from "./-store"
 import { Button } from "~/components/button"
 import clsx from "clsx"
 import { twMerge } from "tailwind-merge"
@@ -236,8 +236,6 @@ const BookmarkListItem = memo(
 		const alwaysExpandItem = useBookmarkListStore((state) => state.alwaysExpandItem)
 		const isBookmarkItemExpanded = useBookmarkListStore((state) => state.alwaysExpandItem || state.isItemExpanded)
 		const setIsItemExpanded = useBookmarkListStore((state) => state.setIsItemExpanded)
-		const selectBookmark = useBookmarkPageStore((state) => state.selectBookmark)
-		const setBookmarkPreviewOpened = useBookmarkPageStore((state) => state.setBookmarkPreviewOpened)
 		const onItemAction = useBookmarkListStore((state) => state.onItemAction)
 
 		useEffect(() => {
@@ -250,27 +248,12 @@ const BookmarkListItem = memo(
 			onItemAction(bookmark, BookmarkListItemAction.Delete)
 		}
 
-		function expandOrOpenPreview() {
-			if (!selected) {
-				selectBookmark(bookmark, index)
-			}
-			setIsItemExpanded(true)
-			if (useBookmarkPageStore.getState().layoutMode === LayoutMode.SideBySide) {
-				setBookmarkPreviewOpened(true)
-			}
-		}
-
 		return (
 			<li
 				className={clsx("group flex flex-row justify-start py-2", {
 					"bg-teal-600 text-stone-100": isBookmarkItemExpanded && selected,
 					"text-teal-600": selected && !isBookmarkItemExpanded,
 				})}
-				onMouseEnter={() => {
-					if (!isBookmarkItemExpanded) {
-						selectBookmark(bookmark, index)
-					}
-				}}
 			>
 				<button
 					type="button"
@@ -280,7 +263,6 @@ const BookmarkListItem = memo(
 					})}
 					onClick={() => {
 						setIsItemExpanded(!isBookmarkItemExpanded)
-						setBookmarkPreviewOpened(false)
 					}}
 				>
 					<span className="sr-only">Options for this bookmark</span>
@@ -292,7 +274,6 @@ const BookmarkListItem = memo(
 					<Link
 						to={`/bookmarks/${bookmark.id}`}
 						className={clsx("block w-full text-start font-bold", { underline: selected })}
-						onClick={expandOrOpenPreview}
 					>
 						{bookmark.title}
 					</Link>
@@ -301,7 +282,9 @@ const BookmarkListItem = memo(
 						<div className="flex flex-col space-y-1 md:flex-row md:space-y-0 md:space-x-2 items-end justify-between pt-2">
 							<p className="text-sm">#dev</p>
 							<div className="flex space-x-2">
-								<OpenBookmarkPreviewButton />
+								<Button variant="light" className="text-sm">
+									<span>COPY LINK</span>
+								</Button>
 								<Button variant="light" className="text-sm">
 									<span className="underline">E</span>dit
 								</Button>
@@ -318,59 +301,4 @@ const BookmarkListItem = memo(
 	},
 )
 
-function OpenBookmarkPreviewButton() {
-	const isBookmarkPreviewOpened = useBookmarkPageStore((state) => state.isBookmarkPreviewOpened)
-	const setBookmarkPreviewOpened = useBookmarkPageStore((state) => state.setBookmarkPreviewOpened)
-	const setBookmarkItemExpanded = useBookmarkPageStore((state) => state.setBookmarkItemExpanded)
-
-	useEffect(() => {
-		function onKeyDown(event: KeyboardEvent) {
-			if (isBookmarkPreviewOpened && event.key === "c") {
-				closePreview()
-			} else if (!isBookmarkPreviewOpened && event.key === "o") {
-				openPreview()
-			}
-		}
-
-		window.addEventListener("keydown", onKeyDown)
-
-		return () => {
-			window.removeEventListener("keydown", onKeyDown)
-		}
-	}, [isBookmarkPreviewOpened])
-
-	function closePreview() {
-		setBookmarkPreviewOpened(false)
-		setBookmarkItemExpanded(false)
-	}
-
-	function openPreview() {
-		setBookmarkPreviewOpened(true)
-	}
-
-	return (
-		<Button
-			variant="light"
-			className="text-sm"
-			onClick={() => {
-				if (isBookmarkPreviewOpened) {
-					closePreview()
-				} else {
-					openPreview()
-				}
-			}}
-		>
-			{isBookmarkPreviewOpened ? (
-				<>
-					<span className="underline">C</span>lose
-				</>
-			) : (
-				<>
-					<span className="underline">O</span>pen
-				</>
-			)}
-		</Button>
-	)
-}
-
 export { BookmarkList, BookmarkListItemAction }

packages/web/src/app/bookmarks/index.tsx

@@ -1,13 +1,9 @@
-import { createFileRoute, useNavigate } from "@tanstack/react-router"
-import { useCallback } from "react"
-import { useLogOut } from "~/auth"
-import { Button } from "~/components/button"
-import { useMnemonics } from "~/hooks/use-mnemonics"
+import { createFileRoute } from "@tanstack/react-router"
 import { BookmarkList } from "./-bookmark-list"
-import { ActiveDialog, LayoutMode, useBookmarkPageStore } from "./-store"
+import { useBookmarkPageStore } from "./-store"
 import { fetchApi, useAuthenticatedQuery } from "~/api"
 import { LoadingSpinner } from "~/components/loading-spinner"
-import { ActionBar } from "./-action-bar"
+import { BookmarkListActionBar } from "./-action-bar"
 
 export const Route = createFileRoute("/bookmarks/")({
 	component: RouteComponent,
@@ -17,7 +13,7 @@ function RouteComponent() {
 	return (
 		<main className="w-full flex justify-center">
 			<BookmarkListPane />
-			<ActionBar className="fixed left-0 right-0 bottom-0" />
+			<BookmarkListActionBar className="fixed left-0 right-0 bottom-0" />
 		</main>
 	)
 }