Restore highlightRemoved

Author: RoyEJohnson

src/app/content/highlights/components/Card.tsx

@@ -145,20 +145,25 @@ function useLocationFilterId(page: CardProps['page']): string | undefined {
 
 function Card(props: CardProps) {
   const locationFilterId = useLocationFilterId(props.page);
+  const [highlightRemoved, setHighlightRemoved] = React.useState<boolean>(
+    false
+  );
   const computedProps = useComputedProps(props);
 
   if (
     !props.highlight.range ||
     !props.page ||
     !props.book ||
-    !locationFilterId
+    !locationFilterId ||
+    highlightRemoved
   ) {
     return null;
   }
 
   return (
     <NoteOrCard
       props={props as CardPropsWithBookAndPage}
+      setHighlightRemoved={setHighlightRemoved}
       locationFilterId={locationFilterId}
       computedProps={computedProps}
     />
@@ -167,10 +172,12 @@ function Card(props: CardProps) {
 
 function NoteOrCard({
   props,
+  setHighlightRemoved,
   locationFilterId,
   computedProps,
 }: {
   props: CardPropsWithBookAndPage;
+  setHighlightRemoved: React.Dispatch<React.SetStateAction<boolean>>;
   locationFilterId: string;
   computedProps: ReturnType<typeof useComputedProps>;
 }) {
@@ -185,6 +192,7 @@ function NoteOrCard({
   const showToast = useConfirmationToastContext();
   const onRemove = React.useCallback(() => {
     if (props.data) {
+      setHighlightRemoved(true);
       props.remove(props.data, {
         locationFilterId,
         pageId: props.page.id,
@@ -193,7 +201,7 @@ function NoteOrCard({
         message: 'Highlight removed',
       });
   }
-  }, [locationFilterId, props, showToast]);
+  }, [locationFilterId, props, showToast, setHighlightRemoved]);
   const style = highlightStyles.find(
     search => props.data && search.label === props.data.color
   );