Improve scroll UI

packages/skin-database/app/(modern)/scroll/BottomMenuBar.tsx

@@ -11,9 +11,15 @@ import {
   Github,
 } from "lucide-react";
 import Link from "next/link";
-import { useState, useEffect, useRef } from "react";
 import { usePathname } from "next/navigation";
 import { MOBILE_MAX_WIDTH } from "../../../legacy-client/src/constants";
+import {
+  // @ts-expect-error - unstable_ViewTransition is not yet in @types/react
+  unstable_ViewTransition as ViewTransition,
+  useState,
+  useEffect,
+  useRef,
+} from "react";
 
 export default function BottomMenuBar() {
   const [isHamburgerOpen, setIsHamburgerOpen] = useState(false);
@@ -128,6 +134,12 @@ export default function BottomMenuBar() {
             alignItems: "center",
           }}
         >
+          <MenuButton
+            href="/scroll/grid"
+            icon={<Grid3x3 size={24} />}
+            label="Grid"
+            isActive={pathname === "/scroll/grid"}
+          />
           <MenuButton
             href="/scroll"
             icon={<Smartphone size={24} />}
@@ -136,12 +148,7 @@ export default function BottomMenuBar() {
               pathname === "/scroll" || pathname.startsWith("/scroll/skin")
             }
           />
-          <MenuButton
-            href="/scroll/grid"
-            icon={<Grid3x3 size={24} />}
-            label="Grid"
-            isActive={pathname === "/scroll/grid"}
-          />
+
           <MenuButton
             href="/"
             icon={<Search size={24} />}
@@ -210,16 +217,18 @@ function MenuButton({
     <>
       {/* Active indicator line */}
       {isActive && (
-        <div
-          style={{
-            position: "absolute",
-            top: "-0.75rem",
-            left: 0,
-            width: touchTargetSize,
-            height: "1px",
-            backgroundColor: "#fff",
-          }}
-        />
+        <ViewTransition name="footer-menu-active">
+          <div
+            style={{
+              position: "absolute",
+              top: "-0.75rem",
+              left: 0,
+              width: touchTargetSize,
+              height: "1px",
+              backgroundColor: "#fff",
+            }}
+          />
+        </ViewTransition>
       )}
       <div
         style={{
@@ -236,9 +245,7 @@ function MenuButton({
           fontFamily: 'Arial, "Helvetica Neue", Helvetica, sans-serif',
           fontWeight: 500,
         }}
-      >
-        {label}
-      </span>
+      ></span>
     </>
   );
 
@@ -258,6 +265,7 @@ function MenuButton({
   return (
     <Link
       href={href!}
+      title={label}
       style={containerStyle}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}

packages/skin-database/app/(modern)/scroll/grid/layout.tsx

@@ -5,5 +5,5 @@ type LayoutProps = {
 };
 
 export default function Layout({ children }: LayoutProps) {
-  return <div style={{ width: "100vw" }}>{children}</div>;
+  return <div style={{}}>{children}</div>;
 }

packages/skin-database/app/(modern)/scroll/layout.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { ReactNode } from "react";
+// @ts-expect-error - unstable_ViewTransition is not yet in @types/react
+import { unstable_ViewTransition as ViewTransition, ReactNode } from "react";
 import BottomMenuBar from "./BottomMenuBar";
 import "./scroll.css";
 
@@ -17,7 +18,9 @@ export default function Layout({ children }: LayoutProps) {
       }}
     >
       {children}
-      <BottomMenuBar />
+      <ViewTransition name="footer">
+        <BottomMenuBar />
+      </ViewTransition>
     </div>
   );
 }

packages/skin-database/tsconfig.json

@@ -23,11 +23,7 @@
     "outDir": "dist",
     "strictNullChecks": true,
     "skipLibCheck": true,
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "strict": false,
     "noEmit": true,
     "incremental": true,
@@ -37,13 +33,9 @@
   },
   "include": [
     "./**/*",
-    ".next/types/**/*.ts"
+    ".next/types/**/*.ts",
+    ".next/types/app/(legacy)/about/page.tsx"
   ],
-  "lib": [
-    "es2015"
-  ],
-  "exclude": [
-    "node_modules",
-    "dist"
-  ]
+  "lib": ["es2015"],
+  "exclude": ["node_modules", "dist"]
 }