feat: replace speed cycle with popup dropdown, same style as quality selector

src/components/PlaybackBar.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch, onMounted } from 'vue'
+import { ref, watch, onMounted, onUnmounted } from 'vue'
 import { useI18n } from '@/composables/useI18n'
 import { useGameStore } from '@/stores/gameStore'
 
@@ -19,26 +19,55 @@ const emit = defineEmits<{
   speedChange: [rate: number]
 }>()
 
-const speedLabel = ref('1x')
+const speedLabel = ref('')
+const showSpeedMenu = ref(false)
+const speedOptions = [1, 2, 4]
 
 function updateLabel(rate: number) {
   speedLabel.value = rate + 'x'
 }
 
-function toggleSpeed() {
-  const next = props.currentSpeed === 1 ? 2 : props.currentSpeed === 2 ? 4 : 1
-  updateLabel(next)
-  emit('speedChange', next)
+function selectSpeed(rate: number) {
+  updateLabel(rate)
+  showSpeedMenu.value = false
+  emit('speedChange', rate)
+}
+
+function onDocClick(e: MouseEvent) {
+  const target = e.target as HTMLElement
+  if (!target.closest('.speed-wrapper')) {
+    showSpeedMenu.value = false
+  }
 }
 
 watch(() => props.currentSpeed, (v) => updateLabel(v))
-onMounted(() => updateLabel(props.currentSpeed))
+onMounted(() => {
+  updateLabel(props.currentSpeed)
+  document.addEventListener('click', onDocClick)
+})
+onUnmounted(() => document.removeEventListener('click', onDocClick))
 </script>
 
 <template>
   <div class="bottom-bar left" :class="{ hidden: !visible }" v-if="!hide">
     <button v-if="canSkip" class="bb-btn skip-btn" @click="emit('skip')">{{ t('ui.skip') }}</button>
-    <button class="bb-btn" @click="toggleSpeed">{{ speedLabel }}</button>
+
+    <div class="speed-wrapper">
+      <button class="bb-btn" @click.stop="showSpeedMenu = !showSpeedMenu">
+        {{ speedLabel }} ▾
+      </button>
+      <Transition name="speed-drop">
+        <div v-if="showSpeedMenu" class="speed-menu">
+          <button
+            v-for="rate in speedOptions"
+            :key="rate"
+            class="speed-option"
+            :class="{ active: props.currentSpeed === rate }"
+            @click.stop="selectSpeed(rate)"
+          >{{ rate }}x</button>
+        </div>
+      </Transition>
+    </div>
   </div>
 
   <div v-if="showQuality && !hide" class="bottom-bar right" :class="{ hidden: !visible }">
@@ -99,6 +128,44 @@ onMounted(() => updateLabel(props.currentSpeed))
   background: rgba(255, 152, 0, 0.15);
 }
 
+.speed-wrapper {
+  position: relative;
+}
+
+.speed-menu {
+  position: absolute;
+  bottom: calc(100% + 4px);
+  left: 0;
+  display: flex;
+  flex-direction: column;
+  background: rgba(20, 20, 30, 0.96);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 4px;
+  overflow: hidden;
+  min-width: 60px;
+}
+
+.speed-option {
+  padding: 6px 16px;
+  font-size: 12px;
+  color: #999;
+  background: none;
+  border: none;
+  cursor: pointer;
+  text-align: left;
+  white-space: nowrap;
+  transition: background 0.1s, color 0.1s;
+}
+
+.speed-option:hover {
+  background: rgba(255, 255, 255, 0.08);
+  color: #ddd;
+}
+
+.speed-option.active {
+  color: #c9a84c;
+}
+
 .bb-select {
   padding: 6px 10px;
   font-size: 12px;
@@ -109,4 +176,15 @@ onMounted(() => updateLabel(props.currentSpeed))
   cursor: pointer;
   outline: none;
 }
+
+.speed-drop-enter-active,
+.speed-drop-leave-active {
+  transition: all 0.15s ease;
+}
+
+.speed-drop-enter-from,
+.speed-drop-leave-to {
+  opacity: 0;
+  transform: translateY(4px);
+}
 </style>