From 26a26ba9f7eca0e2352048e61fda20aacb58021b Mon Sep 17 00:00:00 2001
From: patak <matias.capeletto@gmail.com>
Date: Tue, 27 Dec 2022 22:41:44 +0100
Subject: [PATCH] feat: search on small screens (#585)

---
 components/nav/NavBottom.vue       | 30 +++++++++++++++++-------------
 components/nav/NavSide.vue         |  6 +++++-
 components/search/SearchWidget.vue |  2 +-
 locales/cs-CZ.json                 |  1 +
 locales/de-DE.json                 |  2 +-
 locales/en-US.json                 |  2 +-
 locales/es-ES.json                 |  2 +-
 locales/fr-FR.json                 |  2 +-
 locales/ja-JP.json                 |  2 +-
 locales/zh-CN.json                 |  2 +-
 pages/search.vue                   | 21 +++++++++++++++++++++
 11 files changed, 51 insertions(+), 21 deletions(-)
 create mode 100644 pages/search.vue

diff --git a/components/nav/NavBottom.vue b/components/nav/NavBottom.vue
index e179e307..24b4543a 100644
--- a/components/nav/NavBottom.vue
+++ b/components/nav/NavBottom.vue
@@ -14,26 +14,30 @@ 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">
+        <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">
         <div i-ri:notification-4-line />
       </NuxtLink>
-    </template>
-    <NuxtLink :to="`/${currentServer}/explore`" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
-      <div i-ri:hashtag />
-    </NuxtLink>
-    <NuxtLink group :to="`/${currentServer}/public/local`" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
-      <div i-ri:group-2-line />
-    </NuxtLink>
-    <template v-if="!isMastoInitialised || !currentUser">
-      <NuxtLink :to="`/${currentServer}/public`" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
-        <div i-ri:earth-line />
-      </NuxtLink>
-    </template>
-    <template v-if="isMastoInitialised && currentUser">
       <NuxtLink to="/conversations" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
         <div i-ri:at-line />
       </NuxtLink>
     </template>
+    <template v-if="isMastoInitialised && !currentUser">
+      <NuxtLink :to="`/${currentServer}/explore`" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
+        <div i-ri:hashtag />
+      </NuxtLink>
+      <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 group :to="`/${currentServer}/public/local`" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
+        <div i-ri:group-2-line />
+      </NuxtLink>
+      <NuxtLink :to="`/${currentServer}/public`" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
+        <div i-ri:earth-line />
+      </NuxtLink>
+    </template>
     <NavBottomMoreMenu v-slot="{ changeShow, show }" v-model="moreMenuVisible" flex flex-row items-center place-content-center h-full flex-1 cursor-pointer>
       <label
         flex items-center place-content-center h-full flex-1 class="select-none"
diff --git a/components/nav/NavSide.vue b/components/nav/NavSide.vue
index 48e58070..6ffe6e53 100644
--- a/components/nav/NavSide.vue
+++ b/components/nav/NavSide.vue
@@ -15,7 +15,11 @@ const { notifications } = useNotifications()
         </div>
       </template>
     </NavSideItem>
-    <NavSideItem :text="$t('nav.explore')" :to="`/${currentServer}/explore`" icon="i-ri:hashtag" />
+
+    <!-- Use Search for small screens once the right sidebar is collapsed -->
+    <NavSideItem :text="$t('nav.search')" to="/search" icon="i-ri:search-line" lg:hidden />
+    <NavSideItem :text="$t('nav.explore')" :to="`/${currentServer}/explore`" icon="i-ri:hashtag" hidden lg:block />
+
     <NavSideItem :text="$t('nav.local')" :to="`/${currentServer}/public/local`" icon="i-ri:group-2-line " />
     <NavSideItem :text="$t('nav.federated')" :to="`/${currentServer}/public`" icon="i-ri:earth-line" />
     <NavSideItem :text="$t('nav.conversations')" to="/conversations" icon="i-ri:at-line" user-only />
diff --git a/components/search/SearchWidget.vue b/components/search/SearchWidget.vue
index 53f7967c..2a3801a0 100644
--- a/components/search/SearchWidget.vue
+++ b/components/search/SearchWidget.vue
@@ -66,7 +66,7 @@ const activate = () => {
         outline="focus:none"
         pr-4
         rtl-pl-4
-        :placeholder="t('nav.search', ['Elk'])"
+        :placeholder="t('nav.search')"
         pb="1px"
         placeholder-text-secondary
         @keydown.down.prevent="shift(1)"
diff --git a/locales/cs-CZ.json b/locales/cs-CZ.json
index fa349f93..52586dcf 100644
--- a/locales/cs-CZ.json
+++ b/locales/cs-CZ.json
@@ -119,6 +119,7 @@
     "local": "Lokální",
     "notifications": "Upozornění",
     "profile": "Profil",
+    "search": "Vyhledávání",
     "select_feature_flags": "Zapnout funkce",
     "select_language": "Vybrat jazyk",
     "show_intro": "Zobrazit více informací o aplikaci",
diff --git a/locales/de-DE.json b/locales/de-DE.json
index 961f9374..62cea2be 100644
--- a/locales/de-DE.json
+++ b/locales/de-DE.json
@@ -119,7 +119,7 @@
     "local": "Lokal",
     "notifications": "Mitteilungen",
     "profile": "Profil",
-    "search": "Durchsuche {0}",
+    "search": "Durchsuche",
     "select_feature_flags": "Feature-Flags aktivieren",
     "select_language": "Sprache auswählen",
     "show_intro": "Intro anzeigen",
diff --git a/locales/en-US.json b/locales/en-US.json
index c60a2d3f..6cff0541 100644
--- a/locales/en-US.json
+++ b/locales/en-US.json
@@ -142,7 +142,7 @@
     "local": "Local",
     "notifications": "Notifications",
     "profile": "Profile",
-    "search": "Search {0}",
+    "search": "Search",
     "select_feature_flags": "Toggle Feature Flags",
     "select_font_size": "Select Font Size",
     "select_language": "Select Language",
diff --git a/locales/es-ES.json b/locales/es-ES.json
index eb7f4757..cd1ccfd9 100644
--- a/locales/es-ES.json
+++ b/locales/es-ES.json
@@ -138,7 +138,7 @@
     "local": "Local",
     "notifications": "Notificaciones",
     "profile": "Perfil",
-    "search": "Buscar {0}",
+    "search": "Buscar",
     "select_feature_flags": "Cambiar marcadores de funcionalidades",
     "select_font_size": "Cambiar tamaño de letra",
     "select_language": "Cambiar idioma",
diff --git a/locales/fr-FR.json b/locales/fr-FR.json
index 71afec0b..f8471524 100644
--- a/locales/fr-FR.json
+++ b/locales/fr-FR.json
@@ -137,7 +137,7 @@
     "local": "Local",
     "notifications": "Notifications",
     "profile": "Profil",
-    "search": "Rechercher {0}",
+    "search": "Rechercher",
     "select_feature_flags": "Activer/Désactiver Feature Flags",
     "select_language": "Selectionner langue",
     "show_intro": "Ré-afficher l'introduction",
diff --git a/locales/ja-JP.json b/locales/ja-JP.json
index 6d45c40d..22dab26c 100644
--- a/locales/ja-JP.json
+++ b/locales/ja-JP.json
@@ -52,7 +52,7 @@
     "local": "ローカル",
     "notifications": "通知",
     "profile": "プロフィール",
-    "search": "検索 {0}",
+    "search": "検索",
     "select_feature_flags": "実験的機能を切り替え",
     "select_language": "言語を選択",
     "toggle_theme": "テーマを切り替え",
diff --git a/locales/zh-CN.json b/locales/zh-CN.json
index 0591e4ee..cbbfcd47 100644
--- a/locales/zh-CN.json
+++ b/locales/zh-CN.json
@@ -133,7 +133,7 @@
     "local": "本地",
     "notifications": "通知",
     "profile": "个人资料",
-    "search": "搜索 {0}",
+    "search": "搜索",
     "select_feature_flags": "功能开关",
     "select_font_size": "字体大小",
     "select_language": "选择语言",
diff --git a/pages/search.vue b/pages/search.vue
new file mode 100644
index 00000000..fcf944dc
--- /dev/null
+++ b/pages/search.vue
@@ -0,0 +1,21 @@
+<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" text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
+        <div i-ri:search-line />
+        <span>{{ $t('nav.search') }}</span>
+      </NuxtLink>
+    </template>
+
+    <SearchWidget v-if="isMastoInitialised" mt3 />
+  </MainContent>
+</template>