Keyboard controls for multi select

packages/web/components/templates/homeFeed/HomeFeedContainer.tsx

@@ -331,6 +331,23 @@ export function HomeFeedContainer(): JSX.Element {
     return labelsTarget || linkToEdit || linkToRemove || linkToUnsubscribe
   }, [labelsTarget, linkToEdit, linkToRemove, linkToUnsubscribe])
 
+  const [checkedItems, setCheckedItems] = useState<string[]>([])
+  const [multiSelectMode, setMultiSelectMode] = useState<MultiSelectMode>('off')
+
+  const selectActiveArticle = useCallback(() => {
+    console.log('selecting article: ', activeItem)
+    if (activeItem) {
+      if (multiSelectMode === 'off') {
+        console.log('setting ')
+        setMultiSelectMode('none')
+      }
+      const itemId = activeItem.node.id
+      const isChecked = itemIsChecked(itemId)
+      console.log('setting is checked: ', isChecked, itemId)
+      setIsChecked(itemId, !isChecked)
+    }
+  }, [activeItem, multiSelectMode, checkedItems])
+
   useKeyboardShortcuts(
     libraryListCommands((action) => {
       const columnCount = (container: HTMLDivElement) => {
@@ -348,7 +365,16 @@ export function HomeFeedContainer(): JSX.Element {
 
       switch (action) {
         case 'openArticle':
-          handleCardAction('showDetail', activeItem)
+          if (multiSelectMode !== 'off' && activeItem) {
+            const itemId = activeItem.node.id
+            const isChecked = itemIsChecked(itemId)
+            setIsChecked(itemId, !isChecked)
+          } else {
+            handleCardAction('showDetail', activeItem)
+          }
+          break
+        case 'selectArticle':
+          selectActiveArticle()
           break
         case 'openOriginalArticle':
           handleCardAction('showOriginal', activeItem)
@@ -435,6 +461,11 @@ export function HomeFeedContainer(): JSX.Element {
         case 'sortAscending':
           setQueryInputs({ ...queryInputs, sortDescending: false })
           break
+        case 'beginMultiSelect':
+          if (multiSelectMode == 'off') {
+            setMultiSelectMode('none')
+          }
+          break
       }
     })
   )
@@ -522,23 +553,22 @@ export function HomeFeedContainer(): JSX.Element {
   )
   useFetchMore(handleFetchMore)
 
-  const [checkedItems, setCheckedItems] = useState<string[]>([])
-  const [multiSelectMode, setMultiSelectMode] = useState<MultiSelectMode>('off')
-
   const setIsChecked = useCallback(
     (itemId: string, set: boolean) => {
+      console.log('setting is checked with list: ', checkedItems)
       if (set && checkedItems.indexOf(itemId) === -1) {
         checkedItems.push(itemId)
         setCheckedItems([...checkedItems])
       } else if (!set && checkedItems.indexOf(itemId) !== -1) {
-        setCheckedItems(checkedItems.splice(checkedItems.indexOf(itemId), 1))
+        checkedItems.splice(checkedItems.indexOf(itemId))
+        setCheckedItems([...checkedItems])
       }
     },
     [checkedItems]
   )
 
   useEffect(() => {
-    console.log('switching on multiselect mode: ', multiSelectMode)
+    console.log(' -- multiselect mode: ', multiSelectMode)
     switch (multiSelectMode) {
       case 'off':
       case 'none':
@@ -687,8 +717,6 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
 
   const [showFilterMenu, setShowFilterMenu] = useState(false)
 
-  console.log('props.multiSelectMode: ', props.multiSelectMode)
-
   return (
     <VStack
       css={{

packages/web/components/templates/homeFeed/LibraryHeader.tsx

@@ -49,18 +49,14 @@ type LibraryHeaderProps = {
 }
 
 export function LibraryHeader(props: LibraryHeaderProps): JSX.Element {
-  const [showBackground, setShowBackground] = useState(
-    props.multiSelectMode !== 'off'
-  )
+  const [showBackground, setShowBackground] = useState(false)
 
   useEffect(() => {
-    if (window.scrollY > 5 || props.multiSelectMode != 'off') {
-      setShowBackground(true)
-    }
-  })
+    setShowBackground(window.scrollY > 5 || props.multiSelectMode !== 'off')
+  }, [props.multiSelectMode])
 
   useScrollWatcher((changeset: ScrollOffsetChangeset) => {
-    setShowBackground(window.scrollY > 5)
+    setShowBackground(window.scrollY > 5 || props.multiSelectMode !== 'off')
   }, 0)
 
   return (

packages/web/lib/keyboardShortcuts/navigationShortcuts.ts

@@ -74,6 +74,7 @@ export function primaryCommands(
 
 type LibraryListKeyboardAction =
   | 'openArticle'
+  | 'selectArticle'
   | 'openOriginalArticle'
   | 'moveFocusToNextListItem'
   | 'moveFocusToPreviousListItem'
@@ -88,6 +89,7 @@ type LibraryListKeyboardAction =
   | 'shareItem'
   | 'showAddLinkModal'
   | 'showEditLabelsModal'
+  | 'beginMultiSelect'
 
 export function libraryListCommands(
   actionHandler: (action: LibraryListKeyboardAction) => void
@@ -99,6 +101,14 @@ export function libraryListCommands(
       shortcutKeyDescription: 'enter/return',
       callback: () => actionHandler('openArticle'),
     },
+    {
+      shortcutKeys: ['x'],
+      actionDescription: 'Select article',
+      shortcutKeyDescription: 'x',
+      callback: () => {
+        actionHandler('selectArticle')
+      },
+    },
     {
       shortcutKeys: ['o'],
       actionDescription: 'Open original article',
@@ -123,6 +133,12 @@ export function libraryListCommands(
       shortcutKeyDescription: 'k or left arrow',
       callback: () => actionHandler('moveFocusToPreviousListItem'),
     },
+    {
+      shortcutKeys: ['m', 's'],
+      actionDescription: 'Begin multi select',
+      shortcutKeyDescription: 'm then s',
+      callback: () => actionHandler('beginMultiSelect'),
+    },
     // {
     //   shortcutKeys: ['e'],
     //   actionDescription: 'Archive item',