dsh-explorer 0.1.0 → 0.1.1

package/src/client/{ExplorerSearch.tsx → components/ExplorerSearch.tsx}

@@ -1,13 +1,21 @@
 import React, { useRef, useEffect } from 'react'
-import css from './explorer.module.css'
+import css from '../explorer.module.css'
 
 interface ExplorerSearchProps {
   value: string
+  loading?: boolean
+  matchCount?: number | null
   onChange: (val: string) => void
   onClose: () => void
 }
 
-export const ExplorerSearch: React.FC<ExplorerSearchProps> = ({ value, onChange, onClose }) => {
+export const ExplorerSearch: React.FC<ExplorerSearchProps> = ({
+  value,
+  loading = false,
+  matchCount = null,
+  onChange,
+  onClose,
+}) => {
   const inputRef = useRef<HTMLInputElement>(null)
 
   useEffect(() => {
@@ -26,17 +34,22 @@ export const ExplorerSearch: React.FC<ExplorerSearchProps> = ({ value, onChange,
         ref={inputRef}
         type="text"
         className={css.searchInput}
-        placeholder="Filter by name (fuzzy)..."
+        placeholder="Search files and folders by name..."
         value={value}
         onChange={(e) => onChange(e.target.value)}
         onKeyDown={handleKeyDown}
       />
+      {loading && <div className={css.searchSpinner} title="Searching workspace..." />}
+      {!loading && matchCount !== null && value.trim() !== '' && (
+        <span className={css.matchCountBadge} title={`${matchCount} matches found`}>
+          {matchCount}
+        </span>
+      )}
       {value && (
-        <button className={css.clearSearchBtn} title="Clear filter" onClick={() => onChange('')}>
+        <button className={css.clearSearchBtn} title="Clear search (Esc)" onClick={() => onChange('')}>
           ✕
         </button>
       )}
     </div>
   )
 }
-

package/src/client/components/TreeNode.tsx

@@ -0,0 +1,384 @@
+import React, { useEffect, useMemo } from 'react'
+import css from '../explorer.module.css'
+import type { FsEntry, FsListing } from '../utils/api.ts'
+import type { ExplorerOptions } from '../utils/options.ts'
+import { ExplorerRow } from './ExplorerRow.tsx'
+
+export interface TreeNodeProps {
+  entry: FsEntry
+  depth: number
+  parentDir: string
+  rootPath: string
+  levels: Record<string, FsListing>
+  expanded: Set<string>
+  selected: Set<string>
+  focusedPath: string | null
+  renamingPath: string | null
+  gitStatusMap: Map<string, string>
+  filterText: string
+  matchingPaths?: Set<string> | null
+  ancestorPaths?: Set<string> | null
+  creating: { parentDir: string; isDir: boolean } | null
+  creatingName: string
+  createInputRef: React.RefObject<HTMLInputElement>
+  options: ExplorerOptions
+  indentStep: number
+  iconSize: number
+  reloadDirectory: (dir: string) => Promise<void>
+  onToggle: (path: string) => void
+  onSelect: (path: string, e: React.MouseEvent) => void
+  onOpenFile: (filePath: string, relPath: string) => void
+  onContextMenu: (entry: FsEntry, relPath: string, e: React.MouseEvent) => void
+  onInsertReference: (relPath: string, isDir: boolean) => void
+  onCopyRelativePath: (relPath: string) => void
+  onStartRename: (path: string) => void
+  onCancelRename: () => void
+  onRenameSubmit: (path: string, newName: string) => void
+  onDelete: (entry: FsEntry, relPath: string) => void
+  onCreatingNameChange: (val: string) => void
+  onCreatingKeyDown: (e: React.KeyboardEvent) => void
+  onCreatingBlur: () => void
+  getRelativePath: (path: string) => string
+}
+
+export const TreeNode: React.FC<TreeNodeProps> = React.memo(({
+  entry,
+  depth,
+  rootPath,
+  levels,
+  expanded,
+  selected,
+  focusedPath,
+  renamingPath,
+  gitStatusMap,
+  filterText,
+  matchingPaths,
+  ancestorPaths,
+  creating,
+  creatingName,
+  createInputRef,
+  options,
+  indentStep,
+  iconSize,
+  reloadDirectory,
+  onToggle,
+  onSelect,
+  onOpenFile,
+  onContextMenu,
+  onInsertReference,
+  onCopyRelativePath,
+  onStartRename,
+  onCancelRename,
+  onRenameSubmit,
+  onDelete,
+  onCreatingNameChange,
+  onCreatingKeyDown,
+  onCreatingBlur,
+  getRelativePath,
+}) => {
+  const relPath = getRelativePath(entry?.path ?? '')
+  const normPathLower = (entry?.path ?? '').replace(/\\/g, '/').toLowerCase()
+  const listing =
+    levels[entry?.path ?? ''] ??
+    levels[(entry?.path ?? '').replace(/\\/g, '/')] ??
+    levels[(entry?.path ?? '').replace(/\//g, '\\')] ??
+    (normPathLower ? Object.entries(levels).find(([k]) => k.replace(/\\/g, '/').toLowerCase() === normPathLower)?.[1] : undefined)
+  const hasLoaded = listing !== undefined
+
+  const compactChain = useMemo(() => {
+    if (!options.compactFolders || !entry?.isDir) return undefined
+    const chain: FsEntry[] = [entry]
+    let curr = entry
+    let currListing = levels[curr.path] ?? levels[curr.path.replace(/\\/g, '/')] ?? levels[curr.path.replace(/\//g, '\\')]
+
+    while (currListing && Array.isArray(currListing.entries)) {
+      const valid = options.showHiddenFiles
+        ? currListing.entries
+        : currListing.entries.filter((c) => c && !c.hidden && !c.name.startsWith('.'))
+      if (valid.length === 1 && valid[0]!.isDir) {
+        const next = valid[0]!
+        chain.push(next)
+        curr = next
+        currListing = levels[curr.path] ?? levels[curr.path.replace(/\\/g, '/')] ?? levels[curr.path.replace(/\//g, '\\')]
+      } else {
+        break
+      }
+    }
+
+    return chain.length > 1 ? chain : undefined
+  }, [options.compactFolders, options.showHiddenFiles, entry, levels])
+
+  const isCompacted = compactChain !== undefined && compactChain.length > 1
+  const effectiveEntry = isCompacted ? compactChain[compactChain.length - 1]! : entry
+  const targetPath = effectiveEntry?.path ?? ''
+  const targetRelPath = getRelativePath(targetPath) || ''
+  const normRel = targetRelPath.replace(/\\/g, '/').replace(/^\.\//, '').replace(/^\/+/, '').toLowerCase()
+  const normRelOrig = (relPath || '').replace(/\\/g, '/').replace(/^\.\//, '').replace(/^\/+/, '').toLowerCase()
+  const normTarget = (targetPath || '').replace(/\\/g, '/').toLowerCase()
+  const normSelf = (entry?.path || '').replace(/\\/g, '/').toLowerCase()
+
+  const isSearchActive = Boolean(filterText && matchingPaths)
+
+  const isDirectMatch = Boolean(
+    isSearchActive &&
+    matchingPaths &&
+    (matchingPaths.has(normRel) ||
+      matchingPaths.has(normRelOrig) ||
+      matchingPaths.has(normTarget) ||
+      matchingPaths.has(normSelf) ||
+      (entry?.path && matchingPaths.has(entry.path)) ||
+      (entry?.path && matchingPaths.has(entry.path.toLowerCase())) ||
+      (targetPath && matchingPaths.has(targetPath)) ||
+      (targetPath && matchingPaths.has(targetPath.toLowerCase())))
+  )
+
+  const isAncestor = Boolean(
+    isSearchActive &&
+    ancestorPaths &&
+    (ancestorPaths.has(normRel) ||
+      ancestorPaths.has(normRelOrig) ||
+      ancestorPaths.has(normTarget) ||
+      ancestorPaths.has(normSelf) ||
+      (entry?.path && ancestorPaths.has(entry.path)) ||
+      (entry?.path && ancestorPaths.has(entry.path.toLowerCase())) ||
+      (targetPath && ancestorPaths.has(targetPath)) ||
+      (targetPath && ancestorPaths.has(targetPath.toLowerCase())))
+  )
+
+  const normTargetLower = (targetPath || '').replace(/\\/g, '/').toLowerCase()
+  const targetListing =
+    levels[targetPath] ??
+    levels[targetPath.replace(/\\/g, '/')] ??
+    levels[targetPath.replace(/\//g, '\\')] ??
+    (normTargetLower ? Object.entries(levels).find(([k]) => k.replace(/\\/g, '/').toLowerCase() === normTargetLower)?.[1] : undefined)
+  const hasTargetLoaded = targetListing !== undefined
+
+  const isExpanded = Boolean(
+    entry?.isDir && (
+      isAncestor ||
+      expanded.has(entry.path) ||
+      expanded.has(targetPath) ||
+      (normSelf && expanded.has(normSelf)) ||
+      (normTarget && expanded.has(normTarget)) ||
+      (entry?.path && expanded.has(entry.path.toLowerCase())) ||
+      (targetPath && expanded.has(targetPath.toLowerCase()))
+    )
+  )
+
+  let shouldRender = true
+  if (!entry || (!options.showHiddenFiles && (entry.hidden || entry.name.startsWith('.')))) {
+    shouldRender = false
+  } else if (isSearchActive) {
+    if (entry.isDir) {
+      if (!isDirectMatch && !isAncestor) {
+        shouldRender = false
+      }
+    } else {
+      if (!isDirectMatch) {
+        shouldRender = false
+      }
+    }
+  } else if (filterText) {
+    const selfMatches =
+      entry.name.toLowerCase().includes(filterText.toLowerCase()) ||
+      relPath.toLowerCase().includes(filterText.toLowerCase())
+    if (!selfMatches && !entry.isDir) {
+      shouldRender = false
+    }
+  }
+
+  const inFlightDirRef = React.useRef<string | null>(null)
+
+  useEffect(() => {
+    if (!shouldRender || !entry || !entry.isDir) return
+    if (isExpanded && !hasTargetLoaded && inFlightDirRef.current !== targetPath) {
+      inFlightDirRef.current = targetPath
+      reloadDirectory(targetPath).finally(() => {
+        if (inFlightDirRef.current === targetPath) {
+          inFlightDirRef.current = null
+        }
+      })
+    }
+  }, [shouldRender, isExpanded, targetPath, entry, hasTargetLoaded, reloadDirectory])
+
+  useEffect(() => {
+    if (!shouldRender || !entry) return
+    if (options.compactFolders && entry.isDir && entry.compact && !hasLoaded) {
+      reloadDirectory(entry.path)
+    }
+  }, [shouldRender, options.compactFolders, entry, hasLoaded, reloadDirectory])
+
+  if (!entry || !shouldRender) {
+    return null
+  }
+
+  const isSel = selected.has(entry.path) || selected.has(targetPath)
+  const isFoc = focusedPath === entry.path || focusedPath === targetPath
+  const status =
+    gitStatusMap?.get(normRel) ??
+    gitStatusMap?.get(normRelOrig) ??
+    gitStatusMap?.get(normTarget) ??
+    gitStatusMap?.get(normSelf)
+
+  const handleToggle = () => {
+    if (isCompacted && targetPath !== entry.path) {
+      const isCurrentlyExpanded = expanded.has(entry.path) || expanded.has(targetPath)
+      if (isCurrentlyExpanded) {
+        if (expanded.has(entry.path)) onToggle(entry.path)
+        if (expanded.has(targetPath)) onToggle(targetPath)
+      } else {
+        onToggle(entry.path)
+        onToggle(targetPath)
+      }
+    } else {
+      onToggle(entry.path)
+    }
+  }
+
+  if (!entry.isDir) {
+    return (
+      <ExplorerRow
+        entry={entry}
+        depth={depth}
+        isExpanded={false}
+        isSelected={isSel}
+        isFocused={isFoc}
+        isRenaming={renamingPath === entry.path}
+        gitStatus={status}
+        relativePath={relPath}
+        indentStep={indentStep}
+        iconSize={iconSize}
+        enableMotion={options.enableMotion}
+        showGitBadges={options.showGitBadges}
+        compactFolders={options.compactFolders}
+        singleClickAction={options.singleClickAction}
+        onToggle={() => {}}
+        onSelect={(e) => onSelect(entry.path, e)}
+        onDoubleClick={() => onOpenFile(entry.path, relPath)}
+        onContextMenu={(e) => onContextMenu(entry, relPath, e)}
+        onInsertReference={() => onInsertReference(relPath, false)}
+        onCopyRelativePath={() => onCopyRelativePath(relPath)}
+        onStartRename={() => onStartRename(entry.path)}
+        onCancelRename={onCancelRename}
+        onRenameSubmit={(newName) => onRenameSubmit(entry.path, newName)}
+        onDelete={() => onDelete(entry, relPath)}
+      />
+    )
+  }
+
+  const visibleChildren = hasTargetLoaded && Array.isArray(targetListing?.entries)
+    ? options.showHiddenFiles
+      ? targetListing.entries
+      : targetListing.entries.filter((c) => c && !c.hidden && !c.name.startsWith('.'))
+    : []
+
+  const isRenamingFolder = renamingPath === entry.path || (isCompacted && renamingPath === targetPath)
+
+  return (
+    <div className={css.folderGroup}>
+      <ExplorerRow
+        entry={entry}
+        depth={depth}
+        isExpanded={isExpanded}
+        isSelected={isSel}
+        isFocused={isFoc}
+        isRenaming={isRenamingFolder}
+        gitStatus={status}
+        relativePath={targetRelPath}
+        compactChain={compactChain}
+        indentStep={indentStep}
+        iconSize={iconSize}
+        enableMotion={options.enableMotion}
+        showGitBadges={options.showGitBadges}
+        compactFolders={options.compactFolders}
+        singleClickAction={options.singleClickAction}
+        onToggle={handleToggle}
+        onSelect={(e) => onSelect(targetPath, e)}
+        onContextMenu={(e) => onContextMenu(entry, targetRelPath, e)}
+        onInsertReference={() => onInsertReference(targetRelPath, true)}
+        onCopyRelativePath={() => onCopyRelativePath(targetRelPath)}
+        onStartRename={() => onStartRename(isCompacted ? targetPath : entry.path)}
+        onCancelRename={onCancelRename}
+        onRenameSubmit={(newName) => onRenameSubmit(isCompacted ? targetPath : entry.path, newName)}
+        onDelete={() => onDelete(entry, targetRelPath)}
+      />
+
+      <div
+        className={`${css.folderChildren} ${isExpanded ? css.folderChildrenOpen : css.folderChildrenClosed}`}
+        style={!options.enableMotion ? { transition: 'none' } : undefined}
+      >
+        <div className={css.folderChildrenInner}>
+          {creating && (creating.parentDir === entry.path || creating.parentDir === targetPath) && (
+            <div className={css.row} style={{ paddingLeft: `${(depth + 1) * indentStep + 8}px` }}>
+              <span className={css.iconWrap}>{creating.isDir ? '📁' : '📄'}</span>
+              <input
+                ref={createInputRef}
+                autoFocus
+                type="text"
+                className={css.inlineInput}
+                placeholder={creating.isDir ? 'Folder name...' : 'File name...'}
+                value={creatingName}
+                onChange={(e) => onCreatingNameChange(e.target.value)}
+                onKeyDown={onCreatingKeyDown}
+                onBlur={onCreatingBlur}
+              />
+            </div>
+          )}
+          {visibleChildren.length > 0 ? (
+            visibleChildren.map((child) => (
+              <TreeNode
+                key={child.path}
+                entry={child}
+                depth={depth + 1}
+                parentDir={targetPath}
+                rootPath={rootPath}
+                levels={levels}
+                expanded={expanded}
+                selected={selected}
+                focusedPath={focusedPath}
+                renamingPath={renamingPath}
+                gitStatusMap={gitStatusMap}
+                filterText={filterText}
+                matchingPaths={matchingPaths}
+                ancestorPaths={ancestorPaths}
+                creating={creating}
+                creatingName={creatingName}
+                createInputRef={createInputRef}
+                options={options}
+                indentStep={indentStep}
+                iconSize={iconSize}
+                reloadDirectory={reloadDirectory}
+                onToggle={onToggle}
+                onSelect={onSelect}
+                onOpenFile={onOpenFile}
+                onContextMenu={onContextMenu}
+                onInsertReference={onInsertReference}
+                onCopyRelativePath={onCopyRelativePath}
+                onStartRename={onStartRename}
+                onCancelRename={onCancelRename}
+                onRenameSubmit={onRenameSubmit}
+                onDelete={onDelete}
+                onCreatingNameChange={onCreatingNameChange}
+                onCreatingKeyDown={onCreatingKeyDown}
+                onCreatingBlur={onCreatingBlur}
+                getRelativePath={getRelativePath}
+              />
+            ))
+          ) : !isSearchActive && hasTargetLoaded && targetListing.entries && targetListing.entries.length === 0 ? (
+            <div
+              className={css.row}
+              style={{
+                paddingLeft: `${(depth + 1) * indentStep + 8}px`,
+                opacity: 0.45,
+                fontStyle: 'italic',
+                fontSize: '12px',
+              }}
+            >
+              Empty folder
+            </div>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  )
+})

package/src/client/explorer.module.css

@@ -17,40 +17,47 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 6px 12px;
-  font-size: 11px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
+  padding: 8px 10px;
+  min-height: 38px;
+  font-size: 11.5px;
+  font-weight: 600;
   color: var(--dsh-fg-muted, #858585);
   border-bottom: 1px solid var(--dsh-border, rgba(255, 255, 255, 0.08));
   flex-shrink: 0;
+  gap: 8px;
 }
 
 .headerTitle {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  min-width: 0;
+  flex: 1;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 11px;
+  color: var(--dsh-fg-base, #cccccc);
+  letter-spacing: normal;
 }
 
 .headerActions {
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: 3px;
+  flex-shrink: 0;
 }
 
 .iconBtn {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 22px;
-  height: 22px;
-  border-radius: 4px;
+  width: 26px;
+  height: 26px;
+  border-radius: 5px;
   border: none;
   background: transparent;
   color: inherit;
   cursor: pointer;
-  opacity: 0.75;
+  opacity: 0.8;
   transition: opacity 0.15s cubic-bezier(0.2, 0, 0, 1), background-color 0.15s cubic-bezier(0.2, 0, 0, 1), transform 0.12s ease;
 }
 
@@ -120,6 +127,32 @@
   opacity: 1;
 }
 
+.searchSpinner {
+  width: 13px;
+  height: 13px;
+  border: 2px solid rgba(255, 255, 255, 0.2);
+  border-top-color: #007fd4;
+  border-radius: 50%;
+  animation: searchSpin 0.6s linear infinite;
+  flex-shrink: 0;
+}
+
+@keyframes searchSpin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.matchCountBadge {
+  font-size: 11px;
+  opacity: 0.7;
+  background: var(--dsh-badge-bg, rgba(255, 255, 255, 0.08));
+  border-radius: 3px;
+  padding: 1px 6px;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
 .treeBody {
   flex: 1;
   overflow-y: auto;
@@ -626,3 +659,175 @@
 .switchKnobActive {
   transform: translateX(14px);
 }
+
+.modalOverlay {
+  position: absolute;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.65);
+  backdrop-filter: blur(2px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1200;
+  padding: 16px;
+  animation: modalFadeIn 0.15s cubic-bezier(0, 0, 0.2, 1);
+}
+
+@keyframes modalFadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.modalCard {
+  background-color: var(--dsh-bg-elevated, #202020);
+  border: 1px solid var(--dsh-border, rgba(255, 255, 255, 0.14));
+  border-radius: 8px;
+  width: 100%;
+  max-width: 320px;
+  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65), 0 2px 10px rgba(0, 0, 0, 0.45);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  animation: modalCardScale 0.16s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes modalCardScale {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+.modalHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 14px;
+  background-color: rgba(0, 0, 0, 0.25);
+  border-bottom: 1px solid var(--dsh-border, rgba(255, 255, 255, 0.08));
+}
+
+.modalTitleWrap {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  font-size: 12px;
+  font-weight: 600;
+  color: #ff5252;
+  letter-spacing: 0.02em;
+}
+
+.modalBody {
+  padding: 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  font-size: 12px;
+  color: var(--dsh-fg-base, #cccccc);
+  line-height: 1.45;
+}
+
+.modalItemPreview {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 10px;
+  background-color: rgba(0, 0, 0, 0.25);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 6px;
+}
+
+.modalItemInfo {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  flex: 1;
+}
+
+.modalItemName {
+  font-weight: 600;
+  color: #ffffff;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.modalItemPath {
+  font-size: 10.5px;
+  color: var(--dsh-fg-muted, #858585);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.modalWarning {
+  font-size: 11px;
+  color: #e0a443;
+  line-height: 1.35;
+}
+
+.modalErrorBanner {
+  padding: 6px 10px;
+  border-radius: 4px;
+  background-color: rgba(244, 67, 54, 0.15);
+  border: 1px solid rgba(244, 67, 54, 0.3);
+  color: #ff8a80;
+  font-size: 11.5px;
+}
+
+.modalFooter {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 10px 14px;
+  background-color: rgba(0, 0, 0, 0.2);
+  border-top: 1px solid var(--dsh-border, rgba(255, 255, 255, 0.06));
+}
+
+.modalBtnCancel {
+  padding: 5px 12px;
+  font-size: 12px;
+  font-weight: 500;
+  border-radius: 4px;
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  background: transparent;
+  color: var(--dsh-fg-base, #cccccc);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.modalBtnCancel:hover {
+  background-color: rgba(255, 255, 255, 0.08);
+  color: #ffffff;
+}
+
+.modalBtnDanger {
+  padding: 5px 14px;
+  font-size: 12px;
+  font-weight: 600;
+  border-radius: 4px;
+  border: none;
+  background-color: #d32f2f;
+  color: #ffffff;
+  cursor: pointer;
+  transition: background-color 0.15s ease, opacity 0.15s ease;
+}
+
+.modalBtnDanger:hover {
+  background-color: #e53935;
+}
+
+.modalBtnDanger:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}