implement nav chrome for bookmark previewer

packages/web/src/bookmark/api.ts

@@ -1,7 +1,15 @@
 import type { Bookmark } from "@markone/core/bookmark"
 import { useMutation, useQueryClient } from "@tanstack/react-query"
 import { useNavigate } from "@tanstack/react-router"
-import { UnauthenticatedError, fetchApi } from "~/api"
+import { UnauthenticatedError, fetchApi, useAuthenticatedQuery } from "~/api"
+
+function useBookmark(id: string) {
+	return useAuthenticatedQuery(["bookmarks", id], () =>
+		fetchApi(`/bookmarks/${id}`, {
+			headers: { Accept: "application/json" },
+		}).then((res): Promise<Bookmark> => res.json()),
+	)
+}
 
 function useDeleteBookmark() {
 	const navigate = useNavigate()
@@ -9,7 +17,7 @@ function useDeleteBookmark() {
 
 	return useMutation({
 		mutationFn: ({ bookmark }: { bookmark: Bookmark }) =>
-			fetchApi(`/bookmark/${bookmark.id}`, {
+			fetchApi(`/bookmarks/${bookmark.id}`, {
 				method: "DELETE",
 			}),
 		onError: (error) => {
@@ -53,4 +61,4 @@ function useCreateBookmark() {
 	})
 }
 
-export { useDeleteBookmark, useCreateBookmark }
+export { useBookmark, useDeleteBookmark, useCreateBookmark }