feat(nds): improve fullscreen button and add volume slider

app/components/Controls.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { useFullscreen } from "@vueuse/core";
+
+const app = useAppStore();
+
+const showFullscreenBtn = ref(true);
+const { isFullscreen, toggle: toggleFullscreen } = useFullscreen();
+
+const open = ref(false);
+
+onMounted(() => {
+  if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
+    showFullscreenBtn.value = false;
+  }
+});
+</script>
+
+<template>
+  <div class="fixed bottom-4 right-4 flex flex-col items-center">
+    <UPopover
+      v-model:open="open"
+      :content="{ side: 'top', align: 'center' }"
+      :ui="{ content: 'bg-transparent border-0 ring-0 shadow-none' }"
+    >
+      <template #default>
+        <UButton
+          :icon="
+            app.settings.volume === 0
+              ? 'i-heroicons-speaker-x-mark'
+              : 'i-heroicons-speaker-wave'
+          "
+          color="neutral"
+          variant="link"
+          size="xl"
+          :class="[
+            'transition-opacity',
+            open
+              ? 'opacity-100 text-highlighted'
+              : 'opacity-50 hover:opacity-100',
+          ]"
+          @keydown.up.prevent="open = true"
+        />
+      </template>
+
+      <template #content>
+        <div class="flex items-center justify-center h-24">
+          <USlider
+            :model-value="app.settings.volume * 100"
+            :min="0"
+            :max="100"
+            :step="2"
+            orientation="vertical"
+            color="neutral"
+            @update:model-value="
+              (v) => {
+                app.settings.volume = (v ?? 100) / 100;
+                app.save();
+              }
+            "
+          />
+        </div>
+      </template>
+    </UPopover>
+
+    <UButton
+      v-if="showFullscreenBtn"
+      :icon="
+        isFullscreen
+          ? 'i-heroicons-arrows-pointing-in'
+          : 'i-heroicons-arrows-pointing-out'
+      "
+      color="neutral"
+      variant="link"
+      size="xl"
+      class="opacity-50 hover:opacity-100 transition-opacity"
+      @click="toggleFullscreen"
+    />
+  </div>
+</template>