From 9acaf7b03a657a05e4a7bb5eb7cf6a3b3e4a4682 Mon Sep 17 00:00:00 2001
From: Michel EDIGHOFFER <edimitchel@gmail.com>
Date: Fri, 10 Feb 2023 20:06:01 +0100
Subject: [PATCH] fix: restore search page for mobile

next step: show search bar on title without rediction
---
 components/nav/NavBottom.vue |  2 +-
 pages/[[server]]/explore.vue | 16 +---------------
 pages/search.vue             | 17 +++++++++++++++++
 3 files changed, 19 insertions(+), 16 deletions(-)
 create mode 100644 pages/search.vue

diff --git a/components/nav/NavBottom.vue b/components/nav/NavBottom.vue
index 82c99d33..97454860 100644
--- a/components/nav/NavBottom.vue
+++ b/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">
diff --git a/pages/[[server]]/explore.vue b/pages/[[server]]/explore.vue
index ae761cea..9d4679f9 100644
--- a/pages/[[server]]/explore.vue
+++ b/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" />
diff --git a/pages/search.vue b/pages/search.vue
new file mode 100644
index 00000000..9cba41dc
--- /dev/null
+++ b/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>