Update UI components and enhance controller navigation for improved user experience

- Updated styles in various components to change color themes from cyan to yellow for better visual consistency. - Enhanced focus management in controller navigation to improve accessibility and user interaction. - Added new data attributes for controller navigation in multiple views to streamline user interactions with app containers. - Improved audio handling by removing unused functions in useLoginSounds.ts, optimizing the codebase.
2026-02-17 21:10:16 +00:00
parent 5a04875dcc
commit 316dfee2fc
12 changed files with 428 additions and 55 deletions
@@ -0,0 +1,111 @@
+<template>
+  <Teleport to="body">
+    <Transition name="app-launcher">
+      <div
+        v-if="store.isOpen"
+        class="fixed inset-0 z-[2400] flex items-center justify-center p-6 md:p-10"
+        @click.self="store.close()"
+      >
+        <!-- Backdrop - blur like spotlight -->
+        <div class="absolute inset-0 bg-black/60 backdrop-blur-md"></div>
+
+        <!-- Panel - inset with margins, glass style like spotlight -->
+        <div
+          class="app-launcher-panel relative z-10 flex flex-col overflow-hidden rounded-2xl shadow-2xl"
+          :class="panelClasses"
+        >
+          <!-- Header bar - drag handle + title + close -->
+          <div class="flex items-center gap-3 border-b border-white/10 px-4 py-3">
+            <div class="flex items-center justify-center w-8 h-8 shrink-0 rounded cursor-grab hover:bg-white/10 transition-colors">
+              <svg class="w-4 h-4 text-white/50" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M8 6h2v2H8V6zm0 5h2v2H8v-2zm0 5h2v2H8v-2zm5-10h2v2h-2V6zm0 5h2v2h-2v-2zm0 5h2v2h-2v-2z" />
+              </svg>
+            </div>
+            <span class="flex-1 truncate text-sm font-medium text-white/90">{{ store.title || 'App' }}</span>
+            <button
+              ref="closeBtnRef"
+              type="button"
+              class="flex items-center justify-center w-9 h-9 rounded-lg hover:bg-white/15 text-white/70 hover:text-white transition-colors"
+              aria-label="Close"
+              @click="store.close()"
+            >
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+            <kbd class="hidden sm:inline-flex px-2 py-1 text-xs text-white/50 bg-white/10 rounded">Esc</kbd>
+          </div>
+
+          <!-- Iframe container -->
+          <div class="relative flex-1 min-h-0 bg-black/40">
+            <iframe
+              v-if="store.url"
+              :src="store.url"
+              class="absolute inset-0 w-full h-full border-0"
+              title="App content"
+            />
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onMounted, onBeforeUnmount } from 'vue'
+import { useAppLauncherStore } from '@/stores/appLauncher'
+
+const store = useAppLauncherStore()
+const closeBtnRef = ref<HTMLButtonElement | null>(null)
+
+const panelClasses = [
+  'glass-card',
+  'w-full h-full max-w-[calc(100vw-3rem)] max-h-[calc(100vh-5rem)]',
+  'md:max-w-[calc(100vw-5rem)] md:max-h-[calc(100vh-5rem)]',
+]
+
+function onKeyDown(e: KeyboardEvent) {
+  if (e.key === 'Escape' && store.isOpen) {
+    store.close()
+    e.preventDefault()
+    e.stopPropagation()
+  }
+}
+
+watch(
+  () => store.isOpen,
+  (open) => {
+    if (open) {
+      closeBtnRef.value?.focus()
+    }
+  }
+)
+
+onMounted(() => {
+  window.addEventListener('keydown', onKeyDown, true)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('keydown', onKeyDown, true)
+})
+</script>
+
+<style scoped>
+.app-launcher-enter-active,
+.app-launcher-leave-active {
+  transition: opacity 0.25s ease;
+}
+.app-launcher-enter-active .app-launcher-panel,
+.app-launcher-leave-active .app-launcher-panel {
+  transition: transform 0.25s ease, opacity 0.25s ease;
+}
+.app-launcher-enter-from,
+.app-launcher-leave-to {
+  opacity: 0;
+}
+.app-launcher-enter-from .app-launcher-panel,
+.app-launcher-leave-to .app-launcher-panel {
+  transform: scale(0.96);
+  opacity: 0;
+}
+</style>