alexei.dolgolyov
a3aa5912d9
Design system with CSS custom properties (light/dark themes). 38 Lucide SVG icon components. Dark mode with system preference. EN/RU localization with i18n store. Skeleton loaders, empty states, toggle switches, micro-interactions. Responsive sidebar with mobile hamburger menu. All pages polished with consistent styling.
87 lines
6.7 KiB
Markdown
87 lines
6.7 KiB
Markdown
# Phase 13: Frontend Polish & Modern UI
|
|
|
|
**Status:** COMPLETED
|
|
**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
|
|
|
|
- [x] Task 1: Design system foundations — CSS custom properties for color palette (light/dark), spacing scale, typography scale, border radius tokens, shadows, transitions in `web/src/lib/styles/tokens.css`
|
|
- [x] Task 2: SVG icon set — 38 Lucide-based inline SVG icon components in `web/src/lib/components/icons/` covering all UI actions (deploy, stop, start, restart, remove, settings, registry, etc.)
|
|
- [x] Task 3: Refine layout — polished sidebar with active state indicators (dot + background), smooth transitions, responsive breakpoints, collapsible sidebar on mobile with hamburger menu
|
|
- [x] Task 4: Dashboard cards — redesigned project cards with box icon, status indicators, instance count badges, hover effects (-translate-y-0.5, shadow-md), port/healthcheck chips
|
|
- [x] Task 5: Project detail view — clean card layout for instances with icon action buttons, inline status badges with pulse animation for "running", deploy history as timeline cards
|
|
- [x] Task 6: Form styling — consistent input fields with design tokens, select dropdowns, ToggleSwitch component replacing checkboxes, button hierarchy (primary brand/secondary/danger)
|
|
- [x] Task 7: Toast/notification system — slide-in toasts with Lucide icons, rounded-xl, auto-dismiss, stacking
|
|
- [x] Task 8: Loading states — Skeleton, SkeletonCard, SkeletonTable loader components with shimmer animation for data fetching, IconLoader spinner for actions
|
|
- [x] Task 9: Empty states — EmptyState component with SVG illustrations and call-to-action buttons for all empty list scenarios
|
|
- [x] Task 10: Responsive design — mobile-friendly layout with collapsible sidebar, hamburger menu, mobile top bar, touch-friendly controls, horizontal settings nav on mobile
|
|
- [x] Task 11: Micro-interactions — button press feedback (active:animate-press), status pulse animation (ping), scale-in for dialogs/forms, fade-in for overlays, slide-in for toasts
|
|
- [x] Task 12: Dark mode support — ThemeToggle component with light/dark/system modes, CSS custom properties for dark theme via [data-theme="dark"], localStorage persistence, system preference detection
|
|
- [x] Task 13: Localization (EN/RU) — i18n store with derived t() function, en.json and ru.json locale files, LocaleSwitcher component, localStorage persistence, all UI strings translated
|
|
|
|
## Files Created
|
|
- `web/src/lib/styles/tokens.css` — design tokens (colors, spacing, typography, radius, shadows, transitions, animations)
|
|
- `web/src/lib/components/icons/` — 38 Lucide icon components + index.ts barrel export
|
|
- `web/src/lib/i18n/en.json` — English locale strings
|
|
- `web/src/lib/i18n/ru.json` — Russian locale strings
|
|
- `web/src/lib/i18n/index.ts` — i18n store with t() function and locale management
|
|
- `web/src/lib/stores/theme.ts` — dark mode store with system preference detection
|
|
- `web/src/lib/components/Skeleton.svelte` — base skeleton loader
|
|
- `web/src/lib/components/SkeletonCard.svelte` — card skeleton placeholder
|
|
- `web/src/lib/components/SkeletonTable.svelte` — table skeleton placeholder
|
|
- `web/src/lib/components/EmptyState.svelte` — empty state with SVG illustrations
|
|
- `web/src/lib/components/ToggleSwitch.svelte` — toggle switch replacing checkboxes
|
|
- `web/src/lib/components/ThemeToggle.svelte` — light/dark/system theme toggle
|
|
- `web/src/lib/components/LocaleSwitcher.svelte` — EN/RU locale switcher
|
|
|
|
## Files Modified
|
|
- `web/src/app.css` — imports tokens.css, adds base styles, custom scrollbar, focus ring utility
|
|
- `web/src/routes/+layout.svelte` — polished sidebar with icons, collapsible mobile sidebar, theme/locale controls
|
|
- `web/src/routes/+page.svelte` — dashboard with stats cards, skeleton loaders, empty states, i18n
|
|
- `web/src/routes/login/+page.svelte` — polished login with design tokens and i18n
|
|
- `web/src/routes/deploy/+page.svelte` — quick deploy with icons, animations, i18n
|
|
- `web/src/routes/projects/+page.svelte` — projects list with skeleton loaders, empty states, i18n
|
|
- `web/src/routes/projects/[id]/+page.svelte` — project detail with deploy timeline, icons, i18n
|
|
- `web/src/routes/projects/[id]/env/+page.svelte` — env editor with toggle switches, icons, i18n
|
|
- `web/src/routes/projects/[id]/volumes/+page.svelte` — volume editor with icons, i18n
|
|
- `web/src/routes/settings/+layout.svelte` — settings nav with icons, responsive horizontal nav
|
|
- `web/src/routes/settings/+page.svelte` — general settings with design tokens, i18n
|
|
- `web/src/routes/settings/registries/+page.svelte` — registries with icons, empty states, i18n
|
|
- `web/src/routes/settings/credentials/+page.svelte` — credentials with design tokens, i18n
|
|
- `web/src/routes/settings/auth/+page.svelte` — auth settings with icons, empty states, i18n
|
|
- `web/src/lib/components/Toast.svelte` — slide-in toasts with Lucide icons
|
|
- `web/src/lib/components/StatusBadge.svelte` — pulse animation for running status
|
|
- `web/src/lib/components/ConfirmDialog.svelte` — fade/scale-in animation, icon
|
|
- `web/src/lib/components/FormField.svelte` — consistent styling with design tokens
|
|
- `web/src/lib/components/ProjectCard.svelte` — redesigned with hover effects, badges
|
|
- `web/src/lib/components/InstanceCard.svelte` — icon action buttons, improved layout
|
|
|
|
## Acceptance Criteria
|
|
- [x] UI looks modern and professional — not "default framework" appearance
|
|
- [x] Consistent icon language throughout the app
|
|
- [x] Smooth transitions and meaningful animations (not gratuitous)
|
|
- [x] Responsive down to mobile viewport
|
|
- [x] Loading and empty states provide good UX
|
|
- [x] Color palette works well in both light and dark contexts
|
|
- [x] All UI strings available in English and Russian, switchable via locale picker
|
|
|
|
## Review Checklist
|
|
- [x] All tasks completed
|
|
- [x] Visual consistency across all pages
|
|
- [x] No functionality regressions
|
|
- [x] Responsive on mobile/tablet/desktop
|
|
- [x] Accessible (proper contrast ratios, focus states, aria labels on icons)
|
|
|
|
## Handoff Notes
|
|
This is the FINAL phase. All 13 phases of Docker Watcher are now complete. The application has:
|
|
- Full Go backend with SQLite, Docker management, Nginx Proxy Manager integration
|
|
- SvelteKit frontend with dark mode, i18n (EN/RU), responsive design, skeleton loaders, empty states
|
|
- Real-time SSE events for deploy/instance status
|
|
- Authentication (local + OIDC), RBAC, registry management
|
|
- Environment variable overrides, volume management, config export
|
|
- Webhook-based and polling-based image detection
|