hfs 0.26.7 → 0.26.8

package/admin/src/ConfigPage.ts

@@ -0,0 +1,279 @@
+// This file is part of HFS - Copyright 2021-2022, Massimo Melina <a@rejetto.com> - License https://www.gnu.org/licenses/gpl-3.0.txt
+
+import { Box, Button, FormHelperText, Link } from '@mui/material';
+import { createElement as h, useEffect, useRef } from 'react';
+import { apiCall, useApi, useApiEx } from './api'
+import { state, useSnapState } from './state'
+import { Info, Refresh } from '@mui/icons-material'
+import { Dict, modifiedSx } from './misc'
+import { subscribeKey } from 'valtio/utils'
+import { Form, BoolField, NumberField, SelectField, StringStringField, FieldProps, Field } from '@hfs/mui-grid-form';
+import FileField from './FileField'
+import { alertDialog, closeDialog, confirmDialog, formDialog, newDialog, toast, waitDialog } from './dialog'
+import { proxyWarning } from './HomePage'
+import _ from 'lodash';
+import { proxy, useSnapshot } from 'valtio'
+
+let loaded: Dict | undefined
+let exposedReloadStatus: undefined | (() => void)
+const pageState = proxy({
+    changes: {} as Dict
+})
+
+subscribeKey(state, 'config', recalculateChanges)
+
+export const logLabels = {
+    log: "Access log file",
+    error_log: "Access error log file"
+}
+
+export default function ConfigPage() {
+    const { data, reload: reloadConfig, element } = useApiEx('get_config', { omit: ['vfs'] })
+    let snap = useSnapState()
+    const { changes } = useSnapshot(pageState)
+    const statusApi  = useApiEx(data && 'get_status')
+    const status = statusApi.data
+    const reloadStatus = exposedReloadStatus = statusApi.reload
+    useEffect(() => void(reloadStatus()), [data]) //eslint-disable-line
+    useEffect(() => () => exposedReloadStatus = undefined, []) // clear on unmount
+
+    const admins = useApi('get_admins')[0]?.list
+
+    if (element)
+        return element
+    if (statusApi.error)
+        return statusApi.element
+    const values = (loaded !== data) ? (state.config = loaded = data) : snap.config
+    const maxSpeedDefaults = {
+        comp: NumberField,
+        min: 1,
+        placeholder: "no limit",
+    }
+    return h(Form, {
+        sx: { maxWidth: '60em' },
+        values,
+        set(v, k) {
+            state.config[k] = v
+        },
+        stickyBar: true,
+        onError: alertDialog,
+        save: {
+            onClick: save,
+            sx: modifiedSx( Object.keys(changes).length>0),
+        },
+        barSx: { gap: 2 },
+        addToBar: [h(Button, {
+            onClick() {
+                reloadConfig()
+                reloadStatus()
+            },
+            startIcon: h(Refresh),
+        }, "Reload")],
+        defaults({ comp }) {
+            return comp === ServerPort ? { sm: 6, md: 3 }
+                : comp === NumberField ? { sm: 3 }
+                    : { sm: 6 }
+        },
+        fields: [
+            { k: 'max_kbps',        ...maxSpeedDefaults, label: "Limit output KB/s", helperText: "Doesn't apply to localhost" },
+            { k: 'max_kbps_per_ip', ...maxSpeedDefaults, label: "Limit output KB/s per-ip" },
+            { k: 'port', comp: ServerPort, label:"HTTP port", status: status?.http||true, suggestedPort: 80 },
+            { k: 'https_port', comp: ServerPort, label: "HTTPS port", status: status?.https||true, suggestedPort: 443,
+                onChange(v: number) {
+                    if (v >= 0 && values.https_port < 0 && !values.cert)
+                        suggestMakingCert()
+                    return v
+                }
+            },
+            values.https_port >= 0 && { k: 'cert', comp: FileField, label: "HTTPS certificate file",
+                ...with_(status?.https.error, e => isCertError(e) ? { 
+                    error: true, 
+                    helperText: [e, ' - ', h(Link, { key: 'fix', sx: { cursor: 'pointer' }, onClick: makeCertAndSave }, "make one")] 
+                } : null)
+            },
+            values.https_port >= 0 && { k: 'private_key', comp: FileField, label: "HTTPS private key file",
+                ...with_(status?.https.error, e => isKeyError(e) ? { error: true, helperText: e } : null)
+            },
+            { k: 'open_browser_at_start', comp: BoolField },
+            { k: 'localhost_admin', comp: BoolField, label: "Admin access for localhost connections",
+                getError: x => !x && admins?.length===0 && "First create at least one admin account",
+                helperText: "To access Admin without entering credentials"
+            },
+            { k: 'log', label: logLabels.log, lg: 3, helperText: "Requests are logged here" },
+            { k: 'error_log', label: logLabels.error_log, lg: 3, placeholder: "errors go to main log", helperText: "If you want errors in a different log" },
+            { k: 'log_rotation', comp: SelectField, options: [{ value:'', label:"disabled" }, 'daily', 'weekly', 'monthly' ],
+                helperText: "To avoid an endlessly-growing single log file, you can opt for rotation"
+            },
+            { k: 'proxies', comp: NumberField, min: 0, max: 9, sm: 6, lg: 6, label: "How many HTTP proxies between this server and users?",
+                error: proxyWarning(values, status),
+                helperText: "Wrong number will prevent detection of users' IP address"
+            },
+            { k: 'allowed_referer', placeholder: "any",
+                helperText: values.allowed_referer ? "Leave empty to allow any" : "Use this to avoid direct links from other websites", },
+            { k: 'zip_calculate_size_for_seconds', comp: NumberField, sm:  6, label: "Calculate ZIP size for seconds",
+                helperText: "If time is not enough, the browser will not show download percentage" },
+            { k: 'custom_header', multiline: true, sx: { '& textarea': { fontFamily: 'monospace' } },
+                helperText: "Any HTML code here will be used as header for the Frontend"
+            },
+            { k: 'mime', comp: StringStringField,
+                keyLabel: "Files", keyWidth: 7,
+                valueLabel: "Mime type", valueWidth: 4
+            },
+            { k: 'block', label: "Blocked IPs", multiline: true, minRows:3, helperText: "Enter an IP address for each line. CIDR and * are supported.",
+                fromField: (all:string) => all.split('\n').map(s => s.trim()).filter(Boolean).map(ip => ({ ip })),
+                toField: (all: any) => !Array.isArray(all) ? '' : all.map(x => x?.ip).filter(Boolean).join('\n')
+            },
+        ]
+    })
+
+    async function save() {
+        if (_.isEmpty(changes))
+            return toast("Nothing to save")
+        const loc = window.location
+        const newPort = loc.protocol === 'http:' ? changes.port : changes.https_port
+        if (newPort <= 0 && !await confirmDialog("You are switching off the server port and you will be disconnected"))
+            return
+        else if (newPort > 0 && !await confirmDialog("You are changing the port and you may be disconnected"))
+            return
+        if (loc.protocol === 'https:' && ('cert' in changes || 'private_key' in changes) && !await confirmDialog("You may disrupt https service, kicking you out"))
+            return
+        await apiCall('set_config', { values: changes })
+        if (newPort > 0) {
+            await alertDialog("You are being redirected but in some cases this may fail. Hold on tight!", 'warning')
+            return window.location.href = loc.protocol + '//' + loc.hostname + ':' + newPort + loc.pathname
+        }
+        setTimeout(reloadStatus, 'port' in changes || 'https_port' in changes ? 1000 : 0) // give some time to consider new ports
+        Object.assign(loaded!, changes) // since changes are recalculated subscribing state.config, but it depends on 'loaded' to (which cannot be subscribed), be sure to update loaded first
+        recalculateChanges()
+        toast("Changes applied", 'success')
+    }
+}
+
+function recalculateChanges() {
+    const o: Dict = {}
+    if (state.config)
+        for (const [k, v] of Object.entries(state.config))
+            if (JSON.stringify(v) !== JSON.stringify(loaded?.[k]))
+                o[k] = v
+    pageState.changes = o
+}
+
+export function isCertError(error: any) {
+    return /certificate/.test(error)
+}
+
+export function isKeyError(error: any) {
+    return /private key/.test(error)
+}
+
+function ServerPort({ label, value, onChange, getApi, status, suggestedPort=1, error, helperText }: FieldProps<number | null>) {
+    const lastCustom = useRef(suggestedPort)
+    if (value! > 0)
+        lastCustom.current = value!
+    const selectValue = Number(value! > 0 ? lastCustom.current : value) || 0
+    let errMsg = status?.error
+    if (errMsg)
+        if (isCertError(errMsg) || isKeyError(errMsg))
+            errMsg = undefined // never mind, we'll show this error elsewhere
+        else
+            error = true
+    return h(Box, {},
+        h(Box, { display: 'flex' },
+            h(SelectField as Field<number>, {
+                sx: { flexGrow: 1 },
+                label,
+                error,
+                value: selectValue,
+                options: [
+                    { label: "off", value: -1 },
+                    { label: "random", value: 0 },
+                    { label: "choose", value: lastCustom.current },
+                ],
+                onChange,
+            }),
+            value! > 0 && h(NumberField, {
+                label: "Number",
+                fullWidth: false,
+                value,
+                onChange,
+                getApi,
+                error,
+                min: 1,
+                max: 65535,
+                helperText,
+                sx: { minWidth: '5.5em' }
+            }),
+        ),
+        status && h(FormHelperText, { error },
+            status === true ? '...'
+                : errMsg ?? (status?.listening && "Correctly working on port " + status.port) )
+    )
+}
+
+function suggestMakingCert() {
+    newDialog({
+        Content: () => h(Box, {},
+            h(Box, { display: 'flex', gap: 1 },
+                h(Info), "You are enabling HTTPs. It needs a valid certificate + private key to work."
+            ),
+            h(Box, { mt: 4, display: 'flex', gap: 1, justifyContent: 'space-around', },
+                h(Button, { variant: 'contained', onClick(){
+                    closeDialog()
+                    makeCertAndSave().then()
+                } }, "Help me!"),
+                h(Button, { onClick: closeDialog }, "I will handle the matter myself"),
+            ),
+        )
+    })
+}
+
+export async function makeCertAndSave() {
+    if (!window.crypto.subtle)
+        return alertDialog("Retry this procedure on localhost", 'warning')
+    const res = await formDialog<{ commonName: string }>({
+        fields: [
+            h(Box, { display: 'flex', gap: 1 }, h(Info), "We'll generate a basic certificate for you"),
+            { k: 'commonName', label: "Enter a domain, or leave empty" }
+        ],
+        save: { children: "Continue" },
+    })
+    if (!res) return
+    const close = waitDialog()
+    try {
+        const saved = await apiCall('save_pem', await makeCert(res))
+        await apiCall('set_config', { values: saved })
+        if (loaded) // when undefined we are not in this page
+            Object.assign(loaded, saved)
+        setTimeout(exposedReloadStatus!, 1000) // give some time for backend to apply
+        Object.assign(state.config, saved)
+        await alertDialog("Certificate saved", 'success')
+    }
+    finally { close() }
+}
+
+async function makeCert(attributes: Record<string, string>) {
+    // this relies on having loaded node-forge/dist/forge.min.js
+    const { pki } = (window as any).forge
+    const keys = pki.rsa.generateKeyPair(2048);
+    const cert = pki.createCertificate();
+    cert.publicKey = keys.publicKey
+    cert.serialNumber = '01'
+    cert.validity.notBefore = new Date()
+    cert.validity.notAfter = new Date()
+    cert.validity.notAfter.setFullYear(cert.validity.notBefore.getFullYear() + 1)
+
+    const attrs = Object.entries(attributes).map(x => ({ name: x[0], value: x[1] }))
+    cert.setSubject(attrs)
+    cert.setIssuer(attrs)
+    cert.sign(keys.privateKey)
+
+    return {
+        cert: pki.certificateToPem(cert),
+        private_key: pki.privateKeyToPem(keys.privateKey),
+    }
+}
+
+export function with_<T,RT>(par:T, cb: (par:T) => RT) {
+    return cb(par)
+}
+

package/admin/src/FileField.ts

@@ -0,0 +1,52 @@
+import { FieldProps, StringField } from '@hfs/mui-grid-form'
+import { createElement as h } from 'react'
+import { InputAdornment } from '@mui/material'
+import { Eject } from '@mui/icons-material'
+import { IconBtn, useBreakpoint } from './misc'
+import { newDialog } from '@hfs/shared'
+import FilePicker from './FilePicker'
+import { apiCall } from './api'
+
+export default function FileField({ value, onChange, files=true, folders=false, fileMask, defaultPath, title, ...props }: FieldProps<string>) {
+    const large = useBreakpoint('md')
+    return h(StringField, {
+        ...props,
+        value,
+        onChange,
+        InputProps: {
+            endAdornment: h(InputAdornment, { position: 'end' },
+                h(IconBtn, {
+                    icon: Eject,
+                    title: "Browse files...",
+                    edge: 'end',
+                    onClick() {
+                        const close = newDialog({
+                            title: title ?? (files ? "Pick a file" : "Pick a folder"),
+                            dialogProps: {
+                                fullScreen: !large,
+                                sx: { minWidth: 'min(90vw, 40em)', minHeight: 'calc(100vh - 9em)' }
+                            },
+                            Content() {
+                                return h(FilePicker, {
+                                    multiple: false,
+                                    folders,
+                                    files,
+                                    fileMask,
+                                    from: value || defaultPath,
+                                    async onSelect(sel) {
+                                        let one = sel?.[0]
+                                        if (!one) return
+                                        const cwd = (await apiCall('get_cwd'))?.path
+                                        if (one.startsWith(cwd))
+                                            one = one.slice(cwd.length+1)
+                                        onChange(one, { was: value, event: 'picker' })
+                                        close()
+                                    }
+                                })
+                            },
+                        })
+                    },
+                }))
+        }
+    })
+}

