Update labels on cards when setting from library

packages/web/components/templates/article/SetLabelsModalPresenter.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react'
+import { useCallback, useEffect } from 'react'
 import { useSetPageLabels } from '../../../lib/hooks/useSetPageLabels'
 import { LabelsProvider } from './SetLabelsControl'
 import { SetLabelsModal } from './SetLabelsModal'
@@ -22,12 +22,19 @@ export function SetPageLabelsModalPresenter(
     })
   }, [props.article, dispatchLabels])
 
+  const onOpenChange = useCallback(() => {
+    if (props.article) {
+      props.article.labels = labels.labels
+    }
+    props.onOpenChange(true)
+  }, [props, labels])
+
   return (
     <SetLabelsModal
       provider={props.article}
       selectedLabels={labels.labels}
       dispatchLabels={dispatchLabels}
-      onOpenChange={props.onOpenChange}
+      onOpenChange={onOpenChange}
     />
   )
 }

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

@@ -22,17 +22,12 @@ import { PrimaryDropdown } from '../PrimaryDropdown'
 import { OmnivoreSmallLogo } from '../../elements/images/OmnivoreNameLogo'
 import { HeaderSpacer, HEADER_HEIGHT } from './HeaderSpacer'
 import { LIBRARY_LEFT_MENU_WIDTH } from '../../templates/homeFeed/LibraryFilterMenu'
-import {
-  ScrollOffsetChangeset,
-  useScrollWatcher,
-} from '../../../lib/hooks/useScrollWatcher'
 import { CardCheckbox } from '../../patterns/LibraryCards/LibraryCardStyles'
 import { Dropdown, DropdownOption } from '../../elements/DropdownElements'
 import { BulkAction } from '../../../lib/networking/mutations/bulkActionMutation'
 import { ConfirmationModal } from '../../patterns/ConfirmationModal'
 import { AddBulkLabelsModal } from '../article/AddBulkLabelsModal'
 import { Label } from '../../../lib/networking/fragments/labelFragment'
-import { LabelsDispatcher } from '../../../lib/hooks/useSetPageLabels'
 
 export type MultiSelectMode = 'off' | 'none' | 'some' | 'visible' | 'search'
 

packages/web/lib/hooks/useSetPageLabels.tsx

@@ -1,7 +1,8 @@
-import { useReducer } from 'react'
+import { useEffect, useReducer } from 'react'
 import { setLabelsMutation } from '../networking/mutations/setLabelsMutation'
 import { Label } from '../networking/fragments/labelFragment'
 import { showErrorToast } from '../toastHelpers'
+import { LabelsProvider } from '../../components/templates/article/SetLabelsControl'
 
 export type LabelAction = 'RESET' | 'TEMP' | 'SAVE'
 export type LabelsDispatcher = (action: {