some improvements to context menu

src/routes/(editor)/experimental/context-menu.module.css

@@ -0,0 +1,43 @@
+.root {
+    display: grid;
+    grid: 100% / auto minmax(0, 1fr);
+    inline-size: 100%;
+    block-size: 100%;
+
+    & .sidebar {
+        z-index: 1;
+        padding: var(--padding-xl);
+        background-color: var(--surface-300);
+        max-inline-size: 25vw;
+        overflow: auto;
+
+        & > ul {
+            padding: 0;
+            margin: 0;
+        }
+
+        & fieldset {
+            display: flex;
+            flex-flow: column;
+            gap: var(--padding-m);
+        }
+
+        ol {
+            margin-block: 0;
+        }
+    }
+
+    & .content {
+        display: block grid;
+        place-content: start;
+        background-color: var(--surface-500);
+        border-top-left-radius: var(--radii-xl);
+        padding: var(--padding-m);
+
+        & > fieldset {
+            border-radius: var(--radii-l);
+            overflow: auto;
+            background-color: inherit;
+        }
+    }
+}

src/routes/(editor)/experimental/context-menu.tsx

@@ -0,0 +1,37 @@
+import { Sidebar } from "~/components/sidebar";
+import { Command, Context, createCommand, Modifier } from "~/features/command";
+import { createSignal } from "solid-js";
+import css from './context-menu.module.css';
+
+export default function ContextMenu(props: {}) {
+    const [message, setMessage] = createSignal('');
+
+    const commands = {
+        back: createCommand('Back', () => setMessage('Back command is triggered'), { key: '[', modifier: Modifier.Control }),
+        forward: createCommand('Forward', () => setMessage('forward command is triggered'), { key: ']', modifier: Modifier.Control }),
+        reload: createCommand('Reload', () => setMessage('reload command is triggered'), { key: 'r', modifier: Modifier.Control }),
+        showBookmarks: createCommand('Show bookmarks', () => setMessage('showBookmarks command is triggered'), { key: 'b', modifier: Modifier.Control }),
+        showFullUrls: createCommand('Show full URL\'s', () => setMessage('showFullUrls command is triggered')),
+        allModifiers: createCommand('shell.command.openCommandPalette', () => setMessage('allModifiers command is triggered'), { key: 'a', modifier: Modifier.Alt | Modifier.Control | Modifier.Meta | Modifier.Shift }),
+    };
+
+    return <div class={css.root}>
+        <Sidebar as="aside" label={'Options'} class={css.sidebar}>
+            <fieldset>
+                <legend>Message</legend>
+
+                <p>{message()}</p>
+            </fieldset>
+        </Sidebar>
+
+        <div class={css.content}>
+            <Context.Root commands={Object.values(commands)}>
+                <Context.Menu>{
+                    command => <Command.Handle command={command} />
+                }</Context.Menu>
+
+                <Context.Handle>Right click on me</Context.Handle>
+            </Context.Root>
+        </div>
+    </div >;
+}

src/routes/(editor)/experimental/index.tsx

@@ -0,0 +1,5 @@
+
+
+export default function Index(props: {}) {
+    return <></>;
+} 

src/routes/(editor)/experimental/table.tsx

@@ -3,7 +3,6 @@ import { Column, createDataSet, DataSetGroupNode, DataSetNode, DataSetRowNode, G
 import { createStore } from 'solid-js/store';
 import { Person, people } from './experimental.data';
 import { createEffect, createMemo, For } from 'solid-js';
-import { Command, createCommand, Modifier } from '~/features/command';
 import css from './table.module.css';
 
 export default function TableExperiment() {