refactor: solid personal bests modal (@d1rshan)

[d1rshan]

• migrates personal best modal to solidjs, also updates the ux - now all rows show mode2 (dimmed).
• also fixes ux issues in personal bests modal #7998 (adds overflow-y-contain class to AnimatedModal)
• renames the PbTable to PbCard in UserProfile.tsx since it is not really a table.

[d1rshan]

Hey @Miodec, what do you think of showing mode2 on every row with full opacity on the first row of each group and lower opacity on the rest? (or maybe showing it on hover)

like this (ie showing on every row with lower opacity):

If neither works for you, I can keep the current behaviour. The reason I'm asking is that the Table component makes the existing sticky approach bit awkward without modifying it or using a raw <table>.

[Copilot]

Pull request overview

Note

Copilot was unable to run its full agentic suite in this review.

This PR migrates the “Personal Best Tables” modal from the legacy HTML/CSS + imperative DOM approach to the SolidJS modal system using AnimatedModal and DataTable.

Changes:

• Added a new PbTables modal id and SolidJS modal component (PbTablesModal) built on AnimatedModal + DataTable.
• Introduced a small state module to pass the selected PB mode into the modal (pbTablesMode + showPbTablesModal).
• Removed legacy pb tables modal implementation and its associated HTML/CSS.

Reviewed changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
frontend/src/ts/states/pb-tables-modal.ts	Adds modal state (selected mode) and a typed show helper for the PB tables modal.
frontend/src/ts/states/modals.ts	Registers the new PbTables modal id in the centralized modal id union.
frontend/src/ts/modals/pb-tables.ts	Removes the legacy imperative modal implementation (DOM building via insertAdjacentHTML).
frontend/src/ts/components/pages/profile/UserProfile.tsx	Updates the profile page to open the new modal via showPbTablesModal.
frontend/src/ts/components/modals/PbTablesModal.tsx	Implements the new PB tables modal UI using AnimatedModal and DataTable.
frontend/src/ts/components/modals/Modals.tsx	Mounts the new PbTablesModal in the global modals component.
frontend/src/ts/components/common/AnimatedModal.tsx	Adds overscroll-y-contain to improve scroll behavior inside modals.
frontend/src/styles/popups.scss	Removes legacy modal-specific styles for #pbTablesModal.
frontend/src/html/popups.html	Removes the legacy pbTablesModal dialog markup.