Enhance UI components and improve user notifications

- Updated App.vue to include a toast notification system for new messages, enhancing user engagement.
- Modified SplashScreen.vue to streamline the intro text display with improved typing effects.
- Added Montserrat font styles in style.css for better typography across the application.
- Improved controller navigation in useControllerNav.ts to support enhanced focus management and sound feedback.
- Updated routing logic in index.ts to redirect authenticated users from the login page to the home page.
- Enhanced the Login.vue view with transition effects for a smoother user experience during login and setup processes.

neode-ui/src/App.vue

@@ -20,11 +20,35 @@
     
     <!-- PWA Update Prompt -->
     <PWAUpdatePrompt />
+
+    <!-- Toast notifications - top right, glass style, any page -->
+    <Teleport to="body">
+      <Transition name="toast">
+        <div
+          v-if="toastMessage.show"
+          @click="messageToast.dismissToastAndOpenMessages"
+          class="fixed top-20 right-4 left-4 z-[100] w-auto max-w-md cursor-pointer rounded-xl p-4 transition-all hover:border-white/30 hover:shadow-2xl md:top-6 md:right-6 md:left-auto md:max-w-md toast-glass"
+        >
+          <div class="flex items-start gap-3">
+            <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-orange-500/20">
+              <svg class="h-5 w-5 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+              </svg>
+            </div>
+            <div class="min-w-0 flex-1">
+              <p class="text-sm font-medium text-white">New message</p>
+              <p class="mt-0.5 text-sm text-white/70 line-clamp-2">{{ toastMessage.text }}</p>
+              <p class="mt-1 text-xs text-orange-400">Click to view</p>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import SplashScreen from './components/SplashScreen.vue'
 import PWAUpdatePrompt from './components/PWAUpdatePrompt.vue'
@@ -32,11 +56,27 @@ import SpotlightSearch from './components/SpotlightSearch.vue'
 import HelpGuideModal from './components/HelpGuideModal.vue'
 import { useControllerNav } from '@/composables/useControllerNav'
 import { useSpotlightStore } from '@/stores/spotlight'
+import { useMessageToast } from '@/composables/useMessageToast'
+import { useAppStore } from '@/stores/app'
 
 const router = useRouter()
 const spotlightStore = useSpotlightStore()
+const appStore = useAppStore()
+const messageToast = useMessageToast()
+const toastMessage = messageToast.toastMessage
+
 useControllerNav()
 
+// Start/stop message polling when auth state changes
+watch(() => appStore.isAuthenticated, (authenticated) => {
+  if (authenticated) {
+    messageToast.startPolling()
+  } else {
+    messageToast.stopPolling()
+    toastMessage.value = { show: false, text: '' }
+  }
+}, { immediate: true })
+
 function onKeyDown(e: KeyboardEvent) {
   const isMac = navigator.platform.toUpperCase().includes('MAC')
   const mod = isMac ? e.metaKey : e.ctrlKey
@@ -84,6 +124,7 @@ async function handleSplashComplete() {
   showSplash.value = false
   document.body.classList.add('splash-complete')
   isReady.value = true
+  sessionStorage.setItem('archipelago_from_splash', '1')
 
   const devMode = import.meta.env.VITE_DEV_MODE
   if (devMode === 'setup' || devMode === 'existing') {