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.
3.7 KiB
3.7 KiB
Phase 13: Frontend Polish & Modern UI
Status: ⬜ Not Started Parent plan: 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 stylesweb/src/lib/components/icons/— SVG icon componentsweb/src/lib/components/— enhanced existing componentsweb/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)