refactor: clean up App component and reset to base layout without hotkeys and Tab

src/App.tsx

@@ -1,140 +1,11 @@
-import { useState, useEffect } from "react";
-import { MantineProvider, Tabs, Button } from "@mantine/core";
-import {
-  HotkeysProvider,
-  useHotkeys,
-  useHotkeysContext,
-} from "react-hotkeys-hook";
-import { Command } from "cmdk";
+import { MantineProvider } from "@mantine/core";
+import CmdkTestDemo from "./cmdkTestDemo";
 import "@mantine/core/styles.css";
 
-function TabContent({ title, scopeName }: any) {
-  const [text, setText] = useState(`${title} panel `);
-  const [used, setUsed] = useState(false);
-
-  useHotkeys(
-    "ctrl+b",
-    () => {
-      if (used) return;
-      setText((prev) => prev + `${title} `);
-      setUsed(true);
-    },
-    {
-      scopes: [scopeName],
-      preventDefault: true,
-    },
-  );
-
-  return <>{text}</>;
-}
-
-function TabsPage() {
-  const { enableScope, disableScope } = useHotkeysContext();
-  const [activeTab, setActiveTab] = useState("1");
-  const [opened, setOpened] = useState(false);
-
-  const actions = [
-    { id: "1", label: "First", description: "First panel" },
-    { id: "2", label: "Second", description: "Second panel" },
-    { id: "3", label: "Third", description: "Third panel" },
-  ];
-
-  useEffect(() => {
-    const currentScope = `tab${activeTab}`;
-    enableScope(currentScope);
-
-    return () => {
-      disableScope(currentScope);
-    };
-  }, [activeTab, enableScope, disableScope]);
-
-  useHotkeys("ctrl+1", () => setActiveTab("1"), { preventDefault: true });
-  useHotkeys("ctrl+2", () => setActiveTab("2"), { preventDefault: true });
-  useHotkeys("ctrl+3", () => setActiveTab("3"), { preventDefault: true });
-
-  useHotkeys(
-    "ctrl+k",
-    (e) => {
-      e.preventDefault();
-      setOpened((prev) => !prev);
-    },
-    { enableOnFormTags: true },
-  );
-
-  const handleSelectTab = (tabId: string) => {
-    setActiveTab(tabId);
-    setOpened(false);
-  };
-
-  return (
-    <>
-      <Button onClick={() => setOpened(true)} variant="default" mb="md">
-        Open Command Menu (Ctrl + K)
-      </Button>
-
-      <Command.Dialog
-        open={opened}
-        onOpenChange={() => setOpened(false)}
-        label="Global Command Menu"
-      >
-        <Command.Input placeholder="Search Tab ..." autoFocus />
-
-        <Command.List>
-          <Command.Empty>No results found.</Command.Empty>
-
-          <Command.Group>
-            {actions.map((action) => (
-              <Command.Item
-                key={action.id}
-                onSelect={() => handleSelectTab(action.id)}
-                style={{
-                  fontWeight: activeTab === action.id ? "bold" : "normal",
-                }}
-              >
-                <div>
-                  <div>{action.label}</div>
-                  <small style={{ color: "var(--mantine-color-dimmed)" }}>
-                    {action.description}
-                  </small>
-                </div>
-              </Command.Item>
-            ))}
-          </Command.Group>
-        </Command.List>
-      </Command.Dialog>
-
-      <Tabs
-        value={activeTab}
-        onChange={(value) => value && setActiveTab(value)}
-      >
-        <Tabs.List>
-          <Tabs.Tab value="1">First</Tabs.Tab>
-          <Tabs.Tab value="2">Second</Tabs.Tab>
-          <Tabs.Tab value="3">Third</Tabs.Tab>
-        </Tabs.List>
-
-        <Tabs.Panel value="1">
-          <TabContent title="First" scopeName="tab1" />
-        </Tabs.Panel>
-
-        <Tabs.Panel value="2">
-          <TabContent title="Second" scopeName="tab2" />
-        </Tabs.Panel>
-
-        <Tabs.Panel value="3">
-          <TabContent title="Third" scopeName="tab3" />
-        </Tabs.Panel>
-      </Tabs>
-    </>
-  );
-}
-
 export default function App() {
   return (
-    <HotkeysProvider initiallyActiveScopes={["tab1"]}>
     <MantineProvider>
-        <TabsPage />
+      <CmdkTestDemo />
     </MantineProvider>
-    </HotkeysProvider>
   );
 }

src/cmdkTestDemo.tsx

@@ -0,0 +1,46 @@
+import { Button } from "@mantine/core";
+import { Command } from "cmdk";
+import { useState } from "react";
+
+export default function CmdkTestDemo() {
+  const [opened, setOpened] = useState(false);
+
+  const actions = [
+    { id: "1", label: "First", description: "First panel" },
+    { id: "2", label: "Second", description: "Second panel" },
+    { id: "3", label: "Third", description: "Third panel" },
+  ];
+
+  return (
+    <>
+      <Button onClick={() => setOpened(true)} variant="default" mb="md">
+        Open Command Menu (Ctrl + K)
+      </Button>
+
+      <Command.Dialog
+        open={opened}
+        onOpenChange={() => setOpened(false)}
+        label="Global Command Menu"
+      >
+        <Command.Input placeholder="Search Tab ..." autoFocus />
+
+        <Command.List>
+          <Command.Empty>No results found.</Command.Empty>
+
+          <Command.Group>
+            {actions.map((action) => (
+              <Command.Item key={action.id}>
+                <div>
+                  <div>{action.label}</div>
+                  <small style={{ color: "var(--mantine-color-dimmed)" }}>
+                    {action.description}
+                  </small>
+                </div>
+              </Command.Item>
+            ))}
+          </Command.Group>
+        </Command.List>
+      </Command.Dialog>
+    </>
+  );
+}