fix spotlight

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

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

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

@@ -1,8 +1,7 @@
 import { t } from '@lingui/macro';
 import { Container, Flex, Space } from '@mantine/core';
-import { Spotlight } from '@mantine/spotlight';
+import { Spotlight, createSpotlight } from '@mantine/spotlight';
 import { IconSearch } from '@tabler/icons-react';
-import { useEffect, useState } from 'react';
 import { Navigate, Outlet, useLocation, useNavigate } from 'react-router-dom';
 
 import { getActions } from '../../defaults/actions';
@@ -25,24 +24,11 @@ export const ProtectedRoute = ({ children }: { children: JSX.Element }) => {
   return children;
 };
 
+export const [firstStore, firstSpotlight] = createSpotlight();
+
 export default function LayoutComponent() {
   const navigate = useNavigate();
-  const location = useLocation();
-
   const defaultactions = getActions(navigate);
-  const [actions, setActions] = useState(defaultactions);
-  const [customActions, setCustomActions] = useState<boolean>(false);
-
-  function actionsAreChanging(change: []) {
-    if (change.length > defaultactions.length) setCustomActions(true);
-    setActions(change);
-  }
-  useEffect(() => {
-    if (customActions) {
-      setActions(defaultactions);
-      setCustomActions(false);
-    }
-  }, [location]);
 
   return (
     <ProtectedRoute>
@@ -54,10 +40,14 @@ export default function LayoutComponent() {
         <Space h="xl" />
         <Footer />
         <Spotlight
-          actions={actions}
+          actions={defaultactions}
+          store={firstStore}
           //onActionsChange={actionsAreChanging}
-          //searchIcon={<IconSearch size="1.2rem" />}
-          //searchPlaceholder={t`Search...`}
+          highlightQuery
+          searchProps={{
+            leftSection: <IconSearch size="1.2rem" />,
+            placeholder: t`Search...`
+          }}
           shortcut={['mod + K', '/']}
           nothingFound={t`Nothing found...`}
         />

src/frontend/src/main.css.ts

@@ -93,7 +93,9 @@ export const subLink = style({
   //       : vars.colors.gray[0]
   // })
 
-  ':active': vars.activeStyles
+  ':active': {
+    color: vars.colors.defaultHover
+  }
 });
 
 export const docHover = style({

src/frontend/src/pages/Index/Playground.tsx

@@ -2,13 +2,13 @@ import { Trans } from '@lingui/macro';
 import { Button, Card, Stack, TextInput } from '@mantine/core';
 import { Group, Text } from '@mantine/core';
 import { Accordion } from '@mantine/core';
-import { spotlight } from '@mantine/spotlight';
 import { IconAlien } from '@tabler/icons-react';
 import { ReactNode, useMemo, useState } from 'react';
 
 import { OptionsApiForm } from '../../components/forms/ApiForm';
 import { PlaceholderPill } from '../../components/items/Placeholder';
 import { StylishText } from '../../components/items/StylishText';
+import { firstSpotlight } from '../../components/nav/Layout';
 import { StatusRenderer } from '../../components/render/StatusRenderer';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
 import { ModelType } from '../../enums/ModelType';
@@ -18,6 +18,7 @@ import {
   useCreateApiFormModal,
   useEditApiFormModal
 } from '../../hooks/UseForm';
+import { useSpotlightState } from '../../states/SpotlightState';
 
 // Generate some example forms using the modal API forms interface
 const fields = partCategoryFields({});
@@ -175,25 +176,27 @@ function SpotlighPlayground() {
     <Button
       variant="outline"
       onClick={() => {
-        spotlight.registerActions([
+        const setAdditionalActions =
+          useSpotlightState.getState().setAdditionalActions;
+        setAdditionalActions([
           {
             id: 'secret-action-1',
             title: 'Secret action',
             description: 'It was registered with a button click',
-            icon: <IconAlien size="1.2rem" />,
-            onTrigger: () => console.log('Secret')
+            leftSection: <IconAlien size="1.2rem" />,
+            onClick: () => console.log('Secret')
           },
           {
             id: 'secret-action-2',
             title: 'Another secret action',
             description:
               'You can register multiple actions with just one command',
-            icon: <IconAlien size="1.2rem" />,
-            onTrigger: () => console.log('Secret')
+            leftSection: <IconAlien size="1.2rem" />,
+            onClick: () => console.log('Secret')
           }
         ]);
         console.log('registed');
-        spotlight.open();
+        firstSpotlight.open();
       }}
     >
       Register extra actions