diff --git a/packages/web/components/nav-containers/HomeContainer.tsx b/packages/web/components/nav-containers/HomeContainer.tsx index 44edf00ff..92705fba0 100644 --- a/packages/web/components/nav-containers/HomeContainer.tsx +++ b/packages/web/components/nav-containers/HomeContainer.tsx @@ -29,11 +29,13 @@ import { useGetViewerQuery } from '../../lib/networking/queries/useGetViewerQuer import useLibraryItemActions from '../../lib/hooks/useLibraryItemActions' import { SyncLoader } from 'react-spinners' import { useGetLibraryItemsQuery } from '../../lib/networking/queries/useGetLibraryItemsQuery' +import { useRegisterActions } from 'kbar' export function HomeContainer(): JSX.Element { const router = useRouter() const homeData = useGetHomeItems() const { viewerData } = useGetViewerQuery() + const [selectedItem, setSelectedItem] = useState(null) useApplyLocalTheme() @@ -62,6 +64,130 @@ export function HomeContainer(): JSX.Element { ) } + const moveSelection = useCallback( + (direction: 'next' | 'previous') => { + const elements = + document.querySelectorAll('[data-navigable]') + let index = Array.prototype.indexOf.call(elements, selectedItem) + + if (direction == 'next') { + index = index === -1 ? 0 : Math.min(index + 1, elements.length - 1) + } else if (direction == 'previous') { + index = index === -1 ? 0 : Math.max(index - 1, 0) + } + console.log('elements: ', index, elements) + + const selected = elements[index] + setSelectedItem(selected) + + selected.focus() + }, + [selectedItem, setSelectedItem] + ) + + useRegisterActions( + [ + { + id: 'open_readable', + section: 'Items', + name: 'Open focused item', + shortcut: ['enter'], + keywords: 'open', + perform: () => { + console.log('open item') + }, + }, + { + id: 'open_original', + section: 'Items', + name: 'Open original url', + shortcut: ['o'], + keywords: 'open original', + perform: () => { + console.log('open original') + }, + }, + { + id: 'archive', + section: 'Items', + name: 'Archive item', + shortcut: ['e'], + keywords: 'archive item', + perform: () => { + console.log('archive') + }, + }, + { + id: 'mark_read', + section: 'Items', + name: 'Mark item as read', + shortcut: ['-'], + keywords: 'mark read', + perform: () => { + console.log('mark_read') + }, + }, + { + id: 'delete_item', + section: 'Items', + name: 'Delete item', + shortcut: ['#'], + keywords: 'delete remove', + perform: () => { + console.log('delete') + }, + }, + { + id: 'move_next', + section: 'Items', + name: 'Focus next item', + shortcut: ['arrowdown'], + keywords: 'move next', + perform: () => { + moveSelection('next') + }, + }, + { + id: 'move_previous', + section: 'Items', + name: 'Focus previous item', + shortcut: ['arrowup'], + keywords: 'move previous', + perform: () => { + moveSelection('previous') + }, + }, + { + id: 'move_next_vim', + section: 'Items', + name: 'Focus next item', + shortcut: ['j'], + keywords: 'move next', + perform: () => { + moveSelection('next') + }, + }, + { + id: 'move_previous_vim', + section: 'Items', + name: 'Focus previous item', + shortcut: ['k'], + keywords: 'move previous', + perform: () => { + moveSelection('previous') + }, + }, + + // { + // shortcutKeys: ['a'], + // actionDescription: 'Open Add Link dialog', + // shortcutKeyDescription: 'a', + // callback: () => actionHandler('showAddLinkModal'), + // }, + ], + [selectedItem] + ) + return ( + return } return ( { }) }, [searchItems]) - console.log('items: ', items) - return ( { return (