diff --git a/packages/web/src/app/bookmarks/-bookmark-list.tsx b/packages/web/src/app/bookmarks/-bookmark-list.tsx index 9cd1ecf..44ee26b 100644 --- a/packages/web/src/app/bookmarks/-bookmark-list.tsx +++ b/packages/web/src/app/bookmarks/-bookmark-list.tsx @@ -2,8 +2,8 @@ import type { Bookmark } from "@markone/core" import { Link } from "@tanstack/react-router" import clsx from "clsx" import { memo, useCallback, useRef } from "react" +import { Menu, MenuButton, MenuItems, MenuItem } from "@headlessui/react" import { useBookmarkTags } from "~/bookmark/api" -import { Button } from "~/components/button" import { List, type ListRef } from "~/components/list" import { DialogKind, ActionBarContentKind, useBookmarkPageStore } from "./-store" import { useMnemonics } from "~/hooks/use-mnemonics" @@ -18,7 +18,6 @@ export enum BookmarkListItemAction { interface BookmarkListProps { bookmarks: Bookmark[] selectedBookmarkId?: string - alwaysExpandItem: boolean onSelectionChange?: (bookmark: Bookmark) => void onItemAction: (bookmark: Bookmark, action: BookmarkListItemAction) => void className?: string @@ -38,93 +37,104 @@ const BookmarkTagList = memo(function BookmarkTagList({ bookmark }: { bookmark: ) : null }) -const BookmarkListItem = memo(function BookmarkListItem({ +const BookmarkItemMenu = memo(function BookmarkItemMenu({ bookmark, - isSelected, - isExpanded, - onSelect, - onExpand, onItemAction, - alwaysExpandItem, }: { bookmark: Bookmark - isSelected: boolean - isExpanded: boolean - onSelect: () => void - onExpand: () => void onItemAction: (bookmark: Bookmark, action: BookmarkListItemAction) => void - alwaysExpandItem: boolean }) { - const url = new URL(bookmark.url) - return ( -
- -
- - {bookmark.title} - -

{url.host}

- {isExpanded ? ( - <> - -
-
- - - -   -
-
- - ) : null} -
-
+ More options for {bookmark.title} + ⋯ + + +
+ onItemAction(bookmark, BookmarkListItemAction.CopyLink)} + > + COPY LINK + + onItemAction(bookmark, BookmarkListItemAction.Edit)} + > + EDIT + + onItemAction(bookmark, BookmarkListItemAction.Delete)} + > + DELETE + +
+ + ) }) +const BookmarkListItem = memo( + ({ + bookmark, + isSelected, + onItemAction, + }: { + bookmark: Bookmark + isSelected: boolean + onItemAction: (bookmark: Bookmark, action: BookmarkListItemAction) => void + }) => { + const url = new URL(bookmark.url) + + return ( +
+ +   + > +   + +
+
+ + {bookmark.title} + + {isSelected ? : null} +
+

{url.host}

+
+
+ ) + }, +) + function BookmarkList({ bookmarks, selectedBookmarkId, - alwaysExpandItem, onSelectionChange, onItemAction, className, @@ -165,20 +175,11 @@ function BookmarkList({ ref={listRef} items={bookmarks} selectedItemId={selectedBookmarkId} - alwaysExpandItem={alwaysExpandItem} onSelectionChange={handleSelect} className={className} emptyMessage="No bookmarks found!" - renderItem={({ item: bookmark, isSelected, isExpanded, onSelect, onExpand }) => ( - + renderItem={({ item: bookmark, isSelected, onSelect }) => ( + )} /> ) diff --git a/packages/web/src/app/bookmarks/index.tsx b/packages/web/src/app/bookmarks/index.tsx index c1e3378..b310d89 100644 --- a/packages/web/src/app/bookmarks/index.tsx +++ b/packages/web/src/app/bookmarks/index.tsx @@ -79,7 +79,6 @@ function BookmarkListContainer() { return ( 0 ? "-mt-2" : ""} - alwaysExpandItem={false} bookmarks={bookmarks} onItemAction={handleBookmarkListItemAction} /> diff --git a/packages/web/src/components/list.tsx b/packages/web/src/components/list.tsx index f43b4f2..a5b9b5b 100644 --- a/packages/web/src/components/list.tsx +++ b/packages/web/src/components/list.tsx @@ -16,12 +16,9 @@ interface ListState { items: T[] selectedIndex: number selectedItemId: string - isItemExpanded: boolean - alwaysExpandItem: boolean setItems: (items: T[]) => void setSelectedIndex: (index: number) => void setSelectedItemId: (id: string) => void - setIsItemExpanded: (expanded: boolean) => void } type ListStore = ReturnType> @@ -33,14 +30,11 @@ type MnemonicCallback = (event: KeyboardEvent, item: T) => void interface ListProps { items: T[] selectedItemId?: string - alwaysExpandItem?: boolean onSelectionChange?: (item: T) => void renderItem: (props: { item: T isSelected: boolean - isExpanded: boolean onSelect: () => void - onExpand: () => void }) => React.ReactNode className?: string emptyMessage?: string @@ -51,7 +45,6 @@ interface ListProps { function List({ items, selectedItemId, - alwaysExpandItem = false, onSelectionChange, renderItem, className, @@ -59,7 +52,7 @@ function List({ mnemonics, ref, }: ListProps) { - const storeRef = useRef>(createListStore({ items, selectedItemId, alwaysExpandItem })) + const storeRef = useRef>(createListStore({ items, selectedItemId })) useImperativeHandle( ref, @@ -107,11 +100,9 @@ function List({ function createListStore({ items, selectedItemId, - alwaysExpandItem = false, }: { items: T[] selectedItemId?: string - alwaysExpandItem?: boolean }) { let _selectedItemId = selectedItemId if (!_selectedItemId && items.length > 0) { @@ -121,10 +112,8 @@ function createListStore({ return createStore>()( subscribeWithSelector((set) => ({ items, - alwaysExpandItem, selectedIndex: selectedItemId ? items.findIndex((item) => item.id === selectedItemId) : 0, selectedItemId: _selectedItemId ?? "", - isItemExpanded: alwaysExpandItem, setItems(items: T[]) { set({ @@ -141,10 +130,6 @@ function createListStore({ setSelectedItemId(id: string) { set({ selectedItemId: id }) }, - - setIsItemExpanded(expanded: boolean) { - set({ isItemExpanded: expanded }) - }, })), ) } @@ -164,27 +149,20 @@ function ListItem({ item, index, isSelected, - isExpanded, onSelect, - onExpand, renderItem, }: { item: T index: number isSelected: boolean - isExpanded: boolean onSelect: (id: string) => void - onExpand: (expanded: boolean) => void renderItem: (props: { item: T isSelected: boolean - isExpanded: boolean onSelect: () => void - onExpand: () => void }) => React.ReactNode }) { const setSelectedIndex = useListStore((state) => state.setSelectedIndex) - const isItemExpanded = useListStore((state) => state.isItemExpanded) useEffect(() => { if (isSelected) { @@ -196,24 +174,16 @@ function ListItem({ onSelect(item.id) }, [item.id, onSelect]) - const handleExpand = useCallback(() => { - onExpand(!isExpanded) - }, [isExpanded, onExpand]) - const handleMouseEnter = useCallback(() => { - if (!isItemExpanded) { - onSelect(item.id) - } - }, [isItemExpanded, item.id, onSelect]) + onSelect(item.id) + }, [item.id, onSelect]) return (
  • {renderItem({ item, isSelected, - isExpanded, onSelect: handleSelect, - onExpand: handleExpand, })}
    • ) @@ -231,9 +201,7 @@ function _List({ renderItem: (props: { item: T isSelected: boolean - isExpanded: boolean onSelect: () => void - onExpand: () => void }) => React.ReactNode emptyMessage: string mnemonics?: Record> @@ -241,9 +209,7 @@ function _List({ const store = useListStoreContext() const items = useListStore((state) => state.items) const selectedItemId = useListStore((state) => state.selectedItemId) - const isItemExpanded = useListStore((state) => state.isItemExpanded) const setSelectedItemId = useListStore void>((state) => state.setSelectedItemId) - const setIsItemExpanded = useListStore void>((state) => state.setIsItemExpanded) const shortcuts = useMemo(() => { const baseShortcuts: Record void> = { @@ -251,10 +217,6 @@ function _List({ ArrowDown: selectNextItem, k: selectPrevItem, ArrowUp: selectPrevItem, - l: expandItem, - ArrowRight: expandItem, - h: collapseItem, - ArrowLeft: collapseItem, } if (!mnemonics) { @@ -291,17 +253,6 @@ function _List({ } } - function expandItem() { - store.getState().setIsItemExpanded(true) - } - - function collapseItem() { - const state = store.getState() - if (!state.alwaysExpandItem) { - store.getState().setIsItemExpanded(false) - } - } - return (
      {items.length === 0 ? ( @@ -309,7 +260,6 @@ function _List({ ) : ( items.map((item, index) => { const isSelected = item.id === selectedItemId - const isExpanded = isItemExpanded && isSelected return ( ({ item={item} index={index} isSelected={isSelected} - isExpanded={isExpanded} onSelect={setSelectedItemId} - onExpand={setIsItemExpanded} renderItem={renderItem} /> )