- fixed grouped rows

- added shortcut hint in menu items

src/features/file/grid.css

@@ -15,7 +15,6 @@
         margin: .1em;
     }
 
-
     & textarea {
         resize: vertical;
         min-block-size: 2em;
@@ -87,14 +86,13 @@
 
         & > summary {
             grid-column: 2 / span calc(1 + var(--columns));
+            padding: .5em;
+            padding-inline-start: calc(var(--depth) * 1em + .5em);
 
-            &.cell {
-                padding-inline-start: calc((var(--depth) + 1) * 1em);
-            }
         }
 
         & > label > .cell > span {
-            padding-inline-start: calc(var(--depth) * 1.25em);
+            padding-inline-start: calc(var(--depth) * 1em);
         }
     }
 }

src/features/file/grid.tsx

@@ -61,7 +61,28 @@ const SelectionProvider: ParentComponent<{ rows: Map<string, { [lang: string]: {
 export const Grid: Component<{ columns: string[], rows: Map<string, { [lang: string]: { value: string, handle: FileSystemFileHandle } }>, context?: (ctx: SelectionContextType) => any }> = (props) => {
     const columnCount = createMemo(() => props.columns.length - 1);
     const root = createMemo<Entry>(() => {
-        return Object.fromEntries(props.rows.entries().map(([key, value]) => [key, Object.fromEntries(Object.entries(value).map(([lang, { value }]) => [lang, value]))]));
+        return props.rows
+            ?.entries()
+            .map(([key, value]) => [key, Object.fromEntries(Object.entries(value).map(([lang, { value }]) => [lang, value]))] as const)
+            .reduce((aggregate, [key, entry]) => {
+                let obj: any = aggregate;
+                const parts = key.split('.');
+
+                for (const [i, part] of parts.entries()) {
+                    if (Object.hasOwn(obj, part) === false) {
+                        obj[part] = {};
+                    }
+
+                    if (i === (parts.length - 1)) {
+                        obj[part] = entry;
+                    }
+                    else {
+                        obj = obj[part];
+                    }
+                }
+
+                return aggregate;
+            }, {});
     });
 
     return <section class="table" style={{ '--columns': columnCount() }}>
@@ -127,7 +148,7 @@ const Row: Component<{ entry: Entry, path?: string[] }> = (props) => {
 
 const Group: Component<{ key: string, entry: Entry, path: string[] }> = (props) => {
     return <details open>
-        <summary class="cell" style={{ '--depth': props.path.length - 1 }}>{props.key}</summary>
+        <summary style={{ '--depth': props.path.length - 1 }}>{props.key}</summary>
 
         <Row entry={props.entry} path={props.path} />
     </details>;

src/features/menu/index.tsx

@@ -12,6 +12,7 @@ export interface MenuContextType {
 };
 
 export enum Modifier {
+    None = 0,
     Shift = 1 << 0,
     Control = 1 << 1,
     Meta = 1 << 2,
@@ -22,7 +23,7 @@ export interface Command {
     (): any;
     shortcut?: {
         key: string;
-        modifier?: Modifier;
+        modifier: Modifier;
     };
 }
 
@@ -115,17 +116,31 @@ const Root: ParentComponent<{}> = (props) => {
         }
     };
 
-    const onExecute = (command: Command) => {
-        return async () => {
-            await command?.();
+    const onExecute = (command?: Command) => {
+        return command
+            ? async () => {
+                await command?.();
 
-            close();
-        }
+                close();
+            }
+            : () => { }
     };
 
-    const Button: Component<{ label: string, command: Command } | { [key: string]: any }> = (props) => {
+    const Button: Component<{ label: string, command?: Command } & { [key: string]: any }> = (props) => {
         const [local, rest] = splitProps(props, ['label', 'command']);
-        return <button class="menu-item" type="button" on:pointerdown={onExecute(local.command)} {...rest}>{local.label}</button>;
+        return <button class="menu-item" type="button" on:pointerdown={onExecute(local.command)} {...rest}>
+            {local.label}
+            <Show when={local.command?.shortcut}>{
+                shortcut => {
+                    const shift = shortcut().modifier & Modifier.Shift ? 'Shft+' : '';
+                    const ctrl = shortcut().modifier & Modifier.Control ? 'Ctrl+' : '';
+                    const meta = shortcut().modifier & Modifier.Meta ? 'Meta+' : '';
+                    const alt = shortcut().modifier & Modifier.Alt ? 'Alt+' : '';
+
+                    return <sub>{ctrl}{shift}{meta}{alt}{shortcut().key}</sub>;
+                }
+            }</Show>
+        </button>;
     };
 
     return <Portal mount={menu.ref()}>
@@ -151,20 +166,6 @@ const Root: ParentComponent<{}> = (props) => {
 
                 <Button
                     label={item.label}
-                    on:pointerenter={(e) => {
-                        if (!item.children) {
-                            return;
-                        }
-
-                        const el = current();
-
-                        if (!el) {
-                            return;
-                        }
-
-                        el.hidePopover();
-
-                    }}
                     {...(item.children ? { popovertarget: `child-${item.id}`, style: `anchor-name: --menu-${item.id};` } : { command: item.command })}
                 />
             </>