dsh-explorer 0.0.0-stage → 0.1.1

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/css-modules.d.ts

@@ -0,0 +1,5 @@
+declare module '*.module.css' {
+  const classes: Record<string, string>
+  export default classes
+}
+