hfs 0.26.8 → 0.26.9

package/admin/src/AccountsPage.ts

@@ -1,143 +0,0 @@
-// 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, useState, useEffect, Fragment } from "react"
-import { apiCall, useApiEx } from './api'
-import { Alert, Box, Button, Card, CardContent, Grid, List, ListItem, ListItemText, Typography } from '@mui/material'
-import { Delete, Group, MilitaryTech, Person, PersonAdd, Refresh } from '@mui/icons-material'
-import { alertDialog, confirmDialog } from './dialog'
-import { iconTooltip, onlyTruthy } from './misc'
-import { TreeItem, TreeView } from '@mui/lab'
-import MenuButton from './MenuButton'
-import AccountForm from './AccountForm'
-import md from './md'
-
-export interface Account {
-    username: string
-    hasPassword?: boolean
-    adminActualAccess?: boolean
-    ignore_limits?: boolean
-    redirect?: string
-    belongs?: string[]
-}
-
-export default function AccountsPage() {
-    const { data, reload, element } = useApiEx('get_accounts')
-    const [sel, setSel] = useState<string[] | 'new-group' | 'new-user'>([])
-    const selectionMode = Array.isArray(sel)
-    useEffect(() => { // if accounts are reloaded, review the selection to remove elements that don't exist anymore
-        if (Array.isArray(data?.list) && selectionMode)
-            setSel( sel.filter(u => data.list.find((e:any) => e?.username === u)) ) // remove elements that don't exist anymore
-    }, [data]) //eslint-disable-line -- Don't fall for its suggestion to add `sel` here: we modify it and declaring it as a dependency would cause a logical loop
-    if (element)
-        return element
-    const { list }: { list: Account[] } = data
-    return h(Grid, { container: true, maxWidth: '80em' },
-        h(Grid, { item: true, xs: 12 },
-            h(Box, {
-                display: 'flex',
-                flexWrap: 'wrap',
-                gap: 2,
-                mb: 2,
-                sx: {
-                    position: 'sticky',
-                    top: 0,
-                    zIndex: 2,
-                    backgroundColor: 'background.paper',
-                    width: 'fit-content',
-                },
-            },
-                h(MenuButton, {
-                    variant: 'contained',
-                    startIcon: h(PersonAdd),
-                    items: [
-                        { children: "user", onClick: () => setSel('new-user') },
-                        { children: "group", onClick: () => setSel('new-group') }
-                    ]
-                }, 'Add'),
-                h(Button, {
-                    disabled: !selectionMode || !sel.length,
-                    startIcon: h(Delete),
-                    async onClick(){
-                        if (!selectionMode) return
-                        if (!await confirmDialog(`You are going to delete ${sel.length} account(s)`))
-                            return
-                        const errors = onlyTruthy(await Promise.all(sel.map(username =>
-                            apiCall('del_account', { username }).then(() => null, () => username) )))
-                        if (errors.length)
-                            return alertDialog(errors.length === sel.length ? "Request failed" : hList("Some accounts were not deleted", errors), 'error')
-                        reload()
-                    }
-                }, "Remove"),
-                h(Button, { onClick: reload, startIcon: h(Refresh) }, "Reload"),
-                list.length > 0 && h(Typography, { p: 1 }, `${list.length} account(s)`),
-            ) ),
-        h(Grid, { item: true, md: 5 },
-            !list.length && h(Alert, { severity: 'info' }, md`To access administration _remotely_ you will need to create a user account with admin permission`),
-            h(TreeView, {
-                multiSelect: true,
-                sx: { pr: 4, pb: 2, minWidth: '15em' },
-                selected: selectionMode ? sel : [],
-                onNodeSelect(ev, ids) {
-                    setSel(ids)
-                }
-            },
-                list.map((ac: Account) =>
-                    h(TreeItem, {
-                        key: ac.username,
-                        nodeId: ac.username,
-                        label: h(Box, {
-                            sx: {
-                                display: 'flex',
-                                flexWrap: 'wrap',
-                                padding: '.2em 0',
-                                gap: '.5em',
-                                alignItems: 'center',
-                            }
-                        },
-                            account2icon(ac),
-                            ac.adminActualAccess && iconTooltip(MilitaryTech, "Can login into Admin"),
-                            ac.username,
-                            Boolean(ac.belongs?.length) && h(Box, { sx: { color: 'text.secondary', fontSize: 'small' } },
-                                '(', ac.belongs?.join(', '), ')')
-                        ),
-                    })
-                )
-            )
-        ),
-        sel.length > 0 // this clever test is true both when some accounts are selected and when we are in "new account" modes
-        && h(Grid, { item: true, md: 7 },
-            h(Card, {},
-                h(CardContent, {},
-                    selectionMode && sel.length > 1 ? h(Box, {},
-                        h(Typography, {}, sel.length + " selected"),
-                        h(List, {},
-                            sel.map(username =>
-                                h(ListItem, { key: username },
-                                    h(ListItemText, {}, username))))
-                    ) : h(AccountForm, {
-                        account: selectionMode && list.find(x => x.username === sel[0])
-                            || { username: '', hasPassword: sel === 'new-user' },
-                        groups: list.filter(x => !x.hasPassword).map( x => x.username ),
-                        close(){ setSel([]) },
-                        done(username) {
-                            setSel([username])
-                            reload()
-                        }
-                    })
-                )))
-    )
-}
-
-function hList(heading: string, list: any[]) {
-    return h(Fragment, {},
-        heading>'' && h(Typography, {}, heading),
-        h(List, {},
-            list.map((text,key) =>
-                h(ListItem, { key },
-                    typeof text === 'string' ? h(ListItemText, {}, text) : text) ))
-    )
-}
-
-export function account2icon(ac: Account, props={}) {
-    return h(ac.hasPassword ? Person : Group, props)
-}

