feat: experiment with spotlight

packages/website/src/pages/_app.tsx

@@ -1,13 +1,74 @@
 import { ColorScheme, ColorSchemeProvider, MantineProvider } from '@mantine/core';
 import { useColorScheme } from '@mantine/hooks';
+import { SpotlightAction, SpotlightProvider } from '@mantine/spotlight';
 import type { AppProps } from 'next/app';
 import Head from 'next/head';
+import { type NextRouter, useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
+import { VscPackage } from 'react-icons/vsc';
 import { RouterTransition } from '~/components/RouterTransition';
 import '../styles/unocss.css';
 import '../styles/main.css';
 
+const actions: (router: NextRouter) => SpotlightAction[] = (router: NextRouter) => [
+	{
+		title: 'Home',
+		description: 'Go to landing page',
+		onTrigger: () => void router.push('/'),
+		icon: <VscPackage size={20} />,
+	},
+	{
+		title: 'Packages',
+		description: 'Go to the package selection',
+		onTrigger: () => void router.push('/docs/packages'),
+		icon: <VscPackage size={20} />,
+	},
+	{
+		id: 'packages-builders',
+		title: 'Builders',
+		description: 'Go to the @discordjs/builders documentation',
+		onTrigger: () => void router.push('/docs/packages/builders'),
+		icon: <VscPackage size={20} />,
+	},
+	{
+		id: 'packages-collection',
+		title: 'Collection',
+		description: 'Go to the @discordjs/collection documentation',
+		onTrigger: () => void router.push('/docs/packages/collection'),
+		icon: <VscPackage size={20} />,
+	},
+	{
+		id: 'packages-proxy',
+		title: 'Proxy',
+		description: 'Go to the @discordjs/proxy documentation',
+		onTrigger: () => void router.push('/docs/packages/proxy'),
+		icon: <VscPackage size={20} />,
+	},
+	{
+		id: 'packages-rest',
+		title: 'REST',
+		description: 'Go to the @discordjs/rest documentation',
+		onTrigger: () => void router.push('/docs/packages/voice'),
+		icon: <VscPackage size={20} />,
+	},
+	{
+		id: 'packages-voice',
+		title: 'Voice',
+		description: 'Go to the @discordjs/voice documentation',
+		onTrigger: () => void router.push('/docs/packages/ws'),
+		icon: <VscPackage size={20} />,
+	},
+	{
+		id: 'packages-ws',
+		title: 'WS',
+		description: 'Go to the @discordjs/ws documentation',
+		onTrigger: () => void router.push('/docs'),
+		icon: <VscPackage size={20} />,
+	},
+];
+
 export default function MyApp({ Component, pageProps }: AppProps) {
+	const router = useRouter();
 	const preferredColorScheme = useColorScheme('dark', { getInitialValueInEffect: true });
 	const [colorScheme, setColorScheme] = useState<ColorScheme>(preferredColorScheme);
 	const toggleColorScheme = (value?: ColorScheme) =>
@@ -52,8 +113,10 @@ export default function MyApp({ Component, pageProps }: AppProps) {
 					withNormalizeCSS
 					withGlobalStyles
 				>
-					<RouterTransition />
+					<SpotlightProvider shortcut={['mod + P', 'mod + K', '/']} actions={actions(router)}>
-					<Component {...pageProps} />
+						<RouterTransition />
+						<Component {...pageProps} />
+					</SpotlightProvider>
 				</MantineProvider>
 			</ColorSchemeProvider>
 		</>

packages/website/src/pages/docs/packages/[package]/index.tsx

@@ -1,4 +1,4 @@
-import { Container, UnstyledButton, createStyles, Group, ThemeIcon, Text, Stack, Box } from '@mantine/core';
+import { Container, UnstyledButton, createStyles, Group, ThemeIcon, Text, Stack, Box, Title } from '@mantine/core';
 import Link from 'next/link';
 import type { GetStaticPaths, GetStaticProps } from 'next/types';
 import { VscArrowRight, VscPackage } from 'react-icons/vsc';
@@ -66,13 +66,16 @@ export default function VersionsRoute(props: Partial<VersionProps> & { error?: s
 	) : (
 		<Container pt={96} size="xs">
 			<Stack sx={{ flexGrow: 1 }}>
+				<Title order={2} ml="xs">
+					Select a version:
+				</Title>
 				{props.data?.versions.map((version) => (
 					<Link key={version} href={`/docs/packages/${props.packageName!}/${version}`} passHref>
 						<UnstyledButton className={classes.control} component="a">
 							<Group position="apart">
 								<Group>
 									<ThemeIcon size={30}>
-										<VscPackage />
+										<VscPackage size={20} />
 									</ThemeIcon>
 									<Text weight={600} size="md">
 										{version}

packages/website/src/pages/docs/packages/index.tsx

@@ -1,4 +1,4 @@
-import { Container, UnstyledButton, createStyles, Group, ThemeIcon, Text, Stack } from '@mantine/core';
+import { Container, UnstyledButton, createStyles, Group, ThemeIcon, Text, Stack, Title } from '@mantine/core';
 import Link from 'next/link';
 import { VscArrowRight, VscPackage } from 'react-icons/vsc';
 
@@ -21,13 +21,16 @@ export default function PackagesRoute() {
 	return (
 		<Container pt={96} size="xs">
 			<Stack sx={{ flexGrow: 1 }}>
+				<Title order={2} ml="xs">
+					Select a package:
+				</Title>
 				{packages.map((pkg) => (
-					<Link key={pkg} href={`/docs/packages/${pkg}/main`} passHref>
+					<Link key={pkg} href={`/docs/packages/${pkg}`} passHref>
 						<UnstyledButton className={classes.control} component="a">
 							<Group position="apart">
 								<Group>
 									<ThemeIcon size={30}>
-										<VscPackage />
+										<VscPackage size={20} />
 									</ThemeIcon>
 									<Text weight={600} size="md">
 										{pkg}