Mirrors/webamp
1
0
Fork 0
mirror of https://github.com/captbaritone/webamp.git synced 2026-01-23 02:15:01 +00:00
Code Issues Projects Releases Wiki Activity

Improve scroll UI

Browse source
This commit is contained in:
Jordan Eldredge 2025-12-29 15:32:03 -08:00
parent 0895f9191f
commit e062a51a88
4 changed files with 39 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

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

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

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

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

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

@ -1,6 +1,7 @@
"use client"; "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 BottomMenuBar from "./BottomMenuBar";
import "./scroll.css"; import "./scroll.css";
@ -17,7 +18,9 @@ export default function Layout({ children }: LayoutProps) {
}} }}
> >
{children} {children}
<BottomMenuBar /> <ViewTransition name="footer">
<BottomMenuBar />
</ViewTransition>
</div> </div>
); );
} }

18
packages/skin-database/tsconfig.json
View file

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