chore: archive v0.2 phase directories to milestones/v0.2-phases/
Moves phases 08–11 execution artifacts from .planning/phases/ to .planning/milestones/v0.2-phases/ to keep .planning/phases/ clean for the next milestone. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Sonnet 4.6
parent
e008bf7dae
commit
123ae5b29b
@@ -0,0 +1,90 @@
|
||||
---
|
||||
phase: 10-ux-interaction
|
||||
plan: "01"
|
||||
subsystem: frontend/ui
|
||||
tags: [icons, svg, component, tdd]
|
||||
dependency_graph:
|
||||
requires: []
|
||||
provides: [AppIcon.vue, ICON_PATHS registry]
|
||||
affects: [all 29 files with inline SVGs — Wave 5 migration target]
|
||||
tech_stack:
|
||||
added: []
|
||||
patterns: [Options API component with inheritAttrs:false, module-scope const map, computed with dev warn]
|
||||
key_files:
|
||||
created:
|
||||
- frontend/src/components/ui/AppIcon.vue
|
||||
- frontend/src/components/ui/__tests__/AppIcon.test.js
|
||||
modified: []
|
||||
decisions:
|
||||
- "32 named icons: 31 single-path strings + 1 dual-path Array (cog) — handles Settings gear dual-path without a variant prop"
|
||||
- "dots icon uses stroke-equivalent Heroicons path instead of fill-based FolderRow path — preserves D-09 outline-only convention"
|
||||
- "search icon uses Heroicons outline magnifying glass path M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0 per plan research note A3"
|
||||
metrics:
|
||||
duration: "2m 11s"
|
||||
completed: "2026-06-15"
|
||||
tasks_completed: 2
|
||||
files_created: 2
|
||||
files_modified: 0
|
||||
requirements: [CODE-05]
|
||||
---
|
||||
|
||||
# Phase 10 Plan 01: AppIcon SVG Registry Summary
|
||||
|
||||
AppIcon.vue created as the single source of truth for all SVG icon paths in DocuVault. 32 named icons covering all stroke-based inline SVG instances across 29 files, ready for Wave 5 migration.
|
||||
|
||||
## What Was Built
|
||||
|
||||
`AppIcon.vue` is an Options API component with:
|
||||
- A module-scope `ICON_PATHS` constant holding 32 entries (31 single-path strings, 1 dual-path Array for `cog`)
|
||||
- `inheritAttrs: false` with `:class="$attrs.class"` forwarding so consumer classes pass through to the `<svg>` element
|
||||
- `resolvedPaths` computed that returns the path value or `null`, with a `console.warn` in `import.meta.env.DEV` for unknown names
|
||||
- `v-if="resolvedPaths"` guard renders nothing for unknown icons
|
||||
- `Array.isArray(resolvedPaths)` branch renders `v-for` paths for the `cog` dual-path icon
|
||||
- All `<path>` elements include `stroke-linecap="round" stroke-linejoin="round" stroke-width="2"` matching existing inline SVG conventions
|
||||
- `fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"` on every `<svg>` — drop-in replacement for all existing inline SVGs
|
||||
|
||||
## ICON_PATHS Key Count
|
||||
|
||||
32 total keys:
|
||||
- 31 single-path: `plus`, `folder`, `folderMove`, `pencil`, `trash`, `share`, `document`, `fileDoc`, `chevronRight`, `chevronDown`, `tag`, `inbox`, `cloud`, `shield`, `logout`, `home`, `users`, `chartBar`, `clipboardList`, `upload`, `x`, `checkCircle`, `exclamationCircle`, `warning`, `copy`, `check`, `checkMark`, `refresh`, `pencilEdit`, `lightBulb`, `search`, `dots`
|
||||
- 1 dual-path Array: `cog` (gear body + gear center dot)
|
||||
|
||||
## TDD Gate Compliance
|
||||
|
||||
RED commit (`4a45dd4`): `test(10-01)` — 6 failing tests, import fails because AppIcon.vue did not exist.
|
||||
GREEN commit (`74fc41c`): `feat(10-01)` — all 6 tests pass.
|
||||
|
||||
## Test Results
|
||||
|
||||
- AppIcon test suite: 6/6 passed
|
||||
- Full frontend suite: 153/153 passed (19 test files, 0 regressions)
|
||||
|
||||
## Commits
|
||||
|
||||
| Task | Commit | Type |
|
||||
|------|--------|------|
|
||||
| Task 1: AppIcon.test.js (RED) | `4a45dd4` | test |
|
||||
| Task 2: AppIcon.vue (GREEN) | `74fc41c` | feat |
|
||||
|
||||
## Deviations from Plan
|
||||
|
||||
None — plan executed exactly as written.
|
||||
|
||||
The `search` and `dots` icon paths were as specified in the plan: search uses the Heroicons outline magnifying-glass path, dots uses the stroke-equivalent vertical ellipsis path per D-09 outline-only convention.
|
||||
|
||||
## Known Stubs
|
||||
|
||||
None. AppIcon.vue is a complete registry component with no placeholder paths or empty slots. Every key maps to a verified SVG path string extracted from the existing codebase (per RESEARCH.md §Section 1 direct file audit).
|
||||
|
||||
## Threat Flags
|
||||
|
||||
None. AppIcon.vue renders only static SVG path strings from a module-scope constant. No user input reaches the template; no network calls; no new attack surface.
|
||||
|
||||
## Self-Check: PASSED
|
||||
|
||||
- `frontend/src/components/ui/AppIcon.vue` exists: FOUND
|
||||
- `frontend/src/components/ui/__tests__/AppIcon.test.js` exists: FOUND
|
||||
- Commit `4a45dd4` exists: FOUND
|
||||
- Commit `74fc41c` exists: FOUND
|
||||
- All 6 AppIcon tests pass: VERIFIED
|
||||
- Full suite 153/153: VERIFIED
|
||||
Reference in New Issue
Block a user