added visual indicator of search results

2026-02-22 14:13:35 -05:00
parent 9cb1c6674a
commit d3b04a9c29
3 changed files with 79 additions and 0 deletions
@@ -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}