[PUI] Quick commands pallet

Fixes #5888

src/frontend/src/components/buttons/SpotlightButton.tsx

@@ -0,0 +1,15 @@
+import { t } from '@lingui/macro';
+import { ActionIcon } from '@mantine/core';
+import { spotlight } from '@mantine/spotlight';
+import { IconCommand } from '@tabler/icons-react';
+
+/**
+ * A button which opens the quick command modal
+ */
+export function SpotlightButton() {
+  return (
+    <ActionIcon onClick={() => spotlight.open()} title={t`Open spotlight`}>
+      <IconCommand />
+    </ActionIcon>
+  );
+}

src/frontend/src/components/items/MenuLinks.tsx

@@ -16,6 +16,10 @@ export interface MenuLinkItem {
   docchildren?: React.ReactNode;
 }
 
+export type menuItemsCollection = {
+  [key: string]: MenuLinkItem;
+};
+
 function ConditionalDocTooltip({
   item,
   children

src/frontend/src/components/nav/Header.tsx

@@ -10,6 +10,7 @@ import { navTabs as mainNavTabs } from '../../defaults/links';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
 import { InvenTreeStyle } from '../../globalStyle';
 import { apiUrl } from '../../states/ApiState';
+import { SpotlightButton } from '../buttons/SpotlightButton';
 import { ScanButton } from '../items/ScanButton';
 import { MainMenu } from './MainMenu';
 import { NavHoverMenu } from './NavHoverMenu';
@@ -80,6 +81,7 @@ export function Header() {
             <ActionIcon onClick={openSearchDrawer}>
               <IconSearch />
             </ActionIcon>
+            <SpotlightButton />
             <ScanButton />
             <ActionIcon onClick={openNotificationDrawer}>
               <Indicator

src/frontend/src/components/nav/Layout.tsx

@@ -1,6 +1,10 @@
+import { t } from '@lingui/macro';
 import { Container, Flex, Space } from '@mantine/core';
-import { Navigate, Outlet, useLocation } from 'react-router-dom';
+import { SpotlightProvider } from '@mantine/spotlight';
+import { IconSearch } from '@tabler/icons-react';
+import { Navigate, Outlet, useLocation, useNavigate } from 'react-router-dom';
 
+import { getActions } from '../../defaults/actions';
 import { InvenTreeStyle } from '../../globalStyle';
 import { useSessionState } from '../../states/SessionState';
 import { Footer } from './Footer';
@@ -22,9 +26,18 @@ export const ProtectedRoute = ({ children }: { children: JSX.Element }) => {
 
 export default function LayoutComponent() {
   const { classes } = InvenTreeStyle();
+  const navigate = useNavigate();
+  const actions = getActions(navigate);
 
   return (
     <ProtectedRoute>
+      <SpotlightProvider
+        actions={actions}
+        searchIcon={<IconSearch size="1.2rem" />}
+        searchPlaceholder={t`Search...`}
+        shortcut={['mod + K', '/']}
+        nothingFoundMessage={t`Nothing found...`}
+      >
         <Flex direction="column" mih="100vh">
           <Header />
           <Container className={classes.layoutContent} size="100%">
@@ -33,6 +46,7 @@ export default function LayoutComponent() {
           <Space h="xl" />
           <Footer />
         </Flex>
+      </SpotlightProvider>
     </ProtectedRoute>
   );
 }

src/frontend/src/components/nav/NavHoverMenu.tsx

@@ -20,6 +20,8 @@ import { useLocalState } from '../../states/LocalState';
 import { InvenTreeLogo } from '../items/InvenTreeLogo';
 import { MenuLinks } from '../items/MenuLinks';
 
+const onlyItems = Object.values(menuItems);
+
 export function NavHoverMenu({
   openDrawer: openDrawer
 }: {
@@ -85,7 +87,7 @@ export function NavHoverMenu({
           mx="-md"
           color={theme.colorScheme === 'dark' ? 'dark.5' : 'gray.1'}
         />
-        <MenuLinks links={menuItems} highlighted={true} />
+        <MenuLinks links={onlyItems} highlighted={true} />
         <div className={classes.headerDropdownFooter}>
           <Group position="apart">
             <div>

src/frontend/src/components/nav/NavigationDrawer.tsx

@@ -18,6 +18,7 @@ import { MenuLinkItem, MenuLinks } from '../items/MenuLinks';
 
 // TODO @matmair #1: implement plugin loading and menu item generation see #5269
 const plugins: MenuLinkItem[] = [];
+const onlyItems = Object.values(menuItems);
 
 export function NavigationDrawer({
   opened,
@@ -60,7 +61,7 @@ function DrawerContent() {
       <Container className={classes.layoutContent} p={0}>
         <ScrollArea h={scrollHeight} type="always" offsetScrollbars>
           <Title order={5}>{t`Pages`}</Title>
-          <MenuLinks links={menuItems} />
+          <MenuLinks links={onlyItems} />
           <Space h="md" />
           {plugins.length > 0 ? (
             <>

src/frontend/src/defaults/actions.tsx

@@ -0,0 +1,40 @@
+import { t } from '@lingui/macro';
+import type { SpotlightAction } from '@mantine/spotlight';
+import { IconFileText, IconHome, IconInfoCircle } from '@tabler/icons-react';
+import { NavigateFunction } from 'react-router-dom';
+
+import { menuItems } from './menuItems';
+
+export function getActions(navigate: NavigateFunction) {
+  /**
+   * Default actions for the spotlight
+   */
+  const actions: SpotlightAction[] = [
+    {
+      title: t`Home`,
+      description: `Go to the home page`,
+      onTrigger: (action) => navigate(menuItems.home.link),
+      icon: <IconHome size="1.2rem" />
+    },
+    {
+      title: t`Dashboard`,
+      description: t`Go to the InvenTree dashboard`,
+      onTrigger: () => navigate(menuItems.dashboard.link),
+      icon: <IconHome size="1.2rem" />
+    },
+    {
+      title: t`Documentation`,
+      description: t`Visit documentation to learn more about InvenTree`,
+      onTrigger: () => console.log('Documentation'),
+      icon: <IconFileText size="1.2rem" />
+    },
+    {
+      title: t`About InvenTree`,
+      description: t`About the InvenTree org`,
+      onTrigger: () => navigate(menuItems.about.link),
+      icon: <IconInfoCircle size="1.2rem" />
+    }
+  ];
+
+  return actions;
+}

src/frontend/src/defaults/menuItems.tsx

@@ -1,75 +1,75 @@
 import { Trans } from '@lingui/macro';
 
-import { MenuLinkItem } from '../components/items/MenuLinks';
+import { menuItemsCollection } from '../components/items/MenuLinks';
 import { IS_DEV_OR_DEMO } from '../main';
 
-export const menuItems: MenuLinkItem[] = [
-  {
+export const menuItems: menuItemsCollection = {
+  home: {
     id: 'home',
     text: <Trans>Home</Trans>,
     link: '/',
     highlight: true
   },
-  {
+  profile: {
     id: 'profile',
     text: <Trans>Account settings</Trans>,
     link: '/settings/user',
     doctext: <Trans>User attributes and design settings.</Trans>
   },
-  {
+  scan: {
     id: 'scan',
     text: <Trans>Scanning</Trans>,
     link: '/scan',
     doctext: <Trans>View for interactive scanning and multiple actions.</Trans>,
     highlight: true
   },
-  {
+  dashboard: {
     id: 'dashboard',
     text: <Trans>Dashboard</Trans>,
     link: '/dashboard'
   },
-  {
+  parts: {
     id: 'parts',
     text: <Trans>Parts</Trans>,
     link: '/part/'
   },
-  {
+  stock: {
     id: 'stock',
     text: <Trans>Stock</Trans>,
     link: '/stock'
   },
-  {
+  build: {
     id: 'build',
     text: <Trans>Build</Trans>,
     link: '/build/'
   },
-  {
+  purchasing: {
     id: 'purchasing',
     text: <Trans>Purchasing</Trans>,
     link: '/purchasing/'
   },
-  {
+  sales: {
     id: 'sales',
     text: <Trans>Sales</Trans>,
     link: '/sales/'
   },
-  {
+  'settings-system': {
     id: 'settings-system',
     text: <Trans>System Settings</Trans>,
     link: '/settings/system'
   },
-  {
+  'settings-admin': {
     id: 'settings-admin',
     text: <Trans>Admin Center</Trans>,
     link: '/settings/admin'
   }
-];
+};
 
 if (IS_DEV_OR_DEMO) {
-  menuItems.push({
+  menuItems['playground'] = {
     id: 'playground',
     text: <Trans>Playground</Trans>,
     link: '/playground',
     highlight: true
-  });
+  };
 }