implement bookmark search

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

@@ -8,9 +8,9 @@ import { useBookmark } from "~/bookmark/api"
 import { Button, LinkButton } from "~/components/button"
 import { LoadingSpinner } from "~/components/loading-spinner"
 import { useMnemonics } from "~/hooks/use-mnemonics"
-import { ActionBar, BookmarkListActionBar } from "./-action-bar"
+import { ActionBar } from "./-action-bar"
 import { BookmarkList } from "./-bookmark-list"
-import { LayoutMode, useBookmarkPageStore } from "./-store"
+import { DialogKind, LayoutMode, useBookmarkPageStore } from "./-store"
 
 export const Route = createFileRoute("/bookmarks/$bookmarkId")({
 	component: RouteComponent,
@@ -72,7 +72,7 @@ function BookmarkListSidebar() {
 				</h1>
 			</header>
 			<BookmarkListContainer />
-			<BookmarkListActionBar className="absolute bottom-0 left-0 right-0" />
+			<BookmarkListActionBar />
 		</div>
 	)
 }
@@ -116,6 +116,29 @@ function BookmarkListContainer() {
 	}
 }
 
+function BookmarkListActionBar() {
+	const setActiveDialog = useBookmarkPageStore((state) => state.setActiveDialog)
+
+	function addBookmark() {
+		setActiveDialog({ kind: DialogKind.AddBookmark })
+	}
+
+	useMnemonics(
+		{
+			a: addBookmark,
+		},
+		{ ignore: useCallback(() => useBookmarkPageStore.getState().dialog.kind !== DialogKind.None, []) },
+	)
+
+	return (
+		<ActionBar className="absolute bottom-0 left-0 right-0">
+			<Button onClick={addBookmark}>
+				<span className="underline">A</span>DD
+			</Button>
+		</ActionBar>
+	)
+}
+
 function BookmarkPreview() {
 	const { bookmarkId } = Route.useParams()
 	const { data: previewHtml, status: previewQueryStatus } = useAuthenticatedQuery(