115 lines
4.8 KiB
Markdown
115 lines
4.8 KiB
Markdown
---
|
|
phase: 10
|
|
plan: 12
|
|
subsystem: frontend/ui
|
|
tags: [refactor, icons, svg, appicon, code-05]
|
|
dependency_graph:
|
|
requires: [10-01]
|
|
provides: [CODE-05-complete]
|
|
affects: [all-vue-components]
|
|
tech_stack:
|
|
patterns: [AppIcon component, named icon registry, stroke icon system]
|
|
key_files:
|
|
modified:
|
|
- frontend/src/components/ui/SearchableModelSelect.vue
|
|
- frontend/src/components/settings/SettingsCloudTab.vue
|
|
- frontend/src/components/settings/SettingsAccountTab.vue
|
|
- frontend/src/components/cloud/CloudProviderTreeItem.vue
|
|
- frontend/src/components/cloud/CloudFolderTreeItem.vue
|
|
- frontend/src/components/cloud/CloudCredentialModal.vue
|
|
- frontend/src/components/auth/TotpEnrollment.vue
|
|
- frontend/src/views/CloudStorageView.vue
|
|
- frontend/src/views/SettingsView.vue
|
|
- frontend/src/views/AccountView.vue
|
|
- frontend/src/views/DocumentView.vue
|
|
- frontend/src/views/SharedView.vue
|
|
- frontend/src/views/admin/AdminAiView.vue
|
|
- frontend/src/views/admin/AdminUsersView.vue
|
|
decisions:
|
|
- Clipboard icons in TotpEnrollment and BackupCodesDisplay kept as inline SVG — path uses Heroicons v2 stroke-width=1.5 variant not in AppIcon registry
|
|
- Loading spinners in CloudCredentialModal, DocumentPreviewModal, UploadProgress kept — they use circle+fill elements, not stroke icons
|
|
- BackupCodesDisplay.vue kept as-is — no matching AppIcon for its clipboard path
|
|
metrics:
|
|
duration: ~25 minutes
|
|
completed: 2026-06-16
|
|
tasks: 2
|
|
files: 14
|
|
---
|
|
|
|
# Phase 10 Plan 12: SVG-to-AppIcon Migration (Tasks 3+4) Summary
|
|
|
|
**One-liner:** Completed CODE-05 SVG migration — all 14 remaining cloud/settings/view files migrated from inline stroke SVGs to `<AppIcon name="..." />`, leaving zero migratable inline SVGs in the codebase.
|
|
|
|
## What Was Built
|
|
|
|
CODE-05 completion: replaced every remaining inline `<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">` stroke icon block across cloud components, settings components, auth components, and all view files with the `<AppIcon name="..." />` component introduced in plan 10-01.
|
|
|
|
### Task 3 — Cloud / Settings / UI files (commit bbb9db7)
|
|
|
|
| File | Icons migrated |
|
|
|------|----------------|
|
|
| `SearchableModelSelect.vue` | `chevronDown`, `pencilEdit` |
|
|
| `SettingsCloudTab.vue` | `cloud`, `warning` (x2) |
|
|
| `CloudProviderTreeItem.vue` | `cloud` |
|
|
| `CloudFolderTreeItem.vue` | `folder`, `fileDoc` |
|
|
|
|
### Task 4 — View files + additional out-of-scope files (commit 20835bc)
|
|
|
|
| File | Icons migrated |
|
|
|------|----------------|
|
|
| `CloudStorageView.vue` | `cloud` |
|
|
| `SettingsView.vue` | `checkCircle`, `exclamationCircle`, `x` (x2) |
|
|
| `AccountView.vue` | `checkMark` |
|
|
| `AdminAiView.vue` | `chevronDown` |
|
|
| `AdminUsersView.vue` | `copy`, `check`, `refresh` |
|
|
| `SettingsAccountTab.vue` | `checkMark` |
|
|
| `TotpEnrollment.vue` | `checkMark` |
|
|
| `CloudCredentialModal.vue` | `x`, `chevronRight` |
|
|
| `DocumentView.vue` | `warning` |
|
|
| `SharedView.vue` | `document` |
|
|
|
|
## Final SVG Count
|
|
|
|
```
|
|
grep -rE '<svg fill="none" stroke="currentColor"' frontend/src --include="*.vue" \
|
|
| grep -v AppIcon.vue | grep -v AppSpinner.vue
|
|
```
|
|
|
|
Result: **0 matches** — CODE-05 complete.
|
|
|
|
## Exceptions (inline SVGs intentionally kept)
|
|
|
|
| File | Line | Reason |
|
|
|------|------|--------|
|
|
| `TotpEnrollment.vue` | 51 | Heroicons v2 clipboard path (`M15.666 3.888...`) with `stroke-width=1.5` — not in AppIcon registry |
|
|
| `BackupCodesDisplay.vue` | 28 | Same Heroicons v2 clipboard path — not in AppIcon registry |
|
|
| `CloudCredentialModal.vue` | 172 | Custom animated spinner (`<circle>` + `fill="currentColor"` path) — not a stroke icon |
|
|
| `DocumentPreviewModal.vue` | 31 | Loading spinner — pre-existing exception from plan 10-12 task 2 |
|
|
| `UploadProgress.vue` | 69 | Loading spinner variant — pre-existing exception from plan 10-12 task 2 |
|
|
|
|
## Commits
|
|
|
|
| Hash | Description |
|
|
|------|-------------|
|
|
| cb41753 | Task 1: sidebar + layout + TreeItem SVGs (prior agent) |
|
|
| 939ea79 | Task 2: folder/document/upload/sharing SVGs (prior agent) |
|
|
| bbb9db7 | Task 3: cloud/settings/UI SVGs |
|
|
| 20835bc | Task 4: view-level SVGs + additional files |
|
|
|
|
## Deviations from Plan
|
|
|
|
**Auto-added out-of-scope files (Rule 2 — completeness):**
|
|
- `SettingsAccountTab.vue`, `TotpEnrollment.vue`, `BackupCodesDisplay.vue`, `CloudCredentialModal.vue`, `DocumentView.vue`, `SharedView.vue` — these had inline SVGs confirmed by grep but were not in the original plan scope. Migrated all that had matching AppIcon names; documented the rest as exceptions.
|
|
|
|
No bugs found. No architectural changes. Plan executed as specified.
|
|
|
|
## Threat Flags
|
|
|
|
None — this plan makes no changes to API surface, auth paths, network endpoints, or DB schema. Pure UI refactor.
|
|
|
|
## Self-Check: PASSED
|
|
|
|
- All 14 modified files exist on disk
|
|
- Commits bbb9db7 and 20835bc verified in git log
|
|
- Final migratable inline SVG count: 0
|