alexei.dolgolyov/tiny-forge
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
0491849f0fde22ff01f6336af280df2bc87f902b
tiny-forge/plans/docker-watcher-core/phase-13-ui-polish.md
T
alexei.dolgolyov a3aa5912d9 feat(docker-watcher): phase 14 - frontend polish & modern UI 
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.
2026-03-27 23:53:09 +03:00

6.7 KiB
Raw Blame History

Phase 13: Frontend Polish & Modern UI

Status: COMPLETED 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 — CSS custom properties for color palette (light/dark), spacing scale, typography scale, border radius tokens, shadows, transitions in web/src/lib/styles/tokens.css
  • 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.)
  • Task 3: Refine layout — polished sidebar with active state indicators (dot + background), smooth transitions, responsive breakpoints, collapsible sidebar on mobile with hamburger menu
  • 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
  • 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
  • Task 6: Form styling — consistent input fields with design tokens, select dropdowns, ToggleSwitch component replacing checkboxes, button hierarchy (primary brand/secondary/danger)
  • Task 7: Toast/notification system — slide-in toasts with Lucide icons, rounded-xl, auto-dismiss, stacking
  • Task 8: Loading states — Skeleton, SkeletonCard, SkeletonTable loader components with shimmer animation for data fetching, IconLoader spinner for actions
  • Task 9: Empty states — EmptyState component with SVG illustrations and call-to-action buttons for all empty list scenarios
  • Task 10: Responsive design — mobile-friendly layout with collapsible sidebar, hamburger menu, mobile top bar, touch-friendly controls, horizontal settings nav on mobile
  • 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
  • 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
  • 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

  • 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

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 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
Reference in New Issue View Git Blame Copy Permalink