kennethnym/markone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

implement bookmark list mouse hover

Browse Source
This commit is contained in:
Kenneth
2025-05-27 16:25:44 +01:00
parent 0c8325eede
commit 7bddab0619
1 changed files with 8 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/web/src/app/bookmarks/-bookmark-list.tsx
View File

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