From 5f8f6d6a26b03221c61cf540c2f53dd726314c7d Mon Sep 17 00:00:00 2001
From: Caleb Allen <caleballen1276@gmail.com>
Date: Tue, 24 Mar 2026 22:41:02 -0400
Subject: [PATCH] feat: min 2-char query gate, result caps at 10 per section
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Don't fire search for single-character queries — show 'Keep typing…'
instead. Cap rendered results at 10 per section (artists, albums,
tracks) to reduce noise. Top results already capped at 3.
---
 .../components/explore-view/explore-view.ts   | 32 ++++++++++++++++---
 1 file changed, 28 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/explore-view/explore-view.ts b/frontend/src/components/explore-view/explore-view.ts
index 71cf9a0..5ce4947 100644
--- a/frontend/src/components/explore-view/explore-view.ts
+++ b/frontend/src/components/explore-view/explore-view.ts
@@ -12,6 +12,8 @@ import '@awesome.me/webawesome/dist/components/icon/icon.js';
 
 /* ── Constants ── */
 const DEBOUNCE_MS = 300;
+const MIN_QUERY_LENGTH = 2;
+const MAX_SECTION_RESULTS = 10;
 const CAA_GROUP_BASE = 'https://coverartarchive.org/release-group';
 const TOP_RESULTS_COUNT = 3;
 
@@ -67,6 +69,7 @@ export class ExploreView extends LitElement {
     @state() private results: MBSearchResult | null = null;
     @state() private loading = false;
     @state() private error = '';
+    @state() private queryTooShort = false;
 
     /** Monotonic counter to discard stale responses. */
     private searchVersion = 0;
@@ -481,13 +484,26 @@ export class ExploreView extends LitElement {
             this.debounceTimer = null;
         }
 
-        if (!this.searchQuery.trim()) {
+        const trimmed = this.searchQuery.trim();
+
+        if (!trimmed) {
             this.results = null;
             this.error = '';
             this.loading = false;
+            this.queryTooShort = false;
             return;
         }
 
+        if (trimmed.length < MIN_QUERY_LENGTH) {
+            this.results = null;
+            this.error = '';
+            this.loading = false;
+            this.queryTooShort = true;
+            return;
+        }
+
+        this.queryTooShort = false;
+
         this.debounceTimer = setTimeout(() => {
             this.debounceTimer = null;
             void this.executeSearch();
@@ -499,6 +515,7 @@ export class ExploreView extends LitElement {
         this.results = null;
         this.error = '';
         this.loading = false;
+        this.queryTooShort = false;
         if (this.debounceTimer !== null) {
             clearTimeout(this.debounceTimer);
             this.debounceTimer = null;
@@ -666,6 +683,13 @@ export class ExploreView extends LitElement {
     }
 
     private renderBody() {
+        // Query too short
+        if (this.queryTooShort) {
+            return html`<div class="status-message">
+                Keep typing\u2026
+            </div>`;
+        }
+
         // No query entered yet
         if (!this.searchQuery.trim() && !this.results) {
             return html`<div class="status-message">
@@ -696,13 +720,13 @@ export class ExploreView extends LitElement {
                         ? this.renderTopResults(topResults)
                         : nothing}
                     ${hasArtists
-                        ? this.renderArtistsSection(this.results.artists!)
+                        ? this.renderArtistsSection(this.results.artists!.slice(0, MAX_SECTION_RESULTS))
                         : nothing}
                     ${hasAlbums
-                        ? this.renderAlbumsSection(this.results.releaseGroups!)
+                        ? this.renderAlbumsSection(this.results.releaseGroups!.slice(0, MAX_SECTION_RESULTS))
                         : nothing}
                     ${hasTracks
-                        ? this.renderTracksSection(this.results.recordings!)
+                        ? this.renderTracksSection(this.results.recordings!.slice(0, MAX_SECTION_RESULTS))
                         : nothing}
                 </div>
             `;