From cfb553d63a3683620d6dae97eb54198b249269ce Mon Sep 17 00:00:00 2001
From: Philipinho <16838612+Philipinho@users.noreply.github.com>
Date: Tue, 26 Sep 2023 13:43:13 +0100
Subject: [PATCH] Search spotlight

---
 frontend/package.json                         |  1 +
 frontend/src/app/layout.tsx                   |  1 +
 frontend/src/components/navbar/navbar.tsx     |  8 ++++
 .../src/features/search/search-spotlight.tsx  | 43 +++++++++++++++++++
 4 files changed, 53 insertions(+)
 create mode 100644 frontend/src/features/search/search-spotlight.tsx

diff --git a/frontend/package.json b/frontend/package.json
index abefbec..fa3ee5e 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -14,6 +14,7 @@
     "@mantine/core": "^7.0.2",
     "@mantine/form": "^7.0.2",
     "@mantine/hooks": "^7.0.2",
+    "@mantine/spotlight": "^7.0.2",
     "@tabler/icons-react": "^2.32.0",
     "@tanstack/react-query": "^4.33.0",
     "@tanstack/react-table": "^8.9.3",
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
index 3eb5508..c9741bb 100644
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -1,4 +1,5 @@
 import '@mantine/core/styles.css';
+import '@mantine/spotlight/styles.css';
 import type { Metadata } from 'next';
 import { TanstackProvider } from '@/components/providers/tanstack-provider';
 import CustomToaster from '@/components/ui/custom-toaster';
diff --git a/frontend/src/components/navbar/navbar.tsx b/frontend/src/components/navbar/navbar.tsx
index 0e4cb3a..e30749a 100644
--- a/frontend/src/components/navbar/navbar.tsx
+++ b/frontend/src/components/navbar/navbar.tsx
@@ -6,6 +6,7 @@ import {
   Tooltip,
   rem,
 } from '@mantine/core';
+import { spotlight } from '@mantine/spotlight';
 import {
   IconSearch,
   IconPlus,
@@ -19,6 +20,7 @@ import React from 'react';
 import { useAtom } from 'jotai';
 import { settingsModalAtom } from '@/features/settings/modal/atoms/settings-modal-atom';
 import SettingsModal from '@/features/settings/modal/settings-modal';
+import { SearchSpotlight } from '@/features/search/search-spotlight';
 
 interface PrimaryMenuItem {
   icon: React.ElementType;
@@ -53,6 +55,11 @@ export function Navbar() {
   const [, setSettingsModalOpen] = useAtom(settingsModalAtom);
 
   const handleMenuItemClick = (label: string) => {
+
+    if (label === 'Search') {
+      spotlight.open();
+    }
+
     if (label === 'Settings') {
       setSettingsModalOpen(true);
     }
@@ -112,6 +119,7 @@ export function Navbar() {
         </div>
       </nav>
 
+      <SearchSpotlight />
       <SettingsModal />
     </>
   );
diff --git a/frontend/src/features/search/search-spotlight.tsx b/frontend/src/features/search/search-spotlight.tsx
new file mode 100644
index 0000000..7cf2f42
--- /dev/null
+++ b/frontend/src/features/search/search-spotlight.tsx
@@ -0,0 +1,43 @@
+import { rem } from '@mantine/core';
+import { Spotlight, SpotlightActionData } from '@mantine/spotlight';
+import { IconHome, IconDashboard, IconSettings, IconSearch } from '@tabler/icons-react';
+
+const actions: SpotlightActionData[] = [
+  {
+    id: 'home',
+    label: 'Home',
+    description: 'Get to home page',
+    onClick: () => console.log('Home'),
+    leftSection: <IconHome style={{ width: rem(24), height: rem(24) }} stroke={1.5} />,
+  },
+  {
+    id: 'dashboard',
+    label: 'Dashboard',
+    description: 'Get full information about current system status',
+    onClick: () => console.log('Dashboard'),
+    leftSection: <IconDashboard style={{ width: rem(24), height: rem(24) }} stroke={1.5} />,
+  },
+  {
+    id: 'settings',
+    label: 'Settings',
+    description: 'Account settings and workspace management',
+    onClick: () => console.log('Settings'),
+    leftSection: <IconSettings style={{ width: rem(24), height: rem(24) }} stroke={1.5} />,
+  },
+];
+
+export function SearchSpotlight() {
+  return (
+    <>
+      <Spotlight
+        actions={actions}
+        nothingFound="Nothing found..."
+        highlightQuery
+        searchProps={{
+          leftSection: <IconSearch style={{ width: rem(20), height: rem(20) }} stroke={1.5} />,
+          placeholder: 'Search...',
+        }}
+      />
+    </>
+  );
+}