dsh-explorer 0.0.0-stage → 0.1.1

package/src/client/components/ExplorerOptionsModal.tsx

@@ -0,0 +1,230 @@
+import React, { useEffect, useRef } from 'react'
+import css from '../explorer.module.css'
+import type { ExplorerOptions, ExplorerDensity, SingleClickAction } from '../utils/options.ts'
+
+interface ExplorerOptionsModalProps {
+  options: ExplorerOptions
+  onChange: (updated: Partial<ExplorerOptions>) => void
+  onReset: () => void
+  onClose: () => void
+}
+
+export const ExplorerOptionsModal: React.FC<ExplorerOptionsModalProps> = ({
+  options,
+  onChange,
+  onReset,
+  onClose,
+}) => {
+  const popoverRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const handleMouseDown = (e: MouseEvent) => {
+      if (popoverRef.current && !popoverRef.current.contains(e.target as Node)) {
+        onClose()
+      }
+    }
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose()
+      }
+    }
+
+    document.addEventListener('mousedown', handleMouseDown, true)
+    document.addEventListener('keydown', handleKeyDown, true)
+    return () => {
+      document.removeEventListener('mousedown', handleMouseDown, true)
+      document.removeEventListener('keydown', handleKeyDown, true)
+    }
+  }, [onClose])
+
+  const handleDensityChange = (density: ExplorerDensity) => {
+    onChange({ density })
+  }
+
+  const handleScaleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const scale = parseFloat(e.target.value)
+    if (!Number.isNaN(scale)) {
+      onChange({ scale: Math.round(scale * 100) / 100 })
+    }
+  }
+
+  const handleActionChange = (action: SingleClickAction) => {
+    onChange({ singleClickAction: action })
+  }
+
+  return (
+    <div ref={popoverRef} className={css.optionsPopover}>
+      <div className={css.optionsHeader}>
+        <div className={css.optionsHeaderTitle}>
+          <svg width="13" height="13" viewBox="0 0 16 16" fill="currentColor" style={{ marginRight: '6px' }}>
+            <path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z" />
+          </svg>
+          EXPLORER OPTIONS
+        </div>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
+          <button className={css.optionsIconBtn} title="Reset to defaults" onClick={onReset}>
+            <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor">
+              <path d="M13.65 2.35A7.958 7.958 0 0 0 8 0a8 8 0 1 0 8 8h-2a6 6 0 1 1-1.76-4.24l-2.24 2.24H16V0l-2.35 2.35z" />
+            </svg>
+          </button>
+          <button className={css.optionsIconBtn} title="Close" onClick={onClose}>
+            <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor">
+              <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      <div className={css.optionsBody}>
+        <div className={css.optionsSection}>
+          <div className={css.optionsSectionTitle}>Scale & Density</div>
+          <div className={css.segmentGroup}>
+            <button
+              type="button"
+              className={`${css.segmentBtn} ${options.density === 'compact' ? css.segmentBtnActive : ''}`}
+              onClick={() => handleDensityChange('compact')}
+            >
+              Compact
+            </button>
+            <button
+              type="button"
+              className={`${css.segmentBtn} ${options.density === 'normal' ? css.segmentBtnActive : ''}`}
+              onClick={() => handleDensityChange('normal')}
+            >
+              Normal
+            </button>
+            <button
+              type="button"
+              className={`${css.segmentBtn} ${options.density === 'relaxed' ? css.segmentBtnActive : ''}`}
+              onClick={() => handleDensityChange('relaxed')}
+            >
+              Relaxed
+            </button>
+          </div>
+
+          <div className={css.optionsRow} style={{ marginTop: '6px' }}>
+            <div className={css.optionsLabelWrap}>
+              <span className={css.optionsLabel}>Zoom Scale</span>
+              <span className={css.optionsSubLabel}>Resize tree text and icons</span>
+            </div>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
+              <span className={css.optionsBadge}>{Math.round(options.scale * 100)}%</span>
+              {options.scale !== 1.0 && (
+                <button
+                  type="button"
+                  className={css.optionsMiniBtn}
+                  title="Reset scale to 100%"
+                  onClick={() => onChange({ scale: 1.0 })}
+                >
+                  1x
+                </button>
+              )}
+            </div>
+          </div>
+          <input
+            type="range"
+            min="0.75"
+            max="1.35"
+            step="0.05"
+            value={options.scale}
+            onChange={handleScaleChange}
+            className={css.optionsSlider}
+          />
+        </div>
+
+        <div className={css.optionsSection}>
+          <div className={css.optionsSectionTitle}>Motion & Transitions</div>
+          <div className={css.optionsRow}>
+            <div className={css.optionsLabelWrap}>
+              <span className={css.optionsLabel}>Smooth Animations</span>
+              <span className={css.optionsSubLabel}>Fluid folder collapse & icon turns</span>
+            </div>
+            <div
+              className={`${css.switch} ${options.enableMotion ? css.switchActive : ''}`}
+              onClick={() => onChange({ enableMotion: !options.enableMotion })}
+              role="switch"
+              aria-checked={options.enableMotion}
+            >
+              <div className={`${css.switchKnob} ${options.enableMotion ? css.switchKnobActive : ''}`} />
+            </div>
+          </div>
+        </div>
+
+        <div className={css.optionsSection}>
+          <div className={css.optionsSectionTitle}>Workspace View</div>
+
+          <div className={css.optionsRow}>
+            <div className={css.optionsLabelWrap}>
+              <span className={css.optionsLabel}>Show Hidden Files</span>
+              <span className={css.optionsSubLabel}>Include dotfiles and config directories</span>
+            </div>
+            <div
+              className={`${css.switch} ${options.showHiddenFiles ? css.switchActive : ''}`}
+              onClick={() => onChange({ showHiddenFiles: !options.showHiddenFiles })}
+              role="switch"
+              aria-checked={options.showHiddenFiles}
+            >
+              <div className={`${css.switchKnob} ${options.showHiddenFiles ? css.switchKnobActive : ''}`} />
+            </div>
+          </div>
+
+          <div className={css.optionsRow}>
+            <div className={css.optionsLabelWrap}>
+              <span className={css.optionsLabel}>Git Status Indicators</span>
+              <span className={css.optionsSubLabel}>Highlight modified & untracked files</span>
+            </div>
+            <div
+              className={`${css.switch} ${options.showGitBadges ? css.switchActive : ''}`}
+              onClick={() => onChange({ showGitBadges: !options.showGitBadges })}
+              role="switch"
+              aria-checked={options.showGitBadges}
+            >
+              <div className={`${css.switchKnob} ${options.showGitBadges ? css.switchKnobActive : ''}`} />
+            </div>
+          </div>
+
+          <div className={css.optionsRow}>
+            <div className={css.optionsLabelWrap}>
+              <span className={css.optionsLabel}>Compact Folders</span>
+              <span className={css.optionsSubLabel}>Chain single-child directory paths</span>
+            </div>
+            <div
+              className={`${css.switch} ${options.compactFolders ? css.switchActive : ''}`}
+              onClick={() => onChange({ compactFolders: !options.compactFolders })}
+              role="switch"
+              aria-checked={options.compactFolders}
+            >
+              <div className={`${css.switchKnob} ${options.compactFolders ? css.switchKnobActive : ''}`} />
+            </div>
+          </div>
+        </div>
+
+        <div className={css.optionsSection}>
+          <div className={css.optionsSectionTitle}>Interaction</div>
+          <div className={css.optionsRow}>
+            <div className={css.optionsLabelWrap}>
+              <span className={css.optionsLabel}>File Click Behavior</span>
+              <span className={css.optionsSubLabel}>Direct action when clicking a file</span>
+            </div>
+          </div>
+          <div className={css.segmentGroup} style={{ marginTop: '4px' }}>
+            <button
+              type="button"
+              className={`${css.segmentBtn} ${options.singleClickAction === 'select' ? css.segmentBtnActive : ''}`}
+              onClick={() => handleActionChange('select')}
+            >
+              Select / Focus
+            </button>
+            <button
+              type="button"
+              className={`${css.segmentBtn} ${options.singleClickAction === 'mention' ? css.segmentBtnActive : ''}`}
+              onClick={() => handleActionChange('mention')}
+            >
+              Insert @Mention
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/client/components/ExplorerRow.tsx

@@ -0,0 +1,258 @@
+import React, { useState, useRef, useEffect } from 'react'
+import css from '../explorer.module.css'
+import type { FsEntry } from '../utils/api.ts'
+import type { SingleClickAction } from '../utils/options.ts'
+import { renderFileIcon } from '../utils/vscode-theme.tsx'
+import { setupDragStart, setupDragEnd, type DragExplorerItem } from '../utils/drag-drop.ts'
+
+interface ExplorerRowProps {
+  entry: FsEntry
+  depth: number
+  isExpanded: boolean
+  isSelected: boolean
+  isFocused: boolean
+  isRenaming?: boolean
+  gitStatus?: string
+  relativePath: string
+  compactChain?: FsEntry[]
+  indentStep?: number
+  iconSize?: number
+  enableMotion?: boolean
+  showGitBadges?: boolean
+  compactFolders?: boolean
+  singleClickAction?: SingleClickAction
+  onToggle: () => void
+  onSelect: (e: React.MouseEvent) => void
+  onDoubleClick?: () => void
+  onContextMenu: (e: React.MouseEvent) => void
+  onInsertReference: () => void
+  onCopyRelativePath: () => void
+  onStartRename?: () => void
+  onCancelRename?: () => void
+  onRenameSubmit: (newName: string) => void
+  onDelete: () => void
+}
+
+export const ExplorerRow: React.FC<ExplorerRowProps> = ({
+  entry,
+  depth,
+  isExpanded,
+  isSelected,
+  isFocused,
+  isRenaming = false,
+  gitStatus,
+  relativePath,
+  compactChain,
+  indentStep = 16,
+  iconSize = 16,
+  enableMotion = true,
+  showGitBadges = true,
+  compactFolders = true,
+  singleClickAction = 'select',
+  onToggle,
+  onSelect,
+  onDoubleClick,
+  onContextMenu,
+  onInsertReference,
+  onCopyRelativePath,
+  onStartRename,
+  onCancelRename,
+  onRenameSubmit,
+  onDelete,
+}) => {
+  const [renameVal, setRenameVal] = useState(entry.name)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    if (isRenaming) {
+      setRenameVal(entry.name)
+      requestAnimationFrame(() => {
+        if (inputRef.current) {
+          inputRef.current.focus()
+          const dotIndex = entry.isDir ? -1 : entry.name.lastIndexOf('.')
+          if (dotIndex > 0) {
+            inputRef.current.setSelectionRange(0, dotIndex)
+          } else {
+            inputRef.current.select()
+          }
+        }
+      })
+    }
+  }, [isRenaming, entry.name, entry.isDir])
+
+  const handleDragStart = (e: React.DragEvent) => {
+    const item: DragExplorerItem = {
+      path: entry.path,
+      relativePath,
+      isDir: entry.isDir,
+      name: entry.name,
+    }
+    setupDragStart(e, [item])
+  }
+
+  const handleRenameKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      e.stopPropagation()
+      const trimmed = renameVal.trim()
+      if (trimmed && trimmed !== entry.name) {
+        onRenameSubmit(trimmed)
+      } else {
+        onCancelRename?.()
+      }
+    } else if (e.key === 'Escape') {
+      e.stopPropagation()
+      setRenameVal(entry.name)
+      onCancelRename?.()
+    }
+  }
+
+  const handleRenameBlur = () => {
+    const trimmed = renameVal.trim()
+    if (trimmed && trimmed !== entry.name) {
+      onRenameSubmit(trimmed)
+    } else {
+      onCancelRename?.()
+    }
+  }
+
+  const displayName = compactFolders && compactChain && compactChain.length > 1
+    ? compactChain.map((c) => c.name).join('/')
+    : (compactFolders && entry.compactName
+      ? entry.compactName
+      : entry.name)
+
+  let gitClass = ''
+  let gitLetter = ''
+  if (gitStatus) {
+    if (gitStatus.includes('M')) {
+      gitClass = css.gitModified
+      gitLetter = 'M'
+    } else if (gitStatus.includes('?') || gitStatus.includes('A')) {
+      gitClass = css.gitUntracked
+      gitLetter = 'U'
+    } else if (gitStatus.includes('D')) {
+      gitClass = css.gitDeleted
+      gitLetter = 'D'
+    } else if (gitStatus.includes('R')) {
+      gitClass = css.gitModified
+      gitLetter = 'R'
+    }
+  }
+
+  const isIgnored = gitStatus?.includes('!')
+
+  return (
+    <div
+      className={`${css.row} ${isSelected ? css.rowSelected : ''} ${isFocused ? css.rowFocused : ''}`}
+      style={{ paddingLeft: `${depth * indentStep + 8}px` }}
+      onClick={(e) => {
+        if (isRenaming) return
+        onSelect(e)
+        if (entry.isDir) {
+          onToggle()
+        } else if (singleClickAction === 'mention') {
+          onInsertReference()
+        }
+      }}
+      onDoubleClick={(e) => {
+        if (isRenaming) return
+        if (!entry.isDir) {
+          e.stopPropagation()
+          onDoubleClick?.()
+        }
+      }}
+      onContextMenu={onContextMenu}
+      draggable={!isRenaming}
+      onDragStart={handleDragStart}
+      onDragEnd={setupDragEnd}
+    >
+      {Array.from({ length: depth }).map((_, i) => (
+        <span
+          key={i}
+          className={css.indentGuide}
+          style={{ left: `${i * indentStep + 15}px` }}
+        />
+      ))}
+
+      <span
+        className={`${css.chevron} ${isExpanded ? css.chevronExpanded : ''} ${!entry.isDir ? css.chevronHidden : ''}`}
+        style={!enableMotion ? { transition: 'none' } : undefined}
+        onClick={(e) => {
+          e.stopPropagation()
+          onToggle()
+        }}
+      >
+        <svg width="10" height="10" viewBox="0 0 16 16" fill="currentColor">
+          <path d="M6 3.5L10.5 8 6 12.5V3.5Z" />
+        </svg>
+      </span>
+
+      <span className={css.iconWrap}>
+        {renderFileIcon(entry.name, entry.isDir, isExpanded, iconSize)}
+      </span>
+
+      {isRenaming ? (
+        <input
+          ref={inputRef}
+          type="text"
+          className={css.inlineInput}
+          value={renameVal}
+          onChange={(e) => setRenameVal(e.target.value)}
+          onKeyDown={handleRenameKeyDown}
+          onBlur={handleRenameBlur}
+          onClick={(e) => e.stopPropagation()}
+        />
+      ) : (
+        <span
+          className={`${css.label} ${isIgnored ? css.labelDimmed : ''} ${showGitBadges ? gitClass : ''}`}
+          title={relativePath}
+        >
+          {displayName}
+        </span>
+      )}
+
+      {showGitBadges && gitLetter && <span className={`${css.gitBadge} ${gitClass}`}>{gitLetter}</span>}
+
+      {!isRenaming && (
+        <div className={css.hoverActions} onClick={(e) => e.stopPropagation()}>
+          <button
+            className={css.actionBtn}
+            title="Mention in Chat (@)"
+            onClick={(e) => {
+              e.stopPropagation()
+              onInsertReference()
+            }}
+          >
+            <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor">
+              <path d="M8 2a6 6 0 1 0 0 12A6 6 0 0 0 8 2zM7 5h2v2h2v2H9v2H7V9H5V7h2V5z"/>
+            </svg>
+          </button>
+          <button
+            className={css.actionBtn}
+            title="Copy Relative Path"
+            onClick={(e) => {
+              e.stopPropagation()
+              onCopyRelativePath()
+            }}
+          >
+            <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor">
+              <path d="M4 4h6v1H4v9h7v-4h1v5H3V4h1zm3-2h7v7h-1V3.7L7.7 9 7 8.3 12.3 3H7V2z"/>
+            </svg>
+          </button>
+          <button
+            className={css.actionBtn}
+            title="Rename (F2)"
+            onClick={(e) => {
+              e.stopPropagation()
+              onStartRename?.()
+            }}
+          >
+            <svg width="11" height="11" viewBox="0 0 16 16" fill="currentColor">
+              <path d="M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708l-3-3zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207l6.5-6.5zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.499.499 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11l.178-.178z"/>
+            </svg>
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/client/components/ExplorerSearch.tsx

@@ -0,0 +1,55 @@
+import React, { useRef, useEffect } from 'react'
+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,
+  loading = false,
+  matchCount = null,
+  onChange,
+  onClose,
+}) => {
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    inputRef.current?.focus()
+  }, [])
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      onClose()
+    }
+  }
+
+  return (
+    <div className={css.searchBar}>
+      <input
+        ref={inputRef}
+        type="text"
+        className={css.searchInput}
+        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 search (Esc)" onClick={() => onChange('')}>
+          ✕
+        </button>
+      )}
+    </div>
+  )
+}