feat(spotlight): implement tab navigation via spotlight search

package.json

@@ -10,7 +10,9 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@mantine/core": "^9.3.1",
+    "@mantine/core": "^9.4.1",
+    "@mantine/hooks": "9.4.1",
+    "@mantine/spotlight": "9.4.1",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
     "react-hotkeys-hook": "^5.3.2"

pnpm-lock.yaml

@@ -9,8 +9,14 @@ importers:
   .:
     dependencies:
       '@mantine/core':
-        specifier: ^9.3.1
+        specifier: ^9.4.1
-        version: 9.3.1(@mantine/hooks@9.3.1(react@19.2.7))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+        version: 9.4.1(@mantine/hooks@9.4.1(react@19.2.7))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@mantine/hooks':
+        specifier: 9.4.1
+        version: 9.4.1(react@19.2.7)
+      '@mantine/spotlight':
+        specifier: 9.4.1
+        version: 9.4.1(@mantine/core@9.4.1(@mantine/hooks@9.4.1(react@19.2.7))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(@mantine/hooks@9.4.1(react@19.2.7))(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       react:
         specifier: ^19.2.6
         version: 19.2.7
@@ -232,15 +238,28 @@ packages:
   '@jridgewell/trace-mapping@0.3.31':
     resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
 
-  '@mantine/core@9.3.1':
+  '@mantine/core@9.4.1':
-    resolution: {integrity: sha512-4rBoHpggSohayE+Os7lKdbsHTw7m/uZRKYjk9DN6cKBhQIjdiULdcG+b4b5CMVZSqZDHPgT70uWGI7yqkn8Ufw==}
+    resolution: {integrity: sha512-lZWEICrum4+vwKxzh/mk4RB1N6BqZ0Cshdl6lhm7OYLiQzmOaxKtOgyaWz+vr65G8mqTXjalZalB+wmMVBYK2Q==}
     peerDependencies:
-      '@mantine/hooks': 9.3.1
+      '@mantine/hooks': 9.4.1
       react: ^19.2.0
       react-dom: ^19.2.0
 
-  '@mantine/hooks@9.3.1':
+  '@mantine/hooks@9.4.1':
-    resolution: {integrity: sha512-zAOlxV59j5CDgAnExN+ypaR6dVW1vwMKDvKUxIlUVd/e52qxYnPyYRD+shJmyOLaZRuQmVF0R/7mJAjt2jw9cA==}
+    resolution: {integrity: sha512-eTI8wmzPx3r98zgKIEuvukmoGTHBhmtI6+9E6o2DbTmEU2eM1bCdjE2vFdf0op2AlRO0KEYEcZhNQi4T/SJk0A==}
+    peerDependencies:
+      react: ^19.2.0
+
+  '@mantine/spotlight@9.4.1':
+    resolution: {integrity: sha512-gJ+7DdnGULeobtGXVGbVgvJSG3TeecxLXNxzpZo+ohl1OetPftCBGJOUrX2tYOOC6nJE1eHSIr/kpB31YIRjhQ==}
+    peerDependencies:
+      '@mantine/core': 9.4.1
+      '@mantine/hooks': 9.4.1
+      react: ^19.2.0
+      react-dom: ^19.2.0
+
+  '@mantine/store@9.4.1':
+    resolution: {integrity: sha512-/DCZq0aqqIdm03J0RJ7pbzoau2cwY8ndSOjskHOKHhTeWMnOBdCKXA3oMO5aIDldDqJ9T7Io4Boh4Pt461zNQw==}
     peerDependencies:
       react: ^19.2.0
 
@@ -1260,10 +1279,10 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.5
 
-  '@mantine/core@9.3.1(@mantine/hooks@9.3.1(react@19.2.7))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+  '@mantine/core@9.4.1(@mantine/hooks@9.4.1(react@19.2.7))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
     dependencies:
       '@floating-ui/react': 0.27.19(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
-      '@mantine/hooks': 9.3.1(react@19.2.7)
+      '@mantine/hooks': 9.4.1(react@19.2.7)
       clsx: 2.1.1
       react: 19.2.7
       react-dom: 19.2.7(react@19.2.7)
@@ -1273,7 +1292,19 @@ snapshots:
     transitivePeerDependencies:
       - '@types/react'
 
-  '@mantine/hooks@9.3.1(react@19.2.7)':
+  '@mantine/hooks@9.4.1(react@19.2.7)':
+    dependencies:
+      react: 19.2.7
+
+  '@mantine/spotlight@9.4.1(@mantine/core@9.4.1(@mantine/hooks@9.4.1(react@19.2.7))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(@mantine/hooks@9.4.1(react@19.2.7))(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+    dependencies:
+      '@mantine/core': 9.4.1(@mantine/hooks@9.4.1(react@19.2.7))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@mantine/hooks': 9.4.1(react@19.2.7)
+      '@mantine/store': 9.4.1(react@19.2.7)
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+
+  '@mantine/store@9.4.1(react@19.2.7)':
     dependencies:
       react: 19.2.7
 

src/App.tsx

@@ -1,12 +1,14 @@
 import { useState, useEffect } from "react";
-import { MantineProvider, Tabs } from "@mantine/core";
+import { MantineProvider, Tabs, Button } from "@mantine/core";
 import {
   HotkeysProvider,
   useHotkeys,
   useHotkeysContext,
 } from "react-hotkeys-hook";
 import "@mantine/core/styles.css";
-
+import { Spotlight, spotlight } from "@mantine/spotlight";
+import type { SpotlightActionData } from "@mantine/spotlight";
+import "@mantine/spotlight/styles.css";
 function TabContent({ title, scopeName }: any) {
   const [text, setText] = useState(`${title} panel `);
   const [used, setUsed] = useState(false);
@@ -30,6 +32,32 @@ function TabContent({ title, scopeName }: any) {
 function TabsPage() {
   const { enableScope, disableScope } = useHotkeysContext();
   const [activeTab, setActiveTab] = useState("1");
+  const actions: SpotlightActionData[] = [
+    {
+      id: "first",
+      label: "First",
+      description: "First panel",
+      onClick: () => {
+        setActiveTab("1");
+      },
+    },
+    {
+      id: "second",
+      label: "Second",
+      description: "Second panel",
+      onClick: () => {
+        setActiveTab("2");
+      },
+    },
+    {
+      id: "third",
+      label: "Third",
+      description: "Third panel",
+      onClick: () => {
+        setActiveTab("3");
+      },
+    },
+  ];
 
   useEffect(() => {
     const currentScope = `tab${activeTab}`;
@@ -45,7 +73,22 @@ function TabsPage() {
   useHotkeys("ctrl+3", () => setActiveTab("3"), { preventDefault: true });
 
   return (
-    <Tabs value={activeTab} onChange={(value) => value && setActiveTab(value)}>
+    <>
+      <Button onClick={spotlight.open} variant="default">
+        Open spotlight
+      </Button>
+      <Spotlight
+        actions={actions}
+        nothingFound="Nothing found..."
+        highlightQuery
+        searchProps={{
+          placeholder: "Search...",
+        }}
+      />
+      <Tabs
+        value={activeTab}
+        onChange={(value) => value && setActiveTab(value)}
+      >
         <Tabs.List>
           <Tabs.Tab value="1">First</Tabs.Tab>
           <Tabs.Tab value="2">Second</Tabs.Tab>
@@ -64,6 +107,7 @@ function TabsPage() {
           <TabContent title="Third" scopeName="tab3" />
         </Tabs.Panel>
       </Tabs>
+    </>
   );
 }