package/admin/src/FileForm.ts

@@ -0,0 +1,148 @@
+// This file is part of HFS - Copyright 2021-2022, Massimo Melina <a@rejetto.com> - License https://www.gnu.org/licenses/gpl-3.0.txt
+
+import { state } from './state'
+import { createElement as h, useEffect, useMemo, useState } from 'react'
+import { Alert, Button } from '@mui/material'
+import { BoolField, DisplayField, Field, FieldProps, Form, MultiSelectField, SelectField } from '@hfs/mui-grid-form'
+import { apiCall, useApiEx } from './api'
+import { formatBytes, isEqualLax, modifiedSx, onlyTruthy } from './misc'
+import { reloadVfs, VfsNode, Who } from './VfsPage'
+import md from './md'
+import _ from 'lodash'
+import FileField from './FileField'
+import { alertDialog } from './dialog'
+
+interface Account { username: string }
+
+export default function FileForm({ file }: { file: VfsNode }) {
+    const { parent, children, isRoot, ...rest } = file
+    const [values, setValues] = useState(rest)
+    useEffect(() => {
+        setValues(Object.assign({ can_see: null, can_read: null }, rest))
+    }, [file]) //eslint-disable-line
+
+    const { source } = file
+    const isDir = file.type === 'folder'
+    const hasSource = source !== undefined // we need a boolean
+    const realFolder = hasSource && isDir
+    const inheritedPerms = useMemo(() => {
+        const ret = { can_read: true, can_see: true }
+        // reconstruct parents backward
+        const parents = []
+        let run = parent
+        while (run) {
+            parents.unshift(run)
+            run = run.parent
+        }
+        for (const node of parents)
+            Object.assign(ret, node)
+        return ret
+    }, [parent])
+    const showCanSee = (values.can_read ?? inheritedPerms.can_read) === true
+    const showTimestamps = hasSource && Boolean(values.ctime)
+
+    const { data, element } = useApiEx<{ list: Account[] }>('get_accounts')
+    if (element || !data)
+        return element
+    const accounts = data.list
+
+    return h(Form, {
+        values,
+        set(v, k) {
+            setValues({ ...values, [k]: v })
+        },
+        addToBar: [
+            h(Button, { // not really useful, but users misled in thinking it's a dialog will find satisfaction in dismissing the form
+                sx: { ml: 2 },
+                onClick(){
+                    state.selectedFiles = []
+                }
+            }, "Close")
+        ],
+        onError: alertDialog,
+        save: {
+            sx: modifiedSx(!isEqualLax(values, file)),
+            async onClick() {
+                const props = { ...values }
+                if (!props.masks)
+                    props.masks = null // undefined cannot be serialized
+                if (!isRoot)
+                    delete props.source
+                await apiCall('set_vfs', {
+                    uri: values.id,
+                    props,
+                })
+                if (props.name !== file.name) // when the name changes, the id of the selected file is changing too, and we have to update it in the state if we want it to be correctly re-selected after reload
+                    state.selectedFiles[0].id = file.id.slice(0, -file.name.length) + props.name
+                reloadVfs()
+            }
+        },
+        fields: [
+            isRoot ? h(Alert,{ severity: 'info' }, "This is Home, the root of your shared files. Options set here will be applied to all files.")
+                : { k: 'name', required: true, helperText: source && "You can decide a name that's different from the one on your disk" },
+            isRoot ? { k: 'source', comp: FileField, files: false,  helperText: "If you specify a folder here, its files will be listed in the home" }
+                : (hasSource && { k: 'source', comp: DisplayField, multiline: true }),
+            { k: 'can_read', label:"Who can download", xl: showCanSee && 6, comp: WhoField, parent, accounts, inherit: inheritedPerms.can_read,
+                helperText: "Note: who can't download won't see it in the list"
+            },
+            showCanSee && { k: 'can_see', label:"Who can see", xl: 6, comp: WhoField, parent, accounts, inherit: inheritedPerms.can_see,
+                helperText: "If you hide this element it will not be listed, but will still be accessible if you have a direct link"
+            },
+            hasSource && !realFolder && { k: 'size', comp: DisplayField, toField: formatBytes },
+            showTimestamps && { k: 'ctime', comp: DisplayField, lg: 6, label: 'Created', toField: formatTimestamp },
+            showTimestamps && { k: 'mtime', comp: DisplayField, lg: 6, label: 'Modified', toField: formatTimestamp },
+            file.website && { k: 'default', comp: BoolField, label:"Serve index.html",
+                toField: Boolean, fromField: (v:boolean) => v ? 'index.html' : null,
+                helperText: md("This folder may be a website because contains `index.html`. Enabling this will show the website instead of the list of files.")
+            },
+            isDir && { k: 'masks', multiline: true, xl: true, toField: JSON.stringify, fromField: v => v ? JSON.parse(v) : undefined,
+                helperText: "This is a special field. Leave it empty unless you know what you are doing." }
+        ]
+    })
+}
+
+function formatTimestamp(x: string) {
+    return x ? new Date(x).toLocaleString() : '-'
+}
+
+interface WhoFieldProps extends FieldProps<Who> { accounts: Account[] }
+function WhoField({ value, onChange, parent, inherit, accounts, helperText, ...rest }: WhoFieldProps) {
+    const options = useMemo(() =>
+        onlyTruthy([
+            { value: null, label: (parent ? "Same as parent: " : "Default: " ) + who2desc(inherit === 0 ? true : inherit) },
+            { value: true },
+            { value: false },
+            { value: '*' },
+            { value: [], label: "Select accounts" },
+        ].map(x => x && x.value !== inherit // don't offer inherited value twice
+            && { label: _.capitalize(who2desc(x.value)), ...x })), // default label
+    [inherit, parent])
+
+    const arrayMode = Array.isArray(value)
+    return h('div', {},
+        h(SelectField as Field<Who>, {
+            ...rest,
+            helperText: !arrayMode && helperText,
+            value: arrayMode ? [] : value,
+            onChange(v, { was, event }) {
+                onChange(v, { was , event })
+            },
+            options
+        }),
+        arrayMode && h(MultiSelectField as Field<string[]>, {
+            label: accounts?.length ? "Choose accounts for " + rest.label : "You didn't create any account yet",
+            value,
+            onChange,
+            helperText,
+            options: accounts?.map(a => ({ value: a.username, label: a.username })) || [],
+        })
+    )
+}
+
+function who2desc(who: any) {
+    return who === false ? "no one"
+        : who === true ? "anyone"
+            : who === '*' ? "any account (login required)"
+                : Array.isArray(who) ? who.join(', ')
+                    : "*UNKNOWN*" + JSON.stringify(who)
+}

package/admin/src/FilePicker.ts

@@ -0,0 +1,166 @@
+// This file is part of HFS - Copyright 2021-2022, Massimo Melina <a@rejetto.com> - License https://www.gnu.org/licenses/gpl-3.0.txt
+
+import { createElement as h, Fragment, useEffect, useMemo, useRef, useState } from 'react'
+import { apiCall, useApiList } from './api'
+import _ from 'lodash'
+import {
+    Alert,
+    Box,
+    Button,
+    Checkbox,
+    ListItemIcon,
+    ListItemText,
+    MenuItem,
+    TextField,
+    Typography
+} from '@mui/material'
+import { enforceFinal, formatBytes, isWindowsDrive, spinner, Center, err2msg } from './misc'
+import { ArrowUpward, VerticalAlignTop } from '@mui/icons-material'
+import { StringField } from '@hfs/mui-grid-form'
+import { FileIcon, FolderIcon } from './VfsTree'
+import { FixedSizeList } from 'react-window'
+
+export interface DirEntry { n:string, s?:number, m?:string, c?:string, k?:'d' }
+
+interface FilePickerProps {
+    onSelect:(v:string[])=>void
+    multiple?: boolean
+    from?: string
+    folders?: boolean
+    files?: boolean
+    fileMask?: string
+}
+export default function FilePicker({ onSelect, multiple=true, files=true, folders=true, fileMask, from='' }: FilePickerProps) {
+    const [cwd, setCwd] = useState(from)
+    const [ready, setReady] = useState(false)
+    const isWindows = useRef(false)
+    useEffect(() => {
+        apiCall('resolve_path', { path: from, closestFolder: true }).then(res => {
+            if (typeof res.path === 'string') {
+                setCwd(res.path)
+                isWindows.current = res.path[1] === ':'
+            }
+        }).finally(() => setReady(true))
+    }, [from])
+    const { list, error, loading } = useApiList<DirEntry>(ready && 'ls', { path: cwd, files, fileMask })
+    useEffect(() => {
+        setSel([])
+        setFilter('')
+    }, [cwd])
+
+    const [sel, setSel] = useState<string[]>([])
+    const [filter, setFilter] = useState('')
+    const setFilterBounced = useMemo(() => _.debounce((x:string) => setFilter(x)), [])
+    const filterMatch = useMemo(() => {
+        const re = new RegExp(_.escapeRegExp(filter), 'i')
+        return (v:string) => re.test(v)
+    }, [filter])
+
+    const [listHeight, setListHeight] = useState(0)
+    const filteredList = useMemo(() => list.filter(it => filterMatch(it.n)), [list,filterMatch])
+    if (loading)
+        return spinner()
+    const root = isWindows.current ? '' : '/'
+    const pathDelimiter = isWindows.current ? '\\' : '/'
+    const cwdDelimiter = enforceFinal(pathDelimiter, cwd)
+    const isRoot = cwd.length < 2
+    return h(Fragment, {},
+        h(Box, { display: 'flex', gap: 1 },
+            h(Button, {
+                title: "root",
+                disabled: isRoot,
+                onClick() {
+                    setCwd(root)
+                }
+            }, h(VerticalAlignTop)),
+            h(Button, {
+                disabled: isRoot,
+                title: "parent folder",
+                onClick() {
+                    const cwdND = /[\\/]$/.test(cwd) ? cwd.slice(0,-1) : cwd // exclude final delimiter, if any
+                    const parent = isWindowsDrive(cwdND) ? root : cwdND.slice(0, cwdND.lastIndexOf(pathDelimiter) || 1)
+                    setCwd(parent)
+                }
+            }, h(ArrowUpward)),
+            h(StringField, {
+                label: "Current path",
+                value: cwd,
+                InputLabelProps: { shrink: true },
+                async onChange(v) {
+                    if (!v)
+                        return setCwd(root)
+                    const res = await apiCall('resolve_path', { path: v })
+                    setCwd(res.path)
+                },
+            }),
+        ),
+        error ? h(Alert, { severity: 'error' }, err2msg(error))
+            : h(Fragment, {},
+                h(Box, {
+                    ref(x?: HTMLElement){
+                        if (!x) return
+                        const h = x?.clientHeight - 1
+                        if (h - listHeight > 1)
+                            setListHeight(h)
+                    },
+                    sx: { flex: 1, display: 'flex', flexDirection: 'column' }
+                },
+                    !list.length ? h(Center, { flex: 1, mt: '4em' }, "No elements in this folder")
+                        : h(FixedSizeList, {
+                            width: '100%', height: listHeight,
+                            itemSize: 46, itemCount: filteredList.length, overscanCount: 5,
+                            children({ index, style }) {
+                                const it: DirEntry = filteredList[index]
+                                const isFolder = it.k === 'd'
+                                return h(MenuItem, {
+                                        style: { ...style, padding: 0 },
+                                        key: it.n,
+                                        onClick() {
+                                            if (isFolder)
+                                                setCwd(cwdDelimiter + it.n)
+                                            else
+                                                onSelect([cwdDelimiter + it.n])
+                                        }
+                                    },
+                                    multiple && h(Checkbox, {
+                                        checked: sel.includes(it.n),
+                                        disabled: !folders && isFolder,
+                                        onClick(ev) {
+                                            const id = it.n
+                                            const removed = sel.filter(x => x !== id)
+                                            setSel(removed.length < sel.length ? removed : [...sel, id])
+                                            ev.stopPropagation()
+                                        },
+                                    }),
+                                    h(ListItemIcon, {}, h(it.k ? FolderIcon : FileIcon)),
+                                    h(ListItemText, { sx: { whiteSpace: 'pre-wrap', wordBreak: 'break-all' } }, it.n),
+                                    !isFolder && it.s !== undefined && h(Typography, {
+                                        variant: 'body2',
+                                        color: 'text.secondary',
+                                        ml: 4, mr: 1,
+                                    }, formatBytes(it.s))
+                                )
+                            }
+                        })
+                ),
+                h(Box, { display:'flex', gap: 1 },
+                    (multiple || folders || !files) && h(Button, {
+                        variant: 'contained',
+                        disabled: !cwd || !folders && !sel.length && files,
+                        sx: { minWidth: 'max-content' },
+                        onClick() {
+                            onSelect(sel.length ? sel.map(x => cwdDelimiter + x) : [cwd])
+                        }
+                    }, files && (sel.length || !folders) ? `Select (${sel.length})` : `Select this folder`),
+                    h(TextField, {
+                        value: filter,
+                        label: `Filter results (${filteredList.length}${filteredList.length < list.length ? '/'+list.length : ''})`,
+                        onChange(ev) {
+                            setFilterBounced(ev.target.value)
+                        },
+                        sx: { flex: 1 },
+                    }),
+                ),
+            )
+    )
+}