feat: put search field on right for desktop

components/nav/NavSide.vue

@@ -3,16 +3,6 @@ const { command } = defineProps<{
   command?: boolean
 }>()
 
-const search = ref<HTMLInputElement>()
-const route = useRoute()
-
-const isExploreRoute = () => route.path.includes('explore')
-
-watchEffect(() => {
-  if (isExploreRoute() && search.value)
-    search.value.focus()
-})
-
 const { notifications } = useNotifications()
 </script>
 
@@ -36,10 +26,7 @@ const { notifications } = useNotifications()
     <NavSideItem :text="$t('action.compose')" to="/compose" icon="i-ri:quill-pen-line" user-only :command="command" />
 
     <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" />
+    <NavSideItem :text="$t('nav.explore')" :to="isHydrated ? `/${currentServer}/explore` : '/explore'" icon="i-ri:hashtag" :command="command" />
-    <SearchWidget v-else-if="!isExtraLargeScreen" 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" />
     <NavSideItem :text="$t('nav.federated')" :to="isHydrated ? `/${currentServer}/public` : '/public'" icon="i-ri:earth-line" :command="command" />
 

components/search/SearchWidget.vue

@@ -1,4 +1,8 @@
 <script setup lang="ts">
+const { position } = defineProps<{
+  position?: 'top' | 'bottom'
+}>()
+
 const query = ref('')
 const { accounts, hashtags, loading, statuses } = useSearch(query)
 const index = ref(0)
@@ -9,14 +13,6 @@ const input = ref<HTMLInputElement>()
 const router = useRouter()
 const { focused } = useFocusWithin(el)
 
-const focus = () => {
-  input.value?.focus()
-}
-
-defineExpose({
-  focus,
-})
-
 const results = computed(() => {
   if (query.value.length === 0)
     return []
@@ -84,7 +80,7 @@ const activate = () => {
       >
     </div>
     <!-- Results -->
-    <div left-0 top-12 absolute w-full z10 group-focus-within="pointer-events-auto visible" invisible pointer-events-none>
+    <div top-12 left-0 absolute w-full z10 group-focus-within="pointer-events-auto visible" invisible pointer-events-none>
       <div w-full bg-base border="~ base" rounded-3 max-h-100 overflow-auto py2>
         <span v-if="query.trim().length === 0" block text-center text-sm text-secondary>
           {{ t('search.search_desc') }}

layouts/default.vue

@@ -17,7 +17,7 @@ const isGrayscale = usePreferences('grayscaleMode')
 <template>
   <div h-full :data-mode="isHydrated && isGrayscale ? 'grayscale' : ''">
     <main flex w-full mxa lg:max-w-80rem>
-      <aside class="hidden sm:flex w-1/8 md:w-1/6 lg:w-1/5 xl:w-1/4 justify-end xl:me-4 zen-hide" relative>
+      <aside class="justify-end hidden sm:flex w-1/8 md:w-1/6 lg:w-1/5 xl:w-1/4 xl:me-4 zen-hide" relative>
         <div sticky top-0 w-20 xl:w-100 h-screen flex="~ col" lt-xl-items-center>
           <slot name="left">
             <div flex="~ col" overflow-y-auto justify-between h-full max-w-full mt-5>
@@ -58,9 +58,10 @@ const isGrayscale = usePreferences('grayscaleMode')
           <NavBottom v-if="isHydrated" sm:hidden />
         </div>
       </div>
-      <aside v-if="isHydrated && !wideLayout" class="hidden sm:none lg:block w-1/4 zen-hide">
+      <aside v-if="isHydrated && !wideLayout" class="hidden w-1/4 sm:none lg:block zen-hide">
         <div sticky top-0 h-screen flex="~ col" gap-2 py3 ms-2>
           <slot name="right">
+            <SearchWidget v-if="!isExtraLargeScreen" mt-6 ms-2 position="top" />
             <div flex-auto />
             <PwaPrompt />
             <NavFooter />