fix(website): navigation and 404

apps/website/src/app/docs/packages/[package]/[version]/[item]/loading.tsx

@@ -1 +0,0 @@
-export { default } from '~/app/loading';

apps/website/src/app/docs/packages/[package]/[version]/[item]/not-found.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+export default function NotFound() {
+	const pathname = usePathname();
+	const href = pathname.split('/').slice(0, -1).join('/');
+
+	return (
+		<div className="mx-auto flex min-h-screen max-w-lg flex-col place-content-center place-items-center gap-8 px-8 py-16 lg:px-6 lg:py-0">
+			<h1 className="text-[9rem] font-black leading-none md:text-[12rem]">404</h1>
+			<h2 className="text-[2rem] md:text-[3rem]">Not found.</h2>
+			<Link
+				className="bg-blurple focus:ring-width-2 flex h-11 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center rounded border-0 px-6 text-base font-semibold leading-none text-white no-underline outline-0 focus:ring focus:ring-white active:translate-y-px"
+				href={href}
+			>
+				Take me back
+			</Link>
+		</div>
+	);
+}

apps/website/src/app/docs/packages/[package]/[version]/[item]/page.tsx

@@ -140,5 +140,13 @@ function Member({ member }: { member?: ApiItem }) {
 export default async function Page({ params }: { params: ItemRouteParams }) {
 	const member = await fetchMember(params);
 
-	return <div className="relative top-6">{member ? <Member member={member} /> : null}</div>;
+	if (!member) {
+		notFound();
+	}
+
+	return (
+		<div className="relative top-6">
+			<Member member={member} />
+		</div>
+	);
 }

apps/website/src/app/docs/packages/[package]/[version]/loading.tsx

@@ -1 +0,0 @@
-export { default } from '~/app/loading';

apps/website/src/app/providers.tsx

@@ -2,15 +2,12 @@
 
 import { ThemeProvider } from 'next-themes';
 import type { PropsWithChildren } from 'react';
-import { ServiceWorker } from '~/components/ServiceWorker';
+import { useSystemThemeFallback } from '~/hooks/useSystemThemeFallback';
-import { SystemThemeFallback } from '~/components/SystemThemeFallback';
+import { useUnregisterServiceWorker } from '~/hooks/useUnregisterServiceWorker';
 
 export function Providers({ children }: PropsWithChildren) {
-	return (
+	useUnregisterServiceWorker();
-		<>
+	useSystemThemeFallback();
-			<ThemeProvider attribute="class">{children}</ThemeProvider>
+
-			<ServiceWorker />
+	return <ThemeProvider attribute="class">{children}</ThemeProvider>;
-			<SystemThemeFallback />
-		</>
-	);
 }

apps/website/src/components/ServiceWorker.tsx

@@ -1,9 +0,0 @@
-'use client';
-
-import { useUnregisterServiceWorker } from '~/hooks/useUnregisterServiceWorker';
-
-export function ServiceWorker() {
-	useUnregisterServiceWorker();
-
-	return null;
-}

apps/website/src/components/Sidebar.tsx

@@ -7,7 +7,7 @@ import { VscSymbolField } from '@react-icons/all-files/vsc/VscSymbolField';
 import { VscSymbolInterface } from '@react-icons/all-files/vsc/VscSymbolInterface';
 import { VscSymbolMethod } from '@react-icons/all-files/vsc/VscSymbolMethod';
 import { VscSymbolVariable } from '@react-icons/all-files/vsc/VscSymbolVariable';
-import { usePathname } from 'next/navigation';
+import { useSelectedLayoutSegment } from 'next/navigation';
 import { useMemo } from 'react';
 import { ItemLink } from './ItemLink';
 import { Section } from './Section';
@@ -83,7 +83,7 @@ function resolveIcon(item: string) {
 }
 
 export function Sidebar({ members }: { members: SidebarSectionItemData[] }) {
-	const pathname = usePathname();
+	const segment = useSelectedLayoutSegment();
 	const { setOpened } = useNav();
 
 	const groupItems = useMemo(() => groupMembers(members), [members]);
@@ -97,7 +97,7 @@ export function Sidebar({ members }: { members: SidebarSectionItemData[] }) {
 						{groupItems[group].map((member, index) => (
 							<ItemLink
 								className={`dark:border-dark-100 border-light-800 focus:ring-width-2 focus:ring-blurple ml-5 flex flex-col border-l p-[5px] pl-6 outline-0 focus:rounded focus:border-0 focus:ring ${
-									pathname === member.href
+									decodeURIComponent(segment ?? '') === member.href
 										? 'bg-blurple text-white'
 										: 'dark:hover:bg-dark-200 dark:active:bg-dark-100 hover:bg-light-700 active:bg-light-800'
 								}`}

apps/website/src/components/SystemThemeFallback.tsx

@@ -1,9 +0,0 @@
-'use client';
-
-import { useSystemThemeFallback } from '~/hooks/useSystemThemeFallback';
-
-export function SystemThemeFallback() {
-	useSystemThemeFallback();
-
-	return null;
-}