From 17e49c23d879bee4ebf2286ee506ada9b5b4cf7a Mon Sep 17 00:00:00 2001
From: Chris Kruining <c.kruining@4dotnet.nl>
Date: Tue, 3 Dec 2024 16:01:14 +0100
Subject: [PATCH] started splitting of into components

---
 src/components/grid.module.css              | 128 +++++++++
 src/components/grid.tsx                     | 280 ++++++++++++++++++++
 src/components/table.module.css             | 108 ++++++++
 src/components/table.tsx                    | 114 ++++++++
 src/routes/(editor)/edit.tsx                |   4 -
 src/routes/(editor)/experimental.css        |  27 --
 src/routes/(editor)/experimental.module.css |  26 ++
 src/routes/(editor)/experimental.tsx        | 157 +++--------
 8 files changed, 686 insertions(+), 158 deletions(-)
 create mode 100644 src/components/grid.module.css
 create mode 100644 src/components/grid.tsx
 create mode 100644 src/components/table.module.css
 create mode 100644 src/components/table.tsx
 delete mode 100644 src/routes/(editor)/experimental.css
 create mode 100644 src/routes/(editor)/experimental.module.css

diff --git a/src/components/grid.module.css b/src/components/grid.module.css
new file mode 100644
index 0000000..05c99e3
--- /dev/null
+++ b/src/components/grid.module.css
@@ -0,0 +1,128 @@
+.table {
+    position: relative;
+    display: grid;
+    grid-template-columns: 2em minmax(10em, max-content) repeat(var(--columns), auto);
+    align-content: start;
+    padding-inline: 1px;
+    margin-inline: -1px;
+
+    block-size: 100%;
+    overflow: clip auto;
+
+    background-color: var(--surface-600);
+
+    & input[type="checkbox"] {
+        margin: .1em;
+    }
+
+    & textarea {
+        resize: vertical;
+        min-block-size: max(2em, 100%);
+        max-block-size: 50em;
+
+        background-color: var(--surface-600);
+        color: var(--text-1);
+        border-color: var(--text-2);
+        border-radius: var(--radii-s);
+
+        &:has(::spelling-error, ::grammar-error) {
+            border-color: var(--fail);
+        }
+
+        & ::spelling-error {
+            outline: 1px solid var(--fail);
+            text-decoration: yellow underline;
+        }
+    }
+
+    & .cell {
+        display: grid;
+        padding: .5em;
+        border: 1px solid transparent;
+        border-radius: var(--radii-m);
+
+        &:has(textarea:focus) {
+            border-color: var(--info);
+        }
+
+        & > span {
+            align-self: center;
+        }
+    }
+
+    & :is(.header, .main, .footer) {
+        grid-column: span calc(2 + var(--columns));
+        display: grid;
+        grid-template-columns: subgrid;
+    }
+
+    & .header {
+        position: sticky;
+        inset-block-start: 0;
+        background-color: var(--surface-600);
+        border-block-end: 1px solid var(--surface-300);
+    }
+
+    & .row {
+        --bg: var(--text);
+        --alpha: 0;
+        grid-column: span calc(2 + var(--columns));
+        display: grid;
+        grid-template-columns: subgrid;
+        border: 1px solid transparent;
+        background-color: color(from var(--bg) srgb r g b / var(--alpha));
+
+        &:has(> .cell > :checked) {
+            --bg: var(--info);
+            --alpha: .1;
+            border-color: var(--bg);
+
+            & span {
+                font-variation-settings: 'GRAD' 1000;
+            }
+
+            & + :has(> .cell> :checked) {
+                border-block-start-color: transparent;
+            }
+
+            &:has(+ .row > .cell > :checked) {
+                border-block-end-color: transparent;
+            }
+        }
+
+        &:hover {
+            --alpha: .2 !important;
+        }
+    }
+
+    & details {
+        display: contents;
+
+        &::details-content {
+            grid-column: span calc(2 + var(--columns));
+            display: grid;
+            grid-template-columns: subgrid;
+        }
+
+        &:not([open])::details-content {
+            display: none;
+        }
+
+        & > summary {
+            grid-column: 2 / span calc(1 + var(--columns));
+            padding: .5em;
+            padding-inline-start: calc(var(--depth) * 1em + .5em);
+
+        }
+
+        & > .row > .cell > span {
+            padding-inline-start: calc(var(--depth) * 1em);
+        }
+    }
+}
+
+@property --depth {
+    syntax: "<number>";
+    inherits: false;
+    initial-value: 0;
+}
\ No newline at end of file
diff --git a/src/components/grid.tsx b/src/components/grid.tsx
new file mode 100644
index 0000000..c0e0c2a
--- /dev/null
+++ b/src/components/grid.tsx
@@ -0,0 +1,280 @@
+import { Accessor, Component, createContext, createEffect, createMemo, createSignal, For, ParentComponent, Show, useContext } from "solid-js";
+import { createStore, produce, unwrap } from "solid-js/store";
+import { SelectionProvider, useSelection, selectable } from "../features/selectable";
+import { debounce, deepCopy, deepDiff, Mutation } from "~/utilities";
+import css from './grid.module.css';
+
+selectable // prevents removal of import
+
+type Rows = Map<string, Record<string, string>>;
+type SelectionItem = { key: string, value: Accessor<Record<string, string>>, element: WeakRef<HTMLElement> };
+
+type Insertion = { kind: 'row', key: string } | { kind: 'column', value: string };
+
+export interface GridContextType {
+    readonly rows: Accessor<Record<string, Record<string, string>>>;
+    readonly mutations: Accessor<Mutation[]>;
+    readonly selection: Accessor<SelectionItem[]>;
+    mutate(prop: string, lang: string, value: string): void;
+    remove(props: string[]): void;
+    insert(insertion: Insertion): void;
+}
+
+export interface GridApi {
+    readonly selection: Accessor<Record<string, Record<string, string>>>;
+    readonly rows: Accessor<Record<string, Record<string, string>>>;
+    readonly mutations: Accessor<Mutation[]>;
+    selectAll(): void;
+    clear(): void;
+    remove(keys: string[]): void;
+    insert(insertion: Insertion): void;
+}
+
+const GridContext = createContext<GridContextType>();
+
+const useGrid = () => useContext(GridContext)!;
+
+export const Grid: Component<{ class?: string, columns: string[], rows: Rows, api?: (api: GridApi) => any }> = (props) => {
+    const [selection, setSelection] = createSignal<SelectionItem[]>([]);
+    const [state, setState] = createStore<{ rows: Record<string, Record<string, string>>, columns: string[], snapshot: Rows, numberOfRows: number }>({
+        rows: {},
+        columns: [],
+        snapshot: new Map,
+        numberOfRows: 0,
+    });
+
+    const mutations = createMemo(() => {
+        // enumerate all values to make sure the memo is recalculated on any change
+        Object.values(state.rows).map(entry => Object.values(entry));
+
+        return deepDiff(state.snapshot, state.rows).toArray();
+    });
+    const rows = createMemo(() => Object.fromEntries(Object.entries(state.rows).map(([key, row]) => [key, unwrap(row)] as const)));
+    const columns = createMemo(() => state.columns);
+
+    createEffect(() => {
+        setState('rows', Object.fromEntries(deepCopy(props.rows).entries()));
+        setState('snapshot', props.rows);
+    });
+
+    createEffect(() => {
+        setState('columns', [...props.columns]);
+    });
+
+    createEffect(() => {
+        setState('numberOfRows', Object.keys(state.rows).length);
+    });
+
+    const ctx: GridContextType = {
+        rows,
+        mutations,
+        selection,
+
+        mutate(prop: string, lang: string, value: string) {
+            setState('rows', prop, lang, value);
+        },
+
+        remove(props: string[]) {
+            setState('rows', produce(rows => {
+                for (const prop of props) {
+                    delete rows[prop];
+                }
+
+                return rows;
+            }));
+        },
+
+        insert(prop: string) {
+            setState('rows', produce(rows => {
+                rows[prop] = Object.fromEntries(state.columns.slice(1).map(lang => [lang, '']));
+
+                return rows
+            }))
+        },
+
+        addColumn(name: string): void {
+            setState(produce(state => {
+                state.columns.push(name);
+                state.rows = Object.fromEntries(Object.entries(state.rows).map(([key, row]) => [key, { ...row, [name]: '' }]));
+
+                return state;
+            }))
+        },
+    };
+
+    return <GridContext.Provider value={ctx}>
+        <SelectionProvider selection={setSelection} multiSelect>
+            <Api api={props.api} />
+
+            <_Grid class={props.class} columns={columns()} rows={rows()} />
+        </SelectionProvider>
+    </GridContext.Provider>;
+};
+
+const _Grid: Component<{ class?: string, columns: string[], rows: Record<string, Record<string, string>> }> = (props) => {
+    const columnCount = createMemo(() => props.columns.length - 1);
+    const root = createMemo<Entry>(() => Object.entries(props.rows)
+        .reduce((aggregate, [key, value]) => {
+            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] = value;
+                }
+                else {
+                    obj = obj[part];
+                }
+            }
+
+            return aggregate;
+        }, {}));
+
+    return <section class={`${css.table} ${props.class}`} style={{ '--columns': columnCount() }}>
+        <Head headers={props.columns} />
+
+        <main class={css.main}>
+            <Row entry={root()} />
+        </main>
+    </section>
+};
+
+const Api: Component<{ api: undefined | ((api: GridApi) => any) }> = (props) => {
+    const gridContext = useGrid();
+    const selectionContext = useSelection<{ key: string, value: Accessor<Record<string, string>>, element: WeakRef<HTMLElement> }>();
+
+    const api: GridApi = {
+        selection: createMemo(() => {
+            const selection = selectionContext.selection();
+
+            return Object.fromEntries(selection.map(({ key, value }) => [key, value()] as const));
+        }),
+        rows: gridContext.rows,
+        mutations: gridContext.mutations,
+        selectAll() {
+            selectionContext.selectAll();
+        },
+        clear() {
+            selectionContext.clear();
+        },
+        remove(props: string[]) {
+            gridContext.remove(props);
+        },
+        insert(prop: string) {
+            gridContext.insert(prop);
+        },
+
+        addColumn(name: string): void {
+            gridContext.addColumn(name);
+        },
+    };
+
+    createEffect(() => {
+        props.api?.(api);
+    });
+
+    return null;
+};
+
+const Head: Component<{ headers: string[] }> = (props) => {
+    const context = useSelection();
+
+    return <header class={css.header}>
+        <div class={css.cell}>
+            <input
+                type="checkbox"
+                checked={context.selection().length > 0 && context.selection().length === context.length()}
+                indeterminate={context.selection().length !== 0 && context.selection().length !== context.length()}
+                on:input={(e: InputEvent) => e.target.checked ? context.selectAll() : context.clear()}
+            />
+        </div>
+
+        <For each={props.headers}>{
+            header => <span class={css.cell}>{header}</span>
+        }</For>
+    </header>;
+};
+
+const Row: Component<{ entry: Entry, path?: string[] }> = (props) => {
+    const grid = useGrid();
+
+    return <For each={Object.entries(props.entry)}>{
+        ([key, value]) => {
+            const values = Object.entries(value);
+            const path = [...(props.path ?? []), key];
+            const k = path.join('.');
+            const context = useSelection();
+
+            const isSelected = context.isSelected(k);
+
+            return <Show when={isLeaf(value)} fallback={<Group key={key} entry={value as Entry} path={path} />}>
+                <div class={css.row} use:selectable={{ value, key: k }}>
+                    <div class={css.cell}>
+                        <input type="checkbox" checked={isSelected()} on:input={() => context.select([k])} on:pointerdown={e => e.stopPropagation()} />
+                    </div>
+
+                    <div class={css.cell}>
+                        <span style={{ '--depth': path.length - 1 }}>{key}</span>
+                    </div>
+
+                    <For each={values}>{
+                        ([lang, value]) => <div class={css.cell}>
+                            <TextArea key={k} value={value} lang={lang} oninput={(e) => grid.mutate(k, lang, e.data ?? '')} />
+                        </div>
+                    }</For>
+                </div>
+            </Show>;
+        }
+    }</For>
+};
+
+const Group: Component<{ key: string, entry: Entry, path: string[] }> = (props) => {
+    return <details open>
+        <summary style={{ '--depth': props.path.length - 1 }}>{props.key}</summary>
+
+        <Row entry={props.entry} path={props.path} />
+    </details>;
+};
+
+const TextArea: Component<{ key: string, value: string, lang: string, oninput?: (event: InputEvent) => any }> = (props) => {
+    const [element, setElement] = createSignal<HTMLTextAreaElement>();
+
+    const resize = () => {
+        const el = element();
+
+        if (!el) {
+            return;
+        }
+
+        el.style.height = `1px`;
+        el.style.height = `${2 + element()!.scrollHeight}px`;
+    };
+
+    const mutate = debounce(() => {
+        props.oninput?.(new InputEvent('input', {
+            data: element()?.value.trim(),
+        }))
+    }, 300);
+
+    const onKeyUp = (e: KeyboardEvent) => {
+        resize();
+        mutate();
+    };
+
+    return <textarea
+        ref={setElement}
+        value={props.value}
+        lang={props.lang}
+        placeholder={`${props.key} in ${props.lang}`}
+        name={`${props.key}:${props.lang}`}
+        spellcheck={true}
+        wrap="soft"
+        onkeyup={onKeyUp}
+        on:keydown={e => e.stopPropagation()}
+        on:pointerdown={e => e.stopPropagation()}
+    />
+};
\ No newline at end of file
diff --git a/src/components/table.module.css b/src/components/table.module.css
new file mode 100644
index 0000000..97bf858
--- /dev/null
+++ b/src/components/table.module.css
@@ -0,0 +1,108 @@
+.table {
+    position: relative;
+    display: grid;
+    grid-template-columns: 2em minmax(10em, max-content) repeat(var(--columns), auto);
+    align-content: start;
+    padding-inline: 1px;
+    margin-inline: -1px;
+
+    block-size: 100%;
+
+    & input[type="checkbox"] {
+        margin: .1em;
+    }
+
+    & .cell {
+        display: grid;
+        padding: .5em;
+        border: 1px solid transparent;
+        border-radius: var(--radii-m);
+
+        &:has(textarea:focus) {
+            border-color: var(--info);
+        }
+
+        & > span {
+            align-self: center;
+        }
+    }
+
+    & :is(.header, .main, .footer) {
+        grid-column: span calc(2 + var(--columns));
+        display: grid;
+        grid-template-columns: subgrid;
+    }
+
+    & .header {
+        position: sticky;
+        inset-block-start: 0;
+        border-block-end: 1px solid var(--surface-300);
+    }
+
+    & .main {
+        overflow: clip auto;
+    }
+
+    & .row {
+        --bg: var(--text);
+        --alpha: 0;
+        grid-column: span calc(2 + var(--columns));
+        display: grid;
+        grid-template-columns: subgrid;
+        border: 1px solid transparent;
+        background-color: color(from var(--bg) srgb r g b / var(--alpha));
+
+        &:has(> .cell > :checked) {
+            --bg: var(--info);
+            --alpha: .1;
+            border-color: var(--bg);
+
+            & span {
+                font-variation-settings: 'GRAD' 1000;
+            }
+
+            & + :has(> .cell> :checked) {
+                border-block-start-color: transparent;
+            }
+
+            &:has(+ .row > .cell > :checked) {
+                border-block-end-color: transparent;
+            }
+        }
+
+        &:hover {
+            --alpha: .2 !important;
+        }
+    }
+
+    & details {
+        display: contents;
+
+        &::details-content {
+            grid-column: span calc(2 + var(--columns));
+            display: grid;
+            grid-template-columns: subgrid;
+        }
+
+        &:not([open])::details-content {
+            display: none;
+        }
+
+        & > summary {
+            grid-column: 2 / span calc(1 + var(--columns));
+            padding: .5em;
+            padding-inline-start: calc(var(--depth) * 1em + .5em);
+
+        }
+
+        & > .row > .cell > span {
+            padding-inline-start: calc(var(--depth) * 1em);
+        }
+    }
+}
+
+@property --depth {
+    syntax: "<number>";
+    inherits: false;
+    initial-value: 0;
+}
\ No newline at end of file
diff --git a/src/components/table.tsx b/src/components/table.tsx
new file mode 100644
index 0000000..a2a7e9e
--- /dev/null
+++ b/src/components/table.tsx
@@ -0,0 +1,114 @@
+import { Component, createMemo, createSignal, For, Match, Show, Switch } from "solid-js";
+import { selectable, SelectionProvider, useSelection } from "~/features/selectable";
+import css from './table.module.css';
+
+selectable
+
+type Row<T> = { kind: 'row', key: string, value: T }
+type Group<T> = { kind: 'group', key: string, nodes: Node<T>[] };
+type Node<T> = Row<T> | Group<T>;
+
+export function Table<T extends Record<string, any>>(props: { class?: string, rows: T[], selectable?: boolean }) {
+    const [selection, setSelection] = createSignal<object[]>([]);
+    const columns = createMemo(() => ['#', ...Object.keys(props.rows.at(0) ?? {})]);
+    const selectable = createMemo(() => props.selectable ?? false);
+
+    return <>
+        <SelectionProvider selection={setSelection} multiSelect>
+            {/* <Api api={props.api} /> */}
+
+            <_Table class={props.class} columns={columns()} rows={props.rows} />
+        </SelectionProvider>
+    </>;
+};
+
+type TableProps<T extends Record<string, any>> = { class?: string, columns: (keyof T)[], rows: T[] };
+
+function _Table<T extends Record<string, any>>(props: TableProps<T>) {
+    const columnCount = createMemo(() => props.columns.length - 1);
+    const nodes = createMemo<Node<T>[]>(() => {
+        const rows = Object.entries(props.rows).map<Row<T>>(([i, row]) => ({ kind: 'row', key: row['key'], value: row }));
+
+        const group = (nodes: Row<T>[]): Node<T>[] => nodes.every(n => n.key.includes('.') === false)
+            ? nodes
+            : Object.entries(Object.groupBy(nodes, r => String(r.key).split('.').at(0)!))
+                .map<Group<T>>(([key, nodes]) => ({ kind: 'group', key, nodes: group(nodes!.map(n => ({ ...n, key: n.key.slice(key.length + 1) }))) }));
+
+        const grouped = group(rows);
+
+        return grouped;
+    });
+
+    return <section class={`${css.table} ${props.class}`} style={{ '--columns': columnCount() }}>
+        <Head headers={props.columns} />
+
+        <main class={css.main}>
+            <For each={nodes()}>{
+                node => <Node node={node} depth={0} />
+            }</For>
+
+        </main>
+    </section>
+};
+
+function Head<T extends Record<string, any>>(props: { headers: (keyof T)[] }) {
+    const context = useSelection();
+
+    return <header class={css.header}>
+        <div class={css.cell}>
+            <input
+                type="checkbox"
+                checked={context.selection().length > 0 && context.selection().length === context.length()}
+                indeterminate={context.selection().length !== 0 && context.selection().length !== context.length()}
+                on:input={(e: InputEvent) => e.target.checked ? context.selectAll() : context.clear()}
+            />
+        </div>
+
+        <For each={props.headers}>{
+            header => <span class={css.cell}>{header.toString()}</span>
+        }</For>
+    </header>;
+};
+
+function Node<T extends Record<string, any>>(props: { node: Node<T>, depth: number }) {
+    return <Switch>
+        <Match when={props.node.kind === 'row' ? props.node : undefined}>{
+            row => <Row key={row().key} value={row().value} depth={props.depth} />
+        }</Match>
+
+        <Match when={props.node.kind === 'group' ? props.node : undefined}>{
+            group => <Group key={group().key} nodes={group().nodes} depth={props.depth} />
+        }</Match>
+    </Switch>;
+}
+
+function Row<T extends Record<string, any>>(props: { key: string, value: T, depth: number }) {
+    const context = useSelection();
+
+    const values = createMemo(() => Object.entries(props.value));
+    const isSelected = context.isSelected(props.key);
+
+    return <div class={css.row} use:selectable={{ value: props.value, key: props.key }}>
+        <div class={css.cell}>
+            <input type="checkbox" checked={isSelected()} on:input={() => context.select([props.key])} on:pointerdown={e => e.stopPropagation()} />
+        </div>
+
+        <div class={css.cell}>
+            <span style={{ '--depth': props.depth }}>{props.key}</span>
+        </div>
+
+        <For each={values()}>{
+            ([k, v]) => <div class={css.cell}>{v}</div>
+        }</For>
+    </div>;
+};
+
+function Group<T extends Record<string, any>>(props: { key: string, nodes: Node<T>[], depth: number }) {
+    return <details open>
+        <summary style={{ '--depth': props.depth }}>{props.key}</summary>
+
+        <For each={props.nodes}>{
+            node => <Node node={node} depth={props.depth + 1} />
+        }</For>
+    </details>;
+};
\ No newline at end of file
diff --git a/src/routes/(editor)/edit.tsx b/src/routes/(editor)/edit.tsx
index 4e61ffa..3c4306d 100644
--- a/src/routes/(editor)/edit.tsx
+++ b/src/routes/(editor)/edit.tsx
@@ -224,10 +224,6 @@ const Editor: Component<{ root: FileSystemDirectoryHandle }> = (props) => {
         return existingFiles.concat(newFiles);
     });
 
