implement nav chrome for bookmark previewer

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 }