Search spotlight

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",

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';

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 />
     </>
   );

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...',
+        }}
+      />
+    </>
+  );
+}