feat: use search and explore in same nav item

components/nav/NavBottom.vue

@@ -14,7 +14,7 @@ const moreMenuVisible = ref(false)
       <NuxtLink to="/home" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
         <div i-ri:home-5-line />
       </NuxtLink>
-      <NuxtLink to="/search" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
+      <NuxtLink :to="isHydrated ? `/${currentServer}/explore` : '/explore'" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
         <div i-ri:search-line />
       </NuxtLink>
       <NuxtLink to="/notifications" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">

components/nav/NavSide.vue

@@ -2,15 +2,22 @@
 const { command } = defineProps<{
   command?: boolean
 }>()
+
+const search = ref<HTMLInputElement>()
+const route = useRoute()
+
+const isExploreRoute = () => route.path.includes('explore')
+
+watchEffect(() => {
+  if (isExploreRoute() && search.value)
+    search.value.focus()
+})
+
 const { notifications } = useNotifications()
 </script>
 
 <template>
   <nav sm:px3 flex="~ col gap2" shrink text-size-base leading-normal md:text-lg>
-    <div shrink hidden sm:block mt-4 />
-    <SearchWidget lg:ms-1 lg:me-5 hidden xl:block />
-    <NavSideItem :text="$t('nav.search')" to="/search" icon="i-ri:search-line" xl:hidden :command="command" />
-
     <div shrink hidden sm:block mt-4 />
     <NavSideItem :text="$t('nav.home')" to="/home" icon="i-ri:home-5-line" user-only :command="command" />
     <NavSideItem :text="$t('nav.notifications')" to="/notifications" icon="i-ri:notification-4-line" user-only :command="command">
@@ -29,7 +36,10 @@ const { notifications } = useNotifications()
     <NavSideItem :text="$t('action.compose')" to="/compose" icon="i-ri:quill-pen-line" user-only :command="command" />
 
     <div shrink hidden sm:block mt-4 />
-    <NavSideItem :text="$t('nav.explore')" :to="isHydrated ? `/${currentServer}/explore` : '/explore'" icon="i-ri:hashtag" :command="command" />
+    <NavSideItem v-if="!isExploreRoute()" :text="`${$t('nav.search')} ${$t('common.and')} ${$t('nav.explore')}`" :to="isHydrated ? `/${currentServer}/explore` : '/explore'" icon="i-ri:search-line" hidden xl:block :command="command" />
+    <SearchWidget v-else ref="search" lg:ms-1 lg:me-5 lg:mb-1 hidden xl:block />
+    <NavSideItem :text="`${$t('nav.search')} ${$t('common.and')} ${$t('nav.explore')}`" :to="isHydrated ? `/${currentServer}/explore` : '/explore'" icon="i-ri:search-line" xl:hidden :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" />
 

components/search/SearchWidget.vue

@@ -5,9 +5,18 @@ const index = ref(0)
 
 const { t } = useI18n()
 const el = ref<HTMLElement>()
+const input = ref<HTMLInputElement>()
 const router = useRouter()
 const { focused } = useFocusWithin(el)
 
+const focus = () => {
+  input.value?.focus()
+}
+
+defineExpose({
+  focus,
+})
+
 const results = computed(() => {
   if (query.value.length === 0)
     return []

locales/en-US.json

@@ -91,6 +91,7 @@
     "toggle_zen_mode": "Toggle zen mode"
   },
   "common": {
+    "and": "and",
     "end_of_list": "End of the list",
     "error": "ERROR",
     "in": "in",

locales/fr-FR.json

@@ -83,6 +83,7 @@
     "toggle_zen_mode": "Passer en mode zen"
   },
   "common": {
+    "and": "et",
     "end_of_list": "Fin de liste",
     "error": "ERREUR",
     "in": "sur",
@@ -173,7 +174,7 @@
     "muted_users": "Utilisateur·ice·s masqué·e·s",
     "notifications": "Notifications",
     "profile": "Profil",
-    "search": "Rechercher",
+    "search": "Recherche",
     "select_feature_flags": "Activer/Désactiver Feature Flags",
     "select_font_size": "Taille de la police",
     "select_language": "Sélectionner langue",

pages/[[server]]/explore.vue

@@ -26,9 +26,8 @@ const tabs = $computed(() => [
 <template>
   <MainContent>
     <template #title>
-      <span timeline-title-style flex items-center gap-2 cursor-pointer @click="$scrollToTop">
-        <div i-ri:hashtag />
-        <span>{{ t('nav.explore') }}</span>
+      <span timeline-title-style flex @click="$scrollToTop">
+        <SearchWidget ref="search" />
       </span>
     </template>