Add a tiny thumbnail to the left of the folder & filename

src/app/components/home.component.html

@@ -285,15 +285,20 @@
     @topAnimation
   >
 
-    <app-top-component
-      class="top-content-position"
-      [darkMode]="settingsButtons['darkMode'].toggled"
-      [fileString]="currentClickedItemName"
-      [folderString]="currentPlayingFolder"
-      (onFileWordClicked)="handleFileWordClicked($event)"
-      (onFolderWordClicked)="handleFolderWordClicked($event)"
-      (onOpenInExplorer)="openInExplorer()"
-    ></app-top-component>
+<!-- Modified app-top-component to include thumbnail inputs and event bindings -->
+<app-top-component
+  [folderString]="currentPlayingFolder"
+  [fileString]="currentClickedItemName"
+  [currentClickedItem]="currentClickedItem"
+  [hubName]="appState.hubName"
+  [selectedOutputFolder]="appState.selectedOutputFolder"
+  [darkMode]="settingsButtons.darkMode.toggled"
+  (onFileWordClicked)="handleFileWordClicked($event)"
+  (onFolderWordClicked)="handleFolderIconClicked($event)"
+  (onOpenInExplorer)="openInExplorer()"
+  *ngIf="currentClickedItemName !== '' && !settingsModalOpen && !wizard.showWizard"
+  [@topAnimation]="currentClickedItemName !== '' ? 'show' : 'hide'"
+></app-top-component>
 
   </header>
 

src/app/components/top/top.component.html

@@ -1,29 +1,13 @@
-<div
-  *ngIf="_file !== ''"
-  class="folder-container"
-  [ngClass]="{ 'dark-mode-override': darkMode }"
->
-  <app-icon class="icon" [icon]="'icon-folder-blank'" (click)="openInExplorer()"></app-icon>
-  <span
-    *ngFor="let item of folderNameArray"
-    (click)="folderWordClicked(item)"
-    class="folder-word"
-  >
-    {{ item }}
-  </span>
-</div>
-
-<div
-  *ngIf="_file !== ''"
-  class="file-container"
-  [ngClass]="{ 'dark-mode-override': darkMode }"
->
-  <app-icon class="icon" [icon]="'icon-video-blank'" (click)="openInExplorer()"></app-icon>
-  <span
-    *ngFor="let item of fileNameArray"
-    (click)="fileWordClicked(item)"
-    class="file-word"
-  >
-    {{ item }}
-  </span>
+<div class="top-container">
+  <img *ngIf="getThumbnailPath()" [src]="getThumbnailPath()" class="thumbnail" alt="Thumbnail" />
+  <div class="text-container">
+    <div class="folder-container" *ngIf="folderString">
+      <span class="icon icon-folder"></span>
+      <span class="folder-word" *ngFor="let item of folderNameArray" (click)="folderWordClicked(item)">{{ item }}</span>
+    </div>
+    <div class="file-container" *ngIf="fileString">
+      <span class="icon icon-video-blank"></span>
+      <span class="file-word" *ngFor="let item of fileNameArray" (click)="fileWordClicked(item)">{{ item }}</span>
+    </div>
+  </div>
 </div>

src/app/components/top/top.component.scss

@@ -1,5 +1,23 @@
 @import "../variables";
 
+.top-container {
+  display: flex;
+  align-items: flex-start;
+}
+
+.thumbnail {
+  width: 30px;
+  height: 20px;
+  object-fit: cover;
+  margin-right: 5px;
+  margin-top: 2px;
+}
+
+.text-container {
+  display: flex;
+  flex-direction: column;
+}
+
 .icon {
   cursor: pointer;
   display: inline-block;
@@ -23,7 +41,7 @@
   overflow: hidden;
 
   :nth-child(2) {
-    margin-left: 23px;
+    margin-left: 23px; // Space for icon
   }
 
   .folder-word {
@@ -59,7 +77,7 @@
   }
 
   :nth-child(2) {
-    margin-left: 23px;
+    margin-left: 23px; // Space for icon
   }
 
   .file-word {
@@ -105,4 +123,8 @@
       fill: $light-blue;
     }
   }
+
+  & .thumbnail {
+    filter: brightness(0.8); // Slightly dim thumbnail in dark mode for better contrast
+  }
 }

src/app/components/top/top.component.ts

@@ -1,10 +1,10 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
+import type { ImageElement } from '../../../../interfaces/final-object.interface';
 
 @Component({
   selector: 'app-top-component',
   templateUrl: './top.component.html',
-  styleUrls: ['./top.component.scss',
-              '../../fonts/icons.scss']
+  styleUrls: ['./top.component.scss', '../../fonts/icons.scss']
 })
 export class TopComponent {
 
@@ -16,8 +16,7 @@ export class TopComponent {
     this._folder = (folderString && folderString.trim()) || '';
     this.folderNameArray = this._folder.split('/');
     this.folderNameArray = this.folderNameArray.filter((element, index) => {
-      // TODO -- fix this up:
-      return index === 0 || element !== ''; // ATROCIOUS hack! -- simply to prevent ["", ""]
+      return index === 0 || element !== '';
     });
   }
   get folderString(): string { return this._folder; }
@@ -30,19 +29,33 @@ export class TopComponent {
   }
   get fileString(): string { return this._file; }
 
+  // Inputs for thumbnail
+  @Input() currentClickedItem: ImageElement;
+  @Input() hubName: string;
+  @Input() selectedOutputFolder: string;
+
   @Output() onFileWordClicked = new EventEmitter<string>();
   @Output() onFolderWordClicked = new EventEmitter<string>();
   @Output() onOpenInExplorer = new EventEmitter<boolean>();
 
   public folderNameArray: string[];
   public fileNameArray: string[];
 
+  /**
+   * Compute the thumbnail path for the selected file
+   */
+  getThumbnailPath(): string {
+    if (this.currentClickedItem && this.hubName && this.selectedOutputFolder && this.currentClickedItem.cleanName !== '*FOLDER*') {
+      return `file://${this.selectedOutputFolder}/vha-${this.hubName}/thumbnails/${this.currentClickedItem.hash}.jpg`;
+    }
+    return '';
+  }
+
   public folderWordClicked(item: string): void {
     this.onFolderWordClicked.emit(item.trim());
   }
 
   public fileWordClicked(item: string): void {
-    // Strip away any of: {}()[].,
     const regex = /{|}|\(|\)|\[|\]|\.|\,/g;
     item = item.replace(regex, '');
     this.onFileWordClicked.emit(item.trim());
@@ -51,5 +64,4 @@ export class TopComponent {
   public openInExplorer(): void {
     this.onOpenInExplorer.emit(true);
   }
-
 }