hamlab/web/src/Files.tsx

import { DragEvent, useCallback, useEffect, useRef, useState } from 'react'
import { api, FileEntry, FileInfo } from './api'
import { fmtBytes } from './fmt'
import { Btn, Loading, Spinner, askText, askYes, setUnsaved, toast, useEscape } from './ui'
import { useHashSel } from './hashsel'

const join = (dir: string, name: string) => (dir === '/' ? '/' + name : dir + '/' + name)
const fmtTime = (ms: number) => { const d = new Date(ms); const now = new Date(); return d.toDateString() === now.toDateString() ? d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) : d.toLocaleDateString(undefined, { year: d.getFullYear() === now.getFullYear() ? undefined : 'numeric', month: 'short', day: '2-digit' }) }
const isImage = (n: string) => /\.(png|jpe?g|gif|webp|svg|bmp|ico|avif)$/i.test(n)
const shellQuote = (s: string) => "'" + s.replace(/'/g, "'\\''") + "'"
const MAX_EDIT = 2 * 1024 * 1024

function icon(e: FileEntry): string {
  if (e.type === 'dir') return e.target ? '🔗' : '📁'
  if (e.type === 'link') return e.broken ? '⛓️‍💥' : '🔗'
  if (e.type === 'other') return '⚙️'
  if (isImage(e.name)) return '🖼️'
  if (/\.(zip|gz|bz2|xz|zst|tar|tgz|7z|rar)$/i.test(e.name)) return '🗜️'
  if (/\.(sh|bash|zsh|py|go|js|ts|tsx|rb|pl|php|rs|c|h|cpp|java|lua)$/i.test(e.name) || e.mode.includes('x')) return '📜'
  if (/\.(log|txt|md|json|ya?ml|toml|ini|conf|cfg|env|service|timer)$/i.test(e.name)) return '📄'
  return '📄'
}

type Sort = 'name' | 'size' | 'mtime'

// ---- editor / viewer ----
function Viewer({ path, sudo, onClose, onChanged }: { path: string; sudo: boolean; onClose: () => void; onChanged: () => void }) {
  const [info, setInfo] = useState<FileInfo | null>(null)
  const [text, setText] = useState<string | null>(null)
  const [orig, setOrig] = useState('')
  const [err, setErr] = useState('')
  const [saving, setSaving] = useState(false)
  const name = path.split('/').pop() ?? path
  const dirty = text !== null && text !== orig

  useEffect(() => {
    setInfo(null); setText(null); setErr('')
    let stop = false
    ;(async () => {
      try {
        const i = await api.fileStat(path, sudo)
        if (stop) return
        setInfo(i)
        if (i.text && i.size <= MAX_EDIT && !isImage(name)) {
          const t = await api.fileRead(path, sudo)
          if (stop) return
          setText(t); setOrig(t)
        }
      } catch (e) { if (!stop) setErr(e instanceof Error ? e.message : 'failed') }
    })()
    return () => { stop = true }
  }, [path, sudo, name])

  const save = useCallback(async () => {
    if (text === null || !dirty) return
    setSaving(true)
    try { await api.fileWrite(path, text, sudo); setOrig(text); toast(`${name} saved`); onChanged() }
    catch (e) { toast(`save failed — ${e instanceof Error ? e.message : 'failed'}`, 'err') }
    finally { setSaving(false) }
  }, [text, dirty, path, sudo, name, onChanged])

  useEffect(() => {
    const h = (e: KeyboardEvent) => { if ((e.ctrlKey || e.metaKey) && e.key === 's') { e.preventDefault(); save() } }
    window.addEventListener('keydown', h)
    return () => window.removeEventListener('keydown', h)
  }, [save])

  const close = async () => { if (dirty && !await askYes('Discard unsaved changes?', 'Discard')) return; setUnsaved(''); onClose() }
  // Unsaved edits are announced, so leaving the page, switching machine or closing the tab asks first.
  useEffect(() => {
    setUnsaved(dirty ? name : '')
    if (!dirty) return
    const h = (e: BeforeUnloadEvent) => { e.preventDefault(); e.returnValue = '' }
    window.addEventListener('beforeunload', h)
    return () => { window.removeEventListener('beforeunload', h); setUnsaved('') }
  }, [dirty, name])
  const dl = api.fileDownloadURL(path, sudo)

  return (
    <div className="viewer">
      <div className="viewer-bar">
        <button className="btn" onClick={close}>‹ Back</button>
        <span className="vname mono" title={path}>{name}{dirty && <span className="dirty"> •</span>}</span>
        <span className="spacer" />
        {info && <span className="muted num">{fmtBytes(info.size)} · {info.perm} · {info.user}</span>}
        <a className="btn" href={dl} download={name}>Download</a>
        {text !== null && <Btn className="btn on" disabled={!dirty || saving} onClick={save}>Save</Btn>}
      </div>
      {err && <div className="error">{err}</div>}
      {!info && !err && <Loading label="Opening…" />}
      {info && text !== null && (
        <textarea className="editor file-editor" value={text} spellCheck={false} onChange={(e) => setText(e.target.value)} />
      )}
      {info && text === null && isImage(name) && <div className="preview"><img src={api.fileReadURL(path, sudo)} alt={name} /></div>}
      {info && text === null && !isImage(name) && !err && (
        <div className="notice">{info.type === 'dir' ? 'This is a directory.' : info.size > MAX_EDIT ? `Too large to edit here (${fmtBytes(info.size)}). Download it instead.` : 'Binary file. Download it instead.'}</div>
      )}
    </div>
  )
}

// ---- page ----
export default function Files({ onOpenInTerminal }: { onOpenInTerminal?: (cmd: string) => void }) {
  const [hashPath, setHashPath] = useHashSel('files') // the folder is in the URL; without one, the last folder that opened
  const [path, setPath] = useState<string>(() => (hashPath.startsWith('/') ? hashPath : sessionStorage.getItem('hamlab.files.path') || '/'))
  useEffect(() => { setHashPath(path) }, [path, setHashPath])
  useEffect(() => { if (hashPath.startsWith('/') && hashPath !== path) setPath(hashPath) }, [hashPath]) // eslint-disable-line react-hooks/exhaustive-deps
  const [sudo, setSudo] = useState<boolean>(() => sessionStorage.getItem('hamlab.files.sudo') === '1')
  const [entries, setEntries] = useState<FileEntry[] | null>(null)
  const [err, setErr] = useState('')
  const [hidden, setHidden] = useState(false)
  const [sort, setSort] = useState<Sort>('name')
  const [q, setQ] = useState('')
  const [pathInput, setPathInput] = useState(path)
  const [open, setOpen] = useState<string | null>(null)
  const [menu, setMenu] = useState<string | null>(null)
  const [upload, setUpload] = useState<{ name: string; pct: number; n: number; of: number } | null>(null)
  const [drag, setDrag] = useState(false)
  const fileInput = useRef<HTMLInputElement>(null)
  const canSudo = useRef(true)

  const load = useCallback(async (p = path, s = sudo) => {
    try {
      const l = await api.files(p, s)
      setEntries(l.entries); setErr('')
      canSudo.current = true
      sessionStorage.setItem('hamlab.files.path', p) // only a folder that opened is worth coming back to
    } catch (e) {
      const msg = e instanceof Error ? e.message : 'failed'
      setErr(msg); setEntries([])
    }
  }, [path, sudo])

  useEffect(() => { setEntries(null); setPathInput(path); setMenu(null); load(path, sudo); sessionStorage.setItem('hamlab.files.sudo', sudo ? '1' : '0') }, [path, sudo, load])
  useEffect(() => { const h = () => setMenu(null); window.addEventListener('click', h); return () => window.removeEventListener('click', h) }, [])
  useEscape(() => setMenu(null), menu !== null)

  const go = (p: string) => { setOpen(null); setPath(p || '/') }
  const crumbs = path === '/' ? [] : path.slice(1).split('/')

  const shown = (entries ?? []).filter((e) => (hidden || !e.name.startsWith('.')) && (!q || e.name.toLowerCase().includes(q.toLowerCase())))
    .sort((a, b) => {
      if ((a.type === 'dir') !== (b.type === 'dir')) return a.type === 'dir' ? -1 : 1
      if (sort === 'size') return b.size - a.size
      if (sort === 'mtime') return b.mtime - a.mtime
      return a.name.localeCompare(b.name, undefined, { numeric: true, sensitivity: 'base' })
    })

  // ---- actions ----
  const act = async (label: string, fn: () => Promise<unknown>) => {
    try { await fn(); toast(label); await load() } catch (e) { toast(`${label} — ${e instanceof Error ? e.message : 'failed'}`, 'err') }
  }
  // A name is one path segment. ("../x" and "a/b" would quietly act somewhere else.)
  const okName = (n?: string | null): n is string => { const t = n?.trim(); if (!t) return false; if (t.includes('/') || t === '.' || t === '..') { toast('a name can\'t contain / or be . or .. — use Move… to put it elsewhere', 'err'); return false } return true }
  const mkdir = async () => { const n = await askText('New folder name'); if (okName(n)) act(`created ${n.trim()}`, () => api.fileMkdir(join(path, n.trim()), sudo)) }
  const touch = async () => { const n = await askText('New file name'); if (okName(n)) act(`created ${n.trim()}`, () => api.fileTouch(join(path, n.trim()), sudo)).then(() => setOpen(join(path, n.trim()))) }
  const rename = async (e: FileEntry) => { const n = await askText('Rename to', e.name); if (okName(n) && n.trim() !== e.name) act(`renamed to ${n.trim()}`, () => api.fileRename(join(path, e.name), join(path, n.trim()), sudo)) }
  const move = async (e: FileEntry) => { const n = await askText('Move to (absolute path)', join(path, e.name)); if (n?.trim() && n.trim() !== join(path, e.name)) act(`moved to ${n.trim()}`, () => api.fileRename(join(path, e.name), n.trim(), sudo)) }
  const chmod = async (e: FileEntry) => { const n = await askText(`Permissions for ${e.name} (octal)`, e.perm); if (n?.trim() && n.trim() !== e.perm) act(`chmod ${n.trim()} ${e.name}`, () => api.fileChmod(join(path, e.name), n.trim(), sudo)) }
  const del = async (e: FileEntry) => {
    const full = join(path, e.name)
    if (e.type === 'dir' && !e.target) {
      const typed = await askText(`Delete the folder "${e.name}" and everything in it?\nType its name to confirm.`)
      if (typed !== e.name) return
      act(`deleted ${e.name}`, () => api.fileDelete(full, true, sudo))
    } else if (await askYes(`Delete ${e.name}?`)) act(`deleted ${e.name}`, () => api.fileDelete(full, false, sudo))
  }
  const copyPath = async (e: FileEntry) => { try { await navigator.clipboard.writeText(join(path, e.name)); toast('path copied') } catch { await askText('Path', join(path, e.name)) } }
  const openTerm = (p: string) => { onOpenInTerminal?.(`cd ${shellQuote(p)}`); }

  // ---- upload ----
  const uploadFiles = async (files: FileList | File[]) => {
    const list = Array.from(files)
    for (let i = 0; i < list.length; i++) {
      const f = list[i]
      let overwrite = false
      if ((entries ?? []).some((e) => e.name === f.name)) {
        if (!await askYes(`"${f.name}" already exists here. Replace it?`)) continue
        overwrite = true
      }
      setUpload({ name: f.name, pct: 0, n: i + 1, of: list.length })
      try {
        await api.fileUpload(path, f, sudo, (pct) => setUpload({ name: f.name, pct, n: i + 1, of: list.length }), overwrite)
      } catch (e) { toast(`upload ${f.name} — ${e instanceof Error ? e.message : 'failed'}`, 'err'); break }
    }
    setUpload(null)
    toast(list.length === 1 ? `uploaded ${list[0].name}` : `uploaded ${list.length} files`)
    load()
  }
  const onDrop = (e: DragEvent) => { e.preventDefault(); setDrag(false); if (e.dataTransfer.files.length) uploadFiles(e.dataTransfer.files) }

  if (open) return <div className="files"><Viewer path={open} sudo={sudo} onClose={() => setOpen(null)} onChanged={() => load()} /></div>

  return (
    <div className={'files' + (drag ? ' drag' : '')} onDragOver={(e) => { e.preventDefault(); setDrag(true) }} onDragLeave={() => setDrag(false)} onDrop={onDrop}>
      <div className="files-bar">
        <form className="crumbs" onSubmit={(e) => { e.preventDefault(); go(pathInput.trim()) }}>
          <button type="button" className="crumb" onClick={() => go('/')}>/</button>
          {crumbs.map((c, i) => <button type="button" key={i} className="crumb" onClick={() => go('/' + crumbs.slice(0, i + 1).join('/'))}>{c}</button>)}
          <input className="path-input" value={pathInput} onChange={(e) => setPathInput(e.target.value)} onBlur={() => setPathInput(path)} spellCheck={false} />
        </form>
        <div className="files-tools">
          <button className={'btn' + (sudo ? ' on' : '')} title="browse as root" onClick={() => setSudo(!sudo)}>{sudo ? 'root' : 'sudo'}</button>
          <button className={'btn' + (hidden ? ' on' : '')} title="show hidden files" onClick={() => setHidden(!hidden)}>.hidden</button>
          <select className="btn" value={sort} onChange={(e) => setSort(e.target.value as Sort)}><option value="name">name</option><option value="size">size</option><option value="mtime">modified</option></select>
          <input className="filter" placeholder="filter" value={q} onChange={(e) => setQ(e.target.value)} />
          <button className="btn" onClick={mkdir}>+ folder</button>
          <button className="btn" onClick={touch}>+ file</button>
          <button className="btn" onClick={() => fileInput.current?.click()}>Upload</button>
          <input ref={fileInput} type="file" multiple style={{ display: 'none' }} onChange={(e) => { if (e.target.files?.length) uploadFiles(e.target.files); e.target.value = '' }} />
          {onOpenInTerminal && <button className="btn" title="cd here in the active terminal" onClick={() => openTerm(path)}>&gt;_ here</button>}
          <Btn className="btn" title="reload" onClick={() => load()}>↻</Btn>
        </div>
      </div>

      {upload && <div className="upload-bar"><Spinner /> {upload.of > 1 ? `${upload.n}/${upload.of} · ` : ''}{upload.name} · {upload.pct}%<div className="meter"><div className="fill" style={{ width: `${upload.pct}%` }} /></div></div>}
      {err && <div className="error" style={{ padding: '6px 12px' }}>{err}{/permission denied/i.test(err) && !sudo && <> · <button className="link" onClick={() => setSudo(true)}>retry as root</button></>}</div>}

      <div className="file-list">
        {entries === null && <Loading label="Listing…" />}
        {path !== '/' && entries !== null && (
          <div className="file-row up" onClick={() => go(path.slice(0, path.lastIndexOf('/')) || '/')}><span className="ficon">↩</span><span className="fname">..</span></div>
        )}
        {shown.map((e) => {
          const full = join(path, e.name)
          const isDir = e.type === 'dir'
          return (
            <div key={e.name} className={'file-row' + (e.broken ? ' broken' : '')} onClick={() => (isDir ? go(full) : setOpen(full))}>
              <span className="ficon">{icon(e)}</span>
              <span className="fname" title={e.target ? `→ ${e.target}` : e.name}>{e.name}{e.target && <span className="muted"> → {e.target}</span>}</span>
              <span className="fmeta num">{isDir ? '' : fmtBytes(e.size)}</span>
              <span className="fmeta num">{fmtTime(e.mtime)}</span>
              <span className="fmeta num perm">{e.perm} {e.user}</span>
              <button className="icon-btn more" onClick={(ev) => { ev.stopPropagation(); setMenu(menu === e.name ? null : e.name) }}>⋯</button>
              {menu === e.name && (
                <div className="ctx" onClick={(ev) => ev.stopPropagation()}>
                  {!isDir && <a href={api.fileDownloadURL(full, sudo)} download={e.name} onClick={() => setMenu(null)}>Download</a>}
                  {isDir && onOpenInTerminal && <button onClick={() => { setMenu(null); openTerm(full) }}>Open in terminal</button>}
                  <button onClick={() => { setMenu(null); rename(e) }}>Rename</button>
                  <button onClick={() => { setMenu(null); move(e) }}>Move…</button>
                  <button onClick={() => { setMenu(null); chmod(e) }}>Permissions ({e.perm})</button>
                  <button onClick={() => { setMenu(null); copyPath(e) }}>Copy path</button>
                  <button className="danger" onClick={() => { setMenu(null); del(e) }}>Delete</button>
                </div>
              )}
            </div>
          )
        })}
        {entries !== null && shown.length === 0 && !err && <div className="muted" style={{ padding: 12 }}>{q ? 'Nothing matches.' : 'Empty folder.'}{!hidden && entries.some((e) => e.name.startsWith('.')) ? ' (hidden files not shown)' : ''}</div>}
      </div>
      {drag && <div className="drop-hint">Drop to upload into {path}</div>}
    </div>
  )
}