From 5041a4f3f777cd02ed2593a361012ebe9dea4b8d Mon Sep 17 00:00:00 2001
From: saopig1 <saopig@duck.com>
Date: Mon, 30 Mar 2026 01:02:42 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20address=20Phase=207=20review=20=E2=80=94?=
 =?UTF-8?q?=20move=20WS/theme=20init=20to=20App.vue,=20wire=20Queue=20comp?=
 =?UTF-8?q?onent?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 web/src/App.vue               | 10 +++++++++-
 web/src/components/Player.vue |  9 ++++++++-
 web/src/views/Home.vue        |  6 ------
 3 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/web/src/App.vue b/web/src/App.vue
index 6a188c8..63572b2 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -9,13 +9,21 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, onMounted } from 'vue';
 import { usePlayerStore } from './stores/player.js';
+import { useWebSocket } from './composables/useWebSocket.js';
 import Navbar from './components/Navbar.vue';
 import Player from './components/Player.vue';
 
 const playerStore = usePlayerStore();
 const theme = computed(() => playerStore.theme);
+const { connect } = useWebSocket();
+
+onMounted(() => {
+  playerStore.loadTheme();
+  connect();
+  playerStore.fetchBots();
+});
 </script>
 
 <style lang="scss">
diff --git a/web/src/components/Player.vue b/web/src/components/Player.vue
index 35d4ea1..9c84118 100644
--- a/web/src/components/Player.vue
+++ b/web/src/components/Player.vue
@@ -30,18 +30,25 @@
         @input="onVolumeChange"
         class="volume-slider"
       />
+      <button class="control-btn" @click="showQueue = !showQueue">
+        <Icon icon="mdi:playlist-music" />
+      </button>
       <RouterLink to="/lyrics" class="control-btn lyrics-btn">
         <Icon icon="mdi:microphone" />
       </RouterLink>
     </div>
+    <Queue :open="showQueue" @close="showQueue = false" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { Icon } from '@iconify/vue';
 import { usePlayerStore } from '../stores/player.js';
 import CoverArt from './CoverArt.vue';
+import Queue from './Queue.vue';
+
+const showQueue = ref(false);
 
 const store = usePlayerStore();
 const activeBot = computed(() => store.activeBot);
diff --git a/web/src/views/Home.vue b/web/src/views/Home.vue
index c78dfe9..c1720eb 100644
--- a/web/src/views/Home.vue
+++ b/web/src/views/Home.vue
@@ -54,11 +54,9 @@ import { ref, onMounted } from 'vue';
 import { Icon } from '@iconify/vue';
 import axios from 'axios';
 import { usePlayerStore } from '../stores/player.js';
-import { useWebSocket } from '../composables/useWebSocket.js';
 import CoverArt from '../components/CoverArt.vue';
 
 const store = usePlayerStore();
-const { connect } = useWebSocket();
 
 interface Playlist {
   id: string;
@@ -70,10 +68,6 @@ interface Playlist {
 const playlists = ref<Playlist[]>([]);
 
 onMounted(async () => {
-  store.loadTheme();
-  connect();
-  await store.fetchBots();
-
   try {
     const res = await axios.get('/api/music/recommend/playlists');
     playlists.value = res.data.playlists;