From 6b567636894419e0ea2c33270d2a8bf2145ee2fc Mon Sep 17 00:00:00 2001
From: curo1305 <curo1305@proton.me>
Date: Tue, 16 Jun 2026 09:57:17 +0200
Subject: [PATCH] =?UTF-8?q?fix(10):=20close=20UX-06/UX-10/UX-13=20verifica?=
 =?UTF-8?q?tion=20gaps=20=E2=80=94=20Escape=20modal=20close,=20rename/revo?=
 =?UTF-8?q?ke=20toasts,=20StorageBrowser=20picker=20tests?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/folders/FolderDeleteModal.vue  |  7 ++
 .../src/components/sharing/ShareModal.vue     | 14 +++-
 .../__tests__/StorageBrowser.skeleton.test.js | 83 ++++++++++++++++++-
 frontend/src/views/FileManagerView.vue        |  8 +-
 4 files changed, 106 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/folders/FolderDeleteModal.vue b/frontend/src/components/folders/FolderDeleteModal.vue
index b74a1f7..2e8b4ac 100644
--- a/frontend/src/components/folders/FolderDeleteModal.vue
+++ b/frontend/src/components/folders/FolderDeleteModal.vue
@@ -49,6 +49,7 @@
 </template>
 
 <script setup>
+import { onMounted, onUnmounted } from 'vue'
 import AppIcon from '../ui/AppIcon.vue'
 
 const props = defineProps({
@@ -68,6 +69,12 @@ const props = defineProps({
 
 const emit = defineEmits(['confirm', 'cancel'])
 
+function onKeydown(e) {
+  if (e.key === 'Escape') handleCancel()
+}
+onMounted(() => window.addEventListener('keydown', onKeydown))
+onUnmounted(() => window.removeEventListener('keydown', onKeydown))
+
 function handleConfirm() {
   emit('confirm')
   if (props.onConfirm) props.onConfirm()
diff --git a/frontend/src/components/sharing/ShareModal.vue b/frontend/src/components/sharing/ShareModal.vue
index 6248c1f..b2fb4e4 100644
--- a/frontend/src/components/sharing/ShareModal.vue
+++ b/frontend/src/components/sharing/ShareModal.vue
@@ -113,9 +113,10 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, onUnmounted } from 'vue'
 import AppIcon from '../ui/AppIcon.vue'
 import { useDocumentsStore } from '../../stores/documents.js'
+import { useToastStore } from '../../stores/toast.js'
 
 const props = defineProps({
   doc: {
@@ -127,6 +128,7 @@ const props = defineProps({
 const emit = defineEmits(['close', 'unshared'])
 
 const docsStore = useDocumentsStore()
+const toast = useToastStore()
 
 const handle = ref('')
 const permission = ref('view')
@@ -137,7 +139,12 @@ const shares = ref([])
 const loadingShares = ref(false)
 const updatingPermission = ref(new Set())
 
+function onKeydown(e) {
+  if (e.key === 'Escape') emit('close')
+}
+
 onMounted(async () => {
+  window.addEventListener('keydown', onKeydown)
   loadingShares.value = true
   try {
     const data = await docsStore.listShares(props.doc.id)
@@ -149,6 +156,10 @@ onMounted(async () => {
   }
 })
 
+onUnmounted(() => {
+  window.removeEventListener('keydown', onKeydown)
+})
+
 async function submitShare() {
   const trimmed = handle.value.trim()
   if (!trimmed || submitting.value) return
@@ -201,6 +212,7 @@ async function handleRevoke(shareId) {
 
   try {
     await docsStore.revokeShare(shareId)
+    toast.show('Share revoked', 'success')
     if (shares.value.length === 0) emit('unshared', props.doc.id)
   } catch (e) {
     // Re-add on failure
diff --git a/frontend/src/components/storage/__tests__/StorageBrowser.skeleton.test.js b/frontend/src/components/storage/__tests__/StorageBrowser.skeleton.test.js
index 95b8066..b073c78 100644
--- a/frontend/src/components/storage/__tests__/StorageBrowser.skeleton.test.js
+++ b/frontend/src/components/storage/__tests__/StorageBrowser.skeleton.test.js
@@ -1,6 +1,7 @@
-import { describe, it, expect, beforeEach } from 'vitest'
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
 import { mount } from '@vue/test-utils'
 import { createPinia, setActivePinia } from 'pinia'
+import { nextTick } from 'vue'
 import StorageBrowser from '../StorageBrowser.vue'
 
 const globalStubs = {
@@ -55,8 +56,82 @@ describe('UX-02: StorageBrowser shows skeleton rows during loading', () => {
   })
 })
 
+const SAMPLE_FILE = {
+  id: 'file-1',
+  original_name: 'doc.pdf',
+  size_bytes: 2048,
+  created_at: '2025-01-01T00:00:00Z',
+  status: 'ready',
+  topics: [],
+  is_shared: false,
+}
+
+const SAMPLE_FOLDER = { id: 'folder-1', name: 'Archive', doc_count: 0 }
+
 describe('UX-13: StorageBrowser folder picker uses Teleport + getBoundingClientRect', () => {
-  it.todo('folder picker dropdown is teleported to body (escapes overflow container)')
-  it.todo('dropdown position reflects getBoundingClientRect of the trigger button')
-  it.todo('window scroll while open recalculates position')
+  beforeEach(() => {
+    vi.spyOn(Element.prototype, 'getBoundingClientRect').mockReturnValue({
+      top: 100, bottom: 140, left: 50, right: 250,
+      width: 200, height: 40, x: 50, y: 100,
+    })
+    Object.defineProperty(window, 'innerHeight', { value: 800, writable: true })
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('folder picker dropdown is teleported to body (escapes overflow container)', async () => {
+    const wrapper = mount(StorageBrowser, {
+      props: { mode: 'local', files: [SAMPLE_FILE], folders: [], rootFolders: [SAMPLE_FOLDER] },
+      global: { stubs: globalStubs },
+      attachTo: document.body,
+    })
+    const moveBtn = wrapper.find('button[title="Move to folder"]')
+    expect(moveBtn.exists()).toBe(true)
+    await moveBtn.trigger('click')
+    await nextTick()
+    const picker = document.body.querySelector('[data-test="folder-picker"]')
+    expect(picker).not.toBeNull()
+    wrapper.unmount()
+  })
+
+  it('dropdown position reflects getBoundingClientRect of the trigger button', async () => {
+    const wrapper = mount(StorageBrowser, {
+      props: { mode: 'local', files: [SAMPLE_FILE], folders: [], rootFolders: [SAMPLE_FOLDER] },
+      global: { stubs: globalStubs },
+      attachTo: document.body,
+    })
+    const moveBtn = wrapper.find('button[title="Move to folder"]')
+    await moveBtn.trigger('click')
+    await nextTick()
+    const picker = document.body.querySelector('[data-test="folder-picker"]')
+    expect(picker).not.toBeNull()
+    const style = picker.style
+    expect(style.top || style.bottom).toBeTruthy()
+    expect(style.left).toBeTruthy()
+    wrapper.unmount()
+  })
+
+  it('window scroll while open recalculates position', async () => {
+    const wrapper = mount(StorageBrowser, {
+      props: { mode: 'local', files: [SAMPLE_FILE], folders: [], rootFolders: [SAMPLE_FOLDER] },
+      global: { stubs: globalStubs },
+      attachTo: document.body,
+    })
+    const moveBtn = wrapper.find('button[title="Move to folder"]')
+    await moveBtn.trigger('click')
+    await nextTick()
+    const picker = document.body.querySelector('[data-test="folder-picker"]')
+    const initialTop = picker.style.top || picker.style.bottom
+    vi.spyOn(Element.prototype, 'getBoundingClientRect').mockReturnValue({
+      top: 300, bottom: 340, left: 50, right: 250,
+      width: 200, height: 40, x: 50, y: 300,
+    })
+    window.dispatchEvent(new Event('scroll', { bubbles: true }))
+    await nextTick()
+    const updatedTop = picker.style.top || picker.style.bottom
+    expect(updatedTop).not.toBe(initialTop)
+    wrapper.unmount()
+  })
 })
diff --git a/frontend/src/views/FileManagerView.vue b/frontend/src/views/FileManagerView.vue
index b3b97a0..217baf0 100644
--- a/frontend/src/views/FileManagerView.vue
+++ b/frontend/src/views/FileManagerView.vue
@@ -140,7 +140,13 @@ async function handleFolderCreate({ name, onError, onSuccess }) {
 
 async function handleFolderRename({ id, name }) {
   if (!name) return
-  try { await foldersStore.renameFolder(id, name) } catch {}
+  const toast = useToastStore()
+  try {
+    await foldersStore.renameFolder(id, name)
+    toast.show('Folder renamed', 'success')
+  } catch (e) {
+    toast.show('Rename failed: ' + (e.message || 'unknown error'), 'error')
+  }
 }
 
 const folderToDelete = ref(null)