fix(ui): back-on-small-screen logic in settings (#3328)

app/components/main/MainContent.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
-defineProps<{
-  /** Show the back button on small screens */
-  backOnSmallScreen?: boolean
-  /** Show the back button on both small and big screens */
-  back?: boolean
+const { back = false } = defineProps<{
+  /**
+   * Should we show a back button?
+   * Note: this will be forced to false on xl screens to avoid duplicating the sidebar's back button.
+   */
+  back?: boolean | 'small-only'
   /** Do not applying overflow hidden to let use floatable components in title */
   noOverflowHidden?: boolean
 }>()
@@ -22,6 +23,17 @@ const containerClass = computed(() => {
 
   return 'lg:sticky lg:top-0'
 })
+
+const showBackButton = computed(() => {
+  switch (back) {
+    case 'small-only':
+      return isSmallOrMediumScreen.value
+    case true:
+      return !isExtraLargeScreen.value
+    default:
+      return false
+  }
+})
 </script>
 
 <template>
@@ -37,8 +49,8 @@ const containerClass = computed(() => {
       <div flex justify-between gap-2 min-h-53px px5 py1 :class="{ 'xl:hidden': $route.name !== 'tag' }" border="b base">
         <div flex gap-2 items-center :overflow-hidden="!noOverflowHidden ? '' : false" w-full>
           <button
-            v-if="backOnSmallScreen || back"
-            btn-text flex items-center ms="-3" p-3 xl:hidden
+            v-if="showBackButton"
+            btn-text flex items-center ms="-3" p-3
             :aria-label="$t('nav.back')"
             @click="$router.go(-1)"
           >

app/composables/screen.ts

@@ -2,6 +2,7 @@ import { breakpointsTailwind } from '@vueuse/core'
 
 export const breakpoints = useBreakpoints(breakpointsTailwind)
 
-export const isSmallScreen = breakpoints.smallerOrEqual('sm')
+export const isSmallScreen = breakpoints.smaller('sm')
+export const isSmallOrMediumScreen = breakpoints.smaller('lg')
 export const isMediumOrLargeScreen = breakpoints.between('sm', 'xl')
-export const isExtraLargeScreen = breakpoints.smallerOrEqual('xl')
+export const isExtraLargeScreen = breakpoints.greaterOrEqual('xl')

app/pages/settings/about/index.vue

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

app/pages/settings/interface/index.vue

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

app/pages/settings/language/index.vue

@@ -15,7 +15,7 @@ const status = computed(() => {
 </script>
 
 <template>
-  <MainContent back-on-small-screen>
+  <MainContent back="small-only">
     <template #title>
       <div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
         <span>{{ $t('settings.language.label') }}</span>

app/pages/settings/notifications/index.vue

@@ -12,7 +12,7 @@ useHydratedHead({
 </script>
 
 <template>
-  <MainContent back-on-small-screen>
+  <MainContent back="small-only">
     <template #title>
       <div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
         <span>{{ $t('settings.notifications.label') }}</span>

app/pages/settings/preferences/index.vue

@@ -9,7 +9,7 @@ const userSettings = useUserSettings()
 </script>
 
 <template>
-  <MainContent back-on-small-screen>
+  <MainContent back="small-only">
     <template #title>
       <h1 text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
         {{ $t('settings.preferences.label') }}

app/pages/settings/profile/index.vue

@@ -11,7 +11,7 @@ useHydratedHead({
 </script>
 
 <template>
-  <MainContent back-on-small-screen>
+  <MainContent back="small-only">
     <template #title>
       <div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
         <span>{{ $t('settings.profile.label') }}</span>

app/pages/settings/users/index.vue

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