Add help modal and back button to score entry pages

HelpModal component shows game setup and scoring rules in a scrollable
overlay, triggered by a ? button top-right on Player Setup and Enter
Scores. Enter Scores also gets a ← back button top-left that returns
to the scoresheet without saving. PageFrame gains a headerActionLeft
slot to support the left-side button.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-05-28 23:06:48 -05:00
parent aa121bbcf3
commit 79832ed818
8 changed files with 95 additions and 4 deletions
+3 -1
View File
@@ -5,16 +5,18 @@ interface Props {
children: React.ReactNode
footer?: React.ReactNode
headerAction?: React.ReactNode
headerActionLeft?: React.ReactNode
overlay?: React.ReactNode
}
export default function PageFrame({ title, children, footer, headerAction, overlay }: Props) {
export default function PageFrame({ title, children, footer, headerAction, headerActionLeft, overlay }: Props) {
return (
<div className={styles.frame}>
<header className={styles.header}>
<h1 className={styles.title}>{title}</h1>
<div className={styles.rule} role="separator" />
{headerAction && <div className={styles.headerAction}>{headerAction}</div>}
{headerActionLeft && <div className={styles.headerActionLeft}>{headerActionLeft}</div>}
</header>
<div className={styles.content}>
{children}