feat: design onboarding and profile settings flows

[Guddy0101]

feat: design onboarding and profile settings flows (#8)

Summary

Implements the first-run onboarding flow and extends the profile settings
form as specified in issue #8. New users are guided through a dedicated
onboarding page immediately after sign-up, and the profile settings form
now captures website and connection status alongside the existing fields.

---

Changes

Profile Settings — new fields

Files: apps/frontend/src/app/app/settings/profile/actions.ts,
ProfileSettingsForm.tsx, page.tsx

• Added website field to profileSchema: optional URL, validated by
  Zod (z.string().url() or empty string).
• Added connectionStatus field to profileSchema: enum of
  online | offline | busy | away, defaults to online.
• Both fields are extracted in updateProfileAction and sent to
  PUT /api/profile.
• ProfileSettingsForm renders a URL input for website (with inline
  error) and a <select> for connection status, consistent with the
  existing field style (TailwindCSS, aria-invalid, aria-describedby).
• page.tsx passes the new default values to the form.

---

Onboarding page — /app/onboarding

Files: apps/frontend/src/app/app/onboarding/page.tsx,
OnboardingForm.tsx, actions.ts

Entry state

• Centered full-page layout with CRAFT logo mark and heading
  "Welcome to CRAFT — Let's set up your profile."
• Form fields: displayName (required), bio (optional, 160-char max),
  website (optional URL), connectionStatus (select).
• Inline field-level error messages via Zod validation (same schema as
  profile settings).
• Form-level error banner for network/API failures.
• Accessible: aria-required, aria-invalid, aria-describedby,
  role="alert" on errors.

Completion state

• Triggered after a successful completeOnboardingAction response.
• Displays a green checkmark, "You're all set!" heading, and a
  "Go to dashboard" link to /app.
• Uses role="status" and aria-live="polite" for screen-reader
  announcement.

completeOnboardingAction

• Server Action in actions.ts; reuses profileSchema from profile
  settings for consistent validation — no duplicated schema logic.
• Calls PUT /api/profile on success.
• Returns serialisable ProfileState (idle / success / error +
  optional fieldErrors) consumed by the client component.

---

Tests

File: apps/frontend/src/app/app/onboarding/actions.test.ts

12 new tests, all passing (18 total including existing profile tests):

Group	Cases
Validation (entry state)	missing displayName, too-short displayName, bio > 160 chars, invalid website URL, empty website passes, valid website URL
passes, invalid connectionStatus, all four valid statuses accepted
Completion state	success response shape, correct PUT /api/profile call
Error paths	network error (fetch throws), API error (non-200)

---

Test results

Test Files 2 passed (2)
Tests 18 passed (18)

---

Checklist

• Validation consistent with existing profileSchema (no duplication)
• Accessible markup (ARIA attributes, roles, live regions)
• Responsive layout (centered card, max-w-md)
• Inline and form-level error feedback
• Entry and completion states documented via data-testid attributes
• All new and existing profile tests pass

---

Closes #8

[drips-wave]

@Guddy0101 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits