Erol Haagenrud
b45aa5bbe4
Fullbredde-bunnbanneret hadde tre runder med bugs i skjul/vis-ved- scroll-mekanismen (playerListReached), sist når det ble hengende synlig over Kommentarer. Bruker avviste en fjerde punktfiks og ba i stedet om en redesign: en liten, hjørne-forankret FAB som er liten nok til at den ikke trenger å skjule seg igjen for å unngå å dekke innhold. Ny frontend/components/compact-score-fab.tsx (V0-eksport, integrert uendret). round-detail.tsx: playerListReached-mekanismen fjernet i sin helhet (state + effekt + den sårbare mapExpanded-vakten), erstattet med CompactScoreFab drevet av eksisterende inFlowButtonVisible. Netto -75 linjer. Verifisert i full-stack scratch (3 spillere + 6 kommentarer): FAB forblir synlig og ikke-obstruktiv helt ned til og forbi Kommentarer, lys+mørk modus, 48px trykkflate. tsc rent. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
49 lines
1.8 KiB
TypeScript
49 lines
1.8 KiB
TypeScript
"use client"
|
|
|
|
import { PencilLine } from "lucide-react"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
export type CompactScoreFabProps = {
|
|
/** Controls the fade + scale in/out. Driven from outside (the page's
|
|
* existing `inFlowButtonVisible` state) -- this component owns no
|
|
* hide/show-on-scroll logic of its own. */
|
|
visible: boolean
|
|
/** Scrolls the user back to the player list (same action as the in-flow
|
|
* button). No navigation, no new page. */
|
|
onClick: () => void
|
|
}
|
|
|
|
/**
|
|
* Compact, corner-anchored "Score" quick button (FAB).
|
|
*
|
|
* Replaces the old full-width bottom banner (round-detail.tsx, removed
|
|
* 2026-08-23 -- see CHANGELOG). Because it's small and pinned to the
|
|
* bottom-right corner, it never needs to hide to avoid covering content --
|
|
* so there is no scrim, no reserved bottom spacer, and no slide-up
|
|
* animation. It simply fades + scales in place.
|
|
*/
|
|
export function CompactScoreFab({ visible, onClick }: CompactScoreFabProps) {
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={onClick}
|
|
aria-hidden={!visible}
|
|
tabIndex={visible ? 0 : -1}
|
|
className={cn(
|
|
"fixed bottom-[calc(1.25rem+env(safe-area-inset-bottom))] right-[calc(1.25rem+env(safe-area-inset-right))] z-30",
|
|
"inline-flex h-12 items-center gap-2 rounded-full px-5",
|
|
"bg-primary text-primary-foreground font-bold",
|
|
"shadow-lg shadow-black/20",
|
|
"transition-all duration-200 ease-in-out",
|
|
"hover:brightness-95 active:scale-[0.98]",
|
|
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
|
|
visible ? "scale-100 opacity-100" : "pointer-events-none scale-90 opacity-0",
|
|
)}
|
|
>
|
|
<PencilLine aria-hidden="true" className="size-5" />
|
|
Score
|
|
</button>
|
|
)
|
|
}
|
|
|
|
export default CompactScoreFab
|