hypercross
f01bb5f99b
Fill the viewport with a fixed sidebar of highlightable type-filter icons over an independently scrolling tree, and let the viewer expand into a full-height scene.
76 lines
3.7 KiB
TypeScript
76 lines
3.7 KiB
TypeScript
import { lazy, Suspense } from 'react';
|
|
import { Link, Route, Routes, useLocation } from 'react-router-dom';
|
|
import SearchPage from './pages/SearchPage';
|
|
import ModPage from './pages/ModPage';
|
|
import ModHeader from './components/ModHeader';
|
|
|
|
// The full-setup view and the bgm/tabletop pages pull in the whole three.js
|
|
// stack (Scene + all mesh viewers + @tts/tabletop). Lazy-load them so that
|
|
// stack stays code-split out of the main bundle and is only fetched when one
|
|
// of those routes is actually visited.
|
|
const FullSetupPage = lazy(() => import('./pages/FullSetupPage'));
|
|
const BgmPage = lazy(() => import('./pages/BgmPage'));
|
|
const BgmPackagePage = lazy(() => import('./pages/BgmPackagePage'));
|
|
const PartsPage = lazy(() => import('./pages/PartsPage'));
|
|
const PartPage = lazy(() => import('./pages/PartPage'));
|
|
const SurfacesPage = lazy(() => import('./pages/SurfacesPage'));
|
|
const SurfacePage = lazy(() => import('./pages/SurfacePage'));
|
|
const SetupsPage = lazy(() => import('./pages/SetupsPage'));
|
|
const SetupPage = lazy(() => import('./pages/SetupPage'));
|
|
|
|
export default function App() {
|
|
const pathname = useLocation().pathname;
|
|
const isModRoute = pathname.startsWith('/mod/');
|
|
// The inspector view is full-bleed/viewport-height; the setup sub-route keeps the standard centered layout.
|
|
const isModView = /^\/mod\/[^/]+$/.test(pathname);
|
|
|
|
return (
|
|
<div className="min-h-screen bg-zinc-950 text-zinc-100">
|
|
{/* For the mod route the layout is full-bleed and fills the viewport so
|
|
the sidebar can scroll independently and the viewer gets all the space. */}
|
|
<div className={"flex min-h-screen flex-col " + (isModView ? "h-screen" : "")}>
|
|
<header className={"border-b border-zinc-800 " + (isModRoute ? "shrink-0" : "")}>
|
|
{isModRoute ? (
|
|
<ModHeader />
|
|
) : (
|
|
<div className="mx-auto flex max-w-5xl items-center justify-between px-4 py-4">
|
|
<Link to="/" className="text-lg font-semibold tracking-tight">
|
|
TTS Workshop
|
|
</Link>
|
|
<nav className="flex gap-4 text-sm text-zinc-400">
|
|
<Link to="/" className="hover:text-zinc-100">
|
|
Search
|
|
</Link>
|
|
<Link to="/bgm" className="hover:text-zinc-100">
|
|
BGM
|
|
</Link>
|
|
</nav>
|
|
</div>
|
|
)}
|
|
</header>
|
|
<main className={(isModView ? "min-h-0 flex-1" : "mx-auto max-w-5xl px-4 py-8")}>
|
|
<Routes>
|
|
<Route path="/" element={<SearchPage />} />
|
|
<Route path="/mod/:id" element={<ModPage />} />
|
|
<Route
|
|
path="/mod/:id/setup"
|
|
element={
|
|
<Suspense fallback={<p className="text-sm text-zinc-400">Loading full setup…</p>}>
|
|
<FullSetupPage />
|
|
</Suspense>
|
|
}
|
|
/>
|
|
<Route path="/bgm" element={<Suspense fallback={null}><BgmPage /></Suspense>} />
|
|
<Route path="/bgm/:id" element={<Suspense fallback={null}><BgmPackagePage /></Suspense>} />
|
|
<Route path="/bgm/:id/parts" element={<Suspense fallback={null}><PartsPage /></Suspense>} />
|
|
<Route path="/bgm/:id/parts/:type/:part" element={<Suspense fallback={null}><PartPage /></Suspense>} />
|
|
<Route path="/bgm/:id/surfaces" element={<Suspense fallback={null}><SurfacesPage /></Suspense>} />
|
|
<Route path="/bgm/:id/surfaces/:type/:surface" element={<Suspense fallback={null}><SurfacePage /></Suspense>} />
|
|
<Route path="/bgm/:id/setups" element={<Suspense fallback={null}><SetupsPage /></Suspense>} />
|
|
<Route path="/bgm/:id/setups/:type/:setup" element={<Suspense fallback={null}><SetupPage /></Suspense>} />
|
|
</Routes>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |