implement bookmark list mouse hover

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

@@ -268,6 +268,7 @@ const BookmarkListItem = memo(
 		const store = useBookmarkListStoreContext()
 		const alwaysExpandItem = useBookmarkListStore((state) => state.alwaysExpandItem)
 		const isBookmarkItemExpanded = useBookmarkListStore((state) => state.alwaysExpandItem || state.isItemExpanded)
+		const setSelectedBookmarkId = useBookmarkListStore((state) => state.setSelectedBookmarkId)
 		const setIsItemExpanded = useBookmarkListStore((state) => state.setIsItemExpanded)
 		const onItemAction = useBookmarkListStore((state) => state.onItemAction)
 
@@ -289,12 +290,19 @@ const BookmarkListItem = memo(
 			onItemAction(bookmark, BookmarkListItemAction.Edit)
 		}
 
+		function onItemHover() {
+			if (!store.getState().isItemExpanded) {
+				setSelectedBookmarkId(bookmark.id)
+			}
+		}
+
 		return (
 			<li
 				className={clsx("group flex flex-row justify-start py-2", {
 					"bg-teal-600 text-stone-100": isBookmarkItemExpanded && selected,
 					"text-teal-600": selected && !isBookmarkItemExpanded,
 				})}
+				onMouseEnter={onItemHover}
 			>
 				<button
 					type="button"