dsh-coding-sidebar 1.0.7 → 1.0.9

package/src/client/DiffView.tsx

@@ -9,9 +9,12 @@
  * The parser is a pure function (`parseUnifiedDiff`) so the interesting
  * cases are unit-tested without a DOM.
  */
-import { useEffect, useMemo, useState, type ReactNode } from 'react'
+import { Fragment, useEffect, useMemo, useRef, useState, type ReactNode } from 'react'
 import clsx from 'clsx'
 import { t } from './locales.ts'
+import { api, type SessionScope } from './api.ts'
+import type { SidebarDiffRef } from './state.ts'
+import { resolveSidebarPath } from './produced-files.ts'
 import css from './sidebar.module.css'
 
 /** One rendered diff line. */
@@ -157,6 +160,61 @@ function displayPath(path: string): string {
   return path
 }
 
+/** The old/new line range one hidden gap spans (both sides derive from the
+ *  surrounding hunk headers and their counted rows). */
+interface DiffFoldRange {
+  oldStart: number
+  oldEnd: number
+  newStart: number
+  newEnd: number
+}
+
+/** How many old-side rows a hunk carries (rows without an old number are
+ *  pure additions and do not advance the old side). */
+function hunkOldEnd(hunk: DiffHunk): number {
+  return hunk.oldStart + hunk.lines.filter(line => line.oldNum !== null).length - 1
+}
+
+/** How many new-side rows a hunk carries. */
+function hunkNewEnd(hunk: DiffHunk): number {
+  return hunk.newStart + hunk.lines.filter(line => line.newNum !== null).length - 1
+}
+
+/**
+ * Materialize a git gap fold's hidden rows from the two sides' full file
+ * contents, by the fold's known line ranges: the old side drives context
+ * rows (each mapped onto the new side through the fold's offset — a gap is
+ * an unchanged run, so the sides align), and new-side lines the old range
+ * never reaches become pure additions. Line numbers clip to the actual
+ * content (a no-newline file's ranges can overrun by one); `\r` endings
+ * survive verbatim, like git's own context lines.
+ */
+export function foldRowsFromContents(fold: DiffFoldRange, oldContent: string, newContent: string): DiffLine[] {
+  const oldLines = oldContent.length === 0 ? [] : oldContent.split('\n')
+  const newLines = newContent.length === 0 ? [] : newContent.split('\n')
+  const offset = fold.newStart - fold.oldStart
+  const rows: DiffLine[] = []
+  const oldFrom = Math.max(fold.oldStart, 1)
+  const oldTo = Math.min(fold.oldEnd, oldLines.length)
+  for (let oldLine = oldFrom; oldLine <= oldTo; oldLine += 1) {
+    const text = oldLines[oldLine - 1] ?? ''
+    const newLine = oldLine + offset
+    rows.push(
+      newLine >= fold.newStart && newLine <= fold.newEnd && newLine <= newLines.length
+        ? { kind: 'ctx', text, oldNum: oldLine, newNum: newLine }
+        : { kind: 'ctx', text, oldNum: oldLine, newNum: null },
+    )
+  }
+  // New-side lines beyond what the old range reached (a pure-addition gap):
+  // rows carrying only the new-side number, exactly like added lines.
+  const newFrom = Math.max(Math.max(fold.newStart, 1), oldTo + offset + 1)
+  const newTo = Math.min(fold.newEnd, newLines.length)
+  for (let newLine = newFrom; newLine <= newTo; newLine += 1) {
+    rows.push({ kind: 'add', text: newLines[newLine - 1] ?? '', oldNum: null, newNum: newLine })
+  }
+  return rows
+}
+
 /** The file header badge: added / deleted / renamed / binary ('' for a plain edit). */
 function fileTag(file: DiffFile): string | null {
   if (file.binary) return t('diffBinary')
@@ -196,9 +254,20 @@ export interface DiffViewProps {
   /** Untracked-file content: when present, renders as a full-file addition instead of parsing. */
   untrackedPath?: string
   untrackedContent?: string
+  /**
+   * When present (a worktree/commit diff ref plus its scope), hunk gaps
+   * render an expandable fold: clicking resolves both sides' full contents
+   * (`git.fold-contents`) and materializes the hidden context rows. Absent
+   * (or an untracked full-addition render) — no fold rows at all.
+   */
+  foldSource?: { scope: SessionScope; ref: SidebarDiffRef; cwd: string | undefined }
 }
 
-export function DiffView({ diff, untrackedPath, untrackedContent }: DiffViewProps) {
+/** Resolution state of one fold: rows once expanded, 'failed' degrades to a
+ *  static marker; loading folds are not clickable again. */
+type FoldState = { status: 'loading' } | { status: 'ready'; rows: DiffLine[] } | { status: 'failed' }
+
+export function DiffView({ diff, untrackedPath, untrackedContent, foldSource }: DiffViewProps) {
   const parsed = useMemo<ParsedDiff>(() => {
     if (untrackedPath !== undefined) {
       return { files: [untrackedFile(untrackedPath, untrackedContent ?? '')] }
@@ -207,16 +276,80 @@ export function DiffView({ diff, untrackedPath, untrackedContent }: DiffViewProp
   }, [diff, untrackedPath, untrackedContent])
   const [expanded, setExpanded] = useState(false)
   const [expandedFiles, setExpandedFiles] = useState<Set<number>>(() => defaultExpandedFiles(parsed.files))
+  // Per-fold expansion state (key `f<file>fold<hunk>`): loading → ready
+  // (materialized rows) or failed (a side is unavailable — untracked /
+  // deleted / binary). In-flight promises dedupe double clicks and remounts.
+  const [foldRows, setFoldRows] = useState<Map<string, FoldState>>(new Map())
+  const foldInflight = useRef(new Map<string, Promise<void>>())
 
   useEffect(() => { setExpandedFiles(defaultExpandedFiles(parsed.files)) }, [parsed])
+  useEffect(() => {
+    setFoldRows(new Map())
+    foldInflight.current.clear()
+  }, [parsed])
+
+  /** Fetch both sides' contents and materialize one fold's hidden rows. */
+  const resolveFold = (key: string, file: DiffFile, fold: DiffFoldRange): void => {
+    if (foldSource === undefined || foldInflight.current.has(key)) return
+    setFoldRows(current => new Map(current).set(key, { status: 'loading' }))
+    const task = (async (): Promise<void> => {
+      try {
+        const path = displayPath(file.newPath === '/dev/null' ? file.oldPath : file.newPath)
+        const contents = await api.gitFoldContents(foldSource.scope, {
+          path,
+          ...(foldSource.ref.kind === 'commit' ? { hash: foldSource.ref.hashFull } : { staged: foldSource.ref.staged === true }),
+        }, foldSource.ref.kind === 'worktree' ? foldSource.ref.worktree : undefined)
+        if (contents.old === null || contents.new === null) {
+          setFoldRows(current => new Map(current).set(key, { status: 'failed' }))
+          return
+        }
+        const rows = foldRowsFromContents(fold, contents.old, contents.new)
+        setFoldRows(current => new Map(current).set(key, { status: 'ready', rows }))
+      } catch {
+        setFoldRows(current => new Map(current).set(key, { status: 'failed' }))
+      } finally {
+        foldInflight.current.delete(key)
+      }
+    })()
+    foldInflight.current.set(key, task)
+  }
 
   // Flatten into display rows so the cap can slice a single list.
   const rows = useMemo(() => {
-    const out: Array<{ key: string; file: DiffFile; fileIndex: number; type: 'path' | 'hunk' | 'line'; hunk?: DiffHunk; line?: DiffLine }> = []
+    const out: Array<
+      { key: string; file: DiffFile; fileIndex: number; type: 'path' | 'hunk' | 'line'; hunk?: DiffHunk; line?: DiffLine }
+      | { key: string; file: DiffFile; fileIndex: number; type: 'fold'; fold: DiffFoldRange; count: number; state: FoldState | undefined }
+    > = []
     parsed.files.forEach((file, fileIndex) => {
       out.push({ key: `f${fileIndex}`, file, fileIndex, type: 'path' })
       if (file.binary || !expandedFiles.has(fileIndex)) return
+      let prevOldEnd = 0
+      let prevNewEnd = 0
       file.hunks.forEach((hunk, hunkIndex) => {
+        // The gap git never emitted: rows are unknown until resolved, but
+        // the ranges derive from the surrounding hunk headers/counts (the
+        // first hunk's gap is the leading context git trimmed).
+        const oldGap = hunk.oldStart - prevOldEnd - 1
+        const newGap = hunk.newStart - prevNewEnd - 1
+        if (foldSource !== undefined && (oldGap > 0 || newGap > 0)) {
+          const key = `f${fileIndex}fold${hunkIndex}`
+          out.push({
+            key,
+            file,
+            fileIndex,
+            type: 'fold',
+            fold: {
+              oldStart: prevOldEnd + 1,
+              oldEnd: Math.max(hunk.oldStart - 1, prevOldEnd),
+              newStart: prevNewEnd + 1,
+              newEnd: Math.max(hunk.newStart - 1, prevNewEnd),
+            },
+            count: Math.max(oldGap, newGap, 0),
+            state: foldRows.get(key),
+          })
+        }
+        prevOldEnd = hunkOldEnd(hunk)
+        prevNewEnd = hunkNewEnd(hunk)
         out.push({ key: `f${fileIndex}h${hunkIndex}`, file, fileIndex, type: 'hunk', hunk })
         hunk.lines.forEach((line, lineIndex) => {
           out.push({ key: `f${fileIndex}h${hunkIndex}l${lineIndex}`, file, fileIndex, type: 'line', hunk, line })
@@ -224,7 +357,7 @@ export function DiffView({ diff, untrackedPath, untrackedContent }: DiffViewProp
       })
     })
     return out
-  }, [parsed, expandedFiles])
+  }, [parsed, expandedFiles, foldRows, foldSource])
 
   const hidden = rows.length - MAX_DIFF_ROWS
   const capped = hidden > 0 && !expanded
@@ -235,6 +368,23 @@ export function DiffView({ diff, untrackedPath, untrackedContent }: DiffViewProp
 
   if (rows.length === 0) return null
 
+  const renderLine = (line: DiffLine, key: string): ReactNode => {
+    const lineClass = line.kind === 'del' ? css.gitDiffDel : line.kind === 'add' ? css.gitDiffAdd : line.kind === 'meta' ? css.gitDiffMeta : css.gitDiffCtx
+    return (
+      <div key={key} className={clsx(css.gitDiffLine, lineClass)}>
+        {line.kind === 'meta'
+          ? <span className={css.gitDiffMetaText}>{line.text}</span>
+          : (
+            <>
+              <span className={css.gitDiffNum}>{line.oldNum ?? ''}</span>
+              <span className={css.gitDiffNum}>{line.newNum ?? ''}</span>
+              <span className={css.gitDiffCode}>{line.text}</span>
+            </>
+          )}
+      </div>
+    )
+  }
+
   const renderRow = (row: (typeof rows)[number]): ReactNode => {
     if (row.type === 'path') {
       const tag = fileTag(row.file)
@@ -274,21 +424,26 @@ export function DiffView({ diff, untrackedPath, untrackedContent }: DiffViewProp
         </div>
       )
     }
-    const line = row.line!
-    const lineClass = line.kind === 'del' ? css.gitDiffDel : line.kind === 'add' ? css.gitDiffAdd : line.kind === 'meta' ? css.gitDiffMeta : css.gitDiffCtx
-    return (
-      <div key={row.key} className={clsx(css.gitDiffLine, lineClass)}>
-        {line.kind === 'meta'
-          ? <span className={css.gitDiffMetaText}>{line.text}</span>
-          : (
-            <>
-              <span className={css.gitDiffNum}>{line.oldNum ?? ''}</span>
-              <span className={css.gitDiffNum}>{line.newNum ?? ''}</span>
-              <span className={css.gitDiffCode}>{line.text}</span>
-            </>
-          )}
-      </div>
-    )
+    if (row.type === 'fold') {
+      // Resolved: the chip is replaced by the materialized context rows.
+      if (row.state?.status === 'ready') {
+        return <Fragment key={row.key}>{row.state.rows.map((line, index) => renderLine(line, `${row.key}r${index}`))}</Fragment>
+      }
+      const loading = row.state?.status === 'loading'
+      const failed = row.state?.status === 'failed'
+      return (
+        <button
+          key={row.key}
+          type="button"
+          className={clsx(css.gitFoldRow, failed && css.gitFoldRowFailed)}
+          disabled={loading || failed}
+          onClick={() => { resolveFold(row.key, row.file, row.fold) }}
+        >
+          {failed ? t('gitFoldFailed') : loading ? t('gitFoldLoading') : t('gitFoldExpand', { count: row.count })}
+        </button>
+      )
+    }
+    return renderLine(row.line!, row.key)
   }
 
   return (

package/src/client/EditorHost.tsx

@@ -107,9 +107,12 @@ export function EditorHost(props: {
   expanded: string[]
   revealed: string[]
   onToggleDir: (path: string) => void
-  onReferenceFile: (path: string) => void
+  onReferenceFile: (path: string, isDir: boolean) => void
+  /** Tree-row mutations (passed through to the file tree; absent → hidden). */
+  onPathRenamed?: (oldPath: string, newPath: string) => void
+  onPathRemoved?: (path: string) => void
 }) {
-  const { ctx, store, scope, tab, expanded, revealed, onToggleDir, onReferenceFile } = props
+  const { ctx, store, scope, tab, expanded, revealed, onToggleDir, onReferenceFile, onPathRenamed, onPathRemoved } = props
   const path = tab.path ?? ''
   // A folder window: the model's `sidebar_open` (or any caller) opens a
   // directory as an editor tab carrying `meta.dir: true` with the directory
@@ -339,6 +342,8 @@ export function EditorHost(props: {
           onOpenWith={openWith}
           onToggleOpenWithPin={toggleOpenWithPin}
           onReferenceFile={onReferenceFile}
+          onPathRenamed={onPathRenamed}
+          onPathRemoved={onPathRemoved}
         />
       </div>
     )
@@ -432,6 +437,8 @@ export function EditorHost(props: {
               onOpenWith={openWith}
               onToggleOpenWithPin={toggleOpenWithPin}
               onReferenceFile={onReferenceFile}
+              onPathRenamed={onPathRenamed}
+              onPathRemoved={onPathRemoved}
             />
           </div>
         )}

package/src/client/FileTree.tsx

@@ -25,7 +25,7 @@ import { createPortal } from 'react-dom'
 import clsx from 'clsx'
 import {
   IconChevronRightOutline14, IconCodeOutline16, IconCopyOutline16, IconDownloadOutline16,
-  IconLinkOutline16, Menu, type MenuEntry, type MenuItem, writeClipboard,
+  IconLinkOutline16, Menu, type MenuEntry, type MenuItem, Modal, Button, writeClipboard,
 } from '@deepseek-ai/dsh-client-ui-primitives'
 import { SiCursor, SiZedindustries } from 'react-icons/si'
 import { VscFile, VscFolder, VscFolderOpened, VscLinkExternal, VscPin, VscPinned } from 'react-icons/vsc'
@@ -127,22 +127,32 @@ export function FileTree(props: {
   onOpenWith?: (targetId: string, path: string) => void
   /** Toggle one target's pinned state (the submenu row's pushpin). */
   onToggleOpenWithPin?: (targetId: string) => void
-  /** Insert `@<relative path>` into the composer draft. */
-  onReferenceFile: (path: string) => void
+  /** Insert `@<relative path>` into the composer draft (file vs directory). */
+  onReferenceFile: (path: string, isDir: boolean) => void
   /** Bump to wipe the level cache and reload the visible set. */
   refreshTick: number
   /** Upload into `dir` (absolute, inside the workspace); runs in the caller. */
   onUploadRequest: (dir: string, items: UploadItem[]) => void
   /** True while an upload is in flight (drops are ignored). */
   busy: boolean
+  /** A tree row was renamed (retarget open tabs; absent → no rename entry). */
+  onPathRenamed?: (oldPath: string, newPath: string) => void
+  /** A tree row was removed (close affected tabs; absent → no delete entry). */
+  onPathRemoved?: (path: string) => void
 }) {
-  const { sessionId, cwd, expanded, revealed, onToggle, onOpenFile, onOpenFileNewTab, onOpenFileSide, openWithTargets, openWithPinned, openWithSsh, onOpenWith, onToggleOpenWithPin, onReferenceFile, refreshTick, onUploadRequest, busy } = props
+  const { sessionId, cwd, expanded, revealed, onToggle, onOpenFile, onOpenFileNewTab, onOpenFileSide, openWithTargets, openWithPinned, openWithSsh, onOpenWith, onToggleOpenWithPin, onReferenceFile, refreshTick, onUploadRequest, busy, onPathRenamed, onPathRemoved } = props
   const [data, setData] = useState<Record<string, LevelData>>({})
   const dataRef = useRef(data)
   /** The row whose path was just copied ("copied" label replaces its button). */
   const [copiedPath, setCopiedPath] = useState<string | null>(null)
   /** Open context menu: the row path (and whether it is a directory) plus the cursor position. */
   const [rowMenu, setRowMenu] = useState<{ path: string; isDir: boolean; x: number; y: number } | null>(null)
+  /** The row being renamed inline (pre-filled base name; Enter commits). */
+  const [renaming, setRenaming] = useState<{ path: string; name: string } | null>(null)
+  /** The row pending delete confirmation (the Modal owns the final call). */
+  const [deleting, setDeleting] = useState<{ path: string; isDir: boolean } | null>(null)
+  /** The last mutation failure (dismissable strip above the tree). */
+  const [mutationError, setMutationError] = useState<string | null>(null)
   /** Whether a file drag hovers the tree (drives the portaled drop zone). */
   const [dropOver, setDropOver] = useState(false)
   /** The directory a drag is hovering right now (null = body, drop to root). */
@@ -297,6 +307,77 @@ export function FileTree(props: {
     })
   }, [])
 
+  /** Re-fetch one directory level (a mutation changed it on disk). */
+  const reloadDir = useCallback((dir: string) => {
+    dataRef.current = { ...dataRef.current, [dir]: {} }
+    setData(dataRef.current)
+    api.fsTree({ sessionId, cwd }, dir).then((listing) => {
+      storeLevel(dir, { entries: listing.entries })
+    }).catch((error: unknown) => {
+      storeLevel(dir, { error: error instanceof Error ? error.message : String(error) })
+    })
+  }, [sessionId, cwd, storeLevel])
+
+  /** Commit the inline rename: single-segment name; the row reloads from
+   *  its parent and open tabs retarget through the caller. */
+  const commitRename = (target: { path: string; name: string }): void => {
+    const name = target.name.trim()
+    if (name === '' || name.includes('/') || name.includes('\\')) {
+      setMutationError(t('renameInvalid'))
+      return
+    }
+    api.fsRename({ sessionId, cwd }, target.path, name).then(({ path }) => {
+      setRenaming(null)
+      reloadDir(parentOf(target.path) ?? path)
+      onPathRenamed?.(target.path, path)
+    }).catch((error: unknown) => {
+      setMutationError(error instanceof Error ? error.message : String(error))
+    })
+  }
+
+  /** Commit the confirmed delete: the parent reloads and the caller closes
+   *  every open tab at or under the removed path. */
+  const commitDelete = (target: { path: string }): void => {
+    api.fsRemove({ sessionId, cwd }, target.path).then(() => {
+      setDeleting(null)
+      reloadDir(parentOf(target.path) ?? target.path)
+      onPathRemoved?.(target.path)
+    }).catch((error: unknown) => {
+      setMutationError(error instanceof Error ? error.message : String(error))
+    })
+  }
+
+  /** The inline rename input (auto-focused, pre-selected; Enter/blur commits,
+   *  Esc cancels, an IME composition never triggers the key handlers). */
+  const renameCancelled = useRef(false)
+  const renderRenameInput = (path: string): ReactNode => (
+    <input
+      autoFocus
+      className={css.explorerRenameInput}
+      defaultValue={renaming?.name ?? ''}
+      onClick={(event) => { event.stopPropagation() }}
+      onKeyDown={(event) => {
+        event.stopPropagation()
+        if (event.nativeEvent.isComposing) return
+        if (event.key === 'Enter') {
+          event.preventDefault()
+          if (renaming !== null) commitRename(renaming)
+        } else if (event.key === 'Escape') {
+          event.preventDefault()
+          renameCancelled.current = true
+          setRenaming(null)
+        }
+      }}
+      onBlur={() => {
+        if (renameCancelled.current) {
+          renameCancelled.current = false
+          return
+        }
+        if (renaming !== null) commitRename(renaming)
+      }}
+    />
+  )
+
   /** The row's trailing actions: the @-reference button, or the copied label. */
   const rowActions = (entry: FsEntry): ReactNode => {
     if (copiedPath === entry.path) {
@@ -310,7 +391,7 @@ export function FileTree(props: {
         title={t('referenceFile')}
         onClick={(event) => {
           event.stopPropagation()
-          onReferenceFile(entry.path)
+          onReferenceFile(entry.path, entry.isDir)
         }}
       >
         {t('referenceFile')}
@@ -459,7 +540,9 @@ export function FileTree(props: {
               onContextMenu={(event) => { openRowMenu(event, entry.path, true) }}
             >
               {isOpen ? <VscFolderOpened size={14} /> : <VscFolder size={14} />}
-              <span className={css.explorerName}>{entry.name}</span>
+              {renaming?.path === entry.path
+                ? renderRenameInput(entry.path)
+                : <span className={css.explorerName}>{entry.name}</span>}
               {entry.isSymlink && <IconLinkOutline16 size={12} className={css.explorerSymlink} />}
               {rowActions(entry)}
             </div>
@@ -492,7 +575,9 @@ export function FileTree(props: {
           onContextMenu={(event) => { openRowMenu(event, entry.path, false) }}
         >
           <VscFile size={14} />
-          <span className={css.explorerName}>{entry.name}</span>
+          {renaming?.path === entry.path
+            ? renderRenameInput(entry.path)
+            : <span className={css.explorerName}>{entry.name}</span>}
           {entry.isSymlink && <IconLinkOutline16 size={12} className={css.explorerSymlink} />}
           {rowActions(entry)}
         </div>
@@ -532,7 +617,7 @@ export function FileTree(props: {
                   title={t('referenceFile')}
                   onClick={(event) => {
                     event.stopPropagation()
-                    onReferenceFile(root)
+                    onReferenceFile(root, true)
                   }}
                 >
                   {t('referenceFile')}
@@ -606,6 +691,20 @@ export function FileTree(props: {
           event.target.value = ''
         }}
       />
+      {mutationError !== null && (
+        <div className={clsx(css.explorerRow, css.explorerError)}>
+          <span style={{ flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis' }}>{mutationError}</span>
+          <button
+            type="button"
+            className={css.explorerRef}
+            aria-label={t('dismiss')}
+            title={t('dismiss')}
+            onClick={() => { setMutationError(null) }}
+          >
+            {t('dismiss')}
+          </button>
+        </div>
+      )}
       <Menu
         open={rowMenu !== null}
         onClose={() => { setRowMenu(null) }}
@@ -628,6 +727,18 @@ export function FileTree(props: {
             : []),
           { id: 'relative', label: t('copyRelative'), icon: <IconCopyOutline16 size={16} /> },
           { id: 'absolute', label: t('copyAbsolute'), icon: <IconCopyOutline16 size={16} /> },
+          // Tree mutations (the workspace root row never offers them; the
+          // server refuses too). Absent callbacks keep the entries hidden.
+          ...((onPathRenamed !== undefined && rowMenu !== null && rowMenu.path !== root)
+            || (onPathRemoved !== undefined && rowMenu !== null && rowMenu.path !== root)
+            ? [{ id: 'mutation-sep', type: 'separator' } as MenuEntry]
+            : []),
+          ...(onPathRenamed !== undefined && rowMenu !== null && rowMenu.path !== root
+            ? [{ id: 'rename-row', label: t('rename') }]
+            : []),
+          ...(onPathRemoved !== undefined && rowMenu !== null && rowMenu.path !== root
+            ? [{ id: 'delete-row', label: t('delete') }]
+            : []),
         ]}
         onSelect={(id) => {
           const target = rowMenu
@@ -654,6 +765,15 @@ export function FileTree(props: {
             fileInputRef.current?.click()
             return
           }
+          if (id === 'rename-row') {
+            setMutationError(null)
+            setRenaming({ path: target.path, name: baseName(target.path) })
+            return
+          }
+          if (id === 'delete-row') {
+            setDeleting({ path: target.path, isDir: target.isDir })
+            return
+          }
           copyPath(
             id === 'relative' ? relativeTo(cwd ?? '', target.path) : target.path,
             target.path,
@@ -664,6 +784,29 @@ export function FileTree(props: {
         getAnchorRect={() => (rowMenu === null ? null : new DOMRect(rowMenu.x, rowMenu.y, 0, 0))}
         anchor={<span />}
       />
+      <Modal
+        open={deleting !== null}
+        onClose={() => { setDeleting(null) }}
+        title={deleting === null ? '' : t('deleteTitle', { name: baseName(deleting.path) })}
+        closeLabel={t('cancel')}
+        footer={(
+          <>
+            <Button variant="outline" onClick={() => { setDeleting(null) }}>{t('cancel')}</Button>
+            <Button
+              variant="primary"
+              onClick={() => {
+                const target = deleting
+                if (target === null) return
+                commitDelete(target)
+              }}
+            >
+              {t('delete')}
+            </Button>
+          </>
+        )}
+      >
+        <p className={css.explorerError}>{deleting?.isDir === true ? t('deleteDescDir') : t('deleteDescFile')}</p>
+      </Modal>
     </div>
   )
 }