cleanup & more fixes

app/app.vue

@@ -22,12 +22,15 @@ onMounted(async () => {
       <span class="spinner sm"></span>
     </div>
 
-    <div v-else class="app-viewport">
-      <main class="app-content">
+    <div v-else class="app-viewport" style="padding-top: 5rem;">
+      <main class="app-content" style="min-height: calc(100vh - 12rem);">
         <NuxtPage />
       </main>
+
+      <div class="footer-wrapper">
         <MainFooter />
       </div>
+    </div>
   </UApp>
 </template>
 
@@ -38,6 +41,7 @@ onMounted(async () => {
   justify-content: center;
   align-items: center;
   min-height: 100vh;
+  padding-top: 5rem;  /* Added padding-top */
 }
 
 .app-viewport,
@@ -57,4 +61,9 @@ onMounted(async () => {
   margin: 0 auto;
   min-height: calc(100vh - 12rem);
 }
+
+.footer-wrapper {
+  width: 100%;
+  margin-top: 8rem;  /* Added margin-top */
+}
 </style>

app/composables/useAuth.js

@@ -8,6 +8,18 @@ const isInitialized = ref(false)
 
 let sessionPollTimer = null
 
+const getStoredRefreshToken = () => {
+  if (refreshToken.value) {
+    return refreshToken.value
+  }
+
+  if (import.meta.client) {
+    return localStorage.getItem('keycloak_refresh_token')
+  }
+
+  return null
+}
+
 export const useAuth = () => {
   const fetchUserProfile = async () => {
     if (!userToken.value) return
@@ -71,7 +83,7 @@ export const useAuth = () => {
   }
 
   const silentRefresh = async () => {
-    const storedRefreshToken = refreshToken.value || (import.meta.client && localStorage.getItem('keycloak_refresh_token'))
+    const storedRefreshToken = getStoredRefreshToken()
 
     if (!storedRefreshToken) {
       clearSession()
@@ -125,6 +137,34 @@ export const useAuth = () => {
     }
   }
 
+  const initializeAuth = async ({ code, redirectTo = '/oauth', replace = false } = {}) => {
+    if (code) {
+      const result = await exchangeCodeForToken(code)
+      if (!result.success) {
+        await navigateTo(redirectTo, { replace })
+        return false
+      }
+      return true
+    }
+
+    if (isAuthenticated.value) {
+      const valid = await verifySession()
+      if (!valid) {
+        await navigateTo(redirectTo, { replace })
+        return false
+      }
+      return true
+    }
+
+    const success = await silentRefresh()
+    if (!success) {
+      await navigateTo(redirectTo, { replace })
+      return false
+    }
+
+    return true
+  }
+
   const startLiveSessionPolling = () => {
     if (import.meta.server) return
     stopLiveSessionPolling()
@@ -171,6 +211,7 @@ export const useAuth = () => {
     isAuthenticated,
     isInitialized,
     exchangeCodeForToken,
+    initializeAuth,
     silentRefresh,
     verifySession,
     fetchUserProfile,

app/middleware/auth.global.js

@@ -7,15 +7,10 @@ export default defineNuxtRouteMiddleware(async (to) => {
     return
   }
 
-  const { isAuthenticated, isInitialized, verifySession, silentRefresh } = useAuth()
+  const { isAuthenticated, isInitialized, initializeAuth } = useAuth()
 
   if (!isInitialized.value) {
-    const hasToken = localStorage.getItem('keycloak_refresh_token')
-    if (hasToken) {
-      await silentRefresh()
-    } else {
-      await verifySession()
-    }
+    await initializeAuth({ redirectTo: '/oauth', replace: true })
   }
 
   //whats the shape of Italy?

app/pages/[...slug].vue

@@ -1,13 +1,11 @@
 <script setup>
 import { onMounted } from 'vue'
 
-const { isAuthenticated, verifySession } = useAuth()
+const { isAuthenticated, initializeAuth } = useAuth()
 
 onMounted(async () => {
-  const valid = await verifySession()
-  if (!valid || !isAuthenticated.value) {
-    await navigateTo('/oauth', { replace: true })
-  } else {
+  const isReady = await initializeAuth({ redirectTo: '/oauth', replace: true })
+  if (isReady && isAuthenticated.value) {
     await navigateTo('/', { replace: true })
   }
 })

app/pages/index.vue

@@ -6,9 +6,7 @@ const {
   isAuthenticated, 
   isInitialized, 
   userProfile, 
-  exchangeCodeForToken, 
-  verifySession, 
-  silentRefresh,
+  initializeAuth,
   logout 
 } = useAuth()
 
@@ -27,24 +25,7 @@ const handleNavigate = (path) => {
 }
 
 onMounted(async () => {
-  const code = route.query.code
-
-  if (code) {
-    const success = await exchangeCodeForToken(code)
-    if (!success) {
-      navigateTo('/oauth')
-    }
-  } else if (isAuthenticated.value) {
-    const valid = await verifySession()
-    if (!valid) {
-      navigateTo('/oauth')
-    }
-  } else {
-    const success = await silentRefresh()
-    if (!success) {
-      navigateTo('/oauth')
-    }
-  }
+  await initializeAuth({ code: route.query.code, redirectTo: '/oauth' })
 })
 </script>
 

app/pages/search/index.vue

@@ -6,8 +6,7 @@ const {
   isAuthenticated, 
   isInitialized, 
   userProfile, 
-  verifySession, 
-  silentRefresh, 
+  initializeAuth,
   logout 
 } = useAuth()
 
@@ -73,17 +72,7 @@ const goToPage = (page) => {
 }
 
 onMounted(async () => {
-  if (isAuthenticated.value) {
-    const valid = await verifySession()
-    if (!valid) {
-      navigateTo('/oauth')
-    }
-  } else {
-    const success = await silentRefresh()
-    if (!success) {
-      navigateTo('/oauth')
-    }
-  }
+  await initializeAuth({ redirectTo: '/oauth' })
 })
 </script>
 

app/pages/welcome/index.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { ref, onMounted } from 'vue'
 
-const { userToken, isAuthenticated, verifySession } = useAuth()
+const { userToken, isAuthenticated, initializeAuth } = useAuth()
 
 const sfidInput = ref('')
 const step = ref(1)
@@ -12,9 +12,9 @@ const isSubmitting = ref(false)
 const errorMessage = ref('')
 
 onMounted(async () => {
-  const valid = await verifySession()
-  if (!valid || !isAuthenticated.value) {
-    await navigateTo('/oauth', { replace: true })
+  const isReady = await initializeAuth({ redirectTo: '/oauth', replace: true })
+  if (isReady && isAuthenticated.value) {
+    await navigateTo('/', { replace: true })
   }
 })
 

public/css/main.css

@@ -1,3 +1,14 @@
+:root {
+  --surface-bg: #1a1a1f;
+  --surface-muted: rgba(0, 0, 0, 0.15);
+  --surface-elevated: rgba(0, 0, 0, 0.2);
+  --surface-border: rgba(255, 255, 255, 0.08);
+  --text-primary: #ffffff;
+  --text-muted: #8b949e;
+  --accent: #00aeef;
+  --danger: #f85149;
+}
+
 @import url('https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap');
 
 .archivo-black { 
@@ -22,7 +33,8 @@ body {
 
 .app-viewport {
   width: 100%;
-  padding: 2rem 1rem;
+  /* larger vertical and horizontal gutters to restore visible page gaps */
+  padding: 3.5rem 2.5rem;
   display: block !important;
   min-height: 100vh !important;
 }
@@ -37,12 +49,20 @@ body {
   width: 100% !important;
   max-width: 1280px !important;
   margin: 0 auto !important;
+  /* inner gutter so content cards don't touch viewport edges */
+  padding: 0 1.25rem;
 }
 
 .footer-container {
   margin-top: 2rem !important;
 }
 
+/* Ensure footer wrapper spacing persists across SSR and reloads */
+.footer-wrapper {
+  width: 100%;
+  margin-top: 8rem !important;
+}
+
 .spinner {
   border: 3px solid rgba(255, 255, 255, 0.15);
   border-top-color: #00aeef;
@@ -124,26 +144,31 @@ button:disabled, .btn-login-action:disabled {
   width: 100%;
 }
 
-.settings-sidebar {
-  background-color: #1a1a1f;
-  border: 1px solid rgba(255, 255, 255, 0.08);
+.settings-sidebar,
+.settings-panel {
+  background-color: var(--surface-bg);
+  border: 1px solid var(--surface-border);
   border-radius: 6px;
   overflow: hidden;
+}
+
+.settings-sidebar {
   height: max-content;
 }
 
-.sidebar-header {
+.sidebar-header,
+.panel-header {
   padding: 0.85rem 1rem;
   font-size: 1.1rem;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
-  background-color: rgba(0, 0, 0, 0.15);
-  color: #ffffff;
+  border-bottom: 1px solid var(--surface-border);
+  background-color: var(--surface-muted);
+  color: var(--text-primary);
 }
 
 .user-badge {
   padding: 0.75rem 1rem;
-  background: rgba(0, 0, 0, 0.2);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  background: var(--surface-elevated);
+  border-bottom: 1px solid var(--surface-border);
   display: flex;
   flex-direction: column;
 }
@@ -202,19 +227,8 @@ button:disabled, .btn-login-action:disabled {
   gap: 1.5rem;
 }
 
-.settings-panel {
-  background-color: #1a1a1f;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 6px;
-  overflow: hidden;
-}
-
 .panel-header {
   padding: 0.85rem 1.25rem;
-  font-size: 1.1rem;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
-  background-color: rgba(0, 0, 0, 0.15);
-  color: #ffffff;
 }
 
 .panel-body {