Experiment to rebuild Diffuse using web applets.
tokono.ma
1import { computed, effect, type Signal } from "spellcaster";
2import { repeat, tags, text } from "spellcaster/hyperscript.js";
3
4import { mount, mounts, unmount } from "./mounting";
5import { isSupported } from "./common";
6
7////////////////////////////////////////////
8// SIGNALS
9////////////////////////////////////////////
10
11// Mount button
12document.getElementById("mount")?.addEventListener("click", () => {
13 if (isSupported()) mount();
14 else alert("The File System Access API is not supported on this platform.");
15});
16
17// Directories
18const dirList = computed(() => {
19 return new Map(
20 mounts().map((mount) => {
21 return [mount.id, mount];
22 }),
23 );
24});
25
26const Item = (signal: Signal<{ id: string; handle: FileSystemDirectoryHandle }>) => {
27 const { id, handle } = signal();
28
29 return tags.li({}, [
30 tags.span(
31 { onclick: () => unmount(id), style: "cursor: pointer;", title: "Click/tap to delete" },
32 text(handle.name),
33 ),
34 ]);
35};
36
37const Directories = computed(() => {
38 if (mounts().length === 0) {
39 return tags.p({ id: "directories" }, [
40 tags.small({}, [
41 tags.em({}, text("No audio added yet, click the button below to add some.")),
42 ]),
43 ]);
44 }
45
46 return tags.ul({ id: "directories" }, repeat(dirList, Item));
47});
48
49// Add to DOM
50effect(() => {
51 document.getElementById("directories")?.replaceWith(Directories());
52});