made a start on data grid implementation

src/routes/(editor).tsx

@@ -3,24 +3,26 @@ import { Show } from "solid-js";
 import { BsTranslate } from "solid-icons/bs";
 import { FilesProvider } from "~/features/file";
 import { MenuProvider, asMenuRoot } from "~/features/menu";
+import { isServer } from "solid-js/web";
+import { A } from "@solidjs/router";
 
 asMenuRoot // prevents removal of import
 
 export default function Editor(props) {
-    const supported = typeof window.showDirectoryPicker === 'function';
+    const supported = isServer || typeof window.showDirectoryPicker === 'function';
 
     return <MenuProvider>
         <Title>Translation-Tool</Title>
 
         <nav use:asMenuRoot>
-            <BsTranslate class="logo" />
+            <A class="logo" href="/"><BsTranslate /></A>
         </nav>
-        
-        <main>
-        <Show when={supported} fallback={<span>too bad, so sad. Your browser does not support the File Access API</span>}>
-        <FilesProvider>
-        {props.children}
-        </FilesProvider>
+
+        <main style="padding: 1em; block-size: 100%; overflow: clip;">
+            <Show when={supported} fallback={<span>too bad, so sad. Your browser does not support the File Access API</span>}>
+                <FilesProvider>
+                    {props.children}
+                </FilesProvider>
             </Show>
         </main>
     </MenuProvider>

src/routes/(editor)/edit.css

@@ -0,0 +1,27 @@
+.table {
+    display: grid;
+    overflow: auto;
+    grid-template-columns: 1em max-content repeat(var(--columns), auto);
+    gap: .5em;
+
+    block-size: 100%;
+    overflow: clip auto;
+
+    & > :is(header, main, footer) {
+        display: contents;
+    }
+
+    & details {
+        display: contents;
+
+        &::details-content {
+            grid-column: span calc(2 + var(--columns));
+            display: grid;
+            grid-template-columns: subgrid;
+        }
+
+        & > summary {
+            grid-column: 2 / span calc(1 + var(--columns));
+        }
+    }
+}

src/routes/(editor)/edit.tsx

@@ -0,0 +1,202 @@
+import { createCommand, Menu, Modifier } from "~/features/menu";
+import { Component, createEffect, createMemo, createResource, createSignal, For, onMount, Show } from "solid-js";
+import { useFiles } from "~/features/file";
+import "./edit.css";
+
+interface Entry extends Record<string, Entry | string> { }
+
+interface Leaf extends Record<string, string> { }
+interface Entry2 extends Record<string, Entry2 | Leaf> { }
+
+async function* walk(directory: FileSystemDirectoryHandle, path: string[] = []): AsyncGenerator<{ lang: string, entries: Entry }, void, never> {
+    for await (const handle of directory.values()) {
+        if (handle.kind === 'directory') {
+            yield* walk(handle, [...path, handle.name]);
+
+            continue;
+        }
+
+        if (!handle.name.endsWith('.json')) {
+            continue;
+        }
+
+        const file = await handle.getFile();
+
+        if (file.type !== 'application/json') {
+            continue;
+        }
+
+        const lang = file.name.split('.').at(0)!;
+        const text = await file.text();
+        const root: Entry = {};
+
+        let current: Entry = root;
+        for (const key of path) {
+            current[key] = {};
+
+            current = current[key];
+        }
+        Object.assign(current, JSON.parse(text));
+
+        yield { lang, entries: root };
+    }
+};
+
+export default function Edit(props) {
+    const files = useFiles();
+    const [root, { mutate, refetch }] = createResource(() => files.get('root'));
+
+    // Since the files are stored in indexedDb we need to refetch on the client in order to populate on page load
+    onMount(() => {
+        refetch();
+    });
+
+    createEffect(async () => {
+        const directory = root();
+
+        if (root.state === 'ready' && directory?.kind === 'directory') {
+            const contents = await Array.fromAsync(walk(directory));
+
+            const entries = Object.entries(
+                Object.groupBy(contents, e => e.lang)
+            ).map(([lang, entries]) => ({
+                lang,
+                entries: entries!
+                    .map(e => e.entries)
+                    .reduce((o, e) => {
+                        Object.assign(o, e);
+
+                        return o;
+                    }, {})
+            }));
+
+            const assign = (lang: string, entries: Entry) => {
+                return Object.entries(entries).reduce((aggregate, [key, value]) => {
+                    const v = typeof value === 'string' ? { [lang]: value } : assign(lang, value);
+
+                    Object.assign(aggregate, { [key]: v });
+
+                    return aggregate;
+                }, {});
+            }
+
+            const unified = contents.reduce((aggregate, { lang, entries }) => {
+                Object.assign(aggregate, assign(lang, entries));
+
+                return aggregate;
+            }, {});
+
+            setColumns(['key', ...new Set(contents.map(c => c.lang))]);
+            setRows(unified);
+        }
+    });
+
+    const commands = {
+        open: createCommand(async () => {
+            const [fileHandle] = await window.showOpenFilePicker({
+                types: [
+                    {
+                        description: "JSON File(s)",
+                        accept: {
+                            "application/json": [".json", ".jsonp", ".jsonc"],
+                        },
+                    }
+                ],
+                excludeAcceptAllOption: true,
+                multiple: true,
+            });
+            const file = await fileHandle.getFile();
+            const text = await file.text();
+
+            console.log(fileHandle, file, text);
+        }, { key: 'o', modifier: Modifier.Control }),
+        openFolder: createCommand(async () => {
+            const directory = await window.showDirectoryPicker({ mode: 'readwrite' });
+
+            files.set('root', directory);
+            mutate(directory);
+        }),
+        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;
+
+    const [columns, setColumns] = createSignal([]);
+    const [rows, setRows] = createSignal<Entry2>({});
+
+    const Row: Component<{ entry: Entry2 }> = (props) => {
+        return <For each={Object.entries(props.entry)}>{
+            ([key, value]) => {
+                const values = Object.values(value);
+                const isLeaf = values.some(v => typeof v === 'string');
+
+                return <Show when={isLeaf} fallback={<Group key={key} entry={value as Entry2} />}>
+                    <input type="checkbox" />
+
+                    <span>{key}</span>
+
+                    <For each={values}>{
+                        value => <input type="" value={value} />
+                    }</For>
+                </Show>;
+            }
+        }</For>
+    };
+
+    const Group: Component<{ key: string, entry: Entry2 }> = (props) => {
+        return <details open>
+            <summary>{props.key}</summary>
+
+            <Row entry={props.entry} />
+        </details>;
+    };
+
+    const columnCount = createMemo(() => columns().length - 1);
+
+    return <>
+        <Menu.Root>
+            <Menu.Item label="file">
+                <Menu.Item label="open" command={commands.open} />
+
+                <Menu.Item label="open folder" command={commands.openFolder} />
+
+                <Menu.Item label="save" command={commands.save} />
+
+                <Menu.Item label="save all" command={commands.saveAll} />
+            </Menu.Item>
+
+            <Menu.Item label="edit" command={commands.edit} />
+
+            <Menu.Item label="selection" command={commands.selection} />
+
+            <Menu.Item label="view" command={commands.view} />
+        </Menu.Root>
+
+        <section class="table" style={{ '--columns': columnCount() }}>
+            <header>
+                <input type="checkbox" />
+
+                <For each={columns()}>{
+                    column => <span>{column}</span>
+                }</For>
+            </header>
+
+            <main>
+                <Row entry={rows()} />
+            </main>
+        </section>
+
+        {/* <AgGridSolid
+            singleClickEdit
+            columnDefs={columnDefs()}
+            rowData={rowData()}
+            defaultColDef={defaultColDef} /> */}
+    </>
+}

src/routes/(editor)/experimental.css

@@ -0,0 +1,45 @@
+section.index {
+    display: grid;
+    grid: 100% / auto 1fr;
+    inline-size: 100%;
+    block-size: 100%;
+
+    & > aside {
+        overflow: clip auto;
+        resize: horizontal;
+
+        min-inline-size: 300px;
+        max-inline-size: 75vw;
+        block-size: 100%;
+        padding: 1em;
+        padding-block-start: 1.5em;
+        padding-inline-end: 1em;
+
+        & details {
+            & > summary::marker {
+                content: none;
+                color: var(--text) !important;
+            }
+
+            & span {
+                cursor: pointer;
+            }
+        }
+
+        & ul {
+            padding-inline-start: 0;
+
+            & ul {
+                padding-inline-start: 1.25em;
+            }
+
+            & span {
+                white-space: nowrap;
+            }
+        }
+    }
+
+    & > section {
+        padding-inline: 1em;
+    }
+}

src/routes/(editor)/experimental.tsx

@@ -0,0 +1,174 @@
+import { Component, createEffect, createMemo, createResource, createSignal, For, onMount, Show } from "solid-js";
+import { useFiles } from "~/features/file";
+import { createCommand, Menu, Modifier } from "~/features/menu";
+import { AiFillFile, AiFillFolder, AiFillFolderOpen } from "solid-icons/ai";
+import "./experimental.css";
+
+interface FileEntry {
+  name: string;
+  kind: 'file';
+  meta: File;
+}
+
+interface FolderEntry {
+  name: string;
+  kind: 'folder';
+  entries: Entry[];
+}
+
+type Entry = FileEntry | FolderEntry;
+
+async function* walk(directory: FileSystemDirectoryHandle, filters: RegExp[] = [], depth = 0): AsyncGenerator<Entry, void, never> {
+  if (depth === 10) {
+    return;
+  }
+
+  for await (const handle of directory.values()) {
+
+    if (filters.some(f => f.test(handle.name))) {
+      continue;
+    }
+
+    if (handle.kind === 'file') {
+      yield { name: handle.name, kind: 'file', meta: await handle.getFile() };
+    }
+    else {
+      yield { name: handle.name, kind: 'folder', entries: await Array.fromAsync(walk(handle, filters, depth + 1)) };
+    }
+  }
+}
+
+export default function Index() {
+  const files = useFiles();
+  const [tree, setTree] = createSignal<FolderEntry>();
+  const [content, setContent] = createSignal<string>('');
+  const [showHiddenFiles, setShowHiddenFiles] = createSignal<boolean>(false);
+  const filters = createMemo<RegExp[]>(() => showHiddenFiles() ? [/^node_modules$/] : [/^node_modules$/, /^\..+$/]);
+  const [root, { mutate, refetch }] = createResource(() => files.get('root'));
+
+  // Since the files are stored in indexedDb we need to refetch on the client in order to populate on page load
+  onMount(() => {
+    refetch();
+  });
+
+  createEffect(async () => {
+    const directory = root();
+
+    if (root.state === 'ready' && directory?.kind === 'directory') {
+      const entries = await Array.fromAsync(walk(directory, filters()));
+
+      setTree({ name: '', kind: 'folder', entries });
+    }
+  });
+
+  const open = async (file: File) => {
+    const text = await file.text();
+
+    console.log({ file, text });
+
+    return setContent(text);
+  };
+
+  const commands = {
+    open: createCommand(async () => {
+      const [fileHandle] = await window.showOpenFilePicker({
+        types: [
+          {
+            description: "JSON File(s)",
+            accept: {
+              "application/json": [".json", ".jsonp", ".jsonc"],
+            },
+          }
+        ],
+        excludeAcceptAllOption: true,
+        multiple: true,
+      });
+      const file = await fileHandle.getFile();
+      const text = await file.text();
+
+      console.log(fileHandle, file, text);
+    }, { key: 'o', modifier: Modifier.Control }),
+    openFolder: createCommand(async () => {
+      const directory = await window.showDirectoryPicker({ mode: 'readwrite' });
+      const entries = await Array.fromAsync(walk(directory, filters()));
+
+      files.set('root', directory);
+      mutate(directory);
+
+      setTree({ name: '', kind: 'folder', entries });
+    }),
+    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;
+
+  const Tree: Component<{ entries: Entry[] }> = (props) => {
+    return <ul style="display: flex; flex-direction: column; list-style: none;">
+      <For each={props.entries}>{
+        (entry, index) => <li style={`order: ${(entry.kind === 'file' ? 200 : 100) + index()}`}>
+          <Show when={entry.kind === 'folder' ? entry : undefined}>{
+            folder => <Folder folder={folder()} />
+          }</Show>
+
+          <Show when={entry.kind === 'file' ? entry : undefined}>{
+            file => <span on:pointerdown={() => {
+              console.log(`lets open '${file().name}'`);
+
+              open(file().meta);
+            }}><AiFillFile /> {file().name}</span>
+          }</Show>
+        </li>
+      }</For>
+    </ul>
+  }
+
+  const Folder: Component<{ folder: FolderEntry }> = (props) => {
+    const [open, setOpen] = createSignal(false);
+
+    return <details open={open()} on:toggle={() => setOpen(o => !o)}>
+      <summary><Show when={open()} fallback={<AiFillFolder />}><AiFillFolderOpen /></Show> {props.folder.name}</summary>
+      <Tree entries={props.folder.entries} />
+    </details>;
+  };
+
+  return (
+    <>
+      <Menu.Root>
+        <Menu.Item label="file">
+          <Menu.Item label="open" command={commands.open} />
+
+          <Menu.Item label="open folder" command={commands.openFolder} />
+
+          <Menu.Item label="save" command={commands.save} />
+
+          <Menu.Item label="save all" command={commands.saveAll} />
+        </Menu.Item>
+
+        <Menu.Item label="edit" command={commands.edit} />
+
+        <Menu.Item label="selection" command={commands.selection} />
+
+        <Menu.Item label="view" command={commands.view} />
+      </Menu.Root>
+
+      <section class="index">
+        <aside>
+          <label><input type="checkbox" on:input={() => setShowHiddenFiles(v => !v)} />Show hidden files</label>
+          <Show when={tree()}>{
+            tree => <Tree entries={tree().entries} />
+          }</Show>
+        </aside>
+
+        <section>
+          <pre>{content()}</pre>
+        </section>
+      </section>
+    </>
+  );
+}

src/routes/(editor)/index.css

@@ -1,8 +1,4 @@
-section.index {
+body > main {
     display: grid;
-    grid: 100% / 20% 1fr;
-
-    & > aside {
-        overflow: clip auto;
-    }
+    place-content: center;
 }

src/routes/(editor)/index.tsx

@@ -1,8 +1,9 @@
 import { Component, createEffect, createMemo, createResource, createSignal, For, onMount, Show } from "solid-js";
 import { useFiles } from "~/features/file";
 import { createCommand, Menu, Modifier } from "~/features/menu";
-import { AiFillFile } from "solid-icons/ai";
+import { AiFillFile, AiFillFolder, AiFillFolderOpen } from "solid-icons/ai";
 import "./index.css";
+import { A } from "@solidjs/router";
 
 interface FileEntry {
   name: string;
@@ -16,20 +17,20 @@ interface FolderEntry {
   entries: Entry[];
 }
 
-type Entry = FileEntry|FolderEntry;
+type Entry = FileEntry | FolderEntry;
 
 async function* walk(directory: FileSystemDirectoryHandle, filters: RegExp[] = [], depth = 0): AsyncGenerator<Entry, void, never> {
-  if(depth === 5) {
+  if (depth === 10) {
     return;
   }
 
   for await (const handle of directory.values()) {
 
-    if(filters.some(f => f.test(handle.name))){
+    if (filters.some(f => f.test(handle.name))) {
       continue;
     }
 
-    if(handle.kind === 'file') {
+    if (handle.kind === 'file') {
       yield { name: handle.name, kind: 'file', meta: await handle.getFile() };
     }
     else {
@@ -40,11 +41,11 @@ async function* walk(directory: FileSystemDirectoryHandle, filters: RegExp[] = [
 
 export default function Index() {
   const files = useFiles();
-  const [ tree, setTree ] = createSignal<FolderEntry>();
-  const [ content, setContent ] = createSignal<string>('');
-  const [ showHiddenFiles, setShowHiddenFiles ] = createSignal<boolean>(false);
-  const filters = createMemo<RegExp[]>(() => showHiddenFiles() ? [/^node_modules$/] : [ /^node_modules$/, /^\..+$/ ]);
-  const [ root, { mutate, refetch } ] = createResource(() => files.get('root'));
+  const [tree, setTree] = createSignal<FolderEntry>();
+  const [content, setContent] = createSignal<string>('');
+  const [showHiddenFiles, setShowHiddenFiles] = createSignal<boolean>(false);
+  const filters = createMemo<RegExp[]>(() => showHiddenFiles() ? [/^node_modules$/] : [/^node_modules$/, /^\..+$/]);
+  const [root, { mutate, refetch }] = createResource(() => files.get('root'));
 
   // Since the files are stored in indexedDb we need to refetch on the client in order to populate on page load
   onMount(() => {
@@ -54,7 +55,7 @@ export default function Index() {
   createEffect(async () => {
     const directory = root();
 
-    if(root.state ==='ready' && directory?.kind === 'directory'){
+    if (root.state === 'ready' && directory?.kind === 'directory') {
       const entries = await Array.fromAsync(walk(directory, filters()));
 
       setTree({ name: '', kind: 'folder', entries });
@@ -76,7 +77,7 @@ export default function Index() {
           {
             description: "JSON File(s)",
             accept: {
-              "application/json": [ ".json", ".jsonp", ".jsonc" ],
+              "application/json": [".json", ".jsonp", ".jsonc"],
             },
           }
         ],
@@ -87,7 +88,7 @@ export default function Index() {
       const text = await file.text();
 
       console.log(fileHandle, file, text);
-    }, { key: 'o', modifier: Modifier.Control}),
+    }, { key: 'o', modifier: Modifier.Control }),
     openFolder: createCommand(async () => {
       const directory = await window.showDirectoryPicker({ mode: 'readwrite' });
       const entries = await Array.fromAsync(walk(directory, filters()));
@@ -102,10 +103,10 @@ export default function Index() {
     }, { key: 's', modifier: Modifier.Control }),
     saveAll: createCommand(() => {
       console.log('save all');
-    }, { key: 's', modifier: Modifier.Control|Modifier.Shift }),
-    edit: createCommand(() => {}),
-    selection: createCommand(() => {}),
-    view: createCommand(() => {}),
+    }, { key: 's', modifier: Modifier.Control | Modifier.Shift }),
+    edit: createCommand(() => { }),
+    selection: createCommand(() => { }),
+    view: createCommand(() => { }),
   } as const;
 
   const Tree: Component<{ entries: Entry[] }> = (props) => {
@@ -115,58 +116,36 @@ export default function Index() {
           <Show when={entry.kind === 'folder' ? entry : undefined}>{
             folder => <Folder folder={folder()} />
           }</Show>
-      
+
           <Show when={entry.kind === 'file' ? entry : undefined}>{
             file => <span on:pointerdown={() => {
               console.log(`lets open '${file().name}'`);
-  
+
               open(file().meta);
-            }}><AiFillFile />{file().name}</span>
+            }}><AiFillFile /> {file().name}</span>
           }</Show>
         </li>
       }</For>
     </ul>
   }
-  
-  const Folder: Component<{ folder: FolderEntry, open?: true }> = (props) => {
-    return <details open={props.open ?? false}>
-      <summary>{props.folder.name}</summary>
+
+  const Folder: Component<{ folder: FolderEntry }> = (props) => {
+    const [open, setOpen] = createSignal(false);
+
+    return <details open={open()} on:toggle={() => setOpen(o => !o)}>
+      <summary><Show when={open()} fallback={<AiFillFolder />}><AiFillFolderOpen /></Show> {props.folder.name}</summary>
       <Tree entries={props.folder.entries} />
     </details>;
   };
 
   return (
     <>
-      <Menu.Root>
-        <Menu.Item label="file">
-          <Menu.Item label="open" command={commands.open} />
+      <h1>Hi, welcome!</h1>
+      <b>Lets get started</b>
 
-          <Menu.Item label="open folder" command={commands.openFolder} />
-
-          <Menu.Item label="save" command={commands.save} />
-
-          <Menu.Item label="save all" command={commands.saveAll} />
-        </Menu.Item>
-
-        <Menu.Item label="edit" command={commands.edit} />
-
-        <Menu.Item label="selection" command={commands.selection} />
-
-        <Menu.Item label="view" command={commands.view} />
-      </Menu.Root>
-
-      <section class="index">
-        <aside>
-          <label><input type="checkbox" on:input={() => setShowHiddenFiles(v => !v)} />Show hidden files</label>
-          <Show when={tree()}>{
-            tree => <Tree entries={tree().entries} />
-          }</Show>
-        </aside>
-
-        <section>
-          <pre>{content()}</pre>
-        </section>
-      </section>
+      <ul>
+        <li><A href="/edit">Start editing</A></li>
+      </ul>
     </>
   );
 }