reimplement mnemonics for collection list

packages/web/src/app/bookmarks/-bookmark-list.tsx

@@ -2,7 +2,6 @@ import type { Bookmark } from "@markone/core"
 import { Link } from "@tanstack/react-router"
 import clsx from "clsx"
 import { memo, useCallback, useRef } from "react"
-import { twMerge } from "tailwind-merge"
 import { useBookmarkTags } from "~/bookmark/api"
 import { Button } from "~/components/button"
 import { List, type ListRef } from "~/components/list"

packages/web/src/app/collections/-collection-list.tsx

@@ -1,9 +1,11 @@
 import type { Collection } from "@markone/core"
 import { Link } from "@tanstack/react-router"
 import { clsx } from "clsx"
-import { memo } from "react"
+import { memo, useCallback, useRef } from "react"
 import { Button } from "~/components/button"
-import { List } from "~/components/list"
+import { List, type ListRef } from "~/components/list"
+import { DialogKind, useCollectionPageStore } from "./-store"
+import { useMnemonics } from "~/hooks/use-mnemonics"
 
 export enum CollectionListItemAction {
 	Delete = "Delete",
@@ -85,8 +87,29 @@ const CollectionListItem = memo(
 )
 
 function CollectionList({ collections, className, onItemAction }: CollectionListProps) {
+	const listRef = useRef<ListRef<Collection>>(null)
+
+	useMnemonics(
+		{
+			e: () => {
+				const selectedCollection = listRef.current?.selectedItem
+				if (selectedCollection) {
+					onItemAction(selectedCollection, CollectionListItemAction.Edit)
+				}
+			},
+			d: () => {
+				const selectedCollection = listRef.current?.selectedItem
+				if (selectedCollection) {
+					onItemAction(selectedCollection, CollectionListItemAction.Delete)
+				}
+			},
+		},
+		{ ignore: useCallback(() => useCollectionPageStore.getState().dialog.kind !== DialogKind.None, []) },
+	)
+
 	return (
 		<List
+			ref={listRef}
 			className="-mt-2"
 			items={collections}
 			emptyMessage="No collections found!"