-    // createEffect(() => {
-    //     console.log(mutatedData());
-    // });
-
     createEffect(() => {
         const directory = props.root;
 
diff --git a/src/routes/(editor)/experimental.css b/src/routes/(editor)/experimental.css
deleted file mode 100644
index 9f0b3d2..0000000
--- a/src/routes/(editor)/experimental.css
+++ /dev/null
@@ -1,27 +0,0 @@
-section.index {
-    display: grid;
-    grid: 100% / auto minmax(0, 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;
-    }
-
-    & > section {
-        display: grid;
-        grid: 100% / 100%;
-        inline-size: 100%;
-        block-size: 100%;
-
-        padding-inline: 1em;
-    }
-}
\ No newline at end of file
diff --git a/src/routes/(editor)/experimental.module.css b/src/routes/(editor)/experimental.module.css
new file mode 100644
index 0000000..5872a3d
--- /dev/null
+++ b/src/routes/(editor)/experimental.module.css
@@ -0,0 +1,26 @@
+.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);
+
+        & > ul {
+            padding: 0;
+            margin: 0;
+        }
+    }
+
+    & .content {
+        background-color: var(--surface-500);
+        border-top-left-radius: var(--radii-xl);
+
+        & > header {
+            padding-inline-start: var(--padding-l);
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/routes/(editor)/experimental.tsx b/src/routes/(editor)/experimental.tsx
index a79539a..7d75300 100644
--- a/src/routes/(editor)/experimental.tsx
+++ b/src/routes/(editor)/experimental.tsx
@@ -1,132 +1,35 @@
-import { Component, createEffect, createMemo, createResource, createSignal, For, lazy, onMount, Suspense } from "solid-js";
-import { useFiles } from "~/features/file";
-import { Menu } from "~/features/menu";
-import { createCommand, Modifier } from "~/features/command";
-import { emptyFolder, FolderEntry, Tree, walk } from "~/components/filetree";
-import { createStore, produce } from "solid-js/store";
-import { Tab, Tabs } from "~/components/tabs";
-import "./experimental.css";
-import { selectable, SelectionProvider } from "~/features/selectable";
-
-interface ExperimentalState {
-  files: File[];
-  numberOfFiles: number;
-}
+import { Table } from "~/components/table";
+import css from "./experimental.module.css";
+import { Sidebar } from "~/components/sidebar";
 
 export default function Experimental() {
-  const files = useFiles();
-  const [tree, setTree] = createSignal<FolderEntry>(emptyFolder);
-  const [state, setState] = createStore<ExperimentalState>({
-    files: [],
-    numberOfFiles: 0,
-  });
-  const [showHiddenFiles, setShowHiddenFiles] = createSignal<boolean>(false);
-  const filters = createMemo<RegExp[]>(() => showHiddenFiles() ? [/^node_modules$/] : [/^node_modules$/, /^\..+$/]);
-  const [root, { mutate, refetch }] = createResource(() => files?.get('root'));
+  const rows = [
+    { key: 'key1.a.a', value: 10 },
+    { key: 'key1.a.b', value: 20 },
+    { key: 'key1.a.c', value: 30 },
+    { key: 'key1.b.a', value: 40 },
+    { key: 'key1.b.b', value: 50 },
+    { key: 'key1.b.c', value: 60 },
+    { key: 'key1.c.a', value: 70 },
+    { key: 'key1.c.b', value: 80 },
+    { key: 'key1.c.c', value: 90 },
 
-  createEffect(() => {
-    setState('numberOfFiles', state.files.length);
-  });
+    { key: 'key2.a.a', value: 10 },
+    { key: 'key2.a.b', value: 20 },
+    { key: 'key2.a.c', value: 30 },
+    { key: 'key2.b.a', value: 40 },
+    { key: 'key2.b.b', value: 50 },
+    { key: 'key2.b.c', value: 60 },
+    { key: 'key2.c.a', value: 70 },
+    { key: 'key2.c.b', value: 80 },
+    { key: 'key2.c.c', value: 90 },
+  ];
 
-  // Since the files are stored in indexedDb we need to refetch on the client in order to populate on page load
-  onMount(() => {
-    refetch();
-  });
+  return <div class={css.root}>
+    <Sidebar as="aside" label={'Filters'} class={css.sidebar} />
 
-  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) => {
-    setState('files', produce(files => {
-      files.push(file);
-    }));
-  };
-
-  const commands = {
-    open: createCommand('open', 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('openFolder', 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('save', () => {
-      console.log('save');
-    }, { key: 's', modifier: Modifier.Control }),
-    saveAll: createCommand('save all', () => {
-      console.log('save all');
-    }, { key: 's', modifier: Modifier.Control | Modifier.Shift }),
-  } as const;
-
-  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.Root>
-
-      <section class="index">
-        <aside>
-          <label><input type="checkbox" on:input={() => setShowHiddenFiles(v => !v)} />Show hidden files</label>
-          <Tree entries={tree().entries} open={open}>{
-            file => file().name
-          }</Tree>
-        </aside>
-
-        <section>
-          <Tabs>
-            <For each={state.files}>{
-              file => <Tab label={file.name}>
-                <Content file={file} />
-              </Tab>
-            }</For>
-          </Tabs>
-        </section>
-      </section>
-    </>
-  );
-}
-
-const Content: Component<{ file: File }> = (props) => {
-  const [content] = createResource(async () => {
-    return await props.file.text();
-  });
-
-  return <Suspense fallback={'loading'}>
-    <pre>{content()}</pre>
-  </Suspense>
-};
\ No newline at end of file
+    <div class={css.content}>
+      <Table rows={rows} />
+    </div>
+  </div>;
+}
\ No newline at end of file