Update favicon and enhance UI components for improved user experience

- Replaced PNG favicon with SVG for better scalability and visual quality across devices.
- Updated Vite configuration to include the new SVG favicon and adjusted asset paths.
- Enhanced various UI components with improved focus management and accessibility features.
- Introduced new styles to hide scrollbars while maintaining scroll functionality for a cleaner interface.

neode-ui/src/components/PWAUpdatePrompt.vue

@@ -1,39 +1,59 @@
 <template>
-  <Transition name="fade">
-    <div
-      v-if="showUpdatePrompt"
-      class="fixed bottom-4 left-4 right-4 md:left-auto md:right-4 md:w-96 z-[9999]"
-    >
-      <div class="glass-card p-4 flex items-center gap-4">
-        <div class="flex-1">
-          <p class="text-white/90 text-sm font-medium mb-1">Update Available</p>
-          <p class="text-white/70 text-xs">A new version is available. Click to update.</p>
+  <Teleport to="body">
+    <Transition name="modal">
+      <div
+        v-if="showUpdatePrompt"
+        class="fixed inset-0 z-[9999] flex items-center justify-center p-4"
+        @click.self="dismissUpdate"
+      >
+        <div class="absolute inset-0 bg-black/60 backdrop-blur-sm"></div>
+        <div
+          ref="modalRef"
+          class="glass-card p-6 max-w-md w-full relative z-10"
+          @click.stop
+        >
+          <div class="flex items-start justify-between gap-4 mb-4">
+            <h3 class="text-xl font-semibold text-white">Update Available</h3>
+            <button
+              @click="dismissUpdate"
+              class="p-2 rounded-lg hover:bg-white/10 text-white/70 hover:text-white transition-colors"
+              aria-label="Dismiss"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+          <p class="text-white/80 mb-6">
+            A new version of Archipelago is available. Update now to get the latest features and fixes.
+          </p>
+          <div class="flex gap-3 justify-end">
+            <button
+              @click="dismissUpdate"
+              class="px-4 py-2 glass-button rounded-lg text-sm font-medium"
+            >
+              Later
+            </button>
+            <button
+              @click="handleUpdate"
+              class="px-4 py-2 gradient-button rounded-lg text-sm font-medium"
+            >
+              Update Now
+            </button>
+          </div>
         </div>
-        <button
-          @click="handleUpdate"
-          class="glass-button px-4 py-2 rounded-lg text-sm font-medium transition-all hover:bg-black/70 hover:border-white/30"
-        >
-          Update
-        </button>
-        <button
-          @click="dismissUpdate"
-          class="text-white/50 hover:text-white/80 transition-colors p-2"
-          aria-label="Dismiss"
-        >
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-          </svg>
-        </button>
       </div>
-    </div>
-  </Transition>
+    </Transition>
+  </Teleport>
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
+import { useModalKeyboard } from '@/composables/useModalKeyboard'
 
 const showUpdatePrompt = ref(false)
 let updateCallback: (() => Promise<void>) | null = null
+const modalRef = ref<HTMLElement | null>(null)
 
 onMounted(() => {
   // Listen for service worker updates
@@ -54,6 +74,13 @@ onMounted(() => {
     // Check for updates every 5 minutes
     setInterval(checkForUpdates, 5 * 60 * 1000)
 
+    // Check when user returns to tab (helps with cached PWA)
+    document.addEventListener('visibilitychange', () => {
+      if (document.visibilityState === 'visible') {
+        checkForUpdates()
+      }
+    })
+
     // Listen for updatefound event
     navigator.serviceWorker.getRegistration().then((registration) => {
       if (registration) {
@@ -79,6 +106,8 @@ onMounted(() => {
   }
 })
 
+useModalKeyboard(modalRef, showUpdatePrompt, dismissUpdate)
+
 function dismissUpdate() {
   showUpdatePrompt.value = false
 }
@@ -89,17 +118,3 @@ async function handleUpdate() {
   }
 }
 </script>
-
-<style scoped>
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.3s ease, transform 0.3s ease;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-  transform: translateY(20px);
-}
-</style>
-