lots of work

src/app.css

@@ -15,6 +15,16 @@
   --fail: oklch(.64 .21 25.3);
   --warn: oklch(.82 .18 78.9);
   --succ: oklch(.86 .28 150);
+
+  --radii-s: .125em;
+  --radii-m: .25em;
+  --radii-l: .5em;
+
+  --text-s: .8rem;
+  --text-m: 1rem;
+  --text-l: 1.25rem;
+  --text-xl: 1.6rem;
+  --text-xxl: 2rem;
 }
 
 @media (prefers-color-scheme: dark) {

src/components/Counter.css

@@ -1,20 +0,0 @@
-.increment {
-  font-family: inherit;
-  font-size: inherit;
-  padding: 1em 2em;
-  color: #335d92;
-  background-color: rgba(68, 107, 158, 0.1);
-  border-radius: 2em;
-  border: 2px solid rgba(68, 107, 158, 0);
-  outline: none;
-  width: 200px;
-  font-variant-numeric: tabular-nums;
-}
-
-.increment:focus {
-  border: 2px solid #335d92;
-}
-
-.increment:active {
-  background-color: rgba(68, 107, 158, 0.2);
-}

src/components/Counter.tsx

@@ -1,11 +0,0 @@
-import { createSignal } from "solid-js";
-import "./Counter.css";
-
-export default function Counter() {
-  const [count, setCount] = createSignal(0);
-  return (
-    <button class="increment" onClick={() => setCount(count() + 1)} type="button">
-      Clicks: {count()}
-    </button>
-  );
-}

src/components/filetree.module.css

@@ -0,0 +1,25 @@
+.root {
+    display: flex;
+    flex-direction: column;
+    list-style: none;
+    padding-inline-start: 0;
+
+    & details {
+        & > summary::marker {
+            content: none;
+            color: var(--text-1) !important;
+        }
+
+        & span {
+            cursor: pointer;
+        }
+    }
+
+    & ul {
+        padding-inline-start: 1.25em;
+    }
+
+    & span {
+        white-space: nowrap;
+    }
+}

src/components/filetree.tsx

@@ -0,0 +1,64 @@
+import { Accessor, Component, createSignal, For, JSX, Show } from "solid-js";
+import css from "./filetree.module.css";
+import { AiFillFile, AiFillFolder, AiFillFolderOpen } from "solid-icons/ai";
+
+export interface FileEntry {
+    name: string;
+    kind: 'file';
+    meta: File;
+}
+
+export interface FolderEntry {
+    name: string;
+    kind: 'folder';
+    entries: Entry[];
+}
+
+export type Entry = FileEntry | FolderEntry;
+
+export const emptyFolder: FolderEntry = { name: '', kind: 'folder', entries: [] } as const;
+
+export 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 const Tree: Component<{ entries: Entry[], children: (file: Accessor<FileEntry>) => JSX.Element }> = (props) => {
+    return <ul class={css.root}>
+        <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()} children={props.children} />
+                }</Show>
+
+                <Show when={entry.kind === 'file' ? entry : undefined}>{
+                    file => <><AiFillFile />{props.children(file)}</>
+                }</Show>
+            </li>
+        }</For>
+    </ul>
+}
+
+const Folder: Component<{ folder: FolderEntry, children: (file: Accessor<FileEntry>) => JSX.Element }> = (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} children={props.children} />
+    </details>;
+};

src/components/sidebar.module.css

@@ -0,0 +1,21 @@
+.root {
+    display: grid;
+    grid: auto 1fr / 100%;
+
+    & > button {
+        inline-size: max-content;
+        padding: 0;
+        background-color: var(--surface-1);
+        color: var(--text-1);
+        border: none;
+        font-size: var(--text-l);
+    }
+
+    & > .content {
+        overflow: auto clip;
+    }
+
+    &.closed > .content {
+        inline-size: 0;
+    }
+}

src/components/sidebar.tsx

