alexei.dolgolyov
cdf21682d6
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.
60 lines
3.7 KiB
Markdown
60 lines
3.7 KiB
Markdown
# 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. -->
|