feat: add option to use explore page for search

composables/settings/definition.ts

@@ -27,6 +27,7 @@ export interface PreferencesSettings {
   enableDataSaving: boolean
   enablePinchToZoom: boolean
   useStarFavoriteIcon: boolean
+  useExplorePageForSearch: boolean
   zenMode: boolean
   experimentalVirtualScroller: boolean
   experimentalGitHubCards: boolean
@@ -83,6 +84,7 @@ export const DEFAULT__PREFERENCES_SETTINGS: PreferencesSettings = {
   enableDataSaving: false,
   enablePinchToZoom: false,
   useStarFavoriteIcon: false,
+  useExplorePageForSearch: false,
   zenMode: false,
   experimentalVirtualScroller: true,
   experimentalGitHubCards: true,

locales/en.json

@@ -561,6 +561,7 @@
       "label": "Preferences",
       "optimize_for_low_performance_device": "Optimize for low performance device",
       "title": "Experimental Features",
+      "use_explore_page_for_search": "Use Explore page for Search",
       "use_star_favorite_icon": "Use star favorite icon",
       "user_picker": "User Picker",
       "user_picker_description": "Displays all avatars of logged accounts in the bottom-left so you can switch quickly between them.",

pages/[[server]]/explore.vue

@@ -3,19 +3,7 @@ import type { CommonRouteTabOption } from '~/types'
 
 const { t } = useI18n()
 
-const search = ref<{ input?: HTMLInputElement }>()
-const route = useRoute()
-watchEffect(() => {
-  if (isMediumOrLargeScreen && route.name === 'explore' && search.value?.input)
-    search.value?.input?.focus()
-})
-onActivated(() =>
-  search.value?.input?.focus(),
-)
-onDeactivated(() => search.value?.input?.blur())
-
 const userSettings = useUserSettings()
-
 const tabs = computed<CommonRouteTabOption[]>(() => [
   {
     to: isHydrated.value ? `/${currentServer.value}/explore` : '/explore',
@@ -37,6 +25,8 @@ const tabs = computed<CommonRouteTabOption[]>(() => [
     disabled: !isHydrated.value || !currentUser.value,
   },
 ])
+
+const useExplorePageForSearch = usePreferences('useExplorePageForSearch')
 </script>
 
 <template>
@@ -49,6 +39,9 @@ const tabs = computed<CommonRouteTabOption[]>(() => [
     </template>
 
     <template #header>
+      <div v-if="useExplorePageForSearch" px2 mt3>
+        <SearchWidget v-if="isHydrated" m-1 />
+      </div>
       <CommonRouteTabs replace :options="tabs" />
     </template>
     <NuxtPage v-if="isHydrated" />

pages/settings/preferences/index.vue

@@ -78,6 +78,12 @@ const userSettings = useUserSettings()
       >
         {{ $t('settings.preferences.use_star_favorite_icon') }}
       </SettingsToggleItem>
+      <SettingsToggleItem
+        :checked="getPreferences(userSettings, 'useExplorePageForSearch')"
+        @click="togglePreferences('useExplorePageForSearch')"
+      >
+        {{ $t('settings.preferences.use_explore_page_for_search') }}
+      </SettingsToggleItem>
     </section>
     <section>
       <h2 px6 py4 mt2 font-bold text-xl flex="~ gap-1" items-center>