resources: smoother markdown image search (fixes #8099) (#8123)

Co-authored-by: dogi <dogi@users.noreply.github.com>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "planet",
   "license": "AGPL-3.0",
-  "version": "0.16.73",
+  "version": "0.16.74",
   "myplanet": {
     "latest": "v0.22.29",
     "min": "v0.21.29"

src/app/shared/dialogs/dialogs-images.component.html

@@ -1,8 +1,14 @@
 <h3 *ngIf="images.length !== 0" mat-dialog-title i18n>Select an Image</h3>
 <h3 *ngIf="images.length === 0" mat-dialog-title i18n>No Images to Select</h3>
 <mat-dialog-content>
+  <div class="search-container">
+    <mat-icon>search</mat-icon>
+    <mat-form-field class="search-input">
+      <input matInput [(ngModel)]="searchQuery" i18n-placeholder placeholder="Search by filename">
+    </mat-form-field>
+  </div>
   <mat-grid-list cols="3" rowHeight="1:1">
-    <mat-grid-tile *ngFor="let image of images" (click)="selectImage(image)">
+    <mat-grid-tile *ngFor="let image of filteredImages" (click)="selectImage(image)">
       <img [src]="urlPrefix + '/' + image._id + '/' + image.filename">
       <mat-grid-tile-footer>{{image.title}}</mat-grid-tile-footer>
     </mat-grid-tile>

src/app/shared/dialogs/dialogs-images.component.scss

@@ -0,0 +1,20 @@
+mat-grid-tile {
+  width: 150px;
+}
+
+img {
+  max-width: 150px;
+  max-height: 150px;
+}
+
+.search-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 10px 0;
+}
+
+.search-input {
+  width: 80%;
+  margin-left: 10px;
+}

src/app/shared/dialogs/dialogs-images.component.ts

@@ -9,20 +9,13 @@ import { deepEqual } from '../utils';
 
 @Component({
   templateUrl: './dialogs-images.component.html',
-  styles: [ `
-    mat-grid-tile {
-      width: 150px;
-    }
-    img {
-      max-width: 150px;
-      max-height: 150px;
-    }
-  ` ]
+  styleUrls: ['./dialogs-images.component.scss']
 })
 export class DialogsImagesComponent implements OnInit {
 
   images: any[] = [];
   urlPrefix = environment.couchAddress + '/resources/';
+  searchQuery: string = '';
 
   constructor(
     @Inject(MAT_DIALOG_DATA) public data,
@@ -46,6 +39,10 @@ export class DialogsImagesComponent implements OnInit {
     this.resourcesService.requestResourcesUpdate(false, false);
   }
 
+  get filteredImages() {
+    return this.images.filter(image => image.filename.toLowerCase().includes(this.searchQuery.toLowerCase()));
+  }
+
   uploadImage(event) {
     const file = event.target.files[0];