Add spotlight feature (#340)

frontend/package.json

@@ -27,6 +27,7 @@
     "@mantine/hooks": "^6.0.5",
     "@mantine/next": "^6.0.5",
     "@mantine/notifications": "^6.0.5",
+    "@mantine/spotlight": "^6.0.5",
     "@next/bundle-analyzer": "^13.3.1",
     "@react-icons/all-files": "^4.1.0",
     "@tabler/icons-react": "^2.17.0",

frontend/src/components/brackets/brackets.tsx

@@ -46,7 +46,8 @@ function getRoundsGridCols(
     );
   }
 
-  const showAddRoundButton = readOnly || stageItemIsHandledAutomatically(stageItem);
+  const showAddRoundButton =
+    tournamentData != null && (readOnly || stageItemIsHandledAutomatically(stageItem));
 
   return (
     <React.Fragment key={stageItem.id}>

frontend/src/components/modals/spotlight.tsx

@@ -0,0 +1,91 @@
+import { SpotlightAction, SpotlightProvider } from '@mantine/spotlight';
+import {
+  IconCalendarEvent,
+  IconHome,
+  IconSearch,
+  IconSettings,
+  IconSoccerField,
+  IconTrophy,
+  IconUser,
+  IconUsers,
+  IconUsersGroup,
+} from '@tabler/icons-react';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import { getTournamentIdFromRouter } from '../utils/util';
+
+export function Spotlight() {
+  const router = useRouter();
+  const { id: tournamentId } = getTournamentIdFromRouter();
+
+  const actions: SpotlightAction[] = [
+    {
+      title: 'Home',
+      description: 'Get to home page',
+      onTrigger: () => router.push('/'),
+      icon: <IconHome size="1.2rem" />,
+    },
+    {
+      title: 'Clubs',
+      description: 'View, add or delete clubs',
+      onTrigger: () => router.push('/clubs'),
+      icon: <IconUsersGroup size="1.2rem" />,
+    },
+    {
+      title: 'User Settings',
+      description: 'Change name, email, password etc.',
+      onTrigger: () => router.push('/user'),
+      icon: <IconUser size="1.2rem" />,
+    },
+  ];
+
+  const tournamentActions: SpotlightAction[] = [
+    {
+      title: 'Planning',
+      description: 'Change planning of matches',
+      onTrigger: () => router.push(`/tournaments/${tournamentId}/schedule`),
+      icon: <IconCalendarEvent size="1.2rem" />,
+    },
+    {
+      title: 'Teams',
+      description: 'View, add or delete teams',
+      onTrigger: () => router.push(`/tournaments/${tournamentId}/teams`),
+      icon: <IconUsers size="1.2rem" />,
+    },
+    {
+      title: 'Players',
+      description: 'View, add or delete players',
+      onTrigger: () => router.push(`/tournaments/${tournamentId}/players`),
+      icon: <IconUsers size="1.2rem" />,
+    },
+    {
+      title: 'Stages',
+      description: 'Change the layout of the tournament',
+      onTrigger: () => router.push(`/tournaments/${tournamentId}/stages`),
+      icon: <IconTrophy size="1.2rem" />,
+    },
+    {
+      title: 'Courts',
+      description: 'View, add or delete courts',
+      onTrigger: () => router.push(`/tournaments/${tournamentId}/courts`),
+      icon: <IconSoccerField size="1.2rem" />,
+    },
+    {
+      title: 'Tournament settings',
+      description: 'Change settings of the tournament',
+      onTrigger: () => router.push(`/tournaments/${tournamentId}/settings`),
+      icon: <IconSettings size="1.2rem" />,
+    },
+  ];
+  const allActions = tournamentId >= 0 ? actions.concat(tournamentActions) : actions;
+  return (
+    <SpotlightProvider
+      actions={allActions}
+      searchIcon={<IconSearch size="1.2rem" />}
+      searchPlaceholder="Search..."
+      shortcut="mod + k"
+      nothingFoundMessage="Nothing found..."
+    />
+  );
+}

frontend/src/pages/_app.tsx

@@ -6,6 +6,8 @@ import NextApp, { AppContext, AppProps } from 'next/app';
 import Head from 'next/head';
 import { useState } from 'react';
 
+import { Spotlight } from '../components/modals/spotlight';
+
 export default function App(props: AppProps & { colorScheme: ColorScheme }) {
   const { Component, pageProps } = props;
   const [colorScheme, setColorScheme] = useState<ColorScheme>(props.colorScheme);
@@ -28,6 +30,7 @@ export default function App(props: AppProps & { colorScheme: ColorScheme }) {
 
       <ColorSchemeProvider colorScheme={colorScheme} toggleColorScheme={toggleColorScheme}>
         <MantineProvider theme={{ colorScheme }} withGlobalStyles withNormalizeCSS>
+          <Spotlight />
           <Notifications />
           <Component {...pageProps} />
           <Analytics />

frontend/src/pages/tournaments/[id].tsx

@@ -5,7 +5,6 @@ import { SWRResponse } from 'swr';
 
 import NotFoundTitle from '../404';
 import Brackets from '../../components/brackets/brackets';
-import { NextStageButton } from '../../components/buttons/next_stage_button';
 import Scheduler from '../../components/scheduling/scheduling';
 import StagesTab from '../../components/utils/stages_tab';
 import { getTournamentIdFromRouter, responseIsValid } from '../../components/utils/util';
@@ -140,9 +139,8 @@ export default function TournamentPage() {
             />
             <Button
               color="blue"
-              size="md"
+              size="sm"
               variant="outline"
-              style={{ marginBottom: 10 }}
               leftIcon={<IconExternalLink size={24} />}
               onClick={() => {
                 const endpoint = getTournamentEndpoint(tournamentDataFull);
@@ -151,10 +149,6 @@ export default function TournamentPage() {
             >
               View dashboard
             </Button>
-            <NextStageButton
-              tournamentData={tournamentData}
-              swrStagesResponse={swrStagesResponse}
-            />
           </Group>
         </Grid.Col>
       </Grid>

frontend/yarn.lock

@@ -1184,6 +1184,13 @@
     "@mantine/utils" "6.0.10"
     react-transition-group "4.4.2"
 
+"@mantine/spotlight@^6.0.5":
+  version "6.0.21"
+  resolved "https://registry.yarnpkg.com/@mantine/spotlight/-/spotlight-6.0.21.tgz#98f507bd3429fee1f2b57ad5ef9f88d1d8d8ff32"
+  integrity sha512-xJqF2Vpn8s6I4mSF+iCi7IzqL8iaqbvq0RcYlF1usLZYW2HrArX31s1r11DmzqM1PIuBQUhquW8jUXx/MZy3oA==
+  dependencies:
+    "@mantine/utils" "6.0.21"
+
 "@mantine/ssr@6.0.10":
   version "6.0.10"
   resolved "https://registry.yarnpkg.com/@mantine/ssr/-/ssr-6.0.10.tgz#58e41adcf38e82f513e8e289110d0efe4eba4a7e"