feat(ui): profile list accordion UX, search morph, and hold-to-delete

[Serokz]

Summary

This PR upgrades the profiles management page (ProfileList and ProfileEdit) with a high-fidelity accordion layout, smooth morphing search bars, and hold-to-delete confirmations.

What's Changed

• Accordion Profiles: Profile items can expand to show details and charts inline, utilizing useIntersectionObserver to lazy-load profile charts on scroll.
• Header Actions & Search Morph: Replaced the static "Add Profile" card with a header dropdown and a slide-out search box that adjusts spacing dynamically.
• Hold-to-Delete: Destructive actions are secured with a press-and-hold interaction via HoldToConfirmButton to prevent accidental clicks.
• Skeletal & Progressive Loading: Integrated skeletons and fade-in transitions (ProgressiveContent.jsx) for smoother content rendering.

This is part of a series of independent, story-driven PRs split from the larger frontend modernization effort.

[coderabbitai]

Warning

Review limit reached

@Serokz, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 1 minute and 41 seconds. Learn how PR review limits work.

Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file).

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 37a5d7a1-84fc-4974-9b6a-891cac697c72

📥 Commits

Reviewing files that changed from the base of the PR and between 591abe7 and 2156826.

📒 Files selected for processing (11)

• web/src/components/HoldToConfirmButton.jsx
• web/src/components/PageHeader.jsx
• web/src/components/PageLayout.jsx
• web/src/components/ProgressiveContent.jsx
• web/src/components/TabBar.jsx
• web/src/components/skeletons/ProfileListSkeleton.jsx
• web/src/hooks/useIntersectionObserver.js
• web/src/pages/ProfileEdit/ExtendedProfileForm.jsx
• web/src/pages/ProfileEdit/StandardProfileForm.jsx
• web/src/pages/ProfileEdit/index.jsx
• web/src/pages/ProfileList/index.jsx

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[sonarqubecloud]

Quality Gate passed

Issues
2 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
3.4% Duplication on New Code

See analysis details on SonarQube Cloud