implement app menu window

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

@@ -12,7 +12,7 @@ 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, useBookmarkPageStore } from "./-store"
+import { ActionBarContentKind, DialogKind, WindowKind, useBookmarkPageStore } from "./-store"
 
 export const Route = createFileRoute("/bookmarks/")({
 	component: RouteComponent,
@@ -78,7 +78,7 @@ function BookmarkListContainer() {
 }
 
 function BookmarkListActionBar({ className }: { className?: string }) {
-	const isTagFilterWindowOpen = useBookmarkPageStore((state) => state.isTagFilterWindowOpen)
+	const activeWindow = useBookmarkPageStore((state) => state.activeWindow)
 	const content = useBookmarkPageStore((state) => state.actionBarContent)
 	const { refs, floatingStyles } = useFloating({
 		placement: "top",
@@ -100,7 +100,16 @@ function BookmarkListActionBar({ className }: { className?: string }) {
 					}
 				})()}
 			</ActionBar>
-			{isTagFilterWindowOpen ? <TagFilterWindow ref={refs.setFloating} style={floatingStyles} /> : null}
+			{(() => {
+				switch (activeWindow) {
+					case WindowKind.TagFilter:
+						return <TagFilterWindow ref={refs.setFloating} style={floatingStyles} />
+					case WindowKind.AppMenu:
+						return <AppMenuWindow ref={refs.setFloating} style={floatingStyles} />
+					case WindowKind.None:
+						return null
+				}
+			})()}
 		</>
 	)
 }
@@ -210,15 +219,16 @@ function SearchBar() {
 }
 
 function ActionButtons() {
+	const setActiveWindow = useBookmarkPageStore((state) => state.setActiveWindow)
+	const activeWindow = useBookmarkPageStore((state) => state.activeWindow)
 	const setActiveDialog = useBookmarkPageStore((state) => state.setActiveDialog)
 	const setActionBarContent = useBookmarkPageStore((state) => state.setActionBarContent)
-	const toggleTagFilterWindow = useBookmarkPageStore((state) => state.toggleTagFilterWindow)
 
 	useMnemonics(
 		{
 			a: addBookmark,
 			s: openSearchBar,
-			t: toggleTagFilterWindow,
+			t: toggleTagWindow,
 		},
 		{ ignore: useCallback(() => useBookmarkPageStore.getState().dialog.kind !== DialogKind.None, []) },
 	)
@@ -229,6 +239,17 @@ function ActionButtons() {
 
 	function openSearchBar() {
 		setActionBarContent({ kind: ActionBarContentKind.SearchBar })
+		if (activeWindow !== WindowKind.TagFilter) {
+			setActiveWindow(WindowKind.None)
+		}
+	}
+
+	function toggleTagWindow() {
+		setActiveWindow(activeWindow === WindowKind.TagFilter ? WindowKind.None : WindowKind.TagFilter)
+	}
+
+	function toggleAppMenu() {
+		setActiveWindow(activeWindow === WindowKind.AppMenu ? WindowKind.None : WindowKind.AppMenu)
 	}
 
 	return (
@@ -239,9 +260,10 @@ function ActionButtons() {
 			<Button onClick={openSearchBar}>
 				<span className="underline">S</span>EARCH
 			</Button>
-			<Button onClick={toggleTagFilterWindow}>
+			<Button onClick={toggleTagWindow}>
 				<span className="underline">T</span>AGS
 			</Button>
+			<Button onClick={toggleAppMenu}>⋯</Button>
 		</div>
 	)
 }
@@ -332,6 +354,22 @@ const TagFilterItem = memo(
 	},
 )
 
+function AppMenuWindow({ ref, style }: { ref: React.Ref<HTMLDivElement>; style: React.CSSProperties }) {
+	return (
+		<div ref={ref} style={style} className="border w-full md:w-100">
+			<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-y-2">
+					<li>
+						<LogOutButton />
+					</li>
+					{/* Add other menu items here */}
+				</ul>
+			</div>
+		</div>
+	)
+}
+
 function LogOutButton() {
 	const logOutMutation = useLogOut()
 	const navigate = useNavigate()