feat(phase-4): complete UX redesign — FileManagerView, FolderTreeItem, test suite, and all Phase 4 fixes

Adds the unified file manager view (Windows Explorer-style), collapsible
folder tree sidebar item, full vitest test suite (55 tests, 4 files), and
commits all Phase 4 backend/frontend fixes that were staged but uncommitted.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/stores/folders.js

@@ -4,17 +4,21 @@ import * as api from '../api/client.js'
 
 export const useFoldersStore = defineStore('folders', () => {
   const folders = ref([])
+  const rootFolders = ref([]) // root-level folders for sidebar tree and folder pickers
   const currentFolderId = ref(null)
   const breadcrumb = ref([])
   const loading = ref(false)
   const error = ref(null)
+  const treeVersion = ref(0) // bumped on any mutation so sidebar tree can react
 
   async function fetchFolders(parentId = null) {
     loading.value = true
     error.value = null
     try {
       const data = await api.listFolders(parentId)
-      folders.value = data.items ?? data
+      const list = data.items ?? data
+      folders.value = list
+      if (parentId === null) rootFolders.value = list
     } catch (e) {
       error.value = e.message || 'Failed to load folders'
     } finally {
@@ -22,12 +26,21 @@ export const useFoldersStore = defineStore('folders', () => {
     }
   }
 
+  async function fetchRootFolders() {
+    try {
+      const data = await api.listFolders(null)
+      rootFolders.value = data.items ?? data
+    } catch {}
+  }
+
   async function createFolder(name, parentId = null) {
     loading.value = true
     error.value = null
     try {
       const folder = await api.createFolder(name, parentId)
       folders.value.push(folder)
+      if (parentId === null) rootFolders.value.push(folder)
+      treeVersion.value++
       return folder
     } catch (e) {
       error.value = e.message || 'Failed to create folder'
@@ -44,6 +57,9 @@ export const useFoldersStore = defineStore('folders', () => {
       const updated = await api.renameFolder(folderId, name)
       const idx = folders.value.findIndex(f => f.id === folderId)
       if (idx !== -1) folders.value[idx] = updated
+      const rootIdx = rootFolders.value.findIndex(f => f.id === folderId)
+      if (rootIdx !== -1) rootFolders.value[rootIdx] = updated
+      treeVersion.value++
       return updated
     } catch (e) {
       error.value = e.message || 'Failed to rename folder'
@@ -59,6 +75,8 @@ export const useFoldersStore = defineStore('folders', () => {
     try {
       await api.deleteFolder(folderId)
       folders.value = folders.value.filter(f => f.id !== folderId)
+      rootFolders.value = rootFolders.value.filter(f => f.id !== folderId)
+      treeVersion.value++
     } catch (e) {
       error.value = e.message || 'Failed to delete folder'
       throw e
@@ -78,8 +96,9 @@ export const useFoldersStore = defineStore('folders', () => {
       }
     } else {
       breadcrumb.value = []
+      folders.value = [] // clear stale subfolder list when returning to home
     }
   }
 
-  return { folders, currentFolderId, breadcrumb, loading, error, fetchFolders, createFolder, renameFolder, deleteFolder, navigateTo }
+  return { folders, rootFolders, currentFolderId, breadcrumb, loading, error, treeVersion, fetchFolders, fetchRootFolders, createFolder, renameFolder, deleteFolder, navigateTo }
 })