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
@@ -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}