From 72dc3617ddf1976d0af3b3e78ebcf0ed9e2c383c Mon Sep 17 00:00:00 2001
From: Michel EDIGHOFFER <edimitchel@gmail.com>
Date: Tue, 17 Jan 2023 22:33:00 +0100
Subject: [PATCH] fix: mobile search

---
 components/main/MainContent.vue |  5 +++--
 components/nav/NavSide.vue      |  2 +-
 pages/[[server]]/explore.vue    |  6 ++----
 pages/search.vue                | 23 -----------------------
 4 files changed, 6 insertions(+), 30 deletions(-)
 delete mode 100644 pages/search.vue

diff --git a/components/main/MainContent.vue b/components/main/MainContent.vue
index 8362e592..fce37afa 100644
--- a/components/main/MainContent.vue
+++ b/components/main/MainContent.vue
@@ -4,6 +4,7 @@ defineProps<{
   backOnSmallScreen?: boolean
   /** Show the back button on both small and big screens */
   back?: boolean
+  noOverflowHidden?: boolean
 }>()
 </script>
 
@@ -15,7 +16,7 @@ defineProps<{
       border="b base" bg="[rgba(var(--rbg-bg-base),0.7)]"
     >
       <div flex justify-between px5 py2 :class="{ 'xl:hidden': $route.name !== 'tag' }">
-        <div flex gap-3 items-center overflow-hidden py2>
+        <div flex gap-3 items-center :overflow-hidden="!noOverflowHidden" py2>
           <NuxtLink
             v-if="backOnSmallScreen || back" flex="~ gap1" items-center btn-text p-0 xl:hidden
             :aria-label="$t('nav.back')"
@@ -23,7 +24,7 @@ defineProps<{
           >
             <div i-ri:arrow-left-line class="rtl-flip" />
           </NuxtLink>
-          <div truncate>
+          <div :truncate="!noOverflowHidden">
             <slot name="title" />
           </div>
           <div h-7 w-1px />
diff --git a/components/nav/NavSide.vue b/components/nav/NavSide.vue
index ab6597d4..30144a9c 100644
--- a/components/nav/NavSide.vue
+++ b/components/nav/NavSide.vue
@@ -37,7 +37,7 @@ const { notifications } = useNotifications()
 
     <div shrink hidden sm:block mt-4 />
     <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 />
+    <SearchWidget v-else-if="!isSmallScreen" 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" />
diff --git a/pages/[[server]]/explore.vue b/pages/[[server]]/explore.vue
index 653be059..552c028b 100644
--- a/pages/[[server]]/explore.vue
+++ b/pages/[[server]]/explore.vue
@@ -24,11 +24,9 @@ const tabs = $computed(() => [
 </script>
 
 <template>
-  <MainContent>
+  <MainContent no-overflow-hidden>
     <template #title>
-      <span timeline-title-style flex @click="$scrollToTop">
-        <SearchWidget ref="search" />
-      </span>
+      <SearchWidget ref="search" flex-grow class="m-1" />
     </template>
 
     <template #header>
diff --git a/pages/search.vue b/pages/search.vue
deleted file mode 100644
index 5803ba0d..00000000
--- a/pages/search.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<script setup lang="ts">
-import { useI18n } from 'vue-i18n'
-
-const { t } = useI18n()
-useHeadFixed({
-  title: () => t('nav.search'),
-})
-</script>
-
-<template>
-  <MainContent>
-    <template #title>
-      <NuxtLink to="/search" timeline-title-style flex items-center gap-2 @click="$scrollToTop">
-        <div i-ri:search-line class="rtl-flip" />
-        <span>{{ $t('nav.search') }}</span>
-      </NuxtLink>
-    </template>
-
-    <div px2 mt3>
-      <SearchWidget v-if="isHydrated" />
-    </div>
-  </MainContent>
-</template>