package/admin/src/App.ts

@@ -1,83 +0,0 @@
-// 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, useState } from 'react'
-import { HashRouter, Routes, Route, useLocation } from 'react-router-dom'
-import MainMenu, { getMenuLabel, mainMenu } from './MainMenu'
-import { AppBar, Box, Drawer, IconButton, ThemeProvider, Toolbar, Typography } from '@mui/material'
-import { Dialogs } from './dialog'
-import { useMyTheme } from './theme'
-import { useBreakpoint} from './misc'
-import { LoginRequired } from './LoginRequired'
-import { Menu } from '@mui/icons-material'
-
-function App() {
-    return h(ThemeProvider, { theme: useMyTheme() },
-        h(ApplyTheme, {},
-            h(LoginRequired, {},
-                h(HashRouter, {}, h(Routed)) ) ) )
-}
-
-function ApplyTheme(props:any) {
-    return h(Box, {
-        sx: {
-            bgcolor: 'background.default', color: 'text.primary',
-            display: 'flex', flexDirection: 'column',
-            minHeight: '100%', flex: 1,
-        },
-        ...props
-    })
-}
-
-function Routed() {
-    const loc = useLocation().pathname.slice(1)
-    const current = mainMenu.find(x => x.path === loc)
-    const title = current && (current.title || getMenuLabel(current))
-    const [open, setOpen] = useState(false)
-    const large = useBreakpoint('lg')
-    return h(Fragment, {},
-        !large && h(StickyBar, { title, openMenu: () => setOpen(true) }),
-        !large && h(Drawer, { anchor:'left', open, onClose(){ setOpen(false) } },
-            h(MainMenu, {
-                onSelect: () => setOpen(false)
-            })),
-        h(Box, { display: 'flex', flex: 1, }, // horizontal layout for menu-content
-            large && h(MainMenu),
-            h(Box, {
-                component: 'main',
-                sx: {
-                    background: 'url(logo.svg) no-repeat right fixed',
-                    backgroundSize: 'contain',
-                    px: { xs: 2, md: 3 },
-                    pb: '1em',
-                    position: 'relative',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    width: '100%',
-                }
-            },
-                title && large && h(Typography, { variant:'h2', mb:2 }, title),
-                h(Routes, {}, mainMenu.map((it,idx) =>
-                    h(Route, { key: idx, path: it.path, element: h(it.comp) })) )
-            ),
-            h(Dialogs)
-        )
-    )
-}
-
-function StickyBar({ title, openMenu }: { title?: string, openMenu: ()=>void }) {
-    return h(AppBar, { position: 'sticky', sx: { mb: 2 } },
-        h(Toolbar, {},
-            h(IconButton, {
-                size: 'large',
-                edge: 'start',
-                color: 'inherit',
-                sx: { mr: 2 },
-                'aria-label': "menu",
-                onClick: openMenu
-            }, h(Menu)),
-            title,
-        )
-    )
-}
-
-export default App

