refactor: hide right sidebars by default on mobile devices

components/app/Shortcuts.vue

@@ -23,6 +23,7 @@
         <div class="flex flex-col my-4 mx-6">
           <input
             v-model="filterText"
+            v-focus
             type="search"
             autocomplete="off"
             class="
@@ -36,7 +37,6 @@
               focus-visible:border-divider
             "
             :placeholder="$t('action.search')"
-            v-focus
           />
         </div>
       </div>

layouts/default.vue

@@ -59,6 +59,23 @@ import { hookKeybindingsListener } from "~/helpers/keybindings"
 import { defineActionHandler } from "~/helpers/actions"
 import useWindowSize from "~/helpers/utils/useWindowSize"
 
+function appLayout() {
+  const rightSidebar = useSetting("RIGHT_SIDEBAR")
+  const windowInnerWidth = useWindowSize()
+
+  // Initially apply
+  onBeforeMount(() => {
+    if (windowInnerWidth.x.value < 768) rightSidebar.value = false
+  })
+
+  // Listen for updates
+  watch(windowInnerWidth.x, () =>
+    windowInnerWidth.x.value >= 768
+      ? (rightSidebar.value = true)
+      : (rightSidebar.value = false)
+  )
+}
+
 function updateThemes() {
   const { $colorMode } = useContext() as any
 
@@ -113,6 +130,8 @@ function defineJumpActions() {
 export default defineComponent({
   components: { Splitpanes, Pane },
   setup() {
+    appLayout()
+
     hookKeybindingsListener()
 
     defineJumpActions()