---
phase: 04-folders-sharing-quotas-document-ux
plan: "08"
subsystem: frontend-data-layer
tags: [api-client, pinia, vue-router, folders, shares, preferences, search]
dependency_graph:
  requires: ["04-07"]
  provides: ["frontend-data-contracts-for-04-09"]
  affects: ["frontend/src/api/client.js", "frontend/src/stores/folders.js", "frontend/src/stores/documents.js", "frontend/src/router/index.js"]
tech_stack:
  added: []
  patterns: ["Pinia Composition API store", "debounced watcher without lodash", "lazy route imports"]
key_files:
  created:
    - frontend/src/stores/folders.js
  modified:
    - frontend/src/api/client.js
    - frontend/src/stores/documents.js
    - frontend/src/router/index.js
decisions:
  - "listDocuments extended in-place (not replaced) to preserve backward compatibility with existing callers"
  - "getDocumentContentUrl returns a plain string (no fetch) for use as iframe src or window.open target"
  - "searchQuery watcher enforces 2-char minimum before API call — shorter inputs restore full list without hitting backend"
  - "New routes use same implicit beforeEach auth guard as existing routes (check !meta.public && !accessToken)"
metrics:
  duration: "12 minutes"
  completed: "2026-05-25"
  tasks_completed: 2
  tasks_total: 2
  files_changed: 4
---

# Phase 4 Plan 08: Frontend Data Layer Summary

**One-liner:** Wired all Phase 4 backend endpoints to the frontend via 13 new API client functions, a new useFoldersStore (Pinia Composition API), extended useDocumentsStore with folder/search/sort/share state, and two new authenticated routes.

## Tasks Completed

| # | Task | Commit | Files |
|---|------|--------|-------|
| 1 | Add Phase 4 API functions to client.js and create folders store | 5417f26 | frontend/src/api/client.js, frontend/src/stores/folders.js |
| 2 | Extend documents store with folder/search/share actions + add Vue Router routes | 5417f26 | frontend/src/stores/documents.js, frontend/src/router/index.js |

## What Was Built

### API Client Extensions (frontend/src/api/client.js)

**`listDocuments` updated** to accept `folderId`, `q`, `sort`, `order` params — passed via `URLSearchParams` when non-null/non-empty.

**13 new functions added:**

| Group | Functions |
|-------|-----------|
| Folders | `listFolders`, `createFolder`, `getFolder`, `renameFolder`, `deleteFolder`, `moveDocument` |
| Shares | `createShare`, `listShares`, `deleteShare`, `getSharedWithMe` |
| Preferences | `getMyPreferences`, `updateMyPreferences` |
| Proxy URL | `getDocumentContentUrl` |

### Folders Store (frontend/src/stores/folders.js)

New Pinia Composition API store (`useFoldersStore`) following the exact `useTopicsStore` pattern:
- State: `folders`, `currentFolderId`, `breadcrumb`, `loading`, `error`
- Actions: `fetchFolders`, `createFolder`, `renameFolder`, `deleteFolder`, `navigateTo`
- `navigateTo` fetches folder detail for breadcrumb population; handles null (root) cleanly

### Documents Store Extensions (frontend/src/stores/documents.js)

- Added `watch` import from 'vue'
- New state refs: `currentFolderId`, `searchQuery`, `sortField`, `sortOrder`
- `fetchDocuments` extended to accept and pass `folderId`, `q`, `sort`, `order` to `api.listDocuments`
- Debounced `searchQuery` watcher: 300ms delay, 2-char minimum (T-04-08-03 mitigated)
- New share actions: `shareDocument`, `revokeShare`, `listShares`
- Return statement extended with all new state and actions

### Router Routes (frontend/src/router/index.js)

Two new lazy-loaded authenticated routes appended:
- `/folders/:folderId` → `FolderView.vue` (named `folder`)
- `/shared` → `SharedView.vue` (named `shared`)

Both use `meta: { requiresAuth: true }` and are guarded by the existing `beforeEach` hook.

## Deviations from Plan

None — plan executed exactly as written.

## Threat Mitigations Applied

| Threat | Mitigation |
|--------|-----------|
| T-04-08-01 — unguarded routes | Both new routes have `meta: { requiresAuth: true }` |
| T-04-08-03 — premature search | `searchQuery` watcher checks `newVal.length < 2` before firing API call |

## Known Stubs

None. This plan creates data layer only — no UI components with rendering stubs.

## Self-Check: PASSED

- `frontend/src/api/client.js` — FOUND, 45 export functions (13 new)
- `frontend/src/stores/folders.js` — FOUND, exports `useFoldersStore`
- `frontend/src/stores/documents.js` — FOUND, contains all new refs and actions
- `frontend/src/router/index.js` — FOUND, contains `/folders/:folderId` and `/shared` routes
- Commit `5417f26` — FOUND in git log