# 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. -->