@@ -0,0 +1,29 @@
+import { TbLayoutSidebarLeftCollapse, TbLayoutSidebarLeftExpand } from "solid-icons/tb";
+import { createMemo, createSignal, onMount, ParentComponent, Show } from "solid-js";
+import { Dynamic, Portal, render } from "solid-js/web";
+import css from "./sidebar.module.css";
+
+export const Sidebar: ParentComponent<{ as?: string, open?: boolean, name?: string }> = (props) => {
+    const [open, setOpen] = createSignal(props.open ?? true)
+    const cssClass = createMemo(() => open() ? css.open : css.closed);
+    const name = createMemo(() => props.name ?? 'sidebar');
+
+    const toggle = () => setOpen(o => !o);
+
+    let ref: Element;
+    return <Dynamic component={props.as ?? 'div'} class={`${css.root} ${cssClass()}`} ref={ref}>
+        <Portal mount={ref!} useShadow={true}>
+            <button onclick={() => toggle()} role="button" title={`${open() ? 'close' : 'open'} ${name()}`}>
+                <Show when={open()} fallback={<TbLayoutSidebarLeftExpand />}>
+                    <TbLayoutSidebarLeftCollapse />
+                </Show>
+            </button>
+
+            <div class={css.content}>
+                <slot />
+            </div>
+        </Portal>
+
+        {props.children}
+    </Dynamic>
+};

src/components/tabs.module.css

@@ -0,0 +1,20 @@
+.root {
+    display: grid;
+    grid-template-rows: auto 1fr;
+
+    .tab {
+        display: contents;
+
+        & > summary {
+            grid-row: 1 / 1;
+
+            &::marker {
+                content: none;
+            }
+        }
+
+        &::details-content {
+            grid-area: 2 / 1;
+        }
+    }
+}

src/components/tabs.tsx

@@ -0,0 +1,97 @@
+import { Accessor, children, Component, createContext, createEffect, createMemo, createSignal, createUniqueId, For, JSX, ParentComponent, useContext } from "solid-js";
+import { createStore } from "solid-js/store";
+import css from "./tabs.module.css";
+import { Portal } from "solid-js/web";
+
+interface TabsContextType {
+    isActive(): boolean;
+}
+
+interface TabsState {
+    tabs: TabType[];
+}
+
+interface TabType {
+    id: string;
+    label: string;
+}
+
+const TabsContext = createContext<TabsContextType>();
+
+export const Tabs: Component<{ children?: JSX.Element }> = (props) => {
+    const [state, setState] = createStore<TabsState>({ tabs: [] });
+
+    createEffect(() => {
+        const tabs = children(() => props.children).toArray();
+
+        console.log(tabs);
+
+        setState('tabs', tabs.map(t => ({ id: t.id, label: t.getAttribute('data-label') })))
+    });
+
+    const ctx: TabsContextType = {
+        isActive() {
+            return false;
+        }
+    };
+
+    return <TabsContext.Provider value={ctx}>
+        <header>
+            <For each={state.tabs}>{
+                tab => <button type="button" onpointerdown={() => activate(tab.id)}>{tab.label}</button>
+            }</For>
+        </header>
+
+        {props.children}
+    </TabsContext.Provider>
+};
+
+export const Tab: ParentComponent<{ label: string }> = (props) => {
+    const context = useContext(TabsContext);
+
+    return <div id={createUniqueId()} data-label={props.label}>{props.children}</div>
+}
+
+interface TabsSimpleContextType {
+    activate(id: string): void;
+    active: Accessor<string | undefined>;
+    isActive(id: string): Accessor<boolean>;
+}
+
+const TabsSimpleContext = createContext<TabsSimpleContextType>();
+
+export const TabsSimple: ParentComponent = (props) => {
+    const [active, setActive] = createSignal<string | undefined>(undefined);
+
+    return <TabsSimpleContext.Provider value={{
+        activate(id: string) {
+            setActive(id);
+            // setState('active', id);
+        },
+
+        active,
+
+        isActive(id: string) {
+            return createMemo(() => active() === id);
+        },
+    }}>
+        <div class={css.root}>
+            {props.children}
+        </div>
+    </TabsSimpleContext.Provider>;
+}
+
+export const TabSimple: ParentComponent<{ label: string }> = (props) => {
+    const id = `tab-${createUniqueId()}`;
+    const context = useContext(TabsSimpleContext);
+
+    if (!context) {
+        return undefined;
+    }
+
+    return <details class={css.tab} id={id} open={context.active() === id} ontoggle={(e: ToggleEvent) => e.newState === 'open' && context.activate(id)}>
+        <summary>{props.label}</summary>
+
+        {props.children}
+    </details>
+}

src/features/command/index.ts

@@ -0,0 +1,33 @@
+export enum Modifier {
+    None = 0,
+    Shift = 1 << 0,
+    Control = 1 << 1,
+    Meta = 1 << 2,
+    Alt = 1 << 3,
+}
+
+export interface Command {
+    (): any;
+    label: string;
+    shortcut?: {
+        key: string;
+        modifier: Modifier;
+    };
+}
+
+export const createCommand = (label: string, command: () => any, shortcut?: Command['shortcut']): Command => {
+    return Object.defineProperties(command as Command, {
+        label: {
+            value: label,
+            configurable: false,
+            writable: false,
+        },
+        shortcut: {
+            value: shortcut ? { key: shortcut.key.toLowerCase(), modifier: shortcut.modifier } : undefined,
+            configurable: false,
+            writable: false,
+        }
+    });
+};
+
+export const noop = createCommand('noop', () => { });

src/features/file/grid.css

@@ -19,12 +19,23 @@
         resize: vertical;
         min-block-size: 2em;
         max-block-size: 50em;
+
+        background-color: var(--surface-1);
+        color: var(--text-1);
+        border-color: var(--text-2);
+        border-radius: var(--radii-s);
     }
 
     & .cell {
         display: grid;
         place-content: center stretch;
         padding: .5em;
+        border: 1px solid transparent;
+        border-radius: var(--radii-m);
+
+        &:focus-within {
+            border-color: var(--info);
+        }
     }
 
     & > :is(header, main, footer) {

src/features/file/grid.tsx

@@ -1,22 +1,41 @@
-import { Accessor, Component, createContext, createEffect, createMemo, createSignal, For, ParentComponent, Show, useContext } from "solid-js";
+import { Component, createContext, createEffect, createMemo, For, ParentComponent, Show, useContext } from "solid-js";
+import { createStore, produce } from "solid-js/store";
 import './grid.css';
-import { createStore } from "solid-js/store";
+
+const debounce = <T extends (...args: any[]) => void>(callback: T, delay: number): T => {
+    let handle: ReturnType<typeof setTimeout> | undefined;
+
+    return (...args: any[]) => {
+        if (handle) {
+            clearTimeout(handle);
+        }
+
+        handle = setTimeout(() => callback(...args), delay);
+    }
+};
 
 interface Leaf extends Record<string, string> { }
 export interface Entry extends Record<string, Entry | Leaf> { }
 
-interface SelectionContextType {
+export interface SelectionContextType {
     rowCount(): number;
     selection(): string[];
     isSelected(key: string): boolean,
     selectAll(select: boolean): void;
-    select(key: string, select: true): void;
+    select(key: string, select: boolean): void;
+}
+export interface GridContextType {
+    mutate(prop: string, lang: string, value: string): void;
+    add(prop: string): void;
+    selection: SelectionContextType;
 }
 
 const SelectionContext = createContext<SelectionContextType>();
+const GridContext = createContext<GridContextType>();
 
 const isLeaf = (entry: Entry | Leaf): entry is Leaf => Object.values(entry).some(v => typeof v === 'string');
 const useSelection = () => useContext(SelectionContext)!;
+const useGrid = () => useContext(GridContext)!;
 
 const SelectionProvider: ParentComponent<{ rows: Map<string, { [lang: string]: { value: string, handle: FileSystemFileHandle } }>, context?: (ctx: SelectionContextType) => any }> = (props) => {
     const [state, setState] = createStore<{ selection: string[] }>({ selection: [] });
@@ -57,8 +76,58 @@ const SelectionProvider: ParentComponent<{ rows: Map<string, { [lang: string]: {
         {props.children}
     </SelectionContext.Provider>;
 };
+const GridProvider: ParentComponent<{ rows: Map<string, { [lang: string]: { value: string, handle: FileSystemFileHandle } }>, context?: (ctx: GridContextType) => any }> = (props) => {
+    type Entry = { [lang: string]: { original: string, value: string } };
 
-export const Grid: Component<{ columns: string[], rows: Map<string, { [lang: string]: { value: string, handle: FileSystemFileHandle } }>, context?: (ctx: SelectionContextType) => any }> = (props) => {
+    const [state, setState] = createStore<{ rows: { [prop: string]: Entry }, numberOfRows: number }>({
+        rows: {},
+        numberOfRows: 0,
+    });
+
+    createEffect(() => {
+        const rows = props.rows
+            .entries()
+            .map(([prop, entry]) => [prop, Object.fromEntries(Object.entries(entry).map(([lang, { value }]) => [lang, { original: value, value }]))]);
+
+        setState('rows', Object.fromEntries(rows));
+    });
+
+    createEffect(() => {
+        setState('numberOfRows', Object.keys(state.rows).length);
+    });
+
+    createEffect(() => {
+        console.log(state.rows.toplevel?.nl.value);
+    });
+
+    const ctx: GridContextType = {
+        mutate(prop: string, lang: string, value: string) {
+            // setState('rows', prop, lang, ({ original }) => ({ original, value }));
+            setState('rows', produce(rows => {
+                rows[prop][lang].value = value;
+            }));
+        },
+
+        add(prop: string) {
+
+        },
+
+        selection: undefined!,
+    };
+
+    createEffect(() => {
+        console.log(ctx);
+        props.context?.(ctx);
+    });
+
+    return <GridContext.Provider value={ctx}>
+        <SelectionProvider rows={props.rows} context={(selction) => ctx.selection = selction}>
+            {props.children}
+        </SelectionProvider>
+    </GridContext.Provider>;
+};
+
+export const Grid: Component<{ columns: string[], rows: Map<string, { [lang: string]: { value: string, handle: FileSystemFileHandle } }>, context?: (ctx: GridContextType) => any }> = (props) => {
     const columnCount = createMemo(() => props.columns.length - 1);
     const root = createMemo<Entry>(() => {
         return props.rows
@@ -86,13 +155,13 @@ export const Grid: Component<{ columns: string[], rows: Map<string, { [lang: str
     });
 
     return <section class="table" style={{ '--columns': columnCount() }}>
-        <SelectionProvider rows={props.rows} context={props.context}>
+        <GridProvider rows={props.rows} context={props.context}>
             <Head headers={props.columns} />
 
             <main>
                 <Row entry={root()} />
             </main>
-        </SelectionProvider>
+        </GridProvider>
     </section>
 };
 
@@ -116,17 +185,37 @@ const Head: Component<{ headers: string[] }> = (props) => {
 };
 
 const Row: Component<{ entry: Entry, path?: string[] }> = (props) => {
+    const grid = useGrid();
+
     return <For each={Object.entries(props.entry)}>{
         ([key, value]) => {
-            const values = Object.values(value);
+            const values = Object.entries(value);
             const path = [...(props.path ?? []), key];
             const k = path.join('.');
             const context = useSelection();
 
+            const resize = (element: HTMLElement) => {
+                element.style.blockSize = `1px`;
+                element.style.blockSize = `${11 + element.scrollHeight}px`;
+            };
+
+            const mutate = debounce((element: HTMLTextAreaElement) => {
+                const [prop, lang] = element.name.split(':');
+
+                grid.mutate(prop, lang, element.value.trim())
+            }, 300);
+
+            const onKeyUp = (e: KeyboardEvent) => {
+                const element = e.target as HTMLTextAreaElement;
+
+                resize(element);
+                mutate(element);
+            };
+
             return <Show when={isLeaf(value)} fallback={<Group key={key} entry={value as Entry} path={path} />}>
                 <label for={k}>
                     <div class="cell">
-                        <input type="checkbox" id={k} checked={context.isSelected(k)} on:input={(e: InputEvent) => context.select(k, e.target.checked)} />
+                        <input type="checkbox" id={k} checked={context.isSelected(k)} on:input={(e) => context.select(k, e.target.checked)} />
                     </div>
 
                     <div class="cell">
@@ -134,11 +223,17 @@ const Row: Component<{ entry: Entry, path?: string[] }> = (props) => {
                     </div>
 
                     <For each={values}>{
-                        value =>
-                            <div class="cell"><textarea value={value} on:keyup={(e) => {
-                                e.target.style.blockSize = `1px`;
-                                e.target.style.blockSize = `${11 + e.target.scrollHeight}px`;
-                            }} /></div>
+                        ([lang, value]) => <div class="cell">
+                            <textarea
+                                value={value}
+                                lang={lang}
+                                placeholder={lang}
+                                name={`${k}:${lang}`}
+                                spellcheck
+                                wrap="soft"
+                                on:keyup={onKeyUp}
+                            />
+                        </div>
                     }</For>
                 </label>
             </Show>;

src/features/menu/index.tsx

@@ -1,6 +1,7 @@
 import { Accessor, Component, For, JSX, ParentComponent, Setter, Show, children, createContext, createEffect, createMemo, createSignal, createUniqueId, mergeProps, onCleanup, onMount, splitProps, useContext } from "solid-js";
 import { Portal, isServer } from "solid-js/web";
 import { createStore } from "solid-js/store";
+import { Command, Modifier } from "../command";
 
 export interface MenuContextType {
     ref: Accessor<JSX.Element | undefined>;
@@ -11,22 +12,6 @@ export interface MenuContextType {
     commands(): Command[];
 };
 
-export enum Modifier {
-    None = 0,
-    Shift = 1 << 0,
-    Control = 1 << 1,
-    Meta = 1 << 2,
-    Alt = 1 << 3,
-}
-
-export interface Command {
-    (): any;
-    shortcut?: {
-        key: string;
-        modifier: Modifier;
-    };
-}
-
 export interface Item {
     id: string;
     label: string;
@@ -41,14 +26,6 @@ export interface ItemWithChildren {
 
 const MenuContext = createContext<MenuContextType>();
 
-export const createCommand = (command: () => any, shortcut?: Command['shortcut']): Command => {
-    if (shortcut) {
-        (command as Command).shortcut = { key: shortcut.key.toLowerCase(), modifier: shortcut.modifier };
-    }
-
-    return command;
-};
-
 export const MenuProvider: ParentComponent = (props) => {
     const [ref, setRef] = createSignal<JSX.Element | undefined>();
     const [_items, setItems] = createSignal<Map<string, Item & { children?: Map<string, Item> }>>(new Map());
@@ -100,9 +77,7 @@ const Item: Component<ItemProps> = (props) => {
 const Root: ParentComponent<{}> = (props) => {
     const menu = useMenu();
     const [current, setCurrent] = createSignal<HTMLElement>();
-    const items = (isServer
-        ? props.children
-        : props.children?.map(c => c())) ?? [];
+    const items = children(() => props.children).toArray() as unknown as (Item & ItemWithChildren)[];
 
     menu.addItems(items)
 
@@ -146,8 +121,8 @@ const Root: ParentComponent<{}> = (props) => {
     return <Portal mount={menu.ref()}>
         <For each={items}>{
             item => <>
-                <Show when={item.children}>
-                    <div
+                <Show when={item.children}>{
+                    children => <div
                         class="menu-child"
                         id={`child-${item.id}`}
                         style={`position-anchor: --menu-${item.id};`}
@@ -158,11 +133,11 @@ const Root: ParentComponent<{}> = (props) => {
                             }
                         }}
                     >
-                        <For each={item.children}>
+                        <For each={children()}>
                             {(child) => <Button label={child.label} command={child.command} />}
                         </For>
                     </div>
-                </Show>
+                }</Show>
 
                 <Button
                     label={item.label}

src/routes/(editor)/edit.module.css

@@ -0,0 +1,13 @@
+.root {
+    display: grid;
+    grid: 100% / auto 1fr;
+
+    & > aside {
+        z-index: 1;
+
+        & > ul {
+            padding: 0;
+            margin: 0;
+        }
+    }
+}

src/routes/(editor)/edit.tsx

@@ -1,9 +1,11 @@
-import { createCommand, Menu, Modifier } from "~/features/menu";
-import { createEffect, createResource, createSignal, onMount } from "solid-js";
-import { Entry, Grid, load, useFiles } from "~/features/file";
-import "./edit.css";
-
-interface RawEntry extends Record<string, RawEntry | string> { }
+import { Menu } from "~/features/menu";
+import { Sidebar } from "~/components/sidebar";
+import { Component, createEffect, createResource, createSignal, For, onMount, Show } from "solid-js";
+import { Grid, load, useFiles } from "~/features/file";
+import { createCommand, Modifier, noop } from "~/features/command";
+import { GridContextType } from "~/features/file/grid";
+import css from "./edit.module.css";
+import { emptyFolder, FolderEntry, walk as fileTreeWalk, Tree } from "~/components/filetree";
 
 async function* walk(directory: FileSystemDirectoryHandle, path: string[] = []): AsyncGenerator<{ handle: FileSystemFileHandle, path: string[], lang: string, entries: Map<string, string> }, void, never> {
     for await (const handle of directory.values()) {
@@ -28,11 +30,12 @@ async function* walk(directory: FileSystemDirectoryHandle, path: string[] = []):
 };
 
 export default function Edit(props) {
-    const files = useFiles();
-    const [root, { mutate, refetch }] = createResource(() => files.get('root'));
+    const filesContext = useFiles();
+    const [root, { mutate, refetch }] = createResource(() => filesContext.get('root'));
+    const [tree, setFiles] = createSignal<FolderEntry>(emptyFolder);
     const [columns, setColumns] = createSignal(['these', 'are', 'some', 'columns']);
     const [rows, setRows] = createSignal<Map<string, { [lang: string]: { value: string, handle: FileSystemFileHandle } }>>(new Map);
-    const [ctx, setCtx] = createSignal<any>();
+    const [ctx, setCtx] = createSignal<GridContextType>();
 
     // Since the files are stored in indexedDb we need to refetch on the client in order to populate on page load
     onMount(() => {
@@ -44,26 +47,31 @@ export default function Edit(props) {
 
         if (root.state === 'ready' && directory?.kind === 'directory') {
             const contents = await Array.fromAsync(walk(directory));
+            const languages = new Set(contents.map(c => c.lang));
+            const template = contents.map(({ lang, handle }) => [lang, { handle, value: '' }]);
 
             const merged = contents.reduce((aggregate, { handle, path, lang, entries }) => {
                 for (const [key, value] of entries.entries()) {
-                    if (!aggregate.has(key)) {
-                        aggregate.set(key, {});
+                    const k = [...path, key].join('.');
+
+                    if (!aggregate.has(k)) {
+                        aggregate.set(k, Object.fromEntries(template));
                     }
 
-                    aggregate.get(key)![lang] = { handle, value };
+                    aggregate.get(k)![lang] = { handle, value };
                 }
 
                 return aggregate;
             }, new Map<string, { [lang: string]: { value: string, handle: FileSystemFileHandle } }>());
 
-            setColumns(['key', ...new Set(contents.map(c => c.lang))]);
+            setFiles({ name: '', kind: 'folder', entries: await Array.fromAsync(fileTreeWalk(directory)) });
+            setColumns(['key', ...languages]);
             setRows(merged);
         }
     });
 
     const commands = {
-        open: createCommand(async () => {
+        open: createCommand('open', async () => {
             const [fileHandle] = await window.showOpenFilePicker({
                 types: [
                     {
@@ -81,27 +89,26 @@ export default function Edit(props) {
 
             console.log(fileHandle, file, text);
         }, { key: 'o', modifier: Modifier.Control }),
-        openFolder: createCommand(async () => {
+        openFolder: createCommand('open', async () => {
             const directory = await window.showDirectoryPicker({ mode: 'readwrite' });
 
-            files.set('root', directory);
+            filesContext.set('root', directory);
             mutate(directory);
         }),
-        save: createCommand(() => {
-            console.log('save');
+        save: createCommand('save', () => {
+            console.log('save', rows());
         }, { key: 's', modifier: Modifier.Control }),
-        saveAll: createCommand(() => {
-            console.log('save all');
+        saveAs: createCommand('saveAs', () => {
+            console.log('save as ...');
         }, { key: 's', modifier: Modifier.Control | Modifier.Shift }),
-        edit: createCommand(() => {
+        edit: createCommand('edit', () => {
         }),
-        selectAll: createCommand(() => {
-            console.log(ctx()?.selectAll(true));
+        selectAll: createCommand('selectAll', () => {
+            console.log(ctx(), ctx()?.selection.selectAll(true));
         }, { key: 'a', modifier: Modifier.Control }),
-        view: createCommand(() => { }),
     } as const;
 
-    return <>
+    return <div class={css.root}>
         <Menu.Root>
             <Menu.Item label="file">
                 <Menu.Item label="open" command={commands.open} />
@@ -110,7 +117,7 @@ export default function Edit(props) {
 
                 <Menu.Item label="save" command={commands.save} />
 
-                <Menu.Item label="save all" command={commands.saveAll} />
+                <Menu.Item label="save all" command={commands.saveAs} />
             </Menu.Item>
 
             <Menu.Item label="edit" command={commands.edit} />
@@ -119,9 +126,15 @@ export default function Edit(props) {
                 <Menu.Item label="select all" command={commands.selectAll} />
             </Menu.Item>
 
-            <Menu.Item label="view" command={commands.view} />
+            <Menu.Item label="view" command={noop} />
         </Menu.Root>
 
+        <Sidebar as="aside">
+            <Tree entries={tree().entries}>{
+                file => <span>{file().name}</span>
+            }</Tree>
+        </Sidebar>
+
         <Grid columns={columns()} rows={rows()} context={setCtx} />
-    </>
-}
+    </div>
+}

src/routes/(editor)/experimental.css

@@ -14,29 +14,6 @@ section.index {
         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 {

src/routes/(editor)/experimental.tsx

@@ -1,51 +1,32 @@
-import { Component, createEffect, createMemo, createResource, createSignal, For, onMount, Show } from "solid-js";
+import { createEffect, createMemo, createResource, createSignal, For, lazy, onMount, Suspense } from "solid-js";
 import { useFiles } from "~/features/file";
-import { createCommand, Menu, Modifier } from "~/features/menu";
-import { AiFillFile, AiFillFolder, AiFillFolderOpen } from "solid-icons/ai";
+import { Menu } from "~/features/menu";
 import "./experimental.css";
+import { createCommand, Modifier } from "~/features/command";
+import { emptyFolder, FolderEntry, Tree, walk } from "~/components/filetree";
+import { createStore, produce } from "solid-js/store";
+import { Tab, Tabs, TabSimple, TabsSimple } from "~/components/tabs";
 
-interface FileEntry {
-  name: string;
-  kind: 'file';
-  meta: File;
+interface ExperimentalState {
+  files: File[];
+  numberOfFiles: number;
 }
 
-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() {
+export default function Experimental() {
   const files = useFiles();
-  const [tree, setTree] = createSignal<FolderEntry>();
-  const [content, setContent] = createSignal<string>('');
+  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'));
 
+  createEffect(() => {
+    setState('numberOfFiles', state.files.length);
+  });
+
   // Since the files are stored in indexedDb we need to refetch on the client in order to populate on page load
   onMount(() => {
     refetch();
@@ -62,15 +43,13 @@ export default function Index() {
   });
 
   const open = async (file: File) => {
-    const text = await file.text();
-
-    console.log({ file, text });
-
-    return setContent(text);
+    setState('files', produce(files => {
+      files.push(file);
+    }));
   };
 
   const commands = {
-    open: createCommand(async () => {
+    open: createCommand('open', async () => {
       const [fileHandle] = await window.showOpenFilePicker({
         types: [
           {
@@ -88,7 +67,7 @@ export default function Index() {
 
       console.log(fileHandle, file, text);
     }, { key: 'o', modifier: Modifier.Control }),
-    openFolder: createCommand(async () => {
+    openFolder: createCommand('openFolder', async () => {
       const directory = await window.showDirectoryPicker({ mode: 'readwrite' });
       const entries = await Array.fromAsync(walk(directory, filters()));
 
@@ -97,45 +76,19 @@ export default function Index() {
 
       setTree({ name: '', kind: 'folder', entries });
     }),
-    save: createCommand(() => {
+    save: createCommand('save', () => {
       console.log('save');
     }, { key: 's', modifier: Modifier.Control }),
-    saveAll: createCommand(() => {
+    saveAll: createCommand('save all', () => {
       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>
+  const Content = lazy(async () => {
+    const text = Promise.resolve('this is text');
 
-          <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 { default: () => <>{text}</> };
+  });
 
   return (
     <>
@@ -149,24 +102,26 @@ export default function Index() {
 
           <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>
+          <Tree entries={tree().entries}>{
+            file => <span on:dblclick={() => open(file().meta)}>{file().name}</span>
+          }</Tree>
         </aside>
 
         <section>
-          <pre>{content()}</pre>
+          <TabsSimple>
+            <For each={state.files}>{
+              file => <TabSimple label={file.name}>
+                <pre>
+                  <Suspense><Content /></Suspense>
+                </pre>
+              </TabSimple>
+            }</For>
+          </TabsSimple>
         </section>
       </section>
     </>

src/routes/(editor)/index.tsx

@@ -1,6 +1,5 @@
 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 "./index.css";
 import { A } from "@solidjs/router";
@@ -40,104 +39,6 @@ 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'));
-
-  // 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 (
     <>
       <h1>Hi, welcome!</h1>
@@ -145,6 +46,7 @@ export default function Index() {
 
       <ul>
         <li><A href="/edit">Start editing</A></li>
+        <li><A href="/experimental">Try new features</A></li>
       </ul>
     </>
   );