package/admin/src/ArrayField.ts

@@ -1,84 +0,0 @@
-import { createElement as h, Fragment, useMemo } from 'react'
-import { IconBtn, setHidden } from './misc'
-import { Add, Edit, Delete } from '@mui/icons-material'
-import { confirmDialog, formDialog } from './dialog'
-import { DataGrid, GridAlignment } from '@mui/x-data-grid'
-import { FieldDescriptor, FieldProps, labelFromKey } from '@hfs/mui-grid-form'
-import { Box, FormHelperText, FormLabel } from '@mui/material'
-
-export function ArrayField<T=any>({ label, helperText, fields, value, onChange, onError, getApi, ...rest }: FieldProps<T[]> & { fields: FieldDescriptor[], height?: number }) {
-    const rows = useMemo(() => (value||[]).map((x,$idx) =>
-            setHidden({ ...x } as any, 'id' in x ? { $idx } : { id: $idx })),
-        [JSON.stringify(value)]) //eslint-disable-line
-    const columns = useMemo(() => {
-        return [
-            ...fields.map(f => ({
-                field: f.k,
-                headerName: f.headerName ?? (typeof f.label === 'string' ? f.label : labelFromKey(f.k)),
-                disableColumnMenu: true,
-                ...f.$width >= 8 ? { width: f.$width } : { flex: f.$width || 1 },
-                ...f.$column,
-            })),
-            {
-                field: '',
-                width: 80,
-                disableColumnMenu: true,
-                sortable: false,
-                align: 'center' as GridAlignment,
-                headerAlign: 'center' as GridAlignment,
-                renderHeader(){
-                    return h(IconBtn, {
-                        icon: Add,
-                        title: "Add",
-                        onClick: (event:any) =>
-                            formDialog({ fields }).then(o => // @ts-ignore
-                                o && onChange([...value||[], o], { was: value, event }))
-                    })
-                },
-                renderCell({ row }: any) {
-                    const { $idx=row.id } = row
-                    return h('div', {},
-                        h(IconBtn, {
-                            icon: Edit,
-                            title: "Modify",
-                            onClick: (event:any) =>
-                                formDialog({ fields, values: row }).then(newRec => {
-                                    if (!newRec) return
-                                    const newValue = value!.map((oldRec, i) => i === $idx ? newRec : oldRec)
-                                    onChange(newValue, { was: value, event })
-                                }),
-                        }),
-                        h(IconBtn, {
-                            icon: Delete,
-                            title: "Delete",
-                            onClick: (event:any) =>
-                                confirmDialog("Delete?").then(ok => {
-                                    if (!ok) return
-                                    const newValue = value!.filter((rec, i) => i !== $idx)
-                                    onChange(newValue, { was: value, event })
-                                }),
-                        }),
-                    )
-                }
-            }
-        ]
-    }, [fields, value, onChange])
-    return h(Fragment, {},
-        label && h(FormLabel, { sx: { ml: 1 } }, label),
-        helperText && h(FormHelperText, {}, helperText),
-        h(Box, { height: '20em', ...rest },
-            h(DataGrid, {
-                columns,
-                rows,
-                hideFooterSelectedRowCount: true,
-                hideFooter: true,
-                componentsProps: {
-                    pagination: {
-                        showFirstButton: true,
-                        showLastButton: true,
-                    }
-                },
-            })
-        )
-    )
-}

package/admin/src/ConfigPage.ts

@@ -1,279 +0,0 @@
-// 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

@@ -1,52 +0,0 @@
-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()
-                                    }
-                                })
-                            },
-                        })
-                    },
-                }))
-        }
-    })
-}