admin/Meal-Planner
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
Meal-Planner/.agent/plan-ui-redesign.md
T
admin 6a0c9d0c4e feat: full UI redesign with design system, Nielsen heuristics compliance 
- Install lucide-react, framer-motion, react-hot-toast, clsx, tailwind-merge
- Custom Tailwind config: semantic color tokens, Inter font, shadow scale,
  border radius scale, custom animations (fadeIn, slideUp, shimmer)
- Shared component library: Button, Badge, Card, Input, Select, Textarea,
  EmptyState, Skeleton, LoadingSpinner
- Global CSS with @layer components (.btn, .card, .input, .badge, .skeleton)
- Toast notification system via react-hot-toast + showToast utility
- ErrorBoundary wrapper for graceful error recovery
- Redesigned navigation: sticky, active state indicators, Lucide icons
- Dashboard: hero header, today highlighting, scrollable week grid,
  redesigned meal cards, empty states, skeleton loading
- Meal Detail: hero image with gradient overlay, metadata row with icons,
  Lucide star rating, edit-existing-feedback flow
- Pantry: inline add form, search/filter, visual quantity badges,
  expiry warnings, confirmation dialogs
- Shopping List: gradient summary cards, aisle grouping with badges,
  sale strikethrough pricing, empty state
- Login: centered card with icon, Input component, Button component
- All old gray/blue utility classes migrated to new surface/primary tokens
- TypeScript clean, production build passes
2026-05-14 10:26:53 -07:00

4.8 KiB
Raw Permalink Blame History

MealPlanner UI Redesign Plan

Nielsen's 10 Heuristics → Concrete Changes

Classification: large/high-risk — full visual redesign + component library

Phase 1: Design System Foundation

  • Custom Tailwind config: color tokens (primary, semantic, surface), font scale, spacing scale, shadow scale, radius scale
  • Install icon library (Lucide React — lightweight, tree-shakeable)
  • Create shared components: Button, Badge, Card, Input, Select, Textarea, Toast, Skeleton, EmptyState, Modal, Tooltip
  • Define animation tokens (Framer Motion — micro-interactions, page transitions)
  • Dark mode foundation (class-based, not implementing yet)

Phase 2: Global UX Improvements (Heuristics 1, 3, 5, 6, 7, 9)

  • Toast notification system (React Hot Toast) — system status visibility
  • Loading states: skeleton screens for every async view
  • Error boundaries + graceful error recovery UI
  • Empty states for all lists (no meals, no pantry items, no shopping list)
  • Confirmation dialogs for destructive actions (delete, remove from pantry, never-suggest)
  • Undo capability where possible (remove from pantry → "Undo" toast)
  • Keyboard shortcuts reference (Cmd+K command palette? Maybe too ambitious. Start with basic: / for search, Esc to close modals)

Phase 3: Dashboard Redesign (Heuristic 1, 2, 6, 8)

  • Visual hierarchy: week header with clear date range, status summary chips
  • Day columns with clear headers (Mon 5/12, Tue 5/13, etc.)
  • Meal cards: better image handling (aspect ratio, fallback), clearer metadata, hover interactions
  • Quick actions bar: "Generate Week", "Send Vote Email", "View Shopping List"
  • Recent activity / system status panel (last scrape time, next vote date)
  • Responsive: mobile-first card stack, desktop grid

Phase 4: Meal Detail Redesign (Heuristic 2, 5, 8)

  • Hero section: full-bleed image, recipe title, key metadata row (time, servings, cost, cuisine tags)
  • Tabbed interface: Overview / Ingredients / Instructions / Feedback
  • Ingredients: checkbox toggle "in pantry", visual quantity display, aisle grouping
  • Instructions: numbered with visual separators, progress indicator
  • Feedback: inline star rating (not a separate card), compact form, saved state indicator
  • Print-friendly layout preserved

Phase 5: Pantry Redesign (Heuristic 1, 5, 6, 8)

  • Inline add (not expandable form — always visible, compact)
  • Search + filter existing items
  • Visual quantity badges, expiry warnings (color-coded)
  • Bulk actions (select multiple → remove)
  • Empty state with illustration + CTA

Phase 6: Shopping List Redesign (Heuristic 1, 2, 6, 8)

  • Summary header with total cost, savings, item count
  • Aisle sections as collapsible accordions
  • Checkbox strikethrough animation, "in cart" vs "in pantry" distinction
  • Print layout: clean, no UI chrome
  • Empty state when no items

Phase 7: Login + Global Nav (Heuristic 1, 4, 8)

  • Centered card with better spacing, icon, and visual focus
  • Nav bar: active state indicator, mobile hamburger, user avatar dropdown
  • Breadcrumbs on sub-pages
  • Footer with version + system status

Phase 8: Accessibility + Polish (Heuristic 9, 10)

  • Focus rings on all interactive elements
  • ARIA labels, roles, live regions for toasts
  • Color contrast audit (WCAG AA)
  • Reduced motion support
  • Help tooltips on complex features (vote system, matching algorithm)

Implementation Order

  1. Install deps (lucide-react, framer-motion, react-hot-toast)
  2. Tailwind config + base design tokens
  3. Shared component library
  4. Toast + loading infrastructure
  5. Dashboard (highest traffic page)
  6. Meal Detail
  7. Pantry + Shopping List (parallel)
  8. Login + Nav
  9. Accessibility polish + error boundaries
  10. Test responsive on mobile widths

New Dependencies

npm install lucide-react framer-motion react-hot-toast

Nielsen Mapping Summary

Heuristic Where addressed
1. Visibility of status Skeletons, toasts, loading spinners, progress indicators
2. Match real world Clear labels, familiar icons, calendar metaphor
3. User control Confirm dialogs, undo toasts, Escape to close
4. Consistency Design tokens, shared components, uniform spacing
5. Error prevention Form validation, disable buttons while loading, confirm destructive actions
6. Recognition > recall Visual badges, status chips, pantry checkboxes, recent activity
7. Flexibility Keyboard shortcuts, bulk actions, print layouts
8. Aesthetic + minimal Clean cards, whitespace, single primary action per view
9. Error recovery Error boundaries, friendly error messages, retry buttons
10. Help Empty state CTAs, tooltip hints, inline help text
Reference in New Issue View Git Blame Copy Permalink