js-dos 8.1.4 → 8.1.6

package/src/frame/editor/editor-conf-frame.tsx

@@ -1,227 +0,0 @@
-import { useDispatch, useSelector } from "react-redux";
-import { useT } from "../../i18n";
-import { State } from "../../store";
-import { editorSlice } from "../../store/editor";
-import { dosboxconf } from "./defaults";
-import { dosSlice } from "../../store/dos";
-import { useEffect, useState } from "preact/hooks";
-import { sockdriveBackend } from "../../store/init";
-import { uiSlice } from "../../store/ui";
-
-const imgmount = "imgmount\\s+(\\d+)\\s+sockdrive\\s+([^\\s]+)\\s+([^\\s]+)\\s+([^\\s]+)\\s*$";
-const cleanup = "imgmount\\s+(\\d+)\\s+sockdrive\\s+.*$";
-
-interface Sockdrive {
-    num: string,
-    backend: string,
-    owner: string,
-    drive: string,
-}
-
-export function EditorConf() {
-    const t = useT();
-    const bundleConfig = useSelector((state: State) => state.editor.bundleConfig);
-    const account = useSelector((state: State) => state.auth.account);
-    const backend = useSelector((state: State) => state.dos.backend);
-    const { sockdriveEndpoint, sockdriveWssEndpoint } = useSelector((state: State) =>
-        sockdriveBackend[state.init.sockdriveBackendName] ??
-        sockdriveBackend["js-dos"]);
-    const dispatch = useDispatch();
-    const [myDrives, setMyDrives] = useState<{ name: string, owner: string }[]>([]);
-
-    useEffect(() => {
-        if (!account || !account.token) {
-            setMyDrives([]);
-        } else {
-            fetch(sockdriveEndpoint + "/list/drives/" + account.token.access_token)
-                .then((r) => r.json())
-                .then(setMyDrives)
-                .catch(console.error);
-        }
-    }, [account?.token, sockdriveEndpoint]);
-
-    function parseSockDrives(conf: string) {
-        const drives: { [num: string]: Sockdrive } = {};
-        const re = new RegExp(imgmount, "gm");
-        let m: RegExpExecArray | null;
-        while (m = re.exec(conf)) {
-            /* eslint-disable-next-line no-unused-vars */
-            const [_, num, backend, owner, drive] = m;
-            drives[num] = {
-                num,
-                backend,
-                owner,
-                drive,
-            };
-        }
-        return drives;
-    }
-
-    const [sockdrives, setSockdrives] = useState<{ [num: string]: Sockdrive }>(
-        parseSockDrives(bundleConfig?.dosboxConf ?? ""));
-
-    function setSockdrivesAndUpdateConf(sockdrives: { [num: string]: Sockdrive }) {
-        setSockdrives(sockdrives);
-        if (bundleConfig) {
-            const parts: string[] = [];
-            for (const next of Object.values(sockdrives)) {
-                if (next.owner.length > 0 && next.drive.length > 0) {
-                    parts.push(`imgmount ${next.num} sockdrive ${next.backend} ${next.owner} ${next.drive}`);
-                }
-            }
-
-            let contents = bundleConfig.dosboxConf;
-            contents = contents.replaceAll(new RegExp(cleanup, "gm"), "");
-            if (parts.length > 0) {
-                let start = contents.indexOf("[autoexec]");
-                if (start === -1) {
-                    start = contents.length;
-                } else {
-                    start += 10;
-                }
-                const footer = contents.substring(start);
-                contents = contents.substring(0, start);
-                contents += "\n" + parts.join("\n") + "\n" + footer.trim();
-            }
-            updateDosboxConf(contents);
-        }
-    }
-
-    function changeConfig(contents: string) {
-        setSockdrives(parseSockDrives(contents));
-        updateDosboxConf(contents);
-    }
-
-    function updateDosboxConf(newConf: string) {
-        dispatch(dosSlice.actions.mouseCapture(newConf.indexOf("autolock=true") > 0));
-        dispatch(editorSlice.actions.dosboxConf(newConf));
-        dispatch(dosSlice.actions.dosBackendLocked(newConf.indexOf("sockdrive") >= 0));
-    }
-
-    if (bundleConfig === null) {
-        return null;
-    }
-
-    return <div class="editor-conf-frame flex flex-col flex-grow w-full gap-2">
-        <div class="">{t("dosboxconf_template")}</div>
-        <div class="flex flex-row flex-wrap items-center gap-2">
-            {dosboxconf
-                .map(({ name, backend, contents }) => {
-                    return <button class="btn btn-sm"
-                        onClick={() => {
-                            dispatch(dosSlice.actions.dosBackend(backend === "dosboxX" ? "dosboxX" : "dosbox"));
-                            changeConfig(contents.replaceAll("{wss-makevm}", sockdriveWssEndpoint));
-                        }}>
-                        {name}
-                    </button>;
-                })}
-        </div>
-        {backend === "dosboxX" && <>
-            <button class="btn btn-ghost btn-xs self-start" target="_blank"
-                onClick={() => dispatch(uiSlice.actions.frameFatDrives())}>
-                {t("net_drives")}:
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-                    stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
-                    <path stroke-linecap="round" stroke-linejoin="round" d="m12.75 15 3-3m0 0-3-3m3
-                         3h-7.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
-                </svg>
-            </button>
-            {["2", "3"].map((num) => {
-                return <div class="flex flex-row justify-start items-center gap-3 w-full">
-                    <p>{num === "2" ? "C:" : "D:"}</p>
-                    <div class="flex flex-col gap-2">
-                        <div class="flex flex-row gap-1 items-center">
-                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-                                stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M17.982 18.725A7.488 7.488
-                                    0 0 0 12 15.75a7.488 7.488 0 0 0-5.982 2.975m11.963 0a9 9 0 1 0-11.963 0m11.963
-                                    0A8.966 8.966 0 0 1 12 21a8.966 8.966 0 0 1-5.982-2.275M15 9.75a3
-                                    3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
-                            </svg>
-                            <input class="input input-xs" type="text" value={sockdrives[num]?.owner ?? ""}
-                                onChange={(e) => {
-                                    const newSockdrives = { ...sockdrives };
-                                    newSockdrives[num] = {
-                                        num,
-                                        backend: sockdrives[num]?.backend ?? sockdriveWssEndpoint,
-                                        owner: e.currentTarget.value,
-                                        drive: sockdrives[num]?.drive ?? "",
-                                    };
-                                    setSockdrivesAndUpdateConf(newSockdrives);
-                                }}></input>
-                        </div>
-                        <div class="flex flex-row gap-1 items-center">
-                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-                                stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 6.375c0 2.278-3.694
-                                    4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75
-                                    4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25
-                                    4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5
-                                    0v3.75C20.25 16.153
-                                    16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25
-                                    4.125s-8.25-1.847-8.25-4.125" />
-                            </svg>
-
-                            <input class="input input-xs" type="text" value={sockdrives[num]?.drive ?? ""}
-                                onChange={(e) => {
-                                    const newSockdrives = { ...sockdrives };
-                                    newSockdrives[num] = {
-                                        num,
-                                        backend: sockdrives[num]?.backend ?? sockdriveWssEndpoint,
-                                        owner: sockdrives[num]?.owner ?? "",
-                                        drive: e.currentTarget.value,
-                                    };
-                                    setSockdrivesAndUpdateConf(newSockdrives);
-                                }}></input>
-                        </div>
-                    </div>
-                    <div class="dropdown dropdown-bottom dropdown-end">
-                        <button tabIndex={0} role="button" class="btn btn-sm">
-                            <svg xmlns="http://www.w3.org/2000/svg" fill="none"
-                                viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M3.75 9.776c.112-.017.227-.026.344-.026h15.812c.117 0 .232.009.344.026m-16.5
-                                        0a2.25 2.25 0 0 0-1.883 2.542l.857 6a2.25 2.25 0 0 0 2.227 1.932H19.05a2.25
-                                        2.25 0 0 0 2.227-1.932l.857-6a2.25 2.25 0 0 0-1.883-2.542m-16.5 0V6A2.25 2.25
-                                        0 0 1 6 3.75h3.879a1.5 1.5 0 0 1 1.06.44l2.122 2.12a1.5 1.5 0 0 0
-                                        1.06.44H18A2.25 2.25 0 0 1 20.25 9v.776" />
-                            </svg>
-                        </button>
-                        <ul tabIndex={0} class="dropdown-content z-[1] menu p-2 shadow bg-base-100
-                            rounded-box w-52 max-h-80 overflow-auto">
-                            {myDrives.map(({ name, owner }) => {
-                                return <li onClick={(e) => {
-                                    const newSockdrives = { ...sockdrives };
-                                    newSockdrives[num] = {
-                                        num,
-                                        owner,
-                                        backend: sockdriveWssEndpoint,
-                                        drive: name,
-                                    };
-                                    setSockdrivesAndUpdateConf(newSockdrives);
-                                    e.currentTarget.parentElement!.blur();
-                                }}><a>{name}</a></li>;
-                            })}
-                        </ul>
-                    </div>
-                    <button class="btn btn-sm" onClick={() => {
-                        const newSockdrives = { ...sockdrives };
-                        delete newSockdrives[num];
-                        setSockdrivesAndUpdateConf(newSockdrives);
-                    }}>
-                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
-                            stroke="currentColor" class="w-4 h-4">
-                            <path stroke-linecap="round" stroke-linejoin="round"
-                                d="M12 9.75 14.25 12m0 0 2.25 2.25M14.25 12l2.25-2.25M14.25 12 12 14.25m-2.58
-                                4.92-6.374-6.375a1.125 1.125 0 0 1 0-1.59L9.42 4.83c.21-.211.497-.33.795-.33H19.5a2.25
-                                2.25 0 0 1 2.25 2.25v10.5a2.25 2.25 0 0 1-2.25 2.25h-9.284c-.298 0-.585-.119-.795-.33Z"
-                            />
-                        </svg>
-                    </button>
-                </div>;
-            })}
-        </>}
-        <textarea class="flex-grow" value={bundleConfig.dosboxConf}
-            onChange={(e) => changeConfig(e.currentTarget?.value ?? "")} />
-    </div>;
-}

package/src/frame/editor/editor-frame.css

@@ -1,55 +0,0 @@
-.jsdos-rso {
-    .editor-conf-frame {
-        @apply w-full overflow-hidden flex-grow flex flex-col items-start justify-center h-full px-4;
-
-        textarea {
-            @apply w-full textarea;
-            resize: none;
-        }
-    }
-
-    .editor-fs-frame {
-        @apply h-full;
-
-        .fs-tree-view {
-            @apply form-control bg-base-100 rounded w-full h-full;
-
-            .fs-tree {
-
-                ol {
-                    @apply ml-2;
-                }
-
-                li {
-                    @apply my-2;
-                }
-
-                button {
-                    border: none;
-                    background: none;
-                    filter: none;
-                    min-height: auto;
-                    height: auto;
-                    @apply m-0 p-0;
-                }
-
-                svg {
-                    @apply text-accent;
-                }
-
-                input {
-                    @apply checkbox checkbox-accent mr-2 w-4 h-4;
-                }
-
-                .rct-text,
-                .rct-bare-label,
-                label {
-                    display: flex;
-                    flex-direction: row;
-                    justify-content: start;
-                    align-items: center;
-                }
-            }
-        }
-    }
-}

package/src/frame/editor/editor-fs-frame.tsx

@@ -1,314 +0,0 @@
-import { FsNode } from "emulators/dist/types/protocol/protocol";
-import { useEffect, useRef, useState } from "preact/hooks";
-import CheckboxTree, { Node, OnCheckNode, OnExpandNode } from "react-checkbox-tree";
-import { useSelector, useStore } from "react-redux";
-import { useT } from "../../i18n";
-import { loadBundle } from "../../load";
-import { State, useNonSerializableStore } from "../../store";
-import { downloadArrayToFs } from "../../download-file";
-
-interface NodeExt extends Node {
-    fsNode: FsNode,
-}
-
-export function EditorFsFrame() {
-    const t = useT();
-    const haveCi = useSelector((state: State) => state.dos.ci);
-    const nonSerializableStore = useNonSerializableStore();
-    const [fsSize, setFsSize] = useState<number>(0);
-    const [fsTree, _setFsTree] = useState<NodeExt[] | null>(null);
-    const [expanded, setExpanded] = useState<string[]>([]);
-    const [checked, setChecked] = useState<string[]>([]);
-    const [uploadingFile, setUploadingFile] = useState<string | null>(null);
-    const [makingBundle, setMakingBundle] = useState<boolean>(false);
-
-    function setFsTree(fsTree: NodeExt[] | null) {
-        _setFsTree(fsTree);
-        setFsSize(Math.round(calcFsSize(fsTree) / 1024 / 1024 * 100) / 100);
-    }
-
-    useEffect(() => {
-        if (nonSerializableStore.ci === null || !haveCi) {
-            return;
-        }
-
-        let cancled = false;
-        nonSerializableStore.ci.fsTree()
-            .then((tree) => {
-                if (!cancled) {
-                    setFsTree(toNodes(tree));
-                }
-            })
-            .catch((e) => {
-                console.error(e);
-                if (!cancled) {
-                    setFsTree(null);
-                }
-            });
-
-        return () => {
-            cancled = true;
-        };
-    }, [haveCi]);
-
-
-    function onExpand(expanded: Array<string>, node: OnExpandNode) {
-        setExpanded(expanded);
-    }
-
-    function onCheck(checked: Array<string>, node: OnCheckNode) {
-        setChecked(checked);
-    }
-
-    async function onRefresh() {
-        setFsTree(null);
-        if (nonSerializableStore.ci === null || !haveCi) {
-            return;
-        }
-        const tree = await nonSerializableStore.ci.fsTree();
-        setFsTree(toNodes(tree));
-    }
-
-    // const check = <input type="checkbox" class="checkbox" />;
-    return <div class="editor-fs-frame frame-root items-start px-4">
-        {(makingBundle || uploadingFile !== null) &&
-        <div class="card card-bordered bg-base-100 shadow-xl w-full">
-            <div class="card-body">
-                <div class="card-title">
-                    {t(makingBundle ? "please_wait" : "uploading_file")}
-                </div>
-                <span class="break-words">
-                    {makingBundle ? t("making_bundle") : uploadingFile}
-                </span>
-            </div>
-        </div>}
-        {!makingBundle && uploadingFile === null && fsTree &&
-        <div className="fs-tree-view">
-            <Actions
-                onRefresh={onRefresh}
-                onUploadingFile={setUploadingFile}
-                onMakingBundle={setMakingBundle} />
-            <div class="bg-base-200 px-2 py-1 text-right">
-                {t("size")}: {fsSize} Mb
-            </div>
-            <div class="fs-tree">
-                <CheckboxTree
-                    icons={{
-                        expandOpen: <FolderOpened /> as any,
-                        expandClose: <FolderClosed /> as any,
-                        // expandAll: <div class="bg-red-100 w-4 h-4"></div> as any,
-                        // parentOpen: <div class="bg-blue-100 w-4 h-4"></div> as any,
-                        // parentClose: <div class="bg-purple-100 w-4 h-4"></div> as any,
-                    }}
-                    iconsClass="icon"
-                    nativeCheckboxes={false}
-                    onlyLeafCheckboxes={true}
-                    nodes={fsTree}
-                    checked={checked}
-                    onCheck={onCheck}
-                    expanded={expanded}
-                    onExpand={onExpand} />
-            </div>
-        </div>}
-    </div>;
-}
-
-function toNodes(fsTree: FsNode): NodeExt[] {
-    const fs: NodeExt[] = [];
-    for (const next of (fsTree.nodes?.sort(nodeSorter) || [])) {
-        fs.push(toNode(next, "."));
-    }
-    return fs;
-}
-
-function toNode(fsNode: FsNode, path: string): NodeExt {
-    const fullPath = path + "/" + fsNode.name;
-    const nodeExt: NodeExt = {
-        label: fsNode.name,
-        value: fullPath,
-        fsNode,
-    };
-
-    if (fsNode.nodes !== null) {
-        const children = fsNode.nodes.sort(nodeSorter)
-            .map((next) => toNode(next, fullPath));
-        nodeExt.children = children;
-    }
-
-    return nodeExt;
-}
-
-function Actions(props: {
-    onRefresh: () => void,
-    onUploadingFile: (file: string | null) => void,
-    onMakingBundle: (making: boolean) => void,
-}) {
-    const t = useT();
-    const uploadDirRef = useRef<HTMLInputElement>(null);
-    const uploadFileRef = useRef<HTMLInputElement>(null);
-    const store = useStore();
-    const nonSerializableStore = useNonSerializableStore();
-    const { onRefresh, onUploadingFile, onMakingBundle } = props;
-
-    useEffect(() => {
-        if (uploadDirRef.current !== null) {
-            uploadDirRef.current.setAttribute("directory", "");
-            uploadDirRef.current.setAttribute("webkitdirectory", "");
-        }
-    }, [uploadDirRef]);
-
-    function onUploadClick(file: boolean) {
-        const input = (file ? uploadFileRef : uploadDirRef).current;
-        if (input === null) {
-            return;
-        }
-
-        input.click();
-    }
-
-    async function onUpload(event: any) {
-        const ci = nonSerializableStore.ci;
-        const files: FileList = event.target.files;
-        if (ci === null || files === null) {
-            return;
-        }
-
-        try {
-            for (const file of files) {
-                onUploadingFile(file.name);
-                const parts = (file.webkitRelativePath ?? "").split("/");
-                parts.shift();
-                const relPath = parts.join("/");
-                await ci.fsWriteFile(relPath.length == 0 ? file.name : relPath, file.stream());
-            }
-        } finally {
-            onUploadingFile(null);
-        }
-
-        await onRefresh();
-    }
-
-    async function onRestart() {
-        const ci = nonSerializableStore.ci;
-        if (ci === null || !window.confirm(t("fs_restart"))) {
-            return;
-        }
-
-        onMakingBundle(true);
-        try {
-            const bundle = await ci.persist(false);
-            if (bundle) {
-                loadBundle(bundle, true, store);
-            }
-        } finally {
-            onMakingBundle(false);
-        }
-    }
-
-    async function onDownload() {
-        const ci = nonSerializableStore.ci;
-        if (ci === null) {
-            return;
-        }
-
-        onMakingBundle(true);
-        try {
-            const bundle = await ci.persist(false);
-            if (bundle) {
-                downloadArrayToFs("bundle.jsdos", bundle);
-            }
-        } finally {
-            onMakingBundle(false);
-        }
-    }
-
-    return <div class="h-6 flex flex-row">
-        <input class="hidden" type="file" multiple ref={uploadDirRef} onChange={onUpload} />
-        <input class="hidden" type="file" multiple ref={uploadFileRef} onChange={onUpload} />
-        <button class="refresh btn-xs rounded-none" onClick={onRefresh}>
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none"
-                viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
-                <path stroke-linecap="round" stroke-linejoin="round"
-                    d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181
-                    3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181
-                    3.182m0-4.991v4.99" />
-            </svg>
-        </button>
-        <button class="add-file btn-xs rounded-none" onClick={() => onUploadClick(true)}>
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none"
-                viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375
-                    3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0
-                    00-3.375-3.375H8.25m3.75 9v6m3-3H9m1.5-12H5.625c-.621 0-1.125.504-1.125
-                    1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9
-                     9 0 00-9-9z" />
-            </svg>
-        </button>
-        <button class="add-dir btn-xs rounded-none" onClick={() => onUploadClick(false)}>
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none"
-                viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
-                <path stroke-linecap="round" stroke-linejoin="round"
-                    d="M12 10.5v6m3-3H9m4.06-7.19l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25
-                    2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75
-                    18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z" />
-            </svg>
-        </button>
-        <div class="flex-grow"></div>
-        <button class="download btn-xs rounded-none" onClick={onDownload}>
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none"
-                viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M9 13.5l3 3m0 0l3-3m-3
-                    3v-6m1.06-4.19l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25
-                    0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5
-                    0 01-1.06-.44z" />
-            </svg>
-        </button>
-        <button class="restart btn-xs rounded-none" onClick={onRestart}>
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none"
-                viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M21 7.5V18M15 7.5V18M3
-                    16.811V8.69c0-.864.933-1.406 1.683-.977l7.108 4.061a1.125 1.125 0 010 1.954l-7.108
-                    4.061A1.125 1.125 0 013 16.811z" />
-            </svg>
-        </button>
-    </div>;
-}
-
-function nodeSorter(a: FsNode, b: FsNode) {
-    if (a.nodes !== null && b.nodes !== null) {
-        return b.name.localeCompare(a.name);
-    }
-
-    return a.nodes === null ? 1 : -1;
-}
-
-function FolderOpened() {
-    return <svg xmlns="http://www.w3.org/2000/svg" fill="none"
-        viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-2">
-        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
-    </svg>;
-}
-
-function FolderClosed() {
-    return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-        stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-2">
-        <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
-    </svg>;
-}
-
-function calcFsSize(fsTree: NodeExt[] | null) {
-    if (!fsTree) {
-        return 0;
-    }
-
-    let size = 0;
-    for (const next of fsTree) {
-        if (next.fsNode.size !== null) {
-            size += next.fsNode.size!;
-        } else {
-            size += calcFsSize(next.children as NodeExt[]);
-        }
-    }
-
-    return size;
-}