Fix #21: Implement account centre page

[tobegeeky]

Summary

Fixes issue #21 - account centre page for YDO with reusable chips:

• add editable name and bio fields. Email field fetches from the backend directly.
• add spotify integration placeholder
• implement hobbies corner with chips consistent to be used in search page as interest tags
• bottom navbar (home/search/account) consistent with other post-auth pages, with the account icon shown in its active state
• profile picture/avatar placeholder applied with lucide (open to make changes)

Schema Changes

New table: profiles (id, name, bio, hobbies text[], updated_at)
Run supabase db reset or supabase migration up to apply locally.
Migration: supabase/migrations/20260622120000_create_profiles.sql

Reviewer Guidance

Start with app/account/page.tsx — it's the entry point. It handles auth, fetches the profile row, and passes data down to AccountForm.

From there, app/account/AccountForm.tsx is the core of the change — all the interactive UI lives here (editable fields, hobby chips, save logic). The FloatingField component at the top is unused and should be ignored; it's a leftover stub with no usages in the return.

app/account/actions.ts is the server action — validates name, bio word count, and hobby tags before writing to Supabase. This is where the 35-word bio limit and 5-hobby cap are enforced server-side.

supabase/migrations/20260622120000_create_profiles.sql is the only schema change — adds the profiles table with RLS policies and an auto-provisioning trigger on signup.

components/BottomNav.tsx is a shared component intended for reuse across Home and Search pages (issues #20). It uses Lucide icons and var(--color-secondary) / var(--color-primary) from the design tokens.

public/YDO.svg and public/BgStrokes.svg are static assets exported from Figma, rendered via next/image.

Help needed:

• A Save button was added since the Figma doesn't include one — autosave on every keystroke would create unnecessary server action calls. Styled with the YDO brand amber (#F9B63C) since no token exists for it yet. Need direction for scale and positioning.
• Interest tags in lib/constants.ts are the single source of truth shared with the future Search page, so need to know exactly what hobby options are required.
• Need confirmation to use the current BottomNav, or reuse from any other pages.

Essential Checklist

• The PR title starts with Fix #bugnum: , followed by a short, clear summary of the changes. (If this PR fixes part of an issue, prefix the title with Fix part of #bugnum: ....)
• "Allow edits from maintainers" is checked. (Instructions)
• The PR is made from a branch that's not called main or master.

Proof of Work

AI Usage Disclosure

• Claude used to analyze issue description to implement the file system skeleton, add lucide, draft the initial changes and draft this PR description. All changes were reviewed and edited manually.

[vercel]

@tobegeeky is attempting to deploy a commit to the lightcreator1007's projects Team on Vercel.

A member of the Team first needs to authorize it.

[LightCreator1007]

There are a few changes in figma, please look into it.
Regarding ur query in the issue, cap it at 5.
to add hobbies, it would be preferable if when clicking add, use the system message wala design change the title to add hobbies add a text box with 20 char limit.
which adds the chip in the box.

sound good?