less cls in main page and fixed auth refresh

app/app.vue

@@ -4,4 +4,4 @@
             <NuxtPage />
         </NuxtLayout>
     </VApp>
-</template>
+</template>

app/components/layout/NavBar.vue

@@ -108,6 +108,4 @@ const logoColor = computed(() => ({
 
 const isLoggedIn = computed(() => loggedIn.value)
 const drawer = ref(false)
-</script>
-
-<style scoped></style>
+</script>

app/layouts/default.vue

@@ -1,8 +1,11 @@
 <template>
     <NavBar :loggedIn="isLoggedIn" :settings="settings" />
-    <VMain>
-        <NuxtPage />
-    </VMain>
+    <v-main>
+        <v-container>
+            <NuxtPage />
+        </v-container>
+    </v-main>
+
     <FootBar :settings="settings" />
 </template>
 
@@ -38,7 +41,7 @@ const getSettings = async () => {
 
 const refreshSession = async () => {
     try {
-        await pb.authStore.refresh()
+        await pb.collection('users').authRefresh()
         isLoggedIn.value = pb.authStore.isValid
     } catch (error) {
         isLoggedIn.value = false
@@ -49,7 +52,9 @@ const refreshSession = async () => {
 const setFavicon = () => {
     if (!settings.value?.page_icon) return
     const favUrl = pb.files.getUrl(settings.value, settings.value.page_icon)
-    let link = document.querySelector("link[rel~='icon']") || document.createElement('link')
+    let link =
+        document.querySelector("link[rel~='icon']") ||
+        document.createElement('link')
     link.rel = 'icon'
     link.href = favUrl
     document.head.appendChild(link)
@@ -64,7 +69,7 @@ onMounted(async () => {
         settings.value = await getSettings()
         await refreshSession()
         setFavicon()
-        
+
         intervalId = setInterval(checkSession, 600)
     } catch (error) {
         // Handle error (e.g., display notification to user)

app/middleware/auth.js

@@ -1,21 +1,24 @@
 import { usePocketbase } from '#imports'
 
-export default defineNuxtRouteMiddleware(async (to, from, next) => {
+export default defineNuxtRouteMiddleware(async (to, from) => {
+  // Ensure the middleware runs only on the client side
+  if (process.client) {
     const authRequired = to.meta.authRequired || true
-
     const pb = usePocketbase()
 
-    // Retrieve the current session from Supabase
+    // Retrieve the current session from Pocketbase
     const isValidSession = pb.authStore.isValid
 
     if (authRequired && to.path !== '/') {
-        if (!isValidSession) {
-            // If the session is not valid, redirect to the login page
-            return navigateTo('/login')
-        }
-        if (to.name === 'Login' && isValidSession) {
-            // Redirect to the dashboard if already logged in and trying to access the login page
-            return navigateTo('/dashboard')
-        }
+      if (!isValidSession) {
+        // If the session is not valid, redirect to the login page
+        return navigateTo('/login')
+      }
+
+      if (to.name === 'Login' && isValidSession) {
+        // Redirect to the dashboard if already logged in and trying to access the login page
+        return navigateTo('/dashboard')
+      }
     }
+  }
 })

app/pages/index.vue

@@ -94,10 +94,6 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from 'vue'
-import { useI18n, useHead } from '#imports'
-import RouteDetails from '@/components/RouteDetails.vue'
-
 const { t } = useI18n()
 
 useHead({
@@ -166,12 +162,13 @@ const fetchClimbingRoutes = async () => {
 }
 
 const getClimbingRoutes = async () => {
-  await fetchClimbingRoutes()
   pb.collection('routes').subscribe('*', function () {
     getClimbingRoutes()
   })
 }
 
+await fetchClimbingRoutes()
+
 onMounted(() => {
   getClimbingRoutes()
 })

nuxt.config.ts

@@ -30,6 +30,7 @@ export default defineNuxtConfig({
           cookieName: 'color-scheme', // Stores user's preferred color scheme
           useBrowserThemeOnly: true, // Strictly uses the browser theme without relying on cookies
         },
+        prefersReducedMotion: true, // Uses Sec-CH-Prefers-Reduced-Motion for reduced motion detection
       }
     },  
     vuetifyOptions: {