implement bookmark collections and enhance bookmark search functionality

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

@@ -1,18 +1,19 @@
 import { autoUpdate, offset, useFloating } from "@floating-ui/react-dom"
 import type { Tag } from "@markone/core"
-import { createFileRoute, useNavigate } from "@tanstack/react-router"
+import { createFileRoute, useNavigate, Link } from "@tanstack/react-router"
 import { memo, useCallback, useEffect, useId, useRef } from "react"
 import { fetchApi, useAuthenticatedQuery } from "~/api"
 import { ActionBar } from "~/app/bookmarks/-action-bar.tsx"
 import { useLogOut } from "~/auth.ts"
 import { useTags } from "~/bookmark/api.ts"
-import { Button, LinkButton } from "~/components/button"
+import { Button } from "~/components/button"
 import { LoadingSpinner } from "~/components/loading-spinner"
 import { Message, MessageVariant } from "~/components/message.tsx"
 import { useDocumentEvent } from "~/hooks/use-document-event.ts"
 import { useMnemonics } from "~/hooks/use-mnemonics.ts"
 import { BookmarkList } from "./-bookmark-list"
 import { ActionBarContentKind, DialogKind, WindowKind, useBookmarkPageStore } from "./-store"
+import { SideNav } from "~/app/-side-nav"
 
 export const Route = createFileRoute("/bookmarks/")({
 	component: RouteComponent,
@@ -30,12 +31,7 @@ function RouteComponent() {
 function BookmarkListPane() {
 	return (
 		<div className="flex flex-col py-16 container max-w-3xl md:flex-row lg:py-32">
-			<header className="mb-4 md:mb-0 md:mr-16 text-start">
-				<h1 className="font-bold text-start">
-					<span className="invisible md:hidden">&nbsp;&gt;&nbsp;</span>
-					YOUR BOOKMARKS
-				</h1>
-			</header>
+			<_SideNav />
 			<div className="flex-1">
 				<BookmarkListContainer />
 			</div>
@@ -43,6 +39,11 @@ function BookmarkListPane() {
 	)
 }
 
+function _SideNav() {
+	const hasDialog = useBookmarkPageStore((state) => state.dialog.kind !== DialogKind.None)
+	return <SideNav enableMnemonics={!hasDialog} />
+}
+
 function BookmarkListContainer() {
 	const searchParamsString = new URLSearchParams(Route.useSearch()).toString()
 	const { data: bookmarks, status } = useAuthenticatedQuery(
@@ -360,11 +361,6 @@ function AppMenuWindow({ ref, style }: { ref: React.Ref<HTMLDivElement>; style:
 			<p className="bg-stone-900 dark:bg-stone-200 text-stone-300 dark:text-stone-800 text-center">MENU</p>
 			<div className="p-4">
 				<ul className="space-x-4 flex justify-center">
-					<li>
-						<LinkButton to="/collections">
-							<span className="underline">C</span>OLLECTIONS
-						</LinkButton>
-					</li>
 					<li>
 						<LogOutButton />
 					</li>