slide animation

src/features/badges/components/badge-showcase.tsx

@@ -49,6 +49,7 @@ export const BadgeIcon = ({ badge, filled, size = 48 }: BadgeIconProps & { size?
       width={size}
       height={size}
       loading="lazy"
+      decoding="async"
       onError={() => setImageError(true)}
       style={{
         objectFit: 'contain',

src/features/core/components/header.tsx

@@ -60,6 +60,7 @@ const Header = ({ collapsed, title, titleValues, withBackButton }: HeaderConfig)
         alignItems: 'center',
         justifyContent: 'center',
         paddingTop: 'env(safe-area-inset-top, 0px)',
+        viewTransitionName: 'app-header',
       }}
     >
       { withBackButton && <BackButton /> }

src/features/core/components/layout.tsx

@@ -1,23 +1,22 @@
 import { AppShell, Box } from '@mantine/core';
 import { PropsWithChildren } from 'react';
-import { useLocation } from '@tanstack/react-router';
 import Header from './header';
 import Navbar from './navbar';
 import Pullable from './pullable';
 import useVisualViewportSize from '../hooks/use-visual-viewport-size';
 import useRouterConfig from '../hooks/use-router-config';
 import Page from '@/components/page';
-import './route-transition.css';
 
 const Layout: React.FC<PropsWithChildren> = ({ children }) => {
   const { header, withPadding, fullWidth } = useRouterConfig();
   const viewport = useVisualViewportSize();
-  const location = useLocation();
 
   return (
     <AppShell
       id='app-shell'
       layout='alt'
+      // must snap: view transitions capture AppShell's collapse mid-animation
+      transitionDuration={0}
       header={{
         // Old installs froze black-translucent at add-to-home-screen time, so
         // the webview can extend under the status bar; inset is 0 elsewhere.
@@ -48,18 +47,27 @@ const Layout: React.FC<PropsWithChildren> = ({ children }) => {
         pos='relative'
         h='100%'
         mah='100%'
-        pb={{ base: 'calc(65px + env(safe-area-inset-bottom, 0px))', sm: 0 }}
+        pb={{ base: 'calc(73px + env(safe-area-inset-bottom, 0px))', sm: 0 }}
         px={{ base: 0.01, sm: 100, md: 200, lg: 300 }}
         maw='100dvw'
         style={{ overflow: 'hidden' }}
       >
-        <Pullable>
-          <Page noPadding={!withPadding} fullWidth={fullWidth}>
-            <Box key={location.pathname} className="flxn-route-enter">
+        {/* pane box must be opaque and route-invariant or slides drift */}
+        <Box
+          style={{
+            viewTransitionName: 'page',
+            backgroundColor: 'var(--mantine-color-body)',
+            marginTop: 'calc(-1 * var(--app-shell-header-offset, 0px))',
+            paddingTop: 'var(--app-shell-header-offset, 0px)',
+            height: 'calc(100% + var(--app-shell-header-offset, 0px))',
+          }}
+        >
+          <Pullable>
+            <Page noPadding={!withPadding} fullWidth={fullWidth}>
               {children}
-            </Box>
-          </Page>
-        </Pullable>
+            </Page>
+          </Pullable>
+        </Box>
       </AppShell.Main>
       <Navbar />
       <AppShell.Aside withBorder />

src/features/core/components/nav-link/styles.module.css

@@ -11,11 +11,6 @@
     -webkit-tap-highlight-color: transparent;
 }
 
-.navLinkBox svg,
-.navLinkBox p {
-    transition: color 150ms ease-out;
-}
-
 @media (prefers-reduced-motion: no-preference) {
     .navLinkBox {
         transition: transform 150ms cubic-bezier(0.32, 0.72, 0, 1);

src/features/core/components/route-transition.css

@@ -1,11 +0,0 @@
-@media (prefers-reduced-motion: no-preference) {
-  .flxn-route-enter {
-    animation: flxn-route-fade-in 180ms ease-out;
-  }
-}
-
-@keyframes flxn-route-fade-in {
-  from {
-    opacity: 0;
-  }
-}

src/features/core/utils/nav-direction.ts

@@ -0,0 +1,52 @@
+import type { ParsedLocation } from "@tanstack/react-router";
+
+export type NavDirection = "forward" | "back" | "none";
+
+const tabRank = (pathname: string): number | null => {
+  if (pathname === "/") return 0;
+  if (pathname.startsWith("/stats")) return 1;
+  if (pathname.startsWith("/tournaments")) return 2;
+  if (pathname.startsWith("/profile") || pathname.startsWith("/settings")) return 3;
+  if (pathname.startsWith("/admin")) return 4;
+  return null;
+};
+
+const depth = (pathname: string) => pathname.split("/").filter(Boolean).length;
+
+// Keep in sync with route loaders that set header.collapsed
+const headerHidden = (pathname: string) => {
+  const segs = pathname.split("/").filter(Boolean);
+  return segs.length === 2 && ["profile", "teams", "tournaments"].includes(segs[0]);
+};
+
+export function headerChange(
+  from: ParsedLocation | undefined,
+  to: ParsedLocation
+): "exit" | "enter" | "none" {
+  if (!from) return "none";
+  const fromHidden = headerHidden(from.pathname);
+  const toHidden = headerHidden(to.pathname);
+  if (fromHidden === toHidden) return "none";
+  return toHidden ? "exit" : "enter";
+}
+
+export function navDirection(
+  from: ParsedLocation | undefined,
+  to: ParsedLocation
+): NavDirection {
+  if (!from || from.pathname === to.pathname) return "none";
+
+  const fromRank = tabRank(from.pathname);
+  const toRank = tabRank(to.pathname);
+  if (fromRank !== null && toRank !== null && fromRank !== toRank) {
+    return toRank > fromRank ? "forward" : "back";
+  }
+
+  const fromIndex = from.state.__TSR_index;
+  const toIndex = to.state.__TSR_index;
+  if (Number.isFinite(fromIndex) && Number.isFinite(toIndex) && fromIndex !== toIndex) {
+    return toIndex > fromIndex ? "forward" : "back";
+  }
+
+  return depth(to.pathname) >= depth(from.pathname) ? "forward" : "back";
+}