Feat: Redesign main page wizard layout and header

Nik Gkountasrequested to merge
feat/wizard-header-redesign into main
  • Merge the wizard's separate header and body cards into a single bordered card on the gray page background, matching the T429068 prototype; widen the container to 960px.
  • New header row: task icon and title/subtitle on the left, difficulty and time-estimate chips on the right, separated from the stepper by a divider. Icon and difficulty come from the customize-main-page registry entry instead of being hardcoded.
  • Extract the header and stepper into main-page/WizardHeader.vue (taking the EssentialTask as a prop, same pattern as EssentialTaskIntro) and main-page/WizardStepper.vue (steps + 1-based currentStep), leaving only container/card styles in the view.
  • Replace the wide two-line stepper badges and arrows with compact numbered pills rendered from a v-for; active pill uses progressive tokens, completed pills go green with a checkmark. Kept separate from the shared StepperBar.vue, which is a different visual design used by the essential-task tools.
  • Add introMinutesEstimation: 30 to the customize-main-page task so the "~30 min" chip is driven by task data (reuses the existing starterkit-task-intro-minutes message).
  • Reword starterkit-wizard-title to "Customize the main page".
  • Mobile rules keep the 768px --breakpoint-mobile marker convention; header stacks and stepper pills go full-width.

Co-Authored-By: Claude Fable 5 Bug: T429068

Merge request reports