feat(docker-watcher): phase 2 - crypto & config seed loader
AES-256-GCM encryption for credential storage, YAML seed config parser with validation, and transactional import into SQLite. Credentials (registry tokens, NPM password) encrypted before storage.
This commit is contained in:
@@ -0,0 +1,59 @@
|
||||
# Phase 13: Frontend Polish & Modern UI
|
||||
|
||||
**Status:** ⬜ Not Started
|
||||
**Parent plan:** [PLAN.md](./PLAN.md)
|
||||
**Domain:** frontend
|
||||
|
||||
## Objective
|
||||
Enhance the web UI with a modern, polished look and feel — custom SVG icons, refined typography, consistent color palette, smooth transitions, and overall professional frontend quality.
|
||||
|
||||
## Tasks
|
||||
|
||||
- [ ] Task 1: Design system foundations — define color palette (dark/light), spacing scale, typography scale, border radius tokens as CSS custom properties
|
||||
- [ ] Task 2: SVG icon set — create or integrate a consistent icon library (Lucide, Heroicons, or custom SVGs) for all UI actions (deploy, stop, start, restart, remove, settings, registry, etc.)
|
||||
- [ ] Task 3: Refine layout — polished sidebar/topnav with active state indicators, smooth transitions, responsive breakpoints
|
||||
- [ ] Task 4: Dashboard cards — redesign project cards with status indicators, instance count badges, sparkline activity, hover effects
|
||||
- [ ] Task 5: Project detail view — clean table/card layout for instances, inline status badges with pulse animation for "running", deploy history timeline
|
||||
- [ ] Task 6: Form styling — consistent input fields, select dropdowns, toggle switches (replace checkboxes), button hierarchy (primary/secondary/danger)
|
||||
- [ ] Task 7: Toast/notification system — slide-in toasts with icons, auto-dismiss, stacking
|
||||
- [ ] Task 8: Loading states — skeleton loaders for data fetching, spinner for actions, progress indicator for deploys
|
||||
- [ ] Task 9: Empty states — illustrated empty states with call-to-action for "no projects", "no instances", "no deploys"
|
||||
- [ ] Task 10: Responsive design — mobile-friendly layout, collapsible sidebar, touch-friendly controls
|
||||
- [ ] Task 11: Micro-interactions — button press feedback, status transition animations, deploy progress animation
|
||||
- [ ] Task 12: Dark mode support (optional) — toggle in settings, respect system preference
|
||||
- [ ] Task 13: Localization (EN/RU) — i18n setup with locale switcher, translate all UI strings to English and Russian, persist language preference
|
||||
|
||||
## Files to Modify/Create
|
||||
- `web/src/lib/styles/` — design tokens, global styles
|
||||
- `web/src/lib/components/icons/` — SVG icon components
|
||||
- `web/src/lib/components/` — enhanced existing components
|
||||
- `web/src/lib/i18n/` — locale files (en.json, ru.json), i18n helper, locale switcher component
|
||||
- All route files — refined layouts and styling, replace hardcoded strings with i18n keys
|
||||
|
||||
## Acceptance Criteria
|
||||
- UI looks modern and professional — not "default framework" appearance
|
||||
- Consistent icon language throughout the app
|
||||
- Smooth transitions and meaningful animations (not gratuitous)
|
||||
- Responsive down to mobile viewport
|
||||
- Loading and empty states provide good UX
|
||||
- Color palette works well in both light and dark contexts
|
||||
- All UI strings available in English and Russian, switchable via locale picker
|
||||
|
||||
## Notes
|
||||
- This phase runs AFTER all functionality is complete — pure visual/UX enhancement
|
||||
- Do not change any functionality or API contracts
|
||||
- Prefer CSS custom properties for theming over hardcoded values
|
||||
- Keep bundle size reasonable — inline SVGs preferred over icon font libraries
|
||||
- Animations should be tasteful and serve UX, not decoration
|
||||
- For i18n, use a lightweight approach (JSON locale files + Svelte store) — no heavy i18n framework needed
|
||||
- Default language: English. Russian as secondary. Locale persisted to localStorage
|
||||
|
||||
## Review Checklist
|
||||
- [ ] All tasks completed
|
||||
- [ ] Visual consistency across all pages
|
||||
- [ ] No functionality regressions
|
||||
- [ ] Responsive on mobile/tablet/desktop
|
||||
- [ ] Accessible (proper contrast ratios, focus states, aria labels on icons)
|
||||
|
||||
## Handoff to Next Phase
|
||||
<!-- This is the final UI phase — no handoff needed. -->
|
||||
Reference in New Issue
Block a user