Merge 9c9414f into c9988f5

src/css/Sidebar.scss

@@ -55,6 +55,19 @@
   justify-content: space-between;
 }
 
+.Sidebar__header-change-indicator {
+  position: absolute;
+  left: -4px;
+  bottom: 23px;
+  width: 10px;
+  height: 10px;
+  background-image: radial-gradient(closest-corner at 4px 4px,
+  $match-color 0%, $sidebar-highlight-color 100%);
+  border-radius: 50%;
+  display: inline-block;
+  z-index: 1;
+}
+
 .Sidebar__filter-toggle {
   display: inline-block;
   padding: 1px 2px;
@@ -104,7 +117,7 @@
   height: 3px;
   left: 0;
   bottom: 0;
-  background-color: #01adee;
+  background-color: $sidebar-highlight-color;
   width: 100%;
   transition: width 0.3s, opacity 0.3s;
 }

src/css/index.scss

@@ -18,6 +18,7 @@ $font-size-base: 15px;
 $font-size-large: 1.1em;
 $font-size-small: 0.8em;
 $base-border-radius: 3px;
+$sidebar-highlight-color:#01adee;
 
 // Mixins
 @mixin placeholderAnimation {

src/ts/components/Controls.tsx

@@ -10,7 +10,8 @@ import {
   selectHasGeneralError,
   selectHasAuthError,
   selectRequestsInProgress,
-  selectHasMatches
+  selectHasMatches,
+  selectDocumentHasChanged
 } from "../state/selectors";
 import TelemetryContext from "../contexts/TelemetryContext";
 
@@ -115,6 +116,22 @@ const Controls = <TPluginState extends IPluginState>({
     );
   };
 
+  const renderChangedIcon = () => {
+    if (!pluginState) {
+      return;
+    }    
+
+    const docHasChanged = selectDocumentHasChanged(pluginState);
+
+    if (!docHasChanged) {
+      return;
+    }
+
+    return (
+      <div title="Changes made since last check" className="Sidebar__header-change-indicator"></div>
+    )
+  };
+
   return (
     <>
       <div className="Sidebar__header-container">
@@ -127,6 +144,7 @@ const Controls = <TPluginState extends IPluginState>({
           >
             Check document
           </button>
+          {renderChangedIcon()}
           <IconButton
             size="small"
             aria-label="clear all matches"

src/ts/state/reducer.ts

@@ -145,6 +145,8 @@ export interface IPluginState<
   requestErrors: IMatchRequestError[];
   // The current state of the filter
   filterState: TFilterState;
+  // Has the document changed since the last document check?
+  docChangedSinceCheck: boolean;
 }
 
 // The transaction meta key that namespaces our actions.
@@ -196,7 +198,8 @@ export const createInitialState = <
     requestsInFlight: {},
     requestPending: false,
     requestErrors: [],
-    filterState: filterOptions?.initialFilterState as TFilterState
+    filterState: filterOptions?.initialFilterState as TFilterState,
+    docChangedSinceCheck: false
   };
 
   const stateWithMatches = addMatchesToState(
@@ -325,7 +328,8 @@ const getNewStateFromTransaction = <TPluginState extends IPluginState>(
     decorations: incomingState.decorations.map(tr.mapping, tr.doc),
     dirtiedRanges: mapAndMergeRanges(incomingState.dirtiedRanges, tr.mapping),
     currentMatches: mapRanges(incomingState.currentMatches, tr.mapping),
-    requestsInFlight: mappedRequestsInFlight
+    requestsInFlight: mappedRequestsInFlight,
+    docChangedSinceCheck: true
   };
 };
 
@@ -555,7 +559,8 @@ const handleRequestStart = (
         mapping: tr.mapping,
         categoryIds
       }
-    }
+    },
+    docChangedSinceCheck: false
   };
 };
 

src/ts/state/selectors.ts

@@ -172,3 +172,8 @@ export const selectMatches = <TMatch extends IMatch>(
   sortByImportance
     ? selectImportanceOrderedMatches(state)
     : selectDocumentOrderedMatches(state);
+
+
+export const selectDocumentHasChanged = (state: IPluginState): boolean => {
+  return state.docChangedSinceCheck;
+};

src/ts/test/helpers/fixtures.ts

@@ -203,7 +203,8 @@ export const createInitialData = (doc: Node = defaultDoc, time = 0) => {
       trHistory: [tr],
       requestsInFlight: {},
       requestPending: false,
-      requestErrors: []
+      requestErrors: [],
+      docChangedSinceCheck: false
     } as IPluginState
   };
 };