From c71dad6c371e5b507a3aeec066ab30747fe6c633 Mon Sep 17 00:00:00 2001
From: Matthias Mair <code@mjmair.com>
Date: Mon, 15 Apr 2024 18:58:51 +0200
Subject: [PATCH] dumb spotlight down

---
 src/frontend/src/components/nav/Layout.tsx  | 23 +++++++++++++++++++--
 src/frontend/src/pages/Index/Playground.tsx |  7 ++++---
 2 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/src/frontend/src/components/nav/Layout.tsx b/src/frontend/src/components/nav/Layout.tsx
index 96827dcf14..bdff94470f 100644
--- a/src/frontend/src/components/nav/Layout.tsx
+++ b/src/frontend/src/components/nav/Layout.tsx
@@ -2,6 +2,7 @@ import { t } from '@lingui/macro';
 import { Container, Flex, Space } from '@mantine/core';
 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';
@@ -28,7 +29,26 @@ 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: any) {
+    if (change.registeredActions.length > defaultactions.length)
+      setCustomActions(true);
+    setActions(change);
+  }
+  // firstStore.subscribe(actionsAreChanging);
+
+  // clear additional actions on location change
+  useEffect(() => {
+    if (customActions) {
+      setActions(defaultactions);
+      setCustomActions(false);
+    }
+  }, [location]);
 
   return (
     <ProtectedRoute>
@@ -40,9 +60,8 @@ export default function LayoutComponent() {
         <Space h="xl" />
         <Footer />
         <Spotlight
-          actions={defaultactions}
+          actions={actions}
           store={firstStore}
-          //onActionsChange={actionsAreChanging}
           highlightQuery
           searchProps={{
             leftSection: <IconSearch size="1.2rem" />,
diff --git a/src/frontend/src/pages/Index/Playground.tsx b/src/frontend/src/pages/Index/Playground.tsx
index c7bb7d0c6f..56834a2df7 100644
--- a/src/frontend/src/pages/Index/Playground.tsx
+++ b/src/frontend/src/pages/Index/Playground.tsx
@@ -2,6 +2,7 @@ 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 { SpotlightActionData } from '@mantine/spotlight';
 import { IconAlien } from '@tabler/icons-react';
 import { ReactNode, useMemo, useState } from 'react';
 
@@ -18,7 +19,6 @@ import {
   useCreateApiFormModal,
   useEditApiFormModal
 } from '../../hooks/UseForm';
-import { useSpotlightState } from '../../states/SpotlightState';
 
 // Generate some example forms using the modal API forms interface
 const fields = partCategoryFields({});
@@ -176,8 +176,9 @@ function SpotlighPlayground() {
     <Button
       variant="outline"
       onClick={() => {
-        const setAdditionalActions =
-          useSpotlightState.getState().setAdditionalActions;
+        const setAdditionalActions = (value: SpotlightActionData[]) => {
+          console.log('would add', value);
+        };
         setAdditionalActions([
           {
             id: 'secret-action-1',