Webpage Integration: Edit User Profile - Bio and tagline #2458

Description

Implement two text fields on the edit profile page: a tagline (short text displayed on homepage and profile), and a biography (rich text editor with auto-save). Both are independently editable; tagline has a 70-character limit and saves on button click, while biography auto-saves as user types.

Acceptance Criteria

Tagline field

• Text input field with 70-character maximum limit
• Live character counter displays remaining characters (e.g., "70 left")
• When character limit is reached, error state is shown and further input is blocked
• Plain text only; no rich text formatting allowed
• Tagline saved when user clicks "Save changes" in Profile section (batched with other Profile section fields)

Tagline display locations

• Tagline displays on the homepage in the "Meet Boost Core" section (below user name and title)
• If tagline is empty, display default style (name + role)

Biography field — rich text editor

• Rich text editor supports basic formatting only: bold, italic, <u>underline</u>, ordered lists, and hyperlinks
• No full markdown or inline images allowed
• Character limit is 20,000 characters
• Live character counter displays remaining characters (e.g., "20,000 characters remaining")
• When character limit is reached, error state is shown and further input is blocked

Biography auto-save behavior

• Content auto-saves locally as the user types — no manual "Save" button required for the bio field
• Auto-save writes to localStorage (browser-side only); changes are persisted to the database when the user clicks Save Changes
• Auto-save indicator displays two states:
  • Saving — Saving — shown while the local write is in progress
  • Saved — shown once the local write completes successfully
• Auto-save uses dedicated endpoint: POST /api/user/profile/bio

Backend

• Tagline: plain text field, max 70 characters; validated on save
• Biography: accepts rich text HTML (bold, italic, underline, lists, links); max 20,000 characters; validated on save
• Endpoints return success/error response for frontend indicator
• No frontend validation of formatting needed; backend handles formatting constraints

Out of Scope

• Moderation or flagging of suspicious bio/tagline content (separate ticket)
• Markdown link stripping (backend responsibility; use regex per agreed approach)

Design Reference

Edit User Profile — Tagline & Bio section
Homepage — Meet Boost Core section with tagline display

Backend Endpoints