first attempt with deleting rows. deep diff algorithm needs more time in the cooker

src/features/file/grid.tsx

@@ -1,5 +1,5 @@
 import { Accessor, Component, createContext, createEffect, createMemo, createRenderEffect, createSignal, createUniqueId, For, onMount, ParentComponent, Show, useContext } from "solid-js";
-import { createStore, unwrap } from "solid-js/store";
+import { createStore, produce, unwrap } from "solid-js/store";
 import { SelectionProvider, useSelection, selectable } from "../selectable";
 import { debounce, deepCopy, deepDiff, Mutation } from "~/utilities";
 import css from './grid.module.css';
@@ -17,6 +17,7 @@ export interface GridContextType {
     readonly mutations: Accessor<Mutation[]>;
     readonly selection: Accessor<SelectionItem[]>;
     mutate(prop: string, lang: string, value: string): void;
+    remove(props: string[]): void;
 }
 
 export interface GridApi {
@@ -25,6 +26,7 @@ export interface GridApi {
     readonly mutations: Accessor<Mutation[]>;
     selectAll(): void;
     clear(): void;
+    remove(keys: string[]): void;
 }
 
 const GridContext = createContext<GridContextType>();
@@ -60,6 +62,20 @@ const GridProvider: ParentComponent<{ rows: Rows }> = (props) => {
         mutate(prop: string, lang: string, value: string) {
             setState('rows', prop, lang, value);
         },
+
+        remove(props: string[]) {
+            console.log(props);
+
+
+            setState('rows', produce(rows => {
+                for (const prop of props) {
+                    delete rows[prop];
+                }
+
+                return rows;
+            }));
+
+        },
     };
 
     return <GridContext.Provider value={ctx}>
@@ -124,6 +140,9 @@ const Api: Component<{ api: undefined | ((api: GridApi) => any) }> = (props) =>
         clear() {
             selectionContext.clear();
         },
+        remove(props: string[]) {
+            gridContext.remove(props);
+        },
     };
 
     createEffect(() => {

src/routes/(editor)/edit.tsx

@@ -146,6 +146,10 @@ const Editor: Component<{ root: FileSystemDirectoryHandle }> = (props) => {
         })();
     });
 
+    createEffect(() => {
+        console.log(mutations());
+    });
+
     const commands = {
         close: createCommand('close folder', async () => {
             filesContext.remove('__root__');
@@ -183,7 +187,13 @@ const Editor: Component<{ root: FileSystemDirectoryHandle }> = (props) => {
             api()?.clear();
         }),
         delete: createCommand('delete selected items', () => {
-            console.log(api()?.selection())
+            const { selection, remove } = api() ?? {};
+
+            if (!selection || !remove) {
+                return;
+            }
+
+            remove(Object.keys(selection()));
         }, { key: 'delete', modifier: Modifier.None }),
     } as const;
 
@@ -242,6 +252,8 @@ const Editor: Component<{ root: FileSystemDirectoryHandle }> = (props) => {
                     }}>{file().name}</Context.Handle>;
                 },
             ] as const}</Tree>
+
+            <span>Total mutation: {mutations().length}</span>
         </Sidebar>
 
         <Tabs active={setActive} onClose={commands.closeTab}>