added visual indicator of search results

frontend/src/components/cover-grid/cover-grid.ts

@@ -331,6 +331,24 @@ export class CoverGrid extends LitElement {
             color: var(--yj-text-secondary, #b3b3b3);
         }
 
+        .search-indicator {
+            position: absolute;
+            top: 8px;
+            left: 50%;
+            transform: translateX(-50%);
+            z-index: 5;
+            pointer-events: none;
+            background: var(--yj-bg-overlay, #495057);
+            color: var(--yj-text-secondary, #b3b3b3);
+            font-size: 12px;
+            padding: 4px 14px;
+            border-radius: 12px;
+            border: 1px solid
+                var(--yj-border-subtle, #555);
+            white-space: nowrap;
+            opacity: 0.92;
+        }
+
         .empty-state {
             display: flex;
             flex-direction: column;
@@ -2916,6 +2934,12 @@ export class CoverGrid extends LitElement {
             : this.renderSingleGrid();
 
         return html`
+            ${this.searchCtrl.term
+                ? html`<div class="search-indicator">
+                      Showing results for
+                      &ldquo;${this.searchCtrl.term}&rdquo;
+                  </div>`
+                : nothing}
             <div
                 class="grid-scroll-container"
                 @click=${this.onGridClick}

frontend/src/components/playlist-view/playlist-view.ts

@@ -314,6 +314,7 @@ export class PlaylistView
             display: flex;
             flex-direction: column;
             overflow: hidden;
+            position: relative;
         }
 
         .header {
@@ -596,6 +597,27 @@ export class PlaylistView
             color: var(--yj-text-secondary, #b3b3b3);
         }
 
+        .search-indicator {
+            position: absolute;
+            top: 8px;
+            left: 50%;
+            transform: translateX(-50%);
+            z-index: 5;
+            pointer-events: none;
+            background: var(--yj-bg-overlay, #495057);
+            color: var(
+                --yj-text-secondary,
+                #b3b3b3
+            );
+            font-size: 12px;
+            padding: 4px 14px;
+            border-radius: 12px;
+            border: 1px solid
+                var(--yj-border-subtle, #555);
+            white-space: nowrap;
+            opacity: 0.92;
+        }
+
         .empty-state {
             display: flex;
             flex-direction: column;
@@ -1721,6 +1743,15 @@ export class PlaylistView
                 </div>
             </div>
 
+            ${this.searchCtrl.term &&
+            this.filteredEntries.length > 0
+                ? html`<div class="search-indicator">
+                      Showing results for
+                      &ldquo;${this.searchCtrl
+                          .term}&rdquo;
+                  </div>`
+                : nothing}
+
             ${this.creating
                 ? this.renderCreateForm()
                 : nothing}

frontend/src/components/track-list/track-list.ts

@@ -521,6 +521,23 @@ export class TrackList extends LitElement implements SelectionHost {
       background-color: var(--yj-text-tertiary, #6c757d);
     }
 
+    .search-indicator {
+      position: absolute;
+      top: 8px;
+      left: 50%;
+      transform: translateX(-50%);
+      z-index: 5;
+      pointer-events: none;
+      background: var(--yj-bg-overlay, #495057);
+      color: var(--yj-text-secondary, #b3b3b3);
+      font-size: 12px;
+      padding: 4px 14px;
+      border-radius: 12px;
+      border: 1px solid var(--yj-border-subtle, #555);
+      white-space: nowrap;
+      opacity: 0.92;
+    }
+
     .no-results {
       padding: 24px 16px;
       color: var(--yj-text-secondary, #b3b3b3);
@@ -1028,6 +1045,13 @@ export class TrackList extends LitElement implements SelectionHost {
                     `}
           `}
 
+      ${this.searchCtrl.term && visibleTracks.length > 0
+                ? html`<div class="search-indicator">
+                Showing results for
+                &ldquo;${this.searchCtrl.term}&rdquo;
+            </div>`
+                : nothing}
+
       <div class="resize-overlay">
         ${this.colBoundaryPositions.map(
                 (pos, i) => html`