From b2f3aa39afc46d0e0d5a537dec48987493d55ecf Mon Sep 17 00:00:00 2001
From: Anders Holck <anders@holck.se>
Date: Wed, 27 May 2026 10:28:53 +0200
Subject: [PATCH] Fix share dialog overflow, improve shared files UX

- Share dialog max-width respects viewport (no off-screen)
- Shared files show filename + owner + permission level
- Click hint below shared list
- Empty state message when no files shared
- openSharedFile uses owner_id for cross-user read
---
 frontend/src/App.vue | 33 +++++++++++++++++++++++++++++++--
 1 file changed, 31 insertions(+), 2 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 6eda261..ea20d08 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -34,7 +34,9 @@
       </div>
       <div v-if="loading" class="loading-bar"></div>
       <FileTree v-if="view === 'files'" :files="filteredFiles" :selected="currentFile" @select="openFile" @delete="deleteItem" @move="moveFile" @rename="renameFile" />
-      <FileTree v-if="view === 'shared'" :files="sharedFiles" :selected="currentFile" @select="openFile" @delete="deleteItem" @move="moveFile" />
+      <FileTree v-if="view === 'shared'" :files="sharedFiles" :selected="currentFile" @select="openSharedFile" @delete="deleteItem" @move="moveFile" />
+      <p v-if="view === 'shared' && !sharedFiles.length" style="padding:16px;color:var(--text-muted);font-size:13px;text-align:center">No files shared with you yet</p>
+      <p v-if="view === 'shared' && sharedFiles.length" style="padding:4px 12px;color:var(--text-muted);font-size:11px">Click a file to open it</p>
       <div v-if="view === 'trash'" class="trash-view">
         <div class="trash-header">
           <span>{{ trashItems.length }} item(s)</span>
@@ -656,12 +658,38 @@ async function handleImageDrop(e) {
 
 async function loadShared() {
   try {
-    sharedFiles.value = await api('/api/files/shared', {})
+    const data = await api('/api/files/shared', {})
+    // Convert to FileTree-compatible format
+    sharedFiles.value = (data || []).filter(f => f.type !== 'outgoing').map(f => ({
+      name: `${f.path} (${f.owner}, ${f.level})`,
+      path: f.path,
+      isDir: false,
+      owner_id: f.owner_id,
+    }))
   } catch (e) {
     sharedFiles.value = []
   }
 }
 
+async function openSharedFile(path) {
+  // Find the shared file entry to get owner_id
+  const entry = sharedFiles.value.find(f => f.path === path)
+  if (!entry || !entry.owner_id) {
+    openFile(path)
+    return
+  }
+  try {
+    const res = await api('/api/files/read', { path, owner_id: entry.owner_id })
+    currentFile.value = path
+    content.value = res.content
+    fileMeta.value = `Shared by ${entry.name.split('(')[1]?.split(')')[0] || 'unknown'}`
+    isDirty.value = false
+    view.value = 'shared'
+  } catch (e) {
+    toast('Cannot open shared file', 'error')
+  }
+}
+
 async function loadTrash() {
   try {
     trashItems.value = await api('/api/files/trash', {})
@@ -1400,6 +1428,7 @@ body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; b
   right: 0;
   top: 50px;
   width: 360px;
+  max-width: calc(100vw - 280px);
   max-height: calc(100vh - 60px);
   overflow-y: auto;
   background: var(--bg-primary);