feat: remember last accessed explore tab (#2658)

components/nav/NavBottom.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
 // only one icon can be lit up at the same time
-import { STORAGE_KEY_LAST_ACCESSED_NOTIFICATION_ROUTE } from '~/constants'
+import { STORAGE_KEY_LAST_ACCESSED_EXPLORE_ROUTE, STORAGE_KEY_LAST_ACCESSED_NOTIFICATION_ROUTE } from '~/constants'
 
 const moreMenuVisible = ref(false)
 
 const { notifications } = useNotifications()
 const lastAccessedNotificationRoute = useLocalStorage(STORAGE_KEY_LAST_ACCESSED_NOTIFICATION_ROUTE, '')
+const lastAccessedExploreRoute = useLocalStorage(STORAGE_KEY_LAST_ACCESSED_EXPLORE_ROUTE, '')
 </script>
 
 <template>
@@ -35,7 +36,7 @@ const lastAccessedNotificationRoute = useLocalStorage(STORAGE_KEY_LAST_ACCESSED_
       </NuxtLink>
     </template>
     <template v-else>
-      <NuxtLink :to="`/${currentServer}/explore`" :aria-label="$t('nav.explore')" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
+      <NuxtLink :to="`/${currentServer}/explore/${lastAccessedExploreRoute}`" :aria-label="$t('nav.explore')" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
         <div i-ri:compass-3-line />
       </NuxtLink>
       <NuxtLink group :to="`/${currentServer}/public/local`" :aria-label="$t('nav.local')" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">

components/nav/NavSide.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { STORAGE_KEY_LAST_ACCESSED_NOTIFICATION_ROUTE } from '~/constants'
+import { STORAGE_KEY_LAST_ACCESSED_EXPLORE_ROUTE, STORAGE_KEY_LAST_ACCESSED_NOTIFICATION_ROUTE } from '~/constants'
 
 const { command } = defineProps<{
   command?: boolean
@@ -7,6 +7,7 @@ const { command } = defineProps<{
 const { notifications } = useNotifications()
 const useStarFavoriteIcon = usePreferences('useStarFavoriteIcon')
 const lastAccessedNotificationRoute = useLocalStorage(STORAGE_KEY_LAST_ACCESSED_NOTIFICATION_ROUTE, '')
+const lastAccessedExploreRoute = useLocalStorage(STORAGE_KEY_LAST_ACCESSED_EXPLORE_ROUTE, '')
 </script>
 
 <template>
@@ -33,7 +34,7 @@ const lastAccessedNotificationRoute = useLocalStorage(STORAGE_KEY_LAST_ACCESSED_
     <NavSideItem :text="$t('action.compose')" to="/compose" icon="i-ri:quill-pen-line" user-only :command="command" />
 
     <div class="spacer" shrink hidden sm:block />
-    <NavSideItem :text="$t('nav.explore')" :to="isHydrated ? `/${currentServer}/explore` : '/explore'" icon="i-ri:compass-3-line" :command="command" />
+    <NavSideItem :text="$t('nav.explore')" :to="isHydrated ? `/${currentServer}/explore/${lastAccessedExploreRoute}` : `/explore/${lastAccessedExploreRoute}`" icon="i-ri:compass-3-line" :command="command" />
     <NavSideItem :text="$t('nav.local')" :to="isHydrated ? `/${currentServer}/public/local` : '/public/local'" icon="i-ri:group-2-line " :command="command" />
     <NavSideItem :text="$t('nav.federated')" :to="isHydrated ? `/${currentServer}/public` : '/public'" icon="i-ri:earth-line" :command="command" />
     <NavSideItem :text="$t('nav.lists')" :to="isHydrated ? `/${currentServer}/lists` : '/lists'" icon="i-ri:list-check" user-only :command="command" />

constants/index.ts

@@ -22,9 +22,9 @@ export const STORAGE_KEY_HIDE_EXPLORE_TAGS_TIPS = 'elk-hide-explore-tags-tips'
 export const STORAGE_KEY_NOTIFICATION = 'elk-notification'
 export const STORAGE_KEY_NOTIFICATION_POLICY = 'elk-notification-policy'
 export const STORAGE_KEY_PWA_HIDE_INSTALL = 'elk-pwa-hide-install'
+export const STORAGE_KEY_LAST_ACCESSED_NOTIFICATION_ROUTE = 'elk-last-accessed-notification-route'
+export const STORAGE_KEY_LAST_ACCESSED_EXPLORE_ROUTE = 'elk-last-accessed-explore-route'
 
 export const HANDLED_MASTO_URLS = /^(https?:\/\/)?([\w\d-]+\.)+\w+\/(@[@\w\d-\.]+)(\/objects)?(\/\d+)?$/
 
 export const NOTIFICATION_FILTER_TYPES: mastodon.v1.NotificationType[] = ['status', 'reblog', 'follow', 'follow_request', 'favourite', 'poll', 'update', 'admin.sign_up', 'admin.report']
-
-export const STORAGE_KEY_LAST_ACCESSED_NOTIFICATION_ROUTE = 'elk-last-accessed-notification-route'

pages/[[server]]/explore/index.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
-import { STORAGE_KEY_HIDE_EXPLORE_POSTS_TIPS } from '~~/constants'
+import { STORAGE_KEY_HIDE_EXPLORE_POSTS_TIPS, STORAGE_KEY_LAST_ACCESSED_EXPLORE_ROUTE } from '~~/constants'
 
 const { t } = useI18n()
+const route = useRoute()
 
 const paginator = useMastoClient().v1.trends.statuses.list()
 
@@ -10,6 +11,13 @@ const hideNewsTips = useLocalStorage(STORAGE_KEY_HIDE_EXPLORE_POSTS_TIPS, false)
 useHydratedHead({
   title: () => `${t('tab.posts')} | ${t('nav.explore')}`,
 })
+
+const lastAccessedExploreRoute = useLocalStorage(STORAGE_KEY_LAST_ACCESSED_EXPLORE_ROUTE, '')
+lastAccessedExploreRoute.value = route.path.replace(/(.*\/explore\/?)/, '')
+
+onActivated(() => {
+  lastAccessedExploreRoute.value = route.path.replace(/(.*\/explore\/?)/, '')
+})
 </script>
 
 <template>

pages/[[server]]/explore/links.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
-import { STORAGE_KEY_HIDE_EXPLORE_NEWS_TIPS } from '~~/constants'
+import { STORAGE_KEY_HIDE_EXPLORE_NEWS_TIPS, STORAGE_KEY_LAST_ACCESSED_EXPLORE_ROUTE } from '~~/constants'
 
 const { t } = useI18n()
+const route = useRoute()
 
 const paginator = useMastoClient().v1.trends.links.list()
 
@@ -10,6 +11,13 @@ const hideNewsTips = useLocalStorage(STORAGE_KEY_HIDE_EXPLORE_NEWS_TIPS, false)
 useHydratedHead({
   title: () => `${t('tab.news')} | ${t('nav.explore')}`,
 })
+
+const lastAccessedExploreRoute = useLocalStorage(STORAGE_KEY_LAST_ACCESSED_EXPLORE_ROUTE, '')
+lastAccessedExploreRoute.value = route.path.replace(/(.*\/explore\/?)/, '')
+
+onActivated(() => {
+  lastAccessedExploreRoute.value = route.path.replace(/(.*\/explore\/?)/, '')
+})
 </script>
 
 <template>

pages/[[server]]/explore/tags.vue

@@ -1,9 +1,10 @@
 <script lang="ts" setup>
-import { STORAGE_KEY_HIDE_EXPLORE_TAGS_TIPS } from '~~/constants'
+import { STORAGE_KEY_HIDE_EXPLORE_TAGS_TIPS, STORAGE_KEY_LAST_ACCESSED_EXPLORE_ROUTE } from '~~/constants'
 
 const { t } = useI18n()
-
+const route = useRoute()
 const { client } = useMasto()
+
 const paginator = client.value.v1.trends.tags.list({
   limit: 20,
 })
@@ -13,6 +14,13 @@ const hideTagsTips = useLocalStorage(STORAGE_KEY_HIDE_EXPLORE_TAGS_TIPS, false)
 useHydratedHead({
   title: () => `${t('tab.hashtags')} | ${t('nav.explore')}`,
 })
+
+const lastAccessedExploreRoute = useLocalStorage(STORAGE_KEY_LAST_ACCESSED_EXPLORE_ROUTE, '')
+lastAccessedExploreRoute.value = route.path.replace(/(.*\/explore\/?)/, '')
+
+onActivated(() => {
+  lastAccessedExploreRoute.value = route.path.replace(/(.*\/explore\/?)/, '')
+})
 </script>
 
 <template>

pages/[[server]]/explore/users.vue

@@ -1,5 +1,8 @@
 <script lang="ts" setup>
+import { STORAGE_KEY_LAST_ACCESSED_EXPLORE_ROUTE } from '~/constants'
+
 const { t } = useI18n()
+const route = useRoute()
 
 // limit: 20 is the default configuration of the official client
 const paginator = useMastoClient().v2.suggestions.list({ limit: 20 })
@@ -7,6 +10,13 @@ const paginator = useMastoClient().v2.suggestions.list({ limit: 20 })
 useHydratedHead({
   title: () => `${t('tab.for_you')} | ${t('nav.explore')}`,
 })
+
+const lastAccessedExploreRoute = useLocalStorage(STORAGE_KEY_LAST_ACCESSED_EXPLORE_ROUTE, '')
+lastAccessedExploreRoute.value = route.path.replace(/(.*\/explore\/?)/, '')
+
+onActivated(() => {
+  lastAccessedExploreRoute.value = route.path.replace(/(.*\/explore\/?)/, '')
+})
 </script>
 
 <template>