feat(vault): Vault File Browser UI — New menu, upload modals & mock service

[ajinkyap9]

Description

Add a Google Drive / Dropbox–style Vault file browser UI and upload workflow for the client (frontend-only, development mode).

Key additions

• New Vault route & page
  • VaultPage.tsx
• Sidebar folder tree
  • client/src/components/vault/VaultSidebar.tsx
• File & folder views
  • Grid view: FileGrid.tsx
  • List view: FileList.tsx
• Breadcrumb navigation
  • VaultBreadcrumb.tsx
• “New ▾” header menu
  • New Folder → folder name modal
  • Upload File → modal with centered DropZone + file chooser
  • Upload Folder → modal using webkitdirectory
• Upload UX
  • Reusable DropZone component
  • UploadFileModal & UploadFolderModal
  • Hidden file input fallback
• Mock in-memory Vault service
  • client/src/services/vaultService.ts
  • Supports:
    • getChildren
    • getFolderTree
    • createFolder
    • uploadFile
    • rename
    • delete
    • getPath
• Routing
  • Wired /vault/* route in App.tsx
• Styling
  • Small UI improvements using existing Tailwind classes

⚠️ Note: Uploads are currently stored in an in-memory mock service.
Backend persistence will be handled in Issue #70.

---

🔗 Related Issue

• [Vault 2/13] File Browser UI — [Vault 2/13] File Browser UI #72
• Part of: [Feature] AI Vault - Personal Cloud Storage with AI Study Tools #69 — AI Vault: Personal Cloud Storage with AI Study Tools
• Depends on: [Vault 1/13] Database Schema & API #70 — Vault schema & API (backend)

Closes: #72

---

🏷️ Type of Change

• ✨ New feature (non-breaking change that adds functionality)
• 🎨 Style/UI update
• 🐛 Bug fix
• 💥 Breaking change
• 📝 Documentation update
• ♻️ Code refactoring
• ⚡ Performance improvement
• 🧪 Test update

---

Screenshots (if applicable)

(Attach UI screenshots in the PR if available)

• Vault page layout
• “New ▾” menu
• Upload File modal
• Upload Folder modal
• Grid & List views

---

Checklist

• My code follows the project's style guidelines
• I have performed a self-review of my code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have tested my changes locally
• Any dependent changes have been merged and published

---

Testing

How I tested locally

npm run dev

[tarinagarwal]

@ajinkyap9 please attach relavent screenshots

[ajinkyap9]

@tarinagarwal Attached now you can check and if any change required let me know

[ajinkyap9]

@tarinagarwal please can you review the pr

[ajinkyap9]

@tarinagarwal can you review asap