From 51017df74ad0b8dbd44dd8ea0729e7f40b0d2fc6 Mon Sep 17 00:00:00 2001
From: swithek <52840391+swithek@users.noreply.github.com>
Date: Mon, 12 Oct 2026 11:21:25 +0200
Subject: [PATCH] fix search keybinds on small screens

---
 web/app/components/AppSidebar.nuxt.test.ts              | 6 ++----
 web/app/components/AppSidebar.vue                       | 7 +++----
 web/app/pages/[[organizationSlug]]/[[documentSlug]].vue | 3 +++
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/web/app/components/AppSidebar.nuxt.test.ts b/web/app/components/AppSidebar.nuxt.test.ts
index b1f2bd2f..819a227f 100644
--- a/web/app/components/AppSidebar.nuxt.test.ts
+++ b/web/app/components/AppSidebar.nuxt.test.ts
@@ -310,7 +310,7 @@ describe("<AppSidebar>", { concurrent: false }, () => {
 		)
 	})
 
-	it("asks to open the search modal from the search row", async ({
+	it("asks to toggle the search modal from the search row", async ({
 		expect,
 	}) => {
 		stubQueries()
@@ -320,9 +320,7 @@ describe("<AppSidebar>", { concurrent: false }, () => {
 			"click",
 		)
 
-		expect(
-			document.body.querySelector("[data-slot='dialog-content']"),
-		).not.toBeNull()
+		expect(sidebar(wrapper).emitted("toggle-search")).toHaveLength(1)
 	})
 
 	it("asks to toggle the notification sidebar from the inbox row", async ({
diff --git a/web/app/components/AppSidebar.vue b/web/app/components/AppSidebar.vue
index 673ab407..3bcb7f22 100644
--- a/web/app/components/AppSidebar.vue
+++ b/web/app/components/AppSidebar.vue
@@ -21,6 +21,7 @@ const emit = defineEmits<{
 		e:
 			| "initial-load-complete"
 			| "toggle-notifications"
+			| "toggle-search"
 			| "toggle-shortcuts"
 			| "toggle-settings",
 	): void
@@ -45,7 +46,6 @@ const { useFetchNotificationCount } = useNotificationAPI()
 const fetchNotificationCount = useFetchNotificationCount({ read: false })
 const editorStore = useEditorStore()
 const { openExternalLink } = useExternalLinks()
-const isSearchModalOpen = ref(false)
 const wsState = useWebSocketStateStore()
 let unsubWsTreeChange: (() => void) | null | undefined = null
 let unsubWsTagTreeChange: (() => void) | null | undefined = null
@@ -56,7 +56,7 @@ useShortcut(SHORTCUT_ACTIONS.toggleSidebar.keyboardKey, () => {
 	toggleSidebar()
 })
 useShortcut(SHORTCUT_ACTIONS.searchForDocuments.keyboardKey, () => {
-	isSearchModalOpen.value = !isSearchModalOpen.value
+	emit("toggle-search")
 })
 useShortcut(SHORTCUT_ACTIONS.toggleInbox.keyboardKey, () => {
 	emit("toggle-notifications")
@@ -152,7 +152,7 @@ const sections = computed<Section[]>(() => {
 			name: t("sidebar.sections.top.search-button"),
 			icon: "lucide:search",
 			onClick: () => {
-				isSearchModalOpen.value = true
+				emit("toggle-search")
 			},
 			acceptsChildren: false,
 			active: false,
@@ -588,6 +588,5 @@ async function installSlack() {
 				</ShadcnUiSidebarFooter>
 			</div>
 		</Transition>
-		<SearchModal v-model="isSearchModalOpen" />
 	</ShadcnUiSidebar>
 </template>
diff --git a/web/app/pages/[[organizationSlug]]/[[documentSlug]].vue b/web/app/pages/[[organizationSlug]]/[[documentSlug]].vue
index 1b5dfa2f..aaad4685 100644
--- a/web/app/pages/[[organizationSlug]]/[[documentSlug]].vue
+++ b/web/app/pages/[[organizationSlug]]/[[documentSlug]].vue
@@ -140,6 +140,7 @@ const createLoading = ref(false)
 const settingModalOpen = ref<
 	boolean | "org-members" | "github" | "metric-data-sources"
 >(false)
+const searchModalOpen = ref(false)
 const shortcutsModalOpen = ref(false)
 const pendingDocDeletion = ref<{
 	deleteDocument: () => Promise<void>
@@ -743,6 +744,7 @@ function clearLinkedBlock() {
 				@delete-document="handleDocumentDeletion"
 				@delete-tag="handleTagDeletion"
 				@open-settings="(target) => (settingModalOpen = target)"
+				@toggle-search="searchModalOpen = !searchModalOpen"
 				@toggle-settings="settingModalOpen = !settingModalOpen"
 				@toggle-shortcuts="shortcutsModalOpen = !shortcutsModalOpen"
 				@toggle-notifications="toggleNotificationSidebar"
@@ -753,6 +755,7 @@ function clearLinkedBlock() {
 				v-model="settingModalOpen"
 				@refresh-organization-slug="refreshOrganizationRouteSlug"
 			/>
+			<SearchModal v-model="searchModalOpen" />
 			<ShortcutModal v-model="shortcutsModalOpen" />
 			<EditorBlocksMetricsConfigModalBaseModal
 				@open-settings="() => (settingModalOpen = 'metric-data-sources')"