fix: sync volume after external changes

frontend/src/components/PlayerPanel.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, toRef } from 'vue'
+import { computed, ref, toRef, watch } from 'vue'
 import {
   ExternalLink,
   Music4,
@@ -32,6 +32,13 @@ const loopMode = computed(() => loopModeOf(props.status))
 const draggedVolume = ref<number | null>(null)
 const volume = computed(() => draggedVolume.value ?? props.status?.volume ?? 100)
 
+watch(
+  () => props.status?.volume,
+  (next, previous) => {
+    if (next !== undefined && next !== previous) draggedVolume.value = null
+  },
+)
+
 const volumeIcon = computed(() => {
   if (volume.value === 0) return VolumeX
   if (volume.value < 35) return Volume