fix: improve SSR for settings back button

components/main/MainContent.vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
 defineProps<{
-  back?: boolean
+  /**
+   * Show the back button on small screens
+   */
+  backOnSmallScreen?: boolean
 }>()
 </script>
 
@@ -12,7 +15,10 @@ defineProps<{
     >
       <div flex justify-between px5 py4>
         <div flex gap-3 items-center overflow-hidden>
-          <NuxtLink v-show="back" flex="~ gap1" items-center btn-text p-0 @click="$router.go(-1)">
+          <NuxtLink
+            v-if="backOnSmallScreen" lg:hidden flex="~ gap1" items-center btn-text p-0
+            @click="$router.go(-1)"
+          >
             <div i-ri:arrow-left-line />
           </NuxtLink>
           <div truncate>

pages/settings/about/index.vue

@@ -1,9 +1,5 @@
-<script lang="ts" setup>
-const { lg } = breakpoints
-</script>
-
 <template>
-  <MainContent :back="!lg">
+  <MainContent back-on-small-screen>
     <template #title>
       <div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
         <span>{{ $t('settings.about.label') }}</span>

pages/settings/interface/index.vue

@@ -1,9 +1,5 @@
-<script lang="ts" setup>
-const { lg } = breakpoints
-</script>
-
 <template>
-  <MainContent :back="!lg">
+  <MainContent back-on-small-screen>
     <template #title>
       <div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
         <span>{{ $t('settings.interface.label') }}</span>

pages/settings/language/index.vue

@@ -1,9 +1,5 @@
-<script lang="ts" setup>
-const { lg } = breakpoints
-</script>
-
 <template>
-  <MainContent :back="!lg">
+  <MainContent back-on-small-screen>
     <template #title>
       <div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
         <span>{{ $t('settings.language.label') }}</span>

pages/settings/preferences/index.vue

@@ -1,9 +1,5 @@
-<script lang="ts" setup>
-const { lg } = breakpoints
-</script>
-
 <template>
-  <MainContent :back="!lg">
+  <MainContent back-on-small-screen>
     <template #title>
       <div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
         <span>{{ $t('settings.preferences.label') }}</span>

pages/settings/profile/index.vue

@@ -1,9 +1,5 @@
-<script lang="ts" setup>
-const { lg } = breakpoints
-</script>
-
 <template>
-  <MainContent :back="!lg">
+  <MainContent back-on-small-screen>
     <template #title>
       <div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
         <span>{{ $t('settings.profile.label') }}</span>

pages/settings/users/index.vue

@@ -63,7 +63,7 @@ async function importTokens() {
 </script>
 
 <template>
-  <MainContent :back="!lg">
+  <MainContent back-on-small-screen>
     <template #title>
       <div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
         <span>{{ $t('settings.users.label') }}</span>