Add History API routing so browser/Android back navigates screens
- ui-store syncs screens to history (push on go/goGame, hash URLs like #/profile), back() = history.back(), initHistory anchors a home base + restores deep links - page.tsx listens to popstate; resolveScreen() guards transient screens (game/room/chat/matchmaking fall back to home when their state is gone) - ScreenHeader + ChatScreen back buttons use history back; chat cleans up on unmount Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -13,13 +13,13 @@ export function ScreenHeader({
|
||||
back?: Screen;
|
||||
right?: React.ReactNode;
|
||||
}) {
|
||||
const go = useUIStore((s) => s.go);
|
||||
const navBack = useUIStore((s) => s.back);
|
||||
const { locale } = useI18n();
|
||||
const Chevron = locale === "fa" ? ChevronRight : ChevronLeft;
|
||||
return (
|
||||
<div className="flex items-center justify-between gap-3 mb-5">
|
||||
<button
|
||||
onClick={() => go(back)}
|
||||
onClick={() => navBack(back)}
|
||||
className="glass rounded-full p-2.5 hover:bg-navy-800/80 transition"
|
||||
>
|
||||
<Chevron className="size-5 text-cream/80" />
|
||||
|
||||
@@ -15,7 +15,7 @@ export function ChatScreen() {
|
||||
const messages = useOnlineStore((s) => s.chatMessages);
|
||||
const sendChat = useOnlineStore((s) => s.sendChat);
|
||||
const closeChat = useOnlineStore((s) => s.closeChat);
|
||||
const go = useUIStore((s) => s.go);
|
||||
const navBack = useUIStore((s) => s.back);
|
||||
const [text, setText] = useState("");
|
||||
const endRef = useRef<HTMLDivElement>(null);
|
||||
const prevLen = useRef(0);
|
||||
@@ -30,14 +30,14 @@ export function ChatScreen() {
|
||||
prevLen.current = messages.length;
|
||||
}, [messages]);
|
||||
|
||||
// Clean up the chat subscription whenever we leave (header back OR hardware back).
|
||||
useEffect(() => () => closeChat(), [closeChat]);
|
||||
|
||||
if (!friend) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const back = () => {
|
||||
closeChat();
|
||||
go("friends");
|
||||
};
|
||||
const back = () => navBack("friends");
|
||||
|
||||
const send = async () => {
|
||||
const v = text.trim();
|
||||
|
||||
Reference in New Issue
Block a user