fix: restore search page for mobile

next step: show search bar on title without rediction

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="isHydrated ? `/${currentServer}/explore` : '/explore'" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
+      <NuxtLink to="/search" :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">

pages/[[server]]/explore.vue

@@ -3,17 +3,6 @@ import type { CommonRouteTabOption } from '~/components/common/CommonRouteTabs.v
 
 const { t } = useI18n()
 
-const search = $ref<{ input?: HTMLInputElement }>()
-const route = useRoute()
-watchEffect(() => {
-  if (isMediumOrLargeScreen && route.name === 'explore' && search?.input)
-    search?.input?.focus()
-})
-onActivated(() =>
-  search?.input?.focus(),
-)
-onDeactivated(() => search?.input?.blur())
-
 const tabs = $computed<CommonRouteTabOption[]>(() => [
   {
     to: isHydrated.value ? `/${currentServer.value}/explore` : '/explore',
@@ -38,15 +27,12 @@ const tabs = $computed<CommonRouteTabOption[]>(() => [
 
 <template>
   <MainContent :no-overflow-hidden="isExtraLargeScreen" :back-on-small-screen="isExtraLargeScreen">
-    <template v-if="!isExtraLargeScreen" #title>
+    <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>
     </template>
-    <template v-else #title>
-      <SearchWidget v-if="isHydrated" ref="search" class="m-1" />
-    </template>
 
     <template #header>
       <CommonRouteTabs replace :options="tabs" />

pages/search.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+useHeadFixed({
+  title: () => t('nav.search'),
+})
+</script>
+
+<template>
+  <MainContent no-overflow-hidden>
+    <template v-if="isHydrated" #title>
+      <SearchWidget w-full m-1 />
+    </template>
+    <!-- TODO: put search result here -->
+  </MainContent>
+</template>