started implementation of commands

src/routes/(editor).tsx

@@ -1,19 +1,14 @@
 import { Title } from "@solidjs/meta";
-import { JSX, createSignal } from "solid-js";
 import { FilesProvider } from "~/features/file";
-import { MenuProvider, Menu } from "~/features/menu";
+import { MenuProvider, asMenuRoot } from "~/features/menu";
 
+asMenuRoot // prevents removal of import
 
 export default function Editor(props) {
-    const [ref, setRef] = createSignal<JSX.Element>();
-
-    return <MenuProvider root={ref()}>
+    return <MenuProvider>
         <Title>Translation-Tool</Title>
 
-        <nav ref={setRef}>
-            <a href="/">Index</a>
-            <a href="/about">About</a>
-        </nav>
+        <nav use:asMenuRoot />
         
         <main>
             <FilesProvider>

src/routes/(editor)/index.tsx

@@ -1,20 +1,37 @@
-import { Menu } from "~/features/menu";
+import { createCommand, Menu, Modifier } from "~/features/menu";
 
 export default function Index() {
+  const commands = {
+    open: createCommand(() => {
+      console.log('Open a file');
+    }, { key: 'o', modifier: Modifier.Control}),
+    save: createCommand(() => {
+      console.log('save');
+    }, { key: 's', modifier: Modifier.Control }),
+    saveAll: createCommand(() => {
+      console.log('save all');
+    }, { key: 's', modifier: Modifier.Control|Modifier.Shift }),
+    edit: createCommand(() => {}),
+    selection: createCommand(() => {}),
+    view: createCommand(() => {}),
+  } as const;
+
   return (
     <>
       <Menu.Root>
         <Menu.Item label="file">
-          <Menu.Item label="open" />
+          <Menu.Item label="open" command={commands.open} />
 
-          <Menu.Item label="save" />
+          <Menu.Item label="save" command={commands.save} />
+
+          <Menu.Item label="save all" command={commands.saveAll} />
         </Menu.Item>
 
-        <Menu.Item label="edit" />
+        <Menu.Item label="edit" command={commands.edit} />
 
-        <Menu.Item label="selection" />
+        <Menu.Item label="selection" command={commands.selection} />
 
-        <Menu.Item label="view" />
+        <Menu.Item label="view" command={commands.view} />
       </Menu.Root>
     </>
   );