finished the menu and started implementing file IO

package.json

@@ -1,20 +1,25 @@
 {
   "name": "example-basic",
-  "type": "module",
+  "dependencies": {
+    "@solidjs/meta": "^0.29.4",
+    "@solidjs/router": "^0.14.7",
+    "@solidjs/start": "^1.0.8",
+    "dexie": "^4.0.8",
+    "solid-icons": "^1.1.0",
+    "solid-js": "^1.9.1",
+    "vinxi": "^0.4.1"
+  },
+  "engines": {
+    "node": ">=18"
+  },
   "scripts": {
     "dev": "vinxi dev",
     "build": "vinxi build",
     "start": "vinxi start",
     "version": "vinxi version"
   },
-  "dependencies": {
+  "type": "module",
-    "@solidjs/meta": "^0.29.4",
+  "devDependencies": {
-    "@solidjs/router": "^0.14.1",
+    "@types/wicg-file-system-access": "^2023.10.5"
-    "@solidjs/start": "^1.0.6",
-    "solid-js": "^1.8.18",
-    "vinxi": "^0.4.1"
-  },
-  "engines": {
-    "node": ">=18"
   }
 }

src/app.css

@@ -1,17 +1,125 @@
+html {
+  inline-size: 100%;
+  block-size: 100%;
+  overflow: clip;
+}
+
 body {
+  inline-size: 100%;
+  block-size: 100%;
+  overflow: clip;
+
+  margin: 0;
+
   font-family: Gordita, Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+
+  * {
+    box-sizing: border-box;
+  }
+
+  & .menu-root {
+    display: grid;
+    grid-auto-flow: column;
+    justify-content: start;
+    position: relative;
+
+    gap: .5em;
+    padding-inline-start: 1em;
+    block-size: 2em;
+
+    background-color: #eee;
+
+    & > .logo {
+      inline-size: 3em;
+      block-size: 3em;
+      padding: .75em;
+      margin-block-end: -1em;
+      background-color: inherit;
+      border-radius: .25em;
+    }
+
+    & > div {
+        display: contents;
+    }
+
+    .menu-item {
+        padding: .5em 1em;
+
+        border: none;
+        background-color: #eee;
+        cursor: pointer;
+
+        text-align: start;
+
+        &:hover {
+            background-color: #fff;
+        }
+    }
+    
+    .menu-child {
+        position: fixed;
+        inset-inline-start: anchor(self-start);
+        inset-block-start: anchor(end);
+
+        grid-auto-flow: row;
+        place-content: start;
+
+        gap: .5em;
+        padding: .5em 0;
+        inline-size: max-content;
+        
+        background-color: #fff;
+        border: 1px solid #eee;
+        border-block-start-width: 0;
+        margin: unset;
+
+        &:popover-open {
+            display: grid;
+        }
+
+        & > .menu-item {
+            background-color: #fff;
+
+            &:hover {
+                background-color: #f8f8f8;
+            }
+        }
+    }
+
+    :popover-open + .menu-item {
+        background-color: #fff;
+    }
+  }
+
+  & > main {
+    block-size: 100%;
+
+    padding: 1em;
+    padding-block-start: 1.5em;
+
+    overflow: clip auto;
+
+    & details {
+      & > summary::marker {
+        content: url('data:image/svg+xml;charset=UTF-8,<svg color="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg"><path d="M880 298.4H521L403.7 186.2a8.15 8.15 0 0 0-5.5-2.2H144c-17.7 0-32 14.3-32 32v592c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V330.4c0-17.7-14.3-32-32-32z"></path></svg>');
+      }
+
+      &[open] > summary::marker {
+        content: url('data:image/svg+xml;charset=UTF-8,<svg color="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg"><path d="M928 444H820V330.4c0-17.7-14.3-32-32-32H473L355.7 186.2a8.15 8.15 0 0 0-5.5-2.2H96c-17.7 0-32 14.3-32 32v592c0 17.7 14.3 32 32 32h698c13 0 24.8-7.9 29.7-20l134-332c1.5-3.8 2.3-7.9 2.3-12 0-17.7-14.3-32-32-32zm-180 0H238c-13 0-24.8 7.9-29.7 20L136 643.2V256h188.5l119.6 114.4H748V444z"></path></svg>');
+      }
+
+      & span {
+        cursor: pointer;
+      }
+    }
+
+  }
 }
 
 a {
   margin-right: 1rem;
 }
 
-main {
-  text-align: center;
-  padding: 1em;
-  margin: 0 auto;
-}
-
 h1 {
   color: #335d92;
   text-transform: uppercase;

src/features/file/index.tsx

@@ -1,12 +1,67 @@
-import { createContext, useContext } from "solid-js";
+import Dexie, { EntityTable } from "dexie";
+import { Component, createContext, useContext } from "solid-js";
+import { isServer } from "solid-js/web";
 
-const FilesContext = createContext();
+type Handle = FileSystemFileHandle|FileSystemDirectoryHandle;
 
-export const FilesProvider = (props) => {
+interface File {
-    return <FilesContext.Provider value={undefined}>{props.children}</FilesContext.Provider>;
+    name: string;
+    handle: Handle;
 }
 
-export const useFiles = () => useContext(FilesContext);
+type Store = Dexie & {
+    files: EntityTable<File, 'name'>;
+};
+
+interface FilesContextType {
+    set(name: string, handle: Handle): Promise<void>;
+    get(name: string): Promise<Handle|undefined>;
+    list(): Promise<Handle[]>;
+}
+
+const FilesContext = createContext<FilesContextType>();
+
+const clientContext = (): FilesContextType => {
+    const db = new Dexie('Files') as Store;
+
+    db.version(1).stores({
+        files: 'name, handle'
+    });
+
+    return {
+        async set(name: string, handle: Handle) {
+            await db.files.put({ name, handle });
+        },
+        async get(name: string) {
+            return (await db.files.get(name))?.handle;
+        },
+        async list() {
+            const files = await db.files.toArray();
+            
+            return files.map(f => f.handle)
+        },
+    }
+};
+
+const serverContext = (): FilesContextType => ({
+    set(){
+        return Promise.resolve();
+    },
+    get(name: string){
+        return Promise.resolve(undefined);
+    },
+    list(){
+        return Promise.resolve<Handle[]>([]);
+    },
+});
+
+export const FilesProvider = (props) => {
+    const ctx = isServer ? serverContext() : clientContext();
+
+    return <FilesContext.Provider value={ctx}>{props.children}</FilesContext.Provider>;
+}
+
+export const useFiles = () => useContext(FilesContext)!;
 
 export const open = () => {
 

src/features/menu/index.tsx

@@ -1,6 +1,5 @@
-import { Accessor, Component, For, JSX, ParentComponent, Setter, Show, children, createContext, createMemo, createSignal, createUniqueId, mergeProps, onCleanup, onMount, splitProps, useContext } from "solid-js";
+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 './style.css';
 import { createStore } from "solid-js/store";
 
 export interface MenuContextType {
@@ -57,31 +56,13 @@ export const MenuProvider: ParentComponent = (props) => {
 
     const addItems = (items: (Item|ItemWithChildren)[]) => setStore('items', values => {
         for (const item of items) {
-            // const existing = values.get(item.id);
-            
-            // if(item.children && existing?.children instanceof Map) {
-            //     for (const child of item.children) {
-            //         existing.children.set(child.id, child);
-            //     }
-            // }
-            // else if (item.children && existing === undefined){
-            //     values.set(item.id, { ...item, children: new Map(item.children.map(c => [ c.id, c ])) });
-            // }
-            // else {
-            //     values.set(item.id, item as Item);
-            // }
             values[item.id] = item;
         }
 
         return values;
     });
-    const items = createMemo<(Item|ItemWithChildren)[]>(() => 
+    const items = () => Object.values(store.items);
-        Array.from(
+    const commands = () => Object.values(store.items).map(item => item.children?.map(c => c.command) ?? item.command).flat();
-            Object.values(store.items), 
-            // item => item.children instanceof Map ? { ...item, children: Array.from(item.children.values()) } : item
-        )
-    );
-    const commands = createMemo(() => items().map(item => item.children instanceof Array ? item.children.map(c => c.command) : item.command).flat());
 
     return <MenuContext.Provider value={{ ref, setRef, addItems, items, commands }}>{props.children}</MenuContext.Provider>;
 }
@@ -90,7 +71,7 @@ const useMenu = () => {
     const context = useContext(MenuContext);
 
     if(context === undefined) {
-        throw new Error('<Menu /> is called outside of a <MenuProvider />');
+        throw new Error(`MenuContext is called outside of a <MenuProvider />`);
     }
 
     return context;
@@ -117,31 +98,81 @@ const Item: Component<ItemProps> = (props) => {
 
 const Root: ParentComponent<{}> = (props) => {
     const menu = useMenu();
-
+    const [ current, setCurrent ] = createSignal<HTMLElement>();
-    menu.addItems((isServer 
+    const items = (isServer 
         ? props.children
-        : props.children?.map(c => c())) ?? [])
+        : props.children?.map(c => c())) ?? [];
+
+    menu.addItems(items)
+
+    const close = () => {
+        const el = current();
+
+        if(el) {
+            el.hidePopover();
+
+            setCurrent(undefined);
+        }
+    };
+
+    const onExecute = (command: Command) => {
+        return async () => {
+            await command?.();
+
+            close();
+        }
+    };
 
     const Button: Component<{ label: string, command: Command }|{ [key: string]: any }> = (props) => {
         const [ local, rest ] = splitProps(props, ['label', 'command']);
-        return <button class="item" on:pointerDown={local.command} {...rest}>{local.label}</button>;
+        return <button class="menu-item" type="button" on:pointerdown={onExecute(local.command)} {...rest}>{local.label}</button>;
     };
 
     return <Portal mount={menu.ref()}>
-        <For each={menu.items()}>
+        <For each={items}>{
-            {(item) => <>
+            item => {
-                <Button label={item.label} {...(item.children ? { popovertarget: `child-${item.id}`, id: `menu-${item.id}`, command: item.command } : {})} />
+                const [] = createSignal();
 
+                return <>
                     <Show when={item.children}>
-                    <div class="child" id={`child-${item.id}`} anchor={`menu-${item.id}`} style="inset: unset;" popover>
+                        <div 
+                            class="menu-child" 
+                            id={`child-${item.id}`} 
+                            style={`position-anchor: --menu-${item.id};`} 
+                            popover 
+                            on:toggle={(e: ToggleEvent) => {
+                                if(e.newState === 'open' && e.target !== null) {
+                                    return setCurrent(e.target as HTMLElement);
+                                }
+                            }}
+                        >
                             <For each={item.children}>
                                 {(child) => <Button label={child.label} command={child.command} />}
                             </For>
                         </div>
                     </Show>
-            </>
+                    
+                    <Button 
+                        label={item.label} 
+                        on:pointerenter={(e) => {
+                            if(!item.children) {
+                                return;
                             }
-        </For>
+
+                            const el = current();
+
+                            if(!el){
+                                return;
+                            }
+
+                            el.hidePopover();
+                            
+                        }}
+                        {...(item.children ? { popovertarget: `child-${item.id}`, style: `anchor-name: --menu-${item.id};`, command: item.command } : {})}
+                    />
+                </>;
+            }
+        }</For>
     </Portal>
 };
 

src/features/menu/style.css

@@ -1,28 +0,0 @@
-
-.menu-root {
-    & > div {
-        display: contents;
-    }
-
-    .item {
-        border: none;
-        background: none;
-    }
-    
-    .child {
-        position: fixed;
-        grid-auto-flow: row;
-        gap: .5em;
-        padding: .5em 0;
-        
-        inset-inline-start: anchor(start);
-        inset-block-start: anchor(end);
-
-        border: none;
-        margin: unset;
-
-        &:popover-open {
-            display: grid;
-        }
-    }
-}

src/routes/(editor).tsx

@@ -1,4 +1,5 @@
 import { Title } from "@solidjs/meta";
+import { BsTranslate } from "solid-icons/bs";
 import { FilesProvider } from "~/features/file";
 import { MenuProvider, asMenuRoot } from "~/features/menu";
 
@@ -8,7 +9,9 @@ export default function Editor(props) {
     return <MenuProvider>
         <Title>Translation-Tool</Title>
 
-        <nav use:asMenuRoot />
+        <nav use:asMenuRoot>
+            <BsTranslate class="logo" />
+        </nav>
         
         <main>
             <FilesProvider>

src/routes/(editor)/index.css

@@ -0,0 +1,8 @@
+section.index {
+    display: grid;
+    grid: 100% / 20% 1fr;
+
+    & > aside {
+        overflow: clip auto;
+    }
+}

src/routes/(editor)/index.tsx

@@ -1,10 +1,102 @@
+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 "./index.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 === 5) {
+    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(() => {
+    open: createCommand(async () => {
-      console.log('Open a file');
+      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 }),
@@ -16,12 +108,41 @@ export default function Index() {
     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, open?: true }> = (props) => {
+    return <details open={props.open ?? false}>
+      <summary>{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} />
@@ -33,6 +154,19 @@ export default function Index() {
 
         <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>
     </>
   );
 }

tsconfig.json

@@ -10,7 +10,7 @@
     "allowJs": true,
     "strict": true,
     "noEmit": true,
-    "types": ["vinxi/types/client"],
+    "types": ["vinxi/types/client", "@types/wicg-file-system-access"],
     "isolatedModules": true,
     "paths": {
       "~/*": ["./src/*"]