From 408d2ff49823b6c91daa8f17256583e5e15f8760 Mon Sep 17 00:00:00 2001
From: Caleb Allen <caleballen1276@gmail.com>
Date: Mon, 30 Mar 2026 15:42:58 -0400
Subject: [PATCH] =?UTF-8?q?feat:=20live=20toggle=20=E2=80=94=20views=20re-?=
 =?UTF-8?q?render=20when=20Library=20Only=20mode=20changes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

All three explore components now subscribe to exploreSettings:

- explore-view: re-runs the current search when toggled. In
  library-only mode this means instant local-only results; toggling
  off fires the full MB/LB pipeline.

- explore-artist-details: re-runs loadAllData which branches on
  libraryOnly — switching modes live-swaps between the full API
  view and the library-only view.

- explore-album-details: re-renders to pick up any mode-dependent
  display changes.

All subscriptions are cleaned up in disconnectedCallback.
---
 .../explore-album-details.ts                      | 12 ++++++++++++
 .../explore-artist-details.ts                     | 15 +++++++++++++++
 .../src/components/explore-view/explore-view.ts   | 15 +++++++++++++++
 3 files changed, 42 insertions(+)

diff --git a/frontend/src/components/explore-album-details/explore-album-details.ts b/frontend/src/components/explore-album-details/explore-album-details.ts
index 244ac4d..414bbbc 100644
--- a/frontend/src/components/explore-album-details/explore-album-details.ts
+++ b/frontend/src/components/explore-album-details/explore-album-details.ts
@@ -11,6 +11,7 @@ import type {
     MBTrack,
 } from '@go/explore/Service';
 import { exploreCache } from '../../store/explore-cache';
+import { exploreSettings } from '../../store/explore-settings';
 import '@awesome.me/webawesome/dist/components/icon/icon.js';
 
 /* ── Constants ── */
@@ -385,11 +386,22 @@ export class ExploreAlbumDetails extends LitElement {
 
     /* ── Lifecycle ── */
 
+    private unsubSettings?: () => void;
+
     override connectedCallback() {
         super.connectedCallback();
         if (this.releaseGroupMBID) {
             void this.loadAllData();
         }
+
+        this.unsubSettings = exploreSettings.subscribe(() => {
+            this.requestUpdate();
+        });
+    }
+
+    override disconnectedCallback() {
+        super.disconnectedCallback();
+        this.unsubSettings?.();
     }
 
     /* ── Data Loading ── */
diff --git a/frontend/src/components/explore-artist-details/explore-artist-details.ts b/frontend/src/components/explore-artist-details/explore-artist-details.ts
index 317ebb6..c252f89 100644
--- a/frontend/src/components/explore-artist-details/explore-artist-details.ts
+++ b/frontend/src/components/explore-artist-details/explore-artist-details.ts
@@ -677,11 +677,26 @@ export class ExploreArtistDetails extends LitElement {
 
     /* ── Lifecycle ── */
 
+    private unsubSettings?: () => void;
+
     override connectedCallback() {
         super.connectedCallback();
         if (this.artistMBID) {
             void this.loadAllData();
         }
+
+        // Re-render when library-only mode toggles.
+        this.unsubSettings = exploreSettings.subscribe(() => {
+            this.requestUpdate();
+            if (this.artistMBID) {
+                void this.loadAllData();
+            }
+        });
+    }
+
+    override disconnectedCallback() {
+        super.disconnectedCallback();
+        this.unsubSettings?.();
     }
 
     /* ── Data Loading ── */
diff --git a/frontend/src/components/explore-view/explore-view.ts b/frontend/src/components/explore-view/explore-view.ts
index ba28422..548a578 100644
--- a/frontend/src/components/explore-view/explore-view.ts
+++ b/frontend/src/components/explore-view/explore-view.ts
@@ -496,8 +496,23 @@ export class ExploreView extends LitElement {
 
     /* ── Lifecycle ── */
 
+    private unsubSettings?: () => void;
+
+    override connectedCallback() {
+        super.connectedCallback();
+        // Re-render and re-search when library-only mode toggles.
+        this.unsubSettings = exploreSettings.subscribe(() => {
+            this.requestUpdate();
+            // Re-run the current search with the new mode.
+            if (this.searchQuery.trim().length >= MIN_QUERY_LENGTH) {
+                void this.executeSearch();
+            }
+        });
+    }
+
     override disconnectedCallback() {
         super.disconnectedCallback();
+        this.unsubSettings?.();
         if (this.debounceTimer !== null) {
             clearTimeout(this.debounceTimer);
             this.debounceTimer = null;