From d7bda3c605d5b600bf4d4976da6d6212bc54ea2b Mon Sep 17 00:00:00 2001
From: curo1305 <curo1305@proton.me>
Date: Mon, 15 Jun 2026 20:36:52 +0200
Subject: [PATCH] =?UTF-8?q?feat(10-09):=20add=20global=20keydown=20handler?=
 =?UTF-8?q?=20to=20App.vue=20=E2=80=94=20/,=20Escape,=20U,=20N=20shortcuts?=
 =?UTF-8?q?=20live?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add routeViewRef = ref(null) and bind to <router-view ref="routeViewRef">
- Add onKeydown handler: guards INPUT/TEXTAREA/SELECT/contenteditable; routes / → focusSearch, Escape → clearSearch, U/u → triggerUpload, N/n → startNewFolder
- Chain document.addEventListener on onMounted, removeEventListener on onUnmounted
- Add double optional chaining (?.) in StorageBrowser.triggerUpload and focusSearch so stubs don't throw in tests
- 9 keyboard shortcut tests GREEN; full suite 190 passing 0 failures
---
 frontend/src/App.vue                          | 31 +++++++++++++++++--
 .../src/components/storage/StorageBrowser.vue |  4 +--
 2 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 6309859..9f9658f 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -3,14 +3,14 @@
   <div v-else class="flex h-screen overflow-hidden">
     <AppSidebar />
     <main class="flex-1 overflow-y-auto">
-      <router-view />
+      <router-view ref="routeViewRef" />
     </main>
   </div>
   <ToastContainer />
 </template>
 
 <script setup>
-import { onMounted } from 'vue'
+import { ref, onMounted, onUnmounted } from 'vue'
 import { useRoute } from 'vue-router'
 import AppSidebar from './components/layout/AppSidebar.vue'
 import AuthLayout from './layouts/AuthLayout.vue'
@@ -19,5 +19,30 @@ import { useTopicsStore } from './stores/topics.js'
 
 const route = useRoute()
 const topicsStore = useTopicsStore()
-onMounted(() => topicsStore.fetchTopics())
+const routeViewRef = ref(null)
+
+function onKeydown(e) {
+  const tag = document.activeElement?.tagName
+  if (['INPUT', 'TEXTAREA', 'SELECT'].includes(tag) || document.activeElement?.isContentEditable) return
+
+  if (e.key === '/' && !e.ctrlKey && !e.metaKey) {
+    e.preventDefault()
+    routeViewRef.value?.focusSearch?.()
+  }
+  if (e.key === 'Escape') {
+    routeViewRef.value?.clearSearch?.()
+  }
+  if (e.key === 'u' || e.key === 'U') {
+    routeViewRef.value?.triggerUpload?.()
+  }
+  if (e.key === 'n' || e.key === 'N') {
+    routeViewRef.value?.startNewFolder?.()
+  }
+}
+
+onMounted(() => {
+  topicsStore.fetchTopics()
+  document.addEventListener('keydown', onKeydown)
+})
+onUnmounted(() => document.removeEventListener('keydown', onKeydown))
 </script>
diff --git a/frontend/src/components/storage/StorageBrowser.vue b/frontend/src/components/storage/StorageBrowser.vue
index a87a504..f3fb4cf 100644
--- a/frontend/src/components/storage/StorageBrowser.vue
+++ b/frontend/src/components/storage/StorageBrowser.vue
@@ -353,8 +353,8 @@ async function submitNewFolder() {
 
 defineExpose({
   startNewFolder,
-  triggerUpload: () => dropZoneRef.value?.triggerInput(),
-  focusSearch: () => searchBarRef.value?.focus(),
+  triggerUpload: () => dropZoneRef.value?.triggerInput?.(),
+  focusSearch: () => searchBarRef.value?.focus?.(),
   clearSearch: () => emit('search-change', ''),
 })