From aaa0532af9f15f06a71e400b59ed13c76731738c Mon Sep 17 00:00:00 2001
From: curo1305 <curo1305@proton.me>
Date: Mon, 15 Jun 2026 20:35:38 +0200
Subject: [PATCH] =?UTF-8?q?feat(10-09):=20plumb=20keyboard=20shortcut=20re?=
 =?UTF-8?q?f=20chain=20=E2=80=94=20DropZone=E2=86=92SearchBar=E2=86=92Stor?=
 =?UTF-8?q?ageBrowser=E2=86=92FileManagerView?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- DropZone: defineExpose({ triggerInput }) to expose file picker trigger
- SearchBar: add inputEl ref + defineExpose({ focus }) for / shortcut
- StorageBrowser: add dropZoneRef + searchBarRef; expand defineExpose to include triggerUpload, focusSearch, clearSearch
- FileManagerView: add defineExpose delegating all four methods to browserRef via optional chaining
---
 frontend/src/components/documents/SearchBar.vue |  7 +++++++
 .../src/components/storage/StorageBrowser.vue   | 17 +++++++++++++----
 frontend/src/components/upload/DropZone.vue     |  2 ++
 frontend/src/views/FileManagerView.vue          |  7 +++++++
 4 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/documents/SearchBar.vue b/frontend/src/components/documents/SearchBar.vue
index f05f7e1..fb08074 100644
--- a/frontend/src/components/documents/SearchBar.vue
+++ b/frontend/src/components/documents/SearchBar.vue
@@ -1,6 +1,7 @@
 <template>
   <div role="search">
     <input
+      ref="inputEl"
       :value="modelValue"
       type="search"
       :placeholder="placeholder"
@@ -13,6 +14,8 @@
 </template>
 
 <script setup>
+import { ref } from 'vue'
+
 defineProps({
   modelValue: {
     type: String,
@@ -25,4 +28,8 @@ defineProps({
 })
 
 const emit = defineEmits(['update:modelValue'])
+
+const inputEl = ref(null)
+
+defineExpose({ focus() { inputEl.value?.focus() } })
 </script>
diff --git a/frontend/src/components/storage/StorageBrowser.vue b/frontend/src/components/storage/StorageBrowser.vue
index 8aa1970..a87a504 100644
--- a/frontend/src/components/storage/StorageBrowser.vue
+++ b/frontend/src/components/storage/StorageBrowser.vue
@@ -10,7 +10,7 @@
           @navigate="$emit('breadcrumb-navigate', $event)"
         />
         <div class="ml-auto flex items-center gap-2 shrink-0">
-          <SearchBar v-if="showSearch" :model-value="searchQuery" @update:modelValue="$emit('search-change', $event)" />
+          <SearchBar v-if="showSearch" ref="searchBarRef" :model-value="searchQuery" @update:modelValue="$emit('search-change', $event)" />
           <SortControls
             v-if="showSearch"
             :sort="sortField"
@@ -36,7 +36,7 @@
 
       <!-- Upload zone -->
       <div class="px-6 pt-5 pb-3">
-        <DropZone @files-selected="$emit('upload', $event)" />
+        <DropZone ref="dropZoneRef" @files-selected="$emit('upload', $event)" />
         <UploadProgress :items="uploadQueue" />
       </div>
 
@@ -321,6 +321,11 @@ function topicColor(name) {
   return props.topicColorFn(name)
 }
 
+// ── Child component refs ──────────────────────────────────────────────────────
+
+const dropZoneRef = ref(null)
+const searchBarRef = ref(null)
+
 // ── New folder inline input ───────────────────────────────────────────────────
 
 const showNewFolderInput = ref(false)
@@ -346,8 +351,12 @@ async function submitNewFolder() {
   emit('folder-create', { name, onError: (msg) => { newFolderError.value = msg }, onSuccess: cancelNewFolder })
 }
 
-/** Called by the parent view when the toolbar "New folder" button is clicked. */
-defineExpose({ startNewFolder })
+defineExpose({
+  startNewFolder,
+  triggerUpload: () => dropZoneRef.value?.triggerInput(),
+  focusSearch: () => searchBarRef.value?.focus(),
+  clearSearch: () => emit('search-change', ''),
+})
 
 // ── Rename ────────────────────────────────────────────────────────────────────
 
diff --git a/frontend/src/components/upload/DropZone.vue b/frontend/src/components/upload/DropZone.vue
index 68c298e..9791950 100644
--- a/frontend/src/components/upload/DropZone.vue
+++ b/frontend/src/components/upload/DropZone.vue
@@ -48,6 +48,8 @@ function triggerInput() {
   inputRef.value?.click()
 }
 
+defineExpose({ triggerInput })
+
 function onDrop(e) {
   dragging.value = false
   const files = Array.from(e.dataTransfer?.files || [])
diff --git a/frontend/src/views/FileManagerView.vue b/frontend/src/views/FileManagerView.vue
index ba7a35f..c26ea75 100644
--- a/frontend/src/views/FileManagerView.vue
+++ b/frontend/src/views/FileManagerView.vue
@@ -180,4 +180,11 @@ async function doDeleteDoc(docId) {
 function topicColor(name) {
   return topicsStore.topics.find(t => t.name === name)?.color ?? '#6366f1'
 }
+
+defineExpose({
+  focusSearch: () => browserRef.value?.focusSearch?.(),
+  triggerUpload: () => browserRef.value?.triggerUpload?.(),
+  startNewFolder: () => browserRef.value?.startNewFolder?.(),
+  clearSearch: () => browserRef.value?.clearSearch?.(),
+})
 </script>