implement file system observer

src/routes/(editor)/edit.tsx

@@ -13,9 +13,8 @@ import { useI18n } from "~/features/i18n";
 import { makePersisted } from "@solid-primitives/storage";
 import { writeClipboard } from "@solid-primitives/clipboard";
 import { destructure } from "@solid-primitives/destructure";
-import css from "./edit.module.css";
 import { contentsOf } from "~/features/file/helpers";
-import { createHtmlParser, createMarkdownParser, createSource } from "~/features/source";
+import css from "./edit.module.css";
 
 const isInstalledPWA = !isServer && window.matchMedia('(display-mode: standalone)').matches;
 
@@ -346,6 +345,7 @@ const Content: Component<{ directory: FileSystemDirectoryHandle, api?: Setter<Gr
     const [api, setApi] = createSignal<GridApi>();
 
     const files = readFiles(() => props.directory);
+    // const __contents = contentsOf(() => props.directory);
     const [contents] = createResource(files, (files) => Promise.all(Object.entries(files).map(async ([id, { file, handle }]) => ({ id, handle, lang: file.name.split('.').at(0)!, entries: (await read(file))! }))), { initialValue: [] });
 
     const [entries, rows] = destructure(() => {

src/routes/(editor)/experimental.tsx

@@ -18,6 +18,7 @@ export default function Experimental(props: ParentProps) {
       <Menu.Item command={goTo.withLabel('grid').with('grid')} />
       <Menu.Item command={goTo.withLabel('context-menu').with('context-menu')} />
       <Menu.Item command={goTo.withLabel('formatter').with('formatter')} />
+      <Menu.Item command={goTo.withLabel('file-system-observer').with('file-system-observer')} />
     </Menu.Root>
 
     <ErrorBoundary fallback={e => <ErrorComp error={e} />}>

src/routes/(editor)/experimental/file-system-observer.tsx

@@ -0,0 +1,32 @@
+import { createEffect, createSignal, on } from "solid-js";
+import { readFiles } from "~/features/file";
+import { contentsOf } from "~/features/file/helpers";
+
+export default function FileObserver(props: {}) {
+    const [dir, setDir] = createSignal<FileSystemDirectoryHandle>();
+
+    const files = readFiles(dir);
+    const contents = contentsOf(dir);
+
+    const open = async () => {
+        const handle = await window.showDirectoryPicker();
+
+        setDir(handle)
+    };
+
+    createEffect(() => {
+        console.log('dir', dir());
+    });
+
+    createEffect(() => {
+        console.log('files', files());
+    });
+
+    createEffect(() => {
+        console.log('contents', contents());
+    });
+
+    return <div>
+        <button onclick={open}>Select folder</button>
+    </div>;
+}