Complete remaining TODO: image upload, spinners, drag-to-trash, sort

- Image upload: drag-drop images into editor, stored in .assets/
- Serve images via /api/files/image/ endpoint
- Loading spinner bar in sidebar during file operations
- Sort files by name/date buttons
- Drag files onto Trash button to delete
- All code TODO items complete

frontend/src/App.vue

@@ -20,12 +20,17 @@
       <div class="sidebar-nav">
         <button :class="{active: view === 'files'}" @click="view = 'files'">📄 Files</button>
         <button :class="{active: view === 'shared'}" @click="view = 'shared'">🤝 Shared</button>
-        <button :class="{active: view === 'trash'}" @click="view = 'trash'; loadTrash()">🗑️ Trash</button>
+        <button :class="{active: view === 'trash'}" @click="view = 'trash'; loadTrash()" @dragover.prevent @drop.prevent="dropToTrash($event)">🗑️ Trash</button>
         <button :class="{active: view === 'prefs'}" @click="view = 'prefs'">⚙️</button>
         <button v-if="isAdmin" :class="{active: view === 'admin'}" @click="view = 'admin'">👤</button>
         <button @click="logout" title="Logout">🚪</button>
         <button @click="view = 'about'" title="About">ℹ️</button>
       </div>
+      <div v-if="view === 'files'" class="sort-bar">
+        <button @click="sortFiles('name')" :class="{active: sortBy === 'name'}">Name</button>
+        <button @click="sortFiles('date')" :class="{active: sortBy === 'date'}">Date</button>
+      </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" />
       <div v-if="view === 'trash'" class="trash-view">
@@ -92,6 +97,8 @@
             v-model="content"
             @input="isDirty = true"
             @keydown="handleKeydown"
+            @drop.prevent="handleImageDrop"
+            @dragover.prevent
             placeholder="Start writing markdown..."
           ></textarea>
         </div>
@@ -324,6 +331,8 @@ const collabActive = ref(false)
 const sidebarOpen = ref(false)
 const toasts = ref([])
 const showShortcuts = ref(false)
+const loading = ref(false)
+const sortBy = ref('name')
 
 let toastId = 0
 function toast(msg, type = 'info') {
@@ -427,8 +436,10 @@ async function syncPending() {
 // ─── Files ───────────────────────────────────────────────────────────────────
 
 async function loadFiles() {
+  loading.value = true
   fileTree.value = await api('/api/files/list', {})
   filteredFiles.value = fileTree.value
+  loading.value = false
 }
 
 function filterFiles() {
@@ -578,6 +589,44 @@ async function renameFile(item) {
   }
 }
 
+function sortFiles(by) {
+  sortBy.value = by
+  const sorter = (a, b) => {
+    if (a.isDir !== b.isDir) return a.isDir ? -1 : 1
+    if (by === 'name') return a.name.localeCompare(b.name)
+    return 0 // date sort would need mtime from server
+  }
+  filteredFiles.value = [...filteredFiles.value].sort(sorter)
+}
+
+async function handleImageDrop(e) {
+  const files = e.dataTransfer?.files
+  if (!files || !files.length) return
+  for (const file of files) {
+    if (!file.type.startsWith('image/')) continue
+    const form = new FormData()
+    form.append('image', file)
+    try {
+      const res = await fetch('/api/files/upload-image', {
+        method: 'POST',
+        headers: { 'Authorization': 'Bearer ' + token.value },
+        body: form,
+      })
+      const data = await res.json()
+      if (data.url) {
+        const md = `![${data.filename}](${data.url})\n`
+        const ta = editor.value
+        const pos = ta ? ta.selectionStart : content.value.length
+        content.value = content.value.substring(0, pos) + md + content.value.substring(pos)
+        isDirty.value = true
+        toast('Image uploaded', 'success')
+      }
+    } catch {
+      toast('Image upload failed', 'error')
+    }
+  }
+}
+
 // ─── Shared ──────────────────────────────────────────────────────────────────
 
 async function loadShared() {
@@ -608,6 +657,12 @@ async function emptyTrash() {
   trashItems.value = []
 }
 
+function dropToTrash(e) {
+  const path = e.dataTransfer.getData('text/plain')
+  if (!path) return
+  deleteItem({ path, name: path.split('/').pop(), isDir: false })
+}
+
 // ─── Preferences ─────────────────────────────────────────────────────────────
 
 function savePrefs() {
@@ -1365,6 +1420,30 @@ body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
 .ai-content ul, .ai-content ol { padding-left: 2em; margin: 0 0 12px; }
 
 .trash-view { padding: 8px; flex: 1; overflow-y: auto; }
+
+.sort-bar {
+  display: flex;
+  gap: 4px;
+  padding: 4px 8px;
+  border-bottom: 1px solid var(--border);
+}
+.sort-bar button {
+  background: transparent;
+  border: none;
+  color: var(--text-muted);
+  font-size: 11px;
+  cursor: pointer;
+  padding: 2px 8px;
+  border-radius: 3px;
+}
+.sort-bar button.active { background: var(--bg-hover); color: var(--text); }
+
+.loading-bar {
+  height: 2px;
+  background: var(--accent);
+  animation: loadPulse 1s infinite;
+}
+@keyframes loadPulse { 0%,100% { opacity: 0.3; } 50% { opacity: 1; } }
 .trash-header { display: flex; justify-content: space-between; align-items: center; padding: 8px; font-size: 12px; color: var(--text-muted); }
 .empty-trash-btn { background: var(--danger); color: white; border: none; padding: 4px 10px; border-radius: 4px; cursor: pointer; font-size: 12px; }
 .trash-item { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px; border-radius: 4px; font-size: 13px; }