Add file count and search duration display

Signed-off-by: trivernis <trivernis@protonmail.com>

mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.html

@@ -40,6 +40,10 @@
                          id="sort-button"></app-sort-button>
     </div>
 
+    <mat-divider fxFlex="1em"></mat-divider>
+    <h3 class="search-result-display">{{this.state.files.value.length}} files found
+        in {{this.searchDuration < 0.1 ? " < 0.1" : this.searchDuration}}
+        seconds</h3>
     <mat-divider fxFlex="1em"></mat-divider>
     <div class="tag-list-header" fxFlex="40px">
         <h2>{{contextTags.length}} Tags</h2>

mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.scss

@@ -19,6 +19,11 @@
     height: calc(3em + 10px);
 }
 
+.search-result-display {
+    text-align: center;
+    width: 100%;
+}
+
 #delete-all-tags-button {
     position: absolute;
     top: 0;

mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.ts

@@ -53,8 +53,10 @@ export class FileSearchComponent implements AfterViewChecked, OnInit {
     public displayImported = true;
     public displayArchived = true;
     public displayDeleted = false;
+    public searchDuration = 0;
 
     private needsScroll = false;
+    private searchStart = Date.now();
 
     constructor(
         private logger: LoggingService,
@@ -69,6 +71,13 @@ export class FileSearchComponent implements AfterViewChecked, OnInit {
             this.assignDisplayedFilters();
         });
         this.state.sortingPreset.subscribe(s => this.sortingPreset = s);
+        this.state.loading.subscribe(l => {
+            if (l) {
+                this.searchStart = Date.now();
+            } else {
+                this.searchDuration = Math.round((Date.now() - this.searchStart) / 100) / 10;
+            }
+        });
         this.applyStatusFromFilters();
         this.needsScroll = true;
         this.assignDisplayedFilters();