From e6e4db4317e41a73f718fdcae5ddb0ec0b25d92d Mon Sep 17 00:00:00 2001
From: apophisnow <karlmohler@gmail.com>
Date: Fri, 6 Mar 2026 13:09:48 -0800
Subject: [PATCH 01/15] Hide add/boost buttons on search results until track is
 clicked

Track items now require a tap to expand and reveal the Add and Boost
action buttons, resulting in a cleaner search results interface.
Artist items continue to show the View Songs button immediately.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../party-mode/PartyModeResultItem.vue        | 108 +++++++++++-------
 1 file changed, 67 insertions(+), 41 deletions(-)

diff --git a/src/components/party-mode/PartyModeResultItem.vue b/src/components/party-mode/PartyModeResultItem.vue
index 82c8a7bcd..4c31f9be0 100644
--- a/src/components/party-mode/PartyModeResultItem.vue
+++ b/src/components/party-mode/PartyModeResultItem.vue
@@ -1,5 +1,9 @@
 <template>
-  <div class="result-item">
+  <div
+    class="result-item"
+    :class="{ 'result-item--expanded': expanded }"
+    @click="onItemClick"
+  >
     <div class="result-info">
       <v-avatar size="56" rounded class="result-avatar">
         <v-img :src="imageUrl" :alt="item.name" cover>
@@ -20,58 +24,74 @@
       </div>
     </div>
 
-    <div class="result-spacer"></div>
-
-    <!-- Actions for tracks -->
-    <div v-if="item.media_type === 'track'" class="result-actions">
-      <v-btn
-        v-if="boostEnabled"
-        variant="elevated"
-        :loading="addingItems.has(`${item.media_type}-${item.item_id}-next`)"
-        :disabled="rateLimitingEnabled && boostTokens <= 0"
-        class="boost-btn action-btn"
-        :style="{ backgroundColor: boostBadgeColor }"
-        @click="$emit('addToQueue', item, 'next')"
-      >
-        <v-icon start>mdi-rocket-launch</v-icon>
-        {{ $t("providers.party_mode.boost") }}
-      </v-btn>
-      <v-btn
-        v-if="addQueueEnabled"
-        variant="elevated"
-        :loading="addingItems.has(`${item.media_type}-${item.item_id}-end`)"
-        :disabled="rateLimitingEnabled && addQueueTokens <= 0"
-        class="add-btn action-btn"
-        :style="{ backgroundColor: requestBadgeColor }"
-        @click="$emit('addToQueue', item, 'end')"
-      >
-        <v-icon start>mdi-playlist-plus</v-icon>
-        {{ $t("providers.party_mode.add") }}
-      </v-btn>
-    </div>
+    <!-- Actions for tracks (shown when expanded) -->
+    <template v-if="item.media_type === 'track' && expanded">
+      <div class="result-spacer"></div>
+      <div class="result-actions">
+        <v-btn
+          v-if="boostEnabled"
+          variant="elevated"
+          :loading="
+            addingItems.has(`${item.media_type}-${item.item_id}-next`)
+          "
+          :disabled="rateLimitingEnabled && boostTokens <= 0"
+          class="boost-btn action-btn"
+          :style="{ backgroundColor: boostBadgeColor }"
+          @click.stop="$emit('addToQueue', item, 'next')"
+        >
+          <v-icon start>mdi-rocket-launch</v-icon>
+          {{ $t("providers.party_mode.boost") }}
+        </v-btn>
+        <v-btn
+          v-if="addQueueEnabled"
+          variant="elevated"
+          :loading="
+            addingItems.has(`${item.media_type}-${item.item_id}-end`)
+          "
+          :disabled="rateLimitingEnabled && addQueueTokens <= 0"
+          class="add-btn action-btn"
+          :style="{ backgroundColor: requestBadgeColor }"
+          @click.stop="$emit('addToQueue', item, 'end')"
+        >
+          <v-icon start>mdi-playlist-plus</v-icon>
+          {{ $t("providers.party_mode.add") }}
+        </v-btn>
+      </div>
+    </template>
 
     <!-- Actions for artists -->
-    <div v-else-if="item.media_type === 'artist'" class="result-actions">
-      <v-btn
-        variant="text"
-        class="action-btn"
-        @click="$emit('selectArtist', item)"
-      >
-        <v-icon start>mdi-music-note-outline</v-icon>
-        {{ $t("providers.party_mode.guest_page.view_songs") }}
-      </v-btn>
-    </div>
+    <template v-else-if="item.media_type === 'artist'">
+      <div class="result-spacer"></div>
+      <div class="result-actions">
+        <v-btn
+          variant="text"
+          class="action-btn"
+          @click.stop="$emit('selectArtist', item)"
+        >
+          <v-icon start>mdi-music-note-outline</v-icon>
+          {{ $t("providers.party_mode.guest_page.view_songs") }}
+        </v-btn>
+      </div>
+    </template>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import type { Artist, Track } from "@/plugins/api/interfaces";
 import { MediaType } from "@/plugins/api/interfaces";
 import { getMediaItemImageUrl } from "@/helpers/utils";
 import { $t } from "@/plugins/i18n";
 import MarqueeText from "@/components/MarqueeText.vue";
 
+const expanded = ref(false);
+
+const onItemClick = () => {
+  if (props.item.media_type === MediaType.TRACK) {
+    expanded.value = !expanded.value;
+  }
+};
+
 const props = defineProps<{
   item: Track | Artist;
   boostEnabled: boolean;
@@ -114,6 +134,12 @@ const artistName = computed(() => {
   background: rgba(var(--v-theme-surface-variant), 0.07);
   border-radius: 12px;
   min-height: 72px;
+  cursor: pointer;
+  transition: background 0.2s ease;
+}
+
+.result-item--expanded {
+  background: rgba(var(--v-theme-primary), 0.1);
 }
 
 .result-info {

From 22964ad0aa16389fb0270a1f4b624257fbad4744 Mon Sep 17 00:00:00 2001
From: apophisnow <karlmohler@gmail.com>
Date: Fri, 6 Mar 2026 13:16:14 -0800
Subject: [PATCH 02/15] Add boost button to queue items on tap

Queue items in the guest view can now be tapped to reveal a Boost
button, allowing guests to boost an existing track in the queue to
play sooner. Only upcoming (non-played) items are interactive.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../party-mode/PartyModeQueueItem.vue         | 140 +++++++++++++-----
 .../party-mode/PartyModeQueueSection.vue      |   9 ++
 src/views/PartyModeGuestView.vue              |  46 ++++++
 3 files changed, 160 insertions(+), 35 deletions(-)

diff --git a/src/components/party-mode/PartyModeQueueItem.vue b/src/components/party-mode/PartyModeQueueItem.vue
index 0d174464e..fc81eed89 100644
--- a/src/components/party-mode/PartyModeQueueItem.vue
+++ b/src/components/party-mode/PartyModeQueueItem.vue
@@ -4,47 +4,67 @@
     :class="{
       'queue-item-current': absoluteIndex === currentQueueIndex,
       'queue-item-played': absoluteIndex < currentQueueIndex,
+      'queue-item--expanded': expanded,
     }"
+    @click="onItemClick"
   >
-    <div class="queue-position">
-      <NowPlayingBadge
-        v-if="absoluteIndex === currentQueueIndex && isPlaying"
-        :show-badge="false"
-      />
-      <span v-else class="queue-number">{{ absoluteIndex + 1 }}</span>
-    </div>
-    <v-avatar size="48" rounded class="queue-avatar">
-      <v-img :src="imageUrl" :alt="item.name" cover>
-        <template #placeholder>
-          <div class="avatar-placeholder">
-            <v-icon>mdi-music</v-icon>
-          </div>
-        </template>
-      </v-img>
-    </v-avatar>
-    <div class="queue-info">
-      <MarqueeText class="queue-name">
-        {{ title }}
-      </MarqueeText>
-      <MarqueeText class="queue-artist">
-        {{ subtitle }}
-      </MarqueeText>
+    <div class="queue-item-row">
+      <div class="queue-position">
+        <NowPlayingBadge
+          v-if="absoluteIndex === currentQueueIndex && isPlaying"
+          :show-badge="false"
+        />
+        <span v-else class="queue-number">{{ absoluteIndex + 1 }}</span>
+      </div>
+      <v-avatar size="48" rounded class="queue-avatar">
+        <v-img :src="imageUrl" :alt="item.name" cover>
+          <template #placeholder>
+            <div class="avatar-placeholder">
+              <v-icon>mdi-music</v-icon>
+            </div>
+          </template>
+        </v-img>
+      </v-avatar>
+      <div class="queue-info">
+        <MarqueeText class="queue-name">
+          {{ title }}
+        </MarqueeText>
+        <MarqueeText class="queue-artist">
+          {{ subtitle }}
+        </MarqueeText>
+      </div>
+
+      <!-- Guest request badge -->
+      <span
+        v-if="item.extra_attributes?.party_mode_guest === true"
+        class="guest-request-badge"
+        :style="{ '--badge-color': badgeColor }"
+      >
+        <v-icon size="x-small">{{ badgeIcon }}</v-icon>
+        <span>{{ badgeLabel }}</span>
+      </span>
     </div>
 
-    <!-- Guest request badge -->
-    <span
-      v-if="item.extra_attributes?.party_mode_guest === true"
-      class="guest-request-badge"
-      :style="{ '--badge-color': badgeColor }"
-    >
-      <v-icon size="x-small">{{ badgeIcon }}</v-icon>
-      <span>{{ badgeLabel }}</span>
-    </span>
+    <!-- Boost action (shown when expanded on upcoming items) -->
+    <div v-if="expanded && canBoost" class="queue-item-actions">
+      <v-btn
+        variant="elevated"
+        size="small"
+        :loading="boosting"
+        :disabled="boostDisabled"
+        class="boost-btn"
+        :style="{ backgroundColor: boostBadgeColor }"
+        @click.stop="$emit('boost', item)"
+      >
+        <v-icon start size="small">mdi-rocket-launch</v-icon>
+        {{ $t("providers.party_mode.boost") }}
+      </v-btn>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import type { QueueItem } from "@/plugins/api/interfaces";
 import { getMediaItemImageUrl } from "@/helpers/utils";
 import { $t } from "@/plugins/i18n";
@@ -59,8 +79,33 @@ const props = defineProps<{
   isPlaying: boolean;
   boostBadgeColor: string;
   requestBadgeColor: string;
+  boostEnabled: boolean;
+  rateLimitingEnabled: boolean;
+  boostTokens: number;
+  boosting: boolean;
+}>();
+
+defineEmits<{
+  boost: [item: QueueItem];
 }>();
 
+const expanded = ref(false);
+
+const canBoost = computed(
+  () =>
+    props.boostEnabled && absoluteIndex.value > props.currentQueueIndex,
+);
+
+const boostDisabled = computed(
+  () => props.rateLimitingEnabled && props.boostTokens <= 0,
+);
+
+const onItemClick = () => {
+  if (absoluteIndex.value > props.currentQueueIndex) {
+    expanded.value = !expanded.value;
+  }
+};
+
 const absoluteIndex = computed(() => props.queueFetchOffset + props.index);
 
 const imageUrl = computed(() => {
@@ -111,13 +156,38 @@ const badgeLabel = computed(() =>
 <style scoped>
 .queue-item {
   display: flex;
-  align-items: center;
-  gap: 1rem;
+  flex-direction: column;
   padding: 0 0.75rem;
   background: rgba(var(--v-theme-surface-variant), 0.05);
   border-radius: 8px;
   min-height: 80px;
   transition: all 0.2s ease;
+  cursor: pointer;
+}
+
+.queue-item--expanded {
+  background: rgba(var(--v-theme-primary), 0.1);
+}
+
+.queue-item-row {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  min-height: 80px;
+}
+
+.queue-item-actions {
+  display: flex;
+  justify-content: center;
+  padding: 0 0 0.5rem;
+}
+
+.queue-item-actions .boost-btn {
+  font-weight: 600;
+  text-transform: none;
+  letter-spacing: 0.5px;
+  color: white;
+  flex: 1;
 }
 
 .queue-item-current {
diff --git a/src/components/party-mode/PartyModeQueueSection.vue b/src/components/party-mode/PartyModeQueueSection.vue
index 22d070196..3085007df 100644
--- a/src/components/party-mode/PartyModeQueueSection.vue
+++ b/src/components/party-mode/PartyModeQueueSection.vue
@@ -51,6 +51,11 @@
         :is-playing="isPlaying"
         :boost-badge-color="boostBadgeColor"
         :request-badge-color="requestBadgeColor"
+        :boost-enabled="boostEnabled"
+        :rate-limiting-enabled="rateLimitingEnabled"
+        :boost-tokens="boostTokens"
+        :boosting="boostingItemId === item.queue_item_id"
+        @boost="$emit('boostQueueItem', $event)"
       />
       <!-- Loading indicator for infinite scroll -->
       <div v-if="loadingMoreQueueItems" class="loading-more">
@@ -83,11 +88,15 @@ const props = defineProps<{
   skipTokenCountdown: string;
   boostBadgeColor: string;
   requestBadgeColor: string;
+  boostEnabled: boolean;
+  boostTokens: number;
+  boostingItemId: string;
 }>();
 
 defineEmits<{
   skip: [];
   queueScroll: [event: Event];
+  boostQueueItem: [item: QueueItem];
 }>();
 
 const listRef = ref<HTMLElement | null>(null);
diff --git a/src/views/PartyModeGuestView.vue b/src/views/PartyModeGuestView.vue
index 860e4bc59..be6519279 100644
--- a/src/views/PartyModeGuestView.vue
+++ b/src/views/PartyModeGuestView.vue
@@ -162,8 +162,12 @@
       :skip-token-countdown="skipTokenCountdown"
       :boost-badge-color="boostBadgeColor"
       :request-badge-color="requestBadgeColor"
+      :boost-enabled="boostEnabled"
+      :boost-tokens="boostTokens"
+      :boosting-item-id="boostingQueueItemId"
       @skip="skipCurrentSong"
       @queue-scroll="handleQueueScroll"
+      @boost-queue-item="boostQueueItem"
     />
   </div>
 </template>
@@ -175,6 +179,7 @@ import { store } from "@/plugins/store";
 import {
   type Artist,
   PlaybackState,
+  type QueueItem,
   type Track,
 } from "@/plugins/api/interfaces";
 import { $t } from "@/plugins/i18n";
@@ -270,6 +275,7 @@ const {
 // --- Template-specific state ---
 const addingItems = ref(new Set<string>());
 const skippingSong = ref(false);
+const boostingQueueItemId = ref("");
 const queueSectionRef = ref<InstanceType<typeof PartyModeQueueSection> | null>(
   null,
 );
@@ -365,6 +371,46 @@ const addToQueue = async (item: Track | Artist, position: "next" | "end") => {
   }
 };
 
+const boostQueueItem = async (item: QueueItem) => {
+  if (!boostEnabled.value) {
+    toast.warning($t("providers.party_mode.boost_disabled"));
+    return;
+  }
+
+  if (rateLimitingEnabled.value) {
+    if (!consumeBoostToken()) {
+      const minutesUntilNext = getTimeUntilNextToken();
+      toast.warning(
+        $t("providers.party_mode.boost_limit_reached", [minutesUntilNext]),
+      );
+      return;
+    }
+  }
+
+  const uri = item.media_item?.uri;
+  if (!uri) return;
+
+  boostingQueueItemId.value = item.queue_item_id;
+  try {
+    const result = (await api.sendCommand("party_mode/add_to_queue", {
+      uri,
+      boost: true,
+    })) as { success: boolean };
+
+    if (!result.success) {
+      throw new Error("Server rejected the request");
+    }
+
+    const name = item.media_item?.name || item.name;
+    toast.success($t("providers.party_mode.guest_page.item_boosted", [name]));
+  } catch (error) {
+    console.error("Failed to boost queue item:", error);
+    toast.error($t("providers.party_mode.add_to_queue_failed"));
+  } finally {
+    boostingQueueItemId.value = "";
+  }
+};
+
 const skipCurrentSong = async () => {
   if (!skipSongEnabled.value) {
     toast.warning($t("providers.party_mode.guest_page.skip_disabled"));

From 9a84d5bb585b977a98514e26b084e2fd58c7abdc Mon Sep 17 00:00:00 2001
From: apophisnow <karlmohler@gmail.com>
Date: Fri, 6 Mar 2026 13:18:24 -0800
Subject: [PATCH 03/15] Show error when user lacks access to configured party
 mode player

When a user navigates to the party mode dashboard but does not have
access to the configured player, an error message is displayed:
"You do not have access to the configured player. Please contact
the admin."

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/translations/en.json             |  2 +
 src/views/PartyModeDashboardView.vue | 57 +++++++++++++++++++++++++---
 2 files changed, 53 insertions(+), 6 deletions(-)

diff --git a/src/translations/en.json b/src/translations/en.json
index 353763dbe..66ab1d4a4 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -291,6 +291,8 @@
             "enable_in_settings": "Enable in party mode plugin settings",
             "get_started": "Play some music to get the party started!",
             "guest_access_disabled": "Guest Access Disabled",
+            "no_player_access": "Player Not Accessible",
+            "no_player_access_detail": "You do not have access to the configured player. Please contact the admin.",
             "nothing_playing": "Nothing Playing Right Now",
             "qr_failed": "Failed to generate QR code",
             "request": "Request",
diff --git a/src/views/PartyModeDashboardView.vue b/src/views/PartyModeDashboardView.vue
index 9eaa18ae2..e765ce8cd 100644
--- a/src/views/PartyModeDashboardView.vue
+++ b/src/views/PartyModeDashboardView.vue
@@ -9,7 +9,20 @@
       class="background-image"
       :style="{ backgroundImage: `url(${albumArtUrl})` }"
     ></div>
-    <div class="party-content">
+    <!-- Access Error -->
+    <div v-if="accessError" class="party-content access-error-content">
+      <div class="access-error">
+        <v-icon size="80" color="error">mdi-lock-alert</v-icon>
+        <h2 class="access-error-title">
+          {{ $t("providers.party_mode.no_player_access") }}
+        </h2>
+        <p class="access-error-message">
+          {{ $t("providers.party_mode.no_player_access_detail") }}
+        </p>
+      </div>
+    </div>
+
+    <div v-else class="party-content">
       <!-- QR Code -->
       <div class="qr-section">
         <PartyModeQR />
@@ -78,6 +91,7 @@ const { config: partyConfig, fetchConfig } = usePartyModeConfig();
 
 const albumArtBackgroundEnabled = ref(true); // Default to true
 const showPlayerControls = ref(false); // Whether footer player controls are shown
+const accessError = ref("");
 // Badge colors (hex values from config)
 const requestBadgeColor = ref("");
 const boostBadgeColor = ref("");
@@ -352,13 +366,18 @@ onMounted(async () => {
 
   // Set active player from party mode config (needed when opened in a new tab
   // where the Default layout's player selection logic doesn't run)
-  if (!store.activePlayerId) {
-    const partyPlayerId = await api.sendCommand<string | null>(
-      "party_mode/player",
-    );
-    if (partyPlayerId) {
+  const partyPlayerId = await api.sendCommand<string | null>(
+    "party_mode/player",
+  );
+  if (partyPlayerId) {
+    if (!store.activePlayerId) {
       store.activePlayerId = partyPlayerId;
     }
+    // Check if the configured player is accessible to this user
+    if (!api.players[partyPlayerId]) {
+      accessError.value = "no_access";
+      return;
+    }
   }
 
   // Fetch party mode configuration via shared composable
@@ -557,6 +576,32 @@ watch(
   opacity: 0;
 }
 
+/* Access error state */
+.access-error-content {
+  justify-content: center;
+}
+
+.access-error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: 1rem;
+  padding: 2rem;
+}
+
+.access-error-title {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.access-error-message {
+  font-size: 1rem;
+  color: rgba(255, 255, 255, 0.7);
+  max-width: 400px;
+}
+
 /* Responsive adjustments */
 @media (max-width: 1024px) {
   .party-content {

From b22a80f1a87b9cdb5751b9617d3c5c64ee522b3e Mon Sep 17 00:00:00 2001
From: apophisnow <karlmohler@gmail.com>
Date: Fri, 6 Mar 2026 13:23:29 -0800
Subject: [PATCH 04/15] Fix remote access join URL not auto-connecting

When scanning a party mode QR code with remote access enabled, the
remote_id and join code from the URL were not being used to auto-login.
The user would see the "enter remote ID" page instead of connecting
automatically.

The issue was in the fallthrough logic: when both remote_id and join
params were present but the combined handler didn't succeed, neither
the individual remote_id handler (required !join) nor the join handler
(required !remote_id) would run, leaving both params unprocessed.

The fix removes the !urlJoinCode guard from the remote_id handler so
it always pre-fills the remote ID and stores any join code in session
storage for the remote-only auto-connect path to pick up.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/views/Login.vue | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/views/Login.vue b/src/views/Login.vue
index e111329c3..c7daa6ce8 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -858,16 +858,30 @@ const autoConnect = async () => {
     }
   }
 
-  // If remote_id is in URL, pre-fill and auto-connect (when in remote-only mode)
+  // If remote_id is in URL, pre-fill and auto-connect (when in remote-only mode).
+  // This also serves as a fallback when both remote_id and join are present but
+  // the combined handler above didn't succeed (e.g., connection error).
   let urlRemoteIdForAutoConnect: string | null = null;
-  if (urlRemoteId && !urlJoinCode) {
+  if (urlRemoteId) {
     console.debug("[Login] Found remote_id in URL:", urlRemoteId);
-    const cleanRemoteId = urlRemoteId.toUpperCase().replace(/[^A-Z0-9]/g, "");
+    const cleanRemoteId = urlRemoteId
+      .toUpperCase()
+      .replace(/[^A-Z0-9]/g, "");
     if (cleanRemoteId.length === 26) {
       setRemoteIdFromString(cleanRemoteId);
       urlRemoteIdForAutoConnect = cleanRemoteId;
+      // Store the join code in sessionStorage so the remote-only auto-connect
+      // path can pick it up after establishing the WebRTC connection.
+      if (urlJoinCode) {
+        sessionStorage.setItem(
+          SESSION_KEY_PENDING_JOIN_CODE,
+          urlJoinCode,
+        );
+        localStorage.setItem(STORAGE_KEY_REMOTE_ID, cleanRemoteId);
+      }
       // Clean up the URL
       urlParams.delete("remote_id");
+      urlParams.delete("join");
       const queryString = urlParams.toString();
       const newUrl =
         window.location.origin +

From 42a2c0fa9ede5f5a743779c05315cfabf0eb1e9c Mon Sep 17 00:00:00 2001
From: apophisnow <karlmohler@gmail.com>
Date: Fri, 6 Mar 2026 13:34:36 -0800
Subject: [PATCH 05/15] Fix queue boost to move existing items instead of
 duplicating, single-expand behavior

- Call new boost_queue_item endpoint with queue_item_id instead of
  add_to_queue with URI, which was creating duplicate tracks
- Only one track can be expanded at a time in both search results
  and queue views
- Collapse expanded track when boost button is pressed

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../party-mode/PartyModeQueueItem.vue         | 17 +++++-----
 .../party-mode/PartyModeQueueSection.vue      | 21 +++++++++---
 .../party-mode/PartyModeResultItem.vue        | 32 ++++++++-----------
 src/views/Login.vue                           |  9 ++----
 src/views/PartyModeGuestView.vue              | 18 +++++++----
 5 files changed, 52 insertions(+), 45 deletions(-)

diff --git a/src/components/party-mode/PartyModeQueueItem.vue b/src/components/party-mode/PartyModeQueueItem.vue
index fc81eed89..bdd379c36 100644
--- a/src/components/party-mode/PartyModeQueueItem.vue
+++ b/src/components/party-mode/PartyModeQueueItem.vue
@@ -4,7 +4,7 @@
     :class="{
       'queue-item-current': absoluteIndex === currentQueueIndex,
       'queue-item-played': absoluteIndex < currentQueueIndex,
-      'queue-item--expanded': expanded,
+      'queue-item--expanded': isExpanded,
     }"
     @click="onItemClick"
   >
@@ -46,7 +46,7 @@
     </div>
 
     <!-- Boost action (shown when expanded on upcoming items) -->
-    <div v-if="expanded && canBoost" class="queue-item-actions">
+    <div v-if="isExpanded && canBoost" class="queue-item-actions">
       <v-btn
         variant="elevated"
         size="small"
@@ -64,7 +64,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from "vue";
+import { computed } from "vue";
 import type { QueueItem } from "@/plugins/api/interfaces";
 import { getMediaItemImageUrl } from "@/helpers/utils";
 import { $t } from "@/plugins/i18n";
@@ -83,17 +83,16 @@ const props = defineProps<{
   rateLimitingEnabled: boolean;
   boostTokens: number;
   boosting: boolean;
+  isExpanded: boolean;
 }>();
 
-defineEmits<{
+const emit = defineEmits<{
   boost: [item: QueueItem];
+  toggleExpand: [queueItemId: string];
 }>();
 
-const expanded = ref(false);
-
 const canBoost = computed(
-  () =>
-    props.boostEnabled && absoluteIndex.value > props.currentQueueIndex,
+  () => props.boostEnabled && absoluteIndex.value > props.currentQueueIndex,
 );
 
 const boostDisabled = computed(
@@ -102,7 +101,7 @@ const boostDisabled = computed(
 
 const onItemClick = () => {
   if (absoluteIndex.value > props.currentQueueIndex) {
-    expanded.value = !expanded.value;
+    emit("toggleExpand", props.item.queue_item_id);
   }
 };
 
diff --git a/src/components/party-mode/PartyModeQueueSection.vue b/src/components/party-mode/PartyModeQueueSection.vue
index 3085007df..7912df6fe 100644
--- a/src/components/party-mode/PartyModeQueueSection.vue
+++ b/src/components/party-mode/PartyModeQueueSection.vue
@@ -55,7 +55,9 @@
         :rate-limiting-enabled="rateLimitingEnabled"
         :boost-tokens="boostTokens"
         :boosting="boostingItemId === item.queue_item_id"
-        @boost="$emit('boostQueueItem', $event)"
+        :is-expanded="expandedQueueItemId === item.queue_item_id"
+        @boost="handleBoost"
+        @toggle-expand="toggleExpandedItem"
       />
       <!-- Loading indicator for infinite scroll -->
       <div v-if="loadingMoreQueueItems" class="loading-more">
@@ -93,19 +95,28 @@ const props = defineProps<{
   boostingItemId: string;
 }>();
 
-defineEmits<{
+const emit = defineEmits<{
   skip: [];
   queueScroll: [event: Event];
   boostQueueItem: [item: QueueItem];
 }>();
 
+const expandedQueueItemId = ref("");
+
+const toggleExpandedItem = (queueItemId: string) => {
+  expandedQueueItemId.value =
+    expandedQueueItemId.value === queueItemId ? "" : queueItemId;
+};
+
+const handleBoost = (item: QueueItem) => {
+  expandedQueueItemId.value = "";
+  emit("boostQueueItem", item);
+};
+
 const listRef = ref<HTMLElement | null>(null);
 
 // Expose the list ref so the parent's composable can use it for auto-scroll
 defineExpose({ listRef });
-
-// Sync listRef to the composable's queueListRef via a watcher pattern
-// The parent will set up the connection
 </script>
 
 <style scoped>
diff --git a/src/components/party-mode/PartyModeResultItem.vue b/src/components/party-mode/PartyModeResultItem.vue
index 4c31f9be0..da3a18f61 100644
--- a/src/components/party-mode/PartyModeResultItem.vue
+++ b/src/components/party-mode/PartyModeResultItem.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     class="result-item"
-    :class="{ 'result-item--expanded': expanded }"
+    :class="{ 'result-item--expanded': isExpanded }"
     @click="onItemClick"
   >
     <div class="result-info">
@@ -25,15 +25,13 @@
     </div>
 
     <!-- Actions for tracks (shown when expanded) -->
-    <template v-if="item.media_type === 'track' && expanded">
+    <template v-if="item.media_type === 'track' && isExpanded">
       <div class="result-spacer"></div>
       <div class="result-actions">
         <v-btn
           v-if="boostEnabled"
           variant="elevated"
-          :loading="
-            addingItems.has(`${item.media_type}-${item.item_id}-next`)
-          "
+          :loading="addingItems.has(`${item.media_type}-${item.item_id}-next`)"
           :disabled="rateLimitingEnabled && boostTokens <= 0"
           class="boost-btn action-btn"
           :style="{ backgroundColor: boostBadgeColor }"
@@ -45,9 +43,7 @@
         <v-btn
           v-if="addQueueEnabled"
           variant="elevated"
-          :loading="
-            addingItems.has(`${item.media_type}-${item.item_id}-end`)
-          "
+          :loading="addingItems.has(`${item.media_type}-${item.item_id}-end`)"
           :disabled="rateLimitingEnabled && addQueueTokens <= 0"
           class="add-btn action-btn"
           :style="{ backgroundColor: requestBadgeColor }"
@@ -77,21 +73,13 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from "vue";
+import { computed } from "vue";
 import type { Artist, Track } from "@/plugins/api/interfaces";
 import { MediaType } from "@/plugins/api/interfaces";
 import { getMediaItemImageUrl } from "@/helpers/utils";
 import { $t } from "@/plugins/i18n";
 import MarqueeText from "@/components/MarqueeText.vue";
 
-const expanded = ref(false);
-
-const onItemClick = () => {
-  if (props.item.media_type === MediaType.TRACK) {
-    expanded.value = !expanded.value;
-  }
-};
-
 const props = defineProps<{
   item: Track | Artist;
   boostEnabled: boolean;
@@ -102,13 +90,21 @@ const props = defineProps<{
   boostBadgeColor: string;
   requestBadgeColor: string;
   addingItems: Set<string>;
+  isExpanded: boolean;
 }>();
 
-defineEmits<{
+const emit = defineEmits<{
   addToQueue: [item: Track | Artist, position: "next" | "end"];
   selectArtist: [item: Track | Artist];
+  toggleExpand: [itemId: string];
 }>();
 
+const onItemClick = () => {
+  if (props.item.media_type === MediaType.TRACK) {
+    emit("toggleExpand", `${props.item.media_type}-${props.item.item_id}`);
+  }
+};
+
 const imageUrl = computed(() => {
   const img = props.item.metadata?.images?.[0];
   return img ? getMediaItemImageUrl(img) : "";
diff --git a/src/views/Login.vue b/src/views/Login.vue
index c7daa6ce8..727f7776d 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -864,19 +864,14 @@ const autoConnect = async () => {
   let urlRemoteIdForAutoConnect: string | null = null;
   if (urlRemoteId) {
     console.debug("[Login] Found remote_id in URL:", urlRemoteId);
-    const cleanRemoteId = urlRemoteId
-      .toUpperCase()
-      .replace(/[^A-Z0-9]/g, "");
+    const cleanRemoteId = urlRemoteId.toUpperCase().replace(/[^A-Z0-9]/g, "");
     if (cleanRemoteId.length === 26) {
       setRemoteIdFromString(cleanRemoteId);
       urlRemoteIdForAutoConnect = cleanRemoteId;
       // Store the join code in sessionStorage so the remote-only auto-connect
       // path can pick it up after establishing the WebRTC connection.
       if (urlJoinCode) {
-        sessionStorage.setItem(
-          SESSION_KEY_PENDING_JOIN_CODE,
-          urlJoinCode,
-        );
+        sessionStorage.setItem(SESSION_KEY_PENDING_JOIN_CODE, urlJoinCode);
         localStorage.setItem(STORAGE_KEY_REMOTE_ID, cleanRemoteId);
       }
       // Clean up the URL
diff --git a/src/views/PartyModeGuestView.vue b/src/views/PartyModeGuestView.vue
index be6519279..4f05d58b6 100644
--- a/src/views/PartyModeGuestView.vue
+++ b/src/views/PartyModeGuestView.vue
@@ -65,7 +65,9 @@
           :boost-badge-color="boostBadgeColor"
           :request-badge-color="requestBadgeColor"
           :adding-items="addingItems"
+          :is-expanded="expandedResultItemId === `${track.media_type}-${track.item_id}`"
           @add-to-queue="addToQueue"
+          @toggle-expand="toggleExpandedResult"
         />
       </div>
       <!-- Empty state for no tracks -->
@@ -119,8 +121,10 @@
           :boost-badge-color="boostBadgeColor"
           :request-badge-color="requestBadgeColor"
           :adding-items="addingItems"
+          :is-expanded="expandedResultItemId === `${item.media_type}-${item.item_id}`"
           @add-to-queue="addToQueue"
           @select-artist="selectArtist"
+          @toggle-expand="toggleExpandedResult"
         />
       </div>
     </div>
@@ -276,6 +280,12 @@ const {
 const addingItems = ref(new Set<string>());
 const skippingSong = ref(false);
 const boostingQueueItemId = ref("");
+const expandedResultItemId = ref("");
+
+const toggleExpandedResult = (itemId: string) => {
+  expandedResultItemId.value =
+    expandedResultItemId.value === itemId ? "" : itemId;
+};
 const queueSectionRef = ref<InstanceType<typeof PartyModeQueueSection> | null>(
   null,
 );
@@ -387,14 +397,10 @@ const boostQueueItem = async (item: QueueItem) => {
     }
   }
 
-  const uri = item.media_item?.uri;
-  if (!uri) return;
-
   boostingQueueItemId.value = item.queue_item_id;
   try {
-    const result = (await api.sendCommand("party_mode/add_to_queue", {
-      uri,
-      boost: true,
+    const result = (await api.sendCommand("party_mode/boost_queue_item", {
+      queue_item_id: item.queue_item_id,
     })) as { success: boolean };
 
     if (!result.success) {

From 1fdbbfb8db798bb0733a9ce50a7ab1de7b122cb9 Mon Sep 17 00:00:00 2001
From: apophisnow <karlmohler@gmail.com>
Date: Sat, 7 Mar 2026 12:19:50 -0800
Subject: [PATCH 06/15] fix: Some visual and wording changes

---
 src/components/party-mode/PartyModeQR.vue     | 29 +++++++++++++++----
 .../party-mode/PartyModeResultItem.vue        |  2 +-
 src/translations/en.json                      |  2 +-
 src/views/PartyModeGuestView.vue              |  8 +++--
 4 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/src/components/party-mode/PartyModeQR.vue b/src/components/party-mode/PartyModeQR.vue
index 166a658f3..fb5e4acf3 100644
--- a/src/components/party-mode/PartyModeQR.vue
+++ b/src/components/party-mode/PartyModeQR.vue
@@ -4,8 +4,8 @@
       <Spinner class="size-12" />
     </div>
     <div v-else-if="!guestAccessEnabled" class="qr-disabled">
-      <QrCode :size="64" />
-      <p>{{ $t("providers.party_mode.guest_access_disabled") }}</p>
+      <QrCode class="qr-disabled-icon" />
+      <p class="qr-disabled-title">{{ $t("providers.party_mode.guest_access_disabled") }}</p>
       <p class="qr-hint">{{ $t("providers.party_mode.enable_in_settings") }}</p>
     </div>
     <div v-else-if="qrCodeUrl" class="qr-display">
@@ -249,13 +249,32 @@ onUnmounted(() => {
 }
 
 .qr-disabled {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
   text-align: center;
+  padding: 3rem;
+}
+
+.qr-disabled-icon {
+  width: clamp(64px, 10vw, 120px);
+  height: clamp(64px, 10vw, 120px);
   opacity: 0.5;
+  margin-bottom: 1.5rem;
 }
 
-.qr-disabled p {
-  margin-top: 0.5rem;
-  color: rgba(255, 255, 255, 0.5);
+.qr-disabled-title {
+  font-size: 2rem;
+  font-weight: 600;
+  margin-bottom: 1rem;
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.qr-disabled .qr-hint {
+  font-size: 1.25rem;
+  color: rgba(255, 255, 255, 0.7);
+  max-width: 500px;
 }
 
 .qr-error {
diff --git a/src/components/party-mode/PartyModeResultItem.vue b/src/components/party-mode/PartyModeResultItem.vue
index da3a18f61..e805b1bf0 100644
--- a/src/components/party-mode/PartyModeResultItem.vue
+++ b/src/components/party-mode/PartyModeResultItem.vue
@@ -50,7 +50,7 @@
           @click.stop="$emit('addToQueue', item, 'end')"
         >
           <v-icon start>mdi-playlist-plus</v-icon>
-          {{ $t("providers.party_mode.add") }}
+          {{ $t("providers.party_mode.request") }}
         </v-btn>
       </div>
     </template>
diff --git a/src/translations/en.json b/src/translations/en.json
index 66ab1d4a4..2bcd533ae 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -288,7 +288,7 @@
             "add": "Add",
             "boost": "Boost",
             "check_network": "Check your network settings",
-            "enable_in_settings": "Enable in party mode plugin settings",
+            "enable_in_settings": "Enable in party mode provider settings",
             "get_started": "Play some music to get the party started!",
             "guest_access_disabled": "Guest Access Disabled",
             "no_player_access": "Player Not Accessible",
diff --git a/src/views/PartyModeGuestView.vue b/src/views/PartyModeGuestView.vue
index 4f05d58b6..913ef7398 100644
--- a/src/views/PartyModeGuestView.vue
+++ b/src/views/PartyModeGuestView.vue
@@ -65,7 +65,9 @@
           :boost-badge-color="boostBadgeColor"
           :request-badge-color="requestBadgeColor"
           :adding-items="addingItems"
-          :is-expanded="expandedResultItemId === `${track.media_type}-${track.item_id}`"
+          :is-expanded="
+            expandedResultItemId === `${track.media_type}-${track.item_id}`
+          "
           @add-to-queue="addToQueue"
           @toggle-expand="toggleExpandedResult"
         />
@@ -121,7 +123,9 @@
           :boost-badge-color="boostBadgeColor"
           :request-badge-color="requestBadgeColor"
           :adding-items="addingItems"
-          :is-expanded="expandedResultItemId === `${item.media_type}-${item.item_id}`"
+          :is-expanded="
+            expandedResultItemId === `${item.media_type}-${item.item_id}`
+          "
           @add-to-queue="addToQueue"
           @select-artist="selectArtist"
           @toggle-expand="toggleExpandedResult"

From 9608f45e7d4aa25fc6d638d7d37a83eb1e086222 Mon Sep 17 00:00:00 2001
From: apophisnow <karlmohler@gmail.com>
Date: Sat, 7 Mar 2026 14:22:14 -0800
Subject: [PATCH 07/15] fix: Allow enter to initiate search

---
 src/components/party-mode/PartyModeQR.vue        | 4 +++-
 src/components/party-mode/PartyModeSearchBar.vue | 2 ++
 src/views/PartyModeGuestView.vue                 | 2 ++
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/party-mode/PartyModeQR.vue b/src/components/party-mode/PartyModeQR.vue
index fb5e4acf3..20842e847 100644
--- a/src/components/party-mode/PartyModeQR.vue
+++ b/src/components/party-mode/PartyModeQR.vue
@@ -5,7 +5,9 @@
     </div>
     <div v-else-if="!guestAccessEnabled" class="qr-disabled">
       <QrCode class="qr-disabled-icon" />
-      <p class="qr-disabled-title">{{ $t("providers.party_mode.guest_access_disabled") }}</p>
+      <p class="qr-disabled-title">
+        {{ $t("providers.party_mode.guest_access_disabled") }}
+      </p>
       <p class="qr-hint">{{ $t("providers.party_mode.enable_in_settings") }}</p>
     </div>
     <div v-else-if="qrCodeUrl" class="qr-display">
diff --git a/src/components/party-mode/PartyModeSearchBar.vue b/src/components/party-mode/PartyModeSearchBar.vue
index 12ab796eb..8c0486d02 100644
--- a/src/components/party-mode/PartyModeSearchBar.vue
+++ b/src/components/party-mode/PartyModeSearchBar.vue
@@ -26,6 +26,7 @@
       class="search-input"
       @update:model-value="$emit('update:searchQuery', $event)"
       @click:clear="$emit('clear')"
+      @keydown.enter="$emit('submit')"
     />
 
     <div class="filter-toggle">
@@ -76,6 +77,7 @@ defineEmits<{
   "update:searchFilter": [value: string];
   clear: [];
   back: [];
+  submit: [];
 }>();
 </script>
 
diff --git a/src/views/PartyModeGuestView.vue b/src/views/PartyModeGuestView.vue
index 913ef7398..1c9c06379 100644
--- a/src/views/PartyModeGuestView.vue
+++ b/src/views/PartyModeGuestView.vue
@@ -8,6 +8,7 @@
       :show-back="hasSearched || !!selectedArtist"
       @clear="clearSearch"
       @back="goBack"
+      @submit="performSearch"
     />
 
     <!-- Artist Tracks View (when drilling into an artist) -->
@@ -274,6 +275,7 @@ const {
   loadingArtistTracks,
   displayedResults,
   resultsListRef,
+  performSearch,
   clearSearch,
   selectArtist,
   clearArtistSelection,

From f27905e8f03b739bc6250ed15be2a8e4db38fcaf Mon Sep 17 00:00:00 2001
From: apophisnow <karlmohler@gmail.com>
Date: Sun, 8 Mar 2026 12:15:55 -0700
Subject: [PATCH 08/15] fix: QR does not need to be clickable

---
 src/components/party-mode/PartyModeQR.vue | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/src/components/party-mode/PartyModeQR.vue b/src/components/party-mode/PartyModeQR.vue
index 20842e847..8698bf7e8 100644
--- a/src/components/party-mode/PartyModeQR.vue
+++ b/src/components/party-mode/PartyModeQR.vue
@@ -11,14 +11,7 @@
       <p class="qr-hint">{{ $t("providers.party_mode.enable_in_settings") }}</p>
     </div>
     <div v-else-if="qrCodeUrl" class="qr-display">
-      <a
-        :href="qrCodeUrl"
-        target="_blank"
-        rel="noopener noreferrer"
-        class="qr-link"
-      >
-        <canvas ref="qrCanvas"></canvas>
-      </a>
+      <canvas ref="qrCanvas"></canvas>
       <p v-if="instructionText" class="qr-instructions text-h4">
         {{ instructionText }}
       </p>

From 6d43be3c9ee92dc93bf513ff2776d618b1324837 Mon Sep 17 00:00:00 2001
From: apophisnow <karlmohler@gmail.com>
Date: Sun, 8 Mar 2026 15:24:58 -0700
Subject: [PATCH 09/15] fix: QR code click-to-copy and remove admin-only
 remote_access/info call

- Make QR code clickable to copy the party URL to clipboard with an
  animated overlay bubble for feedback
- Remove checkRemoteAccessStatus() which called the admin-only
  remote_access/info endpoint, causing "Admin access required" errors
  for regular users on the jukebox dashboard
- Add link_copied translation key

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/party-mode/PartyModeQR.vue | 91 +++++++++++++++--------
 src/translations/en.json                  |  1 +
 2 files changed, 63 insertions(+), 29 deletions(-)

diff --git a/src/components/party-mode/PartyModeQR.vue b/src/components/party-mode/PartyModeQR.vue
index 8698bf7e8..b8e8f8361 100644
--- a/src/components/party-mode/PartyModeQR.vue
+++ b/src/components/party-mode/PartyModeQR.vue
@@ -11,7 +11,15 @@
       <p class="qr-hint">{{ $t("providers.party_mode.enable_in_settings") }}</p>
     </div>
     <div v-else-if="qrCodeUrl" class="qr-display">
-      <canvas ref="qrCanvas"></canvas>
+      <div class="qr-link" @click="copyUrlToClipboard">
+        <canvas ref="qrCanvas"></canvas>
+        <Transition name="copy-toast">
+          <div v-if="copyFeedback" class="copy-bubble">
+            <Check :size="16" />
+            {{ copyFeedback }}
+          </div>
+        </Transition>
+      </div>
       <p v-if="instructionText" class="qr-instructions text-h4">
         {{ instructionText }}
       </p>
@@ -28,9 +36,10 @@
 import { Spinner } from "@/components/ui/spinner";
 import { usePartyModeConfig } from "@/composables/usePartyModeConfig";
 import api from "@/plugins/api";
-import { EventType, RemoteAccessInfo } from "@/plugins/api/interfaces";
+import { EventType } from "@/plugins/api/interfaces";
 import { $t } from "@/plugins/i18n";
-import { AlertCircle, QrCode } from "lucide-vue-next";
+import { copyToClipboard } from "@/helpers/utils";
+import { AlertCircle, Check, QrCode } from "lucide-vue-next";
 import QRCode from "qrcode";
 import { onMounted, onUnmounted, ref, watch } from "vue";
 
@@ -40,8 +49,8 @@ const qrCodeUrl = ref<string>("");
 const guestAccessEnabled = ref<boolean>(false);
 const loading = ref(true);
 const qrSize = ref(320);
+const copyFeedback = ref<string>("");
 const instructionText = ref($t("providers.party_mode.scan_to_join"));
-const lastRemoteAccessEnabled = ref<boolean | null>(null);
 const { config: partyConfig, fetchConfig: fetchPartyConfig } =
   usePartyModeConfig();
 let unsubscribe: (() => void) | null = null;
@@ -57,26 +66,6 @@ const calculateQRSize = () => {
   return Math.max(160, Math.min(1024, availableSize));
 };
 
-const checkRemoteAccessStatus = async () => {
-  try {
-    const info = (await api.sendCommand(
-      "remote_access/info",
-    )) as RemoteAccessInfo;
-    const currentEnabled = info.enabled;
-
-    // If remote access status changed, regenerate QR code
-    if (
-      lastRemoteAccessEnabled.value !== null &&
-      lastRemoteAccessEnabled.value !== currentEnabled
-    ) {
-      await generateQRCode();
-    }
-    lastRemoteAccessEnabled.value = currentEnabled;
-  } catch {
-    // Ignore errors - remote_access/info may not be available
-  }
-};
-
 const fetchQrConfig = async () => {
   const config = await fetchPartyConfig();
   if (config) {
@@ -91,6 +80,17 @@ const fetchQrConfig = async () => {
   }
 };
 
+const copyUrlToClipboard = async () => {
+  if (!qrCodeUrl.value) return;
+  const success = await copyToClipboard(qrCodeUrl.value);
+  copyFeedback.value = success
+    ? $t("providers.party_mode.link_copied")
+    : qrCodeUrl.value;
+  setTimeout(() => {
+    copyFeedback.value = "";
+  }, 2000);
+};
+
 const renderQRToCanvas = async () => {
   if (!qrCanvas.value || !qrCodeUrl.value) return;
   qrSize.value = calculateQRSize();
@@ -154,9 +154,6 @@ onMounted(async () => {
   await fetchQrConfig();
   await generateQRCode();
 
-  // Initialize remote access status tracking
-  await checkRemoteAccessStatus();
-
   // Set up ResizeObserver to regenerate QR code when container size changes
   if (qrContainer.value) {
     resizeObserver = new ResizeObserver(() => {
@@ -173,8 +170,6 @@ onMounted(async () => {
   // Subscribe to PROVIDERS_UPDATED to detect when party_mode or remote_access
   // provider is reloaded. Config refresh is handled by the composable automatically.
   unsubscribe = api.subscribe(EventType.PROVIDERS_UPDATED, async () => {
-    await checkRemoteAccessStatus();
-
     const hasPartyMode = Object.values(api.providers).some(
       (p) => p.domain === "party_mode",
     );
@@ -217,6 +212,7 @@ onUnmounted(() => {
 }
 
 .qr-link {
+  position: relative;
   display: block;
   cursor: pointer;
   transition:
@@ -229,6 +225,43 @@ onUnmounted(() => {
   opacity: 0.9;
 }
 
+.copy-bubble {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 16px;
+  background: rgba(0, 0, 0, 0.85);
+  color: #4ade80;
+  font-size: 0.9rem;
+  font-weight: 600;
+  border-radius: 8px;
+  white-space: nowrap;
+  pointer-events: none;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+}
+
+.copy-toast-enter-active {
+  transition: all 0.2s ease-out;
+}
+
+.copy-toast-leave-active {
+  transition: all 0.3s ease-in;
+}
+
+.copy-toast-enter-from {
+  opacity: 0;
+  transform: translate(-50%, -50%) scale(0.8);
+}
+
+.copy-toast-leave-to {
+  opacity: 0;
+  transform: translate(-50%, -50%) scale(0.8);
+}
+
 .qr-display canvas {
   display: block;
   border-radius: 8px;
diff --git a/src/translations/en.json b/src/translations/en.json
index 2bcd533ae..d3c5ce9fb 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -296,6 +296,7 @@
             "nothing_playing": "Nothing Playing Right Now",
             "qr_failed": "Failed to generate QR code",
             "request": "Request",
+            "link_copied": "Link copied!",
             "scan_to_join": "Scan to join!"
         }
     },

From dea03fe7ab61cc6c6c4b3ada25b4bf69685b62c0 Mon Sep 17 00:00:00 2001
From: apophisnow <karlmohler@gmail.com>
Date: Mon, 9 Mar 2026 10:16:52 -0700
Subject: [PATCH 10/15] fix: Refresh when remote access changed

---
 src/views/PartyModeDashboardView.vue | 36 +++++++++++++++++-----------
 src/views/PartyModeGuestView.vue     | 34 ++++++++++++++++----------
 2 files changed, 43 insertions(+), 27 deletions(-)

diff --git a/src/views/PartyModeDashboardView.vue b/src/views/PartyModeDashboardView.vue
index e765ce8cd..b410cc261 100644
--- a/src/views/PartyModeDashboardView.vue
+++ b/src/views/PartyModeDashboardView.vue
@@ -89,6 +89,20 @@ const theme = useTheme();
 const route = useRoute();
 const { config: partyConfig, fetchConfig } = usePartyModeConfig();
 
+const refreshPartyPlayer = async () => {
+  const partyPlayerId = await api.sendCommand<string | null>(
+    "party_mode/player",
+  );
+  if (partyPlayerId) {
+    store.activePlayerId = partyPlayerId;
+    if (!api.players[partyPlayerId]) {
+      accessError.value = "no_access";
+    } else {
+      accessError.value = "";
+    }
+  }
+};
+
 const albumArtBackgroundEnabled = ref(true); // Default to true
 const showPlayerControls = ref(false); // Whether footer player controls are shown
 const accessError = ref("");
@@ -366,19 +380,7 @@ onMounted(async () => {
 
   // Set active player from party mode config (needed when opened in a new tab
   // where the Default layout's player selection logic doesn't run)
-  const partyPlayerId = await api.sendCommand<string | null>(
-    "party_mode/player",
-  );
-  if (partyPlayerId) {
-    if (!store.activePlayerId) {
-      store.activePlayerId = partyPlayerId;
-    }
-    // Check if the configured player is accessible to this user
-    if (!api.players[partyPlayerId]) {
-      accessError.value = "no_access";
-      return;
-    }
-  }
+  await refreshPartyPlayer();
 
   // Fetch party mode configuration via shared composable
   const config = await fetchConfig();
@@ -417,7 +419,13 @@ onMounted(async () => {
     fetchQueueItems();
   });
 
-  unsubscribeFunctions.value = [unsub1, unsub2];
+  // Subscribe to provider updates to detect party mode player config changes
+  const unsub3 = api.subscribe(EventType.PROVIDERS_UPDATED, async () => {
+    await refreshPartyPlayer();
+    fetchQueueItems(true);
+  });
+
+  unsubscribeFunctions.value = [unsub1, unsub2, unsub3];
 });
 
 // Cleanup when leaving the party view
diff --git a/src/views/PartyModeGuestView.vue b/src/views/PartyModeGuestView.vue
index 1c9c06379..769f79815 100644
--- a/src/views/PartyModeGuestView.vue
+++ b/src/views/PartyModeGuestView.vue
@@ -187,6 +187,7 @@ import api from "@/plugins/api";
 import { store } from "@/plugins/store";
 import {
   type Artist,
+  EventType,
   PlaybackState,
   type QueueItem,
   type Track,
@@ -470,6 +471,17 @@ watch(partyConfig, (newConfig) => {
 // --- Lifecycle ---
 let cleanupCountdown: (() => void) | null = null;
 let cleanupQueueEvents: (() => void) | null = null;
+let cleanupProvidersSub: (() => void) | null = null;
+
+const refreshPartyPlayer = async () => {
+  const partyPlayerId = await api.sendCommand<string | null>(
+    "party_mode/player",
+  );
+  partyModeQueueId.value = partyPlayerId;
+  if (partyPlayerId) {
+    store.activePlayerId = partyPlayerId;
+  }
+};
 
 const fetchAndApplyConfig = async () => {
   const config = await fetchConfig();
@@ -487,31 +499,27 @@ onMounted(async () => {
   cleanupCountdown = rateLimit.startCountdown();
 
   try {
-    const partyPlayerId = await api.sendCommand<string | null>(
-      "party_mode/player",
-    );
-    partyModeQueueId.value = partyPlayerId;
-    if (partyPlayerId && !store.activePlayerId) {
-      store.activePlayerId = partyPlayerId;
-    }
-    console.debug("[GuestView] partyPlayerId:", partyPlayerId);
-    console.debug("[GuestView] store.activePlayerId:", store.activePlayerId);
-    console.debug("[GuestView] store.activePlayer:", store.activePlayer);
-    console.debug("[GuestView] api.players keys:", Object.keys(api.players));
-    console.debug("[GuestView] api.queues keys:", Object.keys(api.queues));
-    console.debug("[GuestView] queue state:", queue.currentQueue.value?.state);
+    await refreshPartyPlayer();
   } catch (error) {
     console.error("Failed to fetch party mode player:", error);
   }
 
   fetchQueueItems();
   cleanupQueueEvents = queue.subscribeToEvents();
+
+  // Re-fetch player when party mode config changes
+  const unsubProviders = api.subscribe(EventType.PROVIDERS_UPDATED, async () => {
+    await refreshPartyPlayer();
+    fetchQueueItems(true);
+  });
+  cleanupProvidersSub = unsubProviders;
 });
 
 onBeforeUnmount(() => {
   window.removeEventListener("popstate", handleBack);
   cleanupQueueEvents?.();
   cleanupCountdown?.();
+  cleanupProvidersSub?.();
   search.cleanup();
 });
 </script>

From b52f922c6d8dc82e9d963af5738aa4120468f52e Mon Sep 17 00:00:00 2001
From: apophisnow <karlmohler@gmail.com>
Date: Mon, 9 Mar 2026 10:18:06 -0700
Subject: [PATCH 11/15] chore: formatting

---
 src/views/PartyModeGuestView.vue | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/views/PartyModeGuestView.vue b/src/views/PartyModeGuestView.vue
index 769f79815..dad7af3cc 100644
--- a/src/views/PartyModeGuestView.vue
+++ b/src/views/PartyModeGuestView.vue
@@ -508,10 +508,13 @@ onMounted(async () => {
   cleanupQueueEvents = queue.subscribeToEvents();
 
   // Re-fetch player when party mode config changes
-  const unsubProviders = api.subscribe(EventType.PROVIDERS_UPDATED, async () => {
-    await refreshPartyPlayer();
-    fetchQueueItems(true);
-  });
+  const unsubProviders = api.subscribe(
+    EventType.PROVIDERS_UPDATED,
+    async () => {
+      await refreshPartyPlayer();
+      fetchQueueItems(true);
+    },
+  );
   cleanupProvidersSub = unsubProviders;
 });
 

From 001f31c74083fea0c9de2fa09eaa5e1643ac979c Mon Sep 17 00:00:00 2001
From: apophisnow <karlmohler@gmail.com>
Date: Mon, 9 Mar 2026 10:51:08 -0700
Subject: [PATCH 12/15] fix: Review fixes for copy feedback, cursor styling,
 and boost token timing

- Use translation keys for copy-to-clipboard feedback instead of raw URL
- Use theme CSS variables for copy bubble colors instead of hardcoded values
- Scope cursor:pointer to track items only in search results
- Consume boost token only after successful server response

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/party-mode/PartyModeQR.vue      |  8 ++++----
 .../party-mode/PartyModeResultItem.vue         | 10 ++++++++--
 src/translations/en.json                       |  3 ++-
 src/views/PartyModeGuestView.vue               | 18 ++++++++++--------
 4 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/src/components/party-mode/PartyModeQR.vue b/src/components/party-mode/PartyModeQR.vue
index b8e8f8361..50ead660b 100644
--- a/src/components/party-mode/PartyModeQR.vue
+++ b/src/components/party-mode/PartyModeQR.vue
@@ -84,8 +84,8 @@ const copyUrlToClipboard = async () => {
   if (!qrCodeUrl.value) return;
   const success = await copyToClipboard(qrCodeUrl.value);
   copyFeedback.value = success
-    ? $t("providers.party_mode.link_copied")
-    : qrCodeUrl.value;
+    ? $t("providers.party_mode.link_copy_success")
+    : $t("providers.party_mode.link_copy_fail");
   setTimeout(() => {
     copyFeedback.value = "";
   }, 2000);
@@ -234,8 +234,8 @@ onUnmounted(() => {
   align-items: center;
   gap: 6px;
   padding: 8px 16px;
-  background: rgba(0, 0, 0, 0.85);
-  color: #4ade80;
+  background: rgba(var(--v-theme-surface), 0.9);
+  color: rgb(var(--v-theme-success));
   font-size: 0.9rem;
   font-weight: 600;
   border-radius: 8px;
diff --git a/src/components/party-mode/PartyModeResultItem.vue b/src/components/party-mode/PartyModeResultItem.vue
index e805b1bf0..728b2edad 100644
--- a/src/components/party-mode/PartyModeResultItem.vue
+++ b/src/components/party-mode/PartyModeResultItem.vue
@@ -1,7 +1,10 @@
 <template>
   <div
     class="result-item"
-    :class="{ 'result-item--expanded': isExpanded }"
+    :class="{
+      'result-item--expanded': isExpanded,
+      'result-item--clickable': item.media_type === 'track',
+    }"
     @click="onItemClick"
   >
     <div class="result-info">
@@ -130,10 +133,13 @@ const artistName = computed(() => {
   background: rgba(var(--v-theme-surface-variant), 0.07);
   border-radius: 12px;
   min-height: 72px;
-  cursor: pointer;
   transition: background 0.2s ease;
 }
 
+.result-item--clickable {
+  cursor: pointer;
+}
+
 .result-item--expanded {
   background: rgba(var(--v-theme-primary), 0.1);
 }
diff --git a/src/translations/en.json b/src/translations/en.json
index d3c5ce9fb..aa8121dd2 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -296,7 +296,8 @@
             "nothing_playing": "Nothing Playing Right Now",
             "qr_failed": "Failed to generate QR code",
             "request": "Request",
-            "link_copied": "Link copied!",
+            "link_copy_fail": "Failed to copy link",
+            "link_copy_success": "Link copied!",
             "scan_to_join": "Scan to join!"
         }
     },
diff --git a/src/views/PartyModeGuestView.vue b/src/views/PartyModeGuestView.vue
index dad7af3cc..3a76b4850 100644
--- a/src/views/PartyModeGuestView.vue
+++ b/src/views/PartyModeGuestView.vue
@@ -394,14 +394,12 @@ const boostQueueItem = async (item: QueueItem) => {
     return;
   }
 
-  if (rateLimitingEnabled.value) {
-    if (!consumeBoostToken()) {
-      const minutesUntilNext = getTimeUntilNextToken();
-      toast.warning(
-        $t("providers.party_mode.boost_limit_reached", [minutesUntilNext]),
-      );
-      return;
-    }
+  if (rateLimitingEnabled.value && boostTokens.value <= 0) {
+    const minutesUntilNext = getTimeUntilNextToken();
+    toast.warning(
+      $t("providers.party_mode.boost_limit_reached", [minutesUntilNext]),
+    );
+    return;
   }
 
   boostingQueueItemId.value = item.queue_item_id;
@@ -414,6 +412,10 @@ const boostQueueItem = async (item: QueueItem) => {
       throw new Error("Server rejected the request");
     }
 
+    if (rateLimitingEnabled.value) {
+      consumeBoostToken();
+    }
+
     const name = item.media_item?.name || item.name;
     toast.success($t("providers.party_mode.guest_page.item_boosted", [name]));
   } catch (error) {

From 99c82d506e5fd552de95089664ad1a2d4240dcfb Mon Sep 17 00:00:00 2001
From: apophisnow <karlmohler@gmail.com>
Date: Tue, 10 Mar 2026 08:55:57 -0700
Subject: [PATCH 13/15] Subscribe to CORE_STATE_UPDATED for remote access
 changes in party mode

Party mode QR and config composable now listen to CORE_STATE_UPDATED
to detect remote access toggles, keeping PROVIDERS_UPDATED for
provider load/unload detection.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/party-mode/PartyModeQR.vue | 48 +++++++++++++++++------
 src/composables/usePartyModeConfig.ts     | 18 ++++++++-
 2 files changed, 51 insertions(+), 15 deletions(-)

diff --git a/src/components/party-mode/PartyModeQR.vue b/src/components/party-mode/PartyModeQR.vue
index 50ead660b..86f95488a 100644
--- a/src/components/party-mode/PartyModeQR.vue
+++ b/src/components/party-mode/PartyModeQR.vue
@@ -167,19 +167,41 @@ onMounted(async () => {
     resizeObserver.observe(qrContainer.value);
   }
 
-  // Subscribe to PROVIDERS_UPDATED to detect when party_mode or remote_access
-  // provider is reloaded. Config refresh is handled by the composable automatically.
-  unsubscribe = api.subscribe(EventType.PROVIDERS_UPDATED, async () => {
-    const hasPartyMode = Object.values(api.providers).some(
-      (p) => p.domain === "party_mode",
-    );
-    if (hasPartyMode) {
-      await generateQRCode();
-    } else {
-      guestAccessEnabled.value = false;
-      qrCodeUrl.value = "";
-    }
-  });
+  // Subscribe to PROVIDERS_UPDATED to detect when party_mode provider is
+  // loaded/unloaded. Config refresh is handled by the composable automatically.
+  const unsubProviders = api.subscribe(
+    EventType.PROVIDERS_UPDATED,
+    async () => {
+      const hasPartyMode = Object.values(api.providers).some(
+        (p) => p.domain === "party_mode",
+      );
+      if (hasPartyMode) {
+        await generateQRCode();
+      } else {
+        guestAccessEnabled.value = false;
+        qrCodeUrl.value = "";
+      }
+    },
+  );
+
+  // Subscribe to CORE_STATE_UPDATED to detect when remote access is toggled,
+  // which changes the party mode join URL between local and remote.
+  const unsubCoreState = api.subscribe(
+    EventType.CORE_STATE_UPDATED,
+    async () => {
+      const hasPartyMode = Object.values(api.providers).some(
+        (p) => p.domain === "party_mode",
+      );
+      if (hasPartyMode) {
+        await generateQRCode();
+      }
+    },
+  );
+
+  unsubscribe = () => {
+    unsubProviders();
+    unsubCoreState();
+  };
 });
 
 onUnmounted(() => {
diff --git a/src/composables/usePartyModeConfig.ts b/src/composables/usePartyModeConfig.ts
index c7c5966de..c158488e6 100644
--- a/src/composables/usePartyModeConfig.ts
+++ b/src/composables/usePartyModeConfig.ts
@@ -62,12 +62,14 @@ function invalidate() {
 let subscribed = false;
 
 /**
- * Subscribe to PROVIDERS_UPDATED so the shared config ref
- * auto-refreshes whenever the party_mode provider is reloaded.
+ * Subscribe to PROVIDERS_UPDATED and CORE_STATE_UPDATED so the shared
+ * config ref auto-refreshes whenever the party_mode provider is reloaded
+ * or remote access is toggled.
  */
 function ensureSubscribed() {
   if (subscribed) return;
   subscribed = true;
+
   api.subscribe(EventType.PROVIDERS_UPDATED, async () => {
     const hasPartyMode = Object.values(api.providers).some(
       (p) => p.domain === "party_mode",
@@ -80,6 +82,18 @@ function ensureSubscribed() {
       loaded.value = true;
     }
   });
+
+  // Remote access toggle fires CORE_STATE_UPDATED; refresh config so the
+  // join URL switches between local and remote.
+  api.subscribe(EventType.CORE_STATE_UPDATED, async () => {
+    const hasPartyMode = Object.values(api.providers).some(
+      (p) => p.domain === "party_mode",
+    );
+    if (hasPartyMode) {
+      invalidate();
+      await fetchConfig(true);
+    }
+  });
 }
 
 export function usePartyModeConfig() {

From 5d321ef0cae04c834904a2d06a3a800a44613de6 Mon Sep 17 00:00:00 2001
From: apophisnow <karlmohler@gmail.com>
Date: Tue, 10 Mar 2026 12:16:10 -0700
Subject: [PATCH 14/15] Address PR review feedback: consume tokens on success,
 remove debug watches

- Align token consumption strategy to always consume after successful
  server response (addToQueue, boostQueueItem, skipCurrentSong)
- Remove leftover debug watch statements in PartyModeGuestView
- Clear accessError at top of refreshPartyPlayer to avoid duplication

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/views/PartyModeDashboardView.vue |  3 +-
 src/views/PartyModeGuestView.vue     | 83 ++++++++++++----------------
 2 files changed, 36 insertions(+), 50 deletions(-)

diff --git a/src/views/PartyModeDashboardView.vue b/src/views/PartyModeDashboardView.vue
index b410cc261..73cecfd21 100644
--- a/src/views/PartyModeDashboardView.vue
+++ b/src/views/PartyModeDashboardView.vue
@@ -93,12 +93,11 @@ const refreshPartyPlayer = async () => {
   const partyPlayerId = await api.sendCommand<string | null>(
     "party_mode/player",
   );
+  accessError.value = "";
   if (partyPlayerId) {
     store.activePlayerId = partyPlayerId;
     if (!api.players[partyPlayerId]) {
       accessError.value = "no_access";
-    } else {
-      accessError.value = "";
     }
   }
 };
diff --git a/src/views/PartyModeGuestView.vue b/src/views/PartyModeGuestView.vue
index 3a76b4850..e16b06a5b 100644
--- a/src/views/PartyModeGuestView.vue
+++ b/src/views/PartyModeGuestView.vue
@@ -244,26 +244,6 @@ const isPlaying = computed(
   () => store.activePlayer?.playback_state === PlaybackState.PLAYING,
 );
 
-watch(isPlaying, (val) => {
-  console.debug("[GuestView] isPlaying changed:", val);
-  console.debug("[GuestView] activePlayer:", store.activePlayer?.player_id);
-  console.debug(
-    "[GuestView] playback_state:",
-    store.activePlayer?.playback_state,
-  );
-});
-
-watch(
-  () => store.activePlayer,
-  (player) => {
-    console.debug(
-      "[GuestView] activePlayer changed:",
-      player?.player_id,
-      player?.playback_state,
-    );
-  },
-);
-
 const search = useGuestSearch();
 const {
   searchQuery,
@@ -339,24 +319,21 @@ const addToQueue = async (item: Track | Artist, position: "next" | "end") => {
   }
 
   if (rateLimitingEnabled.value) {
-    if (position === "next") {
-      if (!consumeBoostToken()) {
-        const minutesUntilNext = getTimeUntilNextToken();
-        toast.warning(
-          $t("providers.party_mode.boost_limit_reached", [minutesUntilNext]),
-        );
-        return;
-      }
-    } else {
-      if (!consumeAddQueueToken()) {
-        const minutesUntilNext = getTimeUntilNextAddQueueToken();
-        toast.warning(
-          $t("providers.party_mode.add_queue_limit_reached", [
-            minutesUntilNext,
-          ]),
-        );
-        return;
-      }
+    if (position === "next" && boostTokens.value <= 0) {
+      const minutesUntilNext = getTimeUntilNextToken();
+      toast.warning(
+        $t("providers.party_mode.boost_limit_reached", [minutesUntilNext]),
+      );
+      return;
+    }
+    if (position === "end" && addQueueTokens.value <= 0) {
+      const minutesUntilNext = getTimeUntilNextAddQueueToken();
+      toast.warning(
+        $t("providers.party_mode.add_queue_limit_reached", [
+          minutesUntilNext,
+        ]),
+      );
+      return;
     }
   }
 
@@ -373,6 +350,14 @@ const addToQueue = async (item: Track | Artist, position: "next" | "end") => {
       throw new Error("Server rejected the request");
     }
 
+    if (rateLimitingEnabled.value) {
+      if (position === "next") {
+        consumeBoostToken();
+      } else {
+        consumeAddQueueToken();
+      }
+    }
+
     const message =
       position === "next"
         ? $t("providers.party_mode.guest_page.item_boosted", [item.name])
@@ -432,16 +417,14 @@ const skipCurrentSong = async () => {
     return;
   }
 
-  if (rateLimitingEnabled.value) {
-    if (!consumeSkipSongToken()) {
-      const minutesUntilNext = getTimeUntilNextSkipToken();
-      toast.warning(
-        $t("providers.party_mode.guest_page.skip_limit_reached", [
-          minutesUntilNext,
-        ]),
-      );
-      return;
-    }
+  if (rateLimitingEnabled.value && skipSongTokens.value <= 0) {
+    const minutesUntilNext = getTimeUntilNextSkipToken();
+    toast.warning(
+      $t("providers.party_mode.guest_page.skip_limit_reached", [
+        minutesUntilNext,
+      ]),
+    );
+    return;
   }
 
   skippingSong.value = true;
@@ -454,6 +437,10 @@ const skipCurrentSong = async () => {
       throw new Error("Server rejected the request");
     }
 
+    if (rateLimitingEnabled.value) {
+      consumeSkipSongToken();
+    }
+
     toast.success($t("providers.party_mode.guest_page.song_skipped"));
   } catch (error) {
     console.error("Failed to skip song:", error);

From c3c7d354cc7336ead4f4493b8a1dac11fe98a9e7 Mon Sep 17 00:00:00 2001
From: apophisnow <karlmohler@gmail.com>
Date: Tue, 10 Mar 2026 12:17:06 -0700
Subject: [PATCH 15/15] Fix lint formatting issues

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/SendspinPlayer.vue                  |  5 ++++-
 src/layouts/default/PlayerOSD/PlayerFullscreen.vue | 11 +++++++----
 src/views/PartyModeGuestView.vue                   |  4 +---
 3 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/components/SendspinPlayer.vue b/src/components/SendspinPlayer.vue
index 4b3b33974..ed846a926 100644
--- a/src/components/SendspinPlayer.vue
+++ b/src/components/SendspinPlayer.vue
@@ -347,7 +347,10 @@ onMounted(() => {
       if (!shouldBePlaying || !audioRef.value) return;
 
       audioRef.value.play().catch((error) => {
-        console.warn("Sendspin: Failed to recover audio element playback:", error);
+        console.warn(
+          "Sendspin: Failed to recover audio element playback:",
+          error,
+        );
       });
     });
   }
diff --git a/src/layouts/default/PlayerOSD/PlayerFullscreen.vue b/src/layouts/default/PlayerOSD/PlayerFullscreen.vue
index a52418175..a21c1ede7 100644
--- a/src/layouts/default/PlayerOSD/PlayerFullscreen.vue
+++ b/src/layouts/default/PlayerOSD/PlayerFullscreen.vue
@@ -7,7 +7,10 @@
     z-index="9999"
     persistent
   >
-    <v-card class="fullscreen-player-card" :style="{ background: backgroundColor }">
+    <v-card
+      class="fullscreen-player-card"
+      :style="{ background: backgroundColor }"
+    >
       <v-toolbar class="v-toolbar-default" color="transparent">
         <template #prepend>
           <Button icon @click="store.showFullscreenPlayer = false">
@@ -127,7 +130,9 @@
 
             <!-- subtitle: album -->
             <v-card-subtitle
-              v-else-if="store.activePlayer?.current_media?.album && showAlbumSubtitle"
+              v-else-if="
+                store.activePlayer?.current_media?.album && showAlbumSubtitle
+              "
               :style="`font-size: ${subTitleFontSize};cursor:pointer;`"
               @click="onAlbumClick"
             >
@@ -1504,7 +1509,6 @@ watchEffect(() => {
 </script>
 
 <style scoped>
-
 .fullscreen-player-card {
   overflow: hidden;
   height: 100%;
@@ -1764,5 +1768,4 @@ button {
     padding: 8px 0;
   }
 }
-
 </style>
diff --git a/src/views/PartyModeGuestView.vue b/src/views/PartyModeGuestView.vue
index e16b06a5b..9f3fe6360 100644
--- a/src/views/PartyModeGuestView.vue
+++ b/src/views/PartyModeGuestView.vue
@@ -329,9 +329,7 @@ const addToQueue = async (item: Track | Artist, position: "next" | "end") => {
     if (position === "end" && addQueueTokens.value <= 0) {
       const minutesUntilNext = getTimeUntilNextAddQueueToken();
       toast.warning(
-        $t("providers.party_mode.add_queue_limit_reached", [
-          minutesUntilNext,
-        ]),
+        $t("providers.party_mode.add_queue_limit_reached", [minutesUntilNext]),
       );
       return;
     }