Toggle visibility of unmatched scenes in Tagger (#1176)

ui/v2.5/src/components/Changelog/versions/v060.md

@@ -2,6 +2,7 @@
 * Added Performer tags.
 
 ### 🎨 Improvements
+* Add button to hide unmatched scenes in Tagger view.
 * Hide create option in dropdowns when searching in filters.
 * Add scrape gallery from fragment to UI
 * Improved performer details and edit UI pages.

ui/v2.5/src/components/Tagger/Tagger.tsx

@@ -175,6 +175,7 @@ const TaggerList: React.FC<ITaggerListProps> = ({
   const [fingerprints, setFingerprints] = useState<
     Record<string, IStashBoxScene>
   >({});
+  const [hideUnmatched, setHideUnmatched] = useState(false);
   const fingerprintQueue =
     config.fingerprintQueue[selectedEndpoint.endpoint] ?? [];
 
@@ -285,15 +286,23 @@ const TaggerList: React.FC<ITaggerListProps> = ({
     );
 
   const getFingerprintCount = () => {
-    const count = scenes.filter(
+    return scenes.filter(
       (s) =>
         s.stash_ids.length === 0 &&
         ((s.checksum && fingerprints[s.checksum]) ||
           (s.oshash && fingerprints[s.oshash]))
     ).length;
+  };
+
+  const getFingerprintCountMessage = () => {
+    const count = getFingerprintCount();
     return `${count > 0 ? count : "No"} new fingerprint matches found`;
   };
 
+  const toggleHideUnmatchedScenes = () => {
+    setHideUnmatched(!hideUnmatched);
+  };
+
   const renderScenes = () =>
     scenes.map((scene) => {
       const { paths, file, ext } = parsePath(scene.path);
@@ -460,7 +469,7 @@ const TaggerList: React.FC<ITaggerListProps> = ({
         );
       }
 
-      return (
+      return hideUnmatched && !fingerprintMatch ? null : (
         <div key={scene.id} className="mt-3 search-item">
           <div className="row">
             <div className="col col-lg-6 overflow-hidden align-items-center d-flex flex-column flex-sm-row">
@@ -498,6 +507,13 @@ const TaggerList: React.FC<ITaggerListProps> = ({
     <Card className="tagger-table">
       <div className="tagger-table-header d-flex flex-nowrap align-items-center">
         <b className="ml-auto mr-2 text-danger">{fingerprintError}</b>
+        <div className="mr-2">
+          {(getFingerprintCount() > 0 || hideUnmatched) && (
+            <Button onClick={toggleHideUnmatchedScenes}>
+              {hideUnmatched ? "Show" : "Hide"} unmatched scenes
+            </Button>
+          )}
+        </div>
         <div className="mr-2">
           {fingerprintQueue.length > 0 && (
             <Button
@@ -519,7 +535,7 @@ const TaggerList: React.FC<ITaggerListProps> = ({
           disabled={!canFingerprintSearch() && !loadingFingerprints}
         >
           {canFingerprintSearch() && <span>Match Fingerprints</span>}
-          {!canFingerprintSearch() && getFingerprintCount()}
+          {!canFingerprintSearch() && getFingerprintCountMessage()}
           {loadingFingerprints && <LoadingIndicator message="" inline small />}
         </Button>
       </div>