dsh-explorer 0.0.0-stage → 0.1.1

package/src/client/components/ExplorerContextMenu.tsx

@@ -0,0 +1,157 @@
+import React, { useEffect, useRef } from 'react'
+import css from '../explorer.module.css'
+import type { FsEntry } from '../utils/api.ts'
+
+interface ContextMenuProps {
+  x: number
+  y: number
+  entry: FsEntry
+  relativePath: string
+  onClose: () => void
+  onOpenFile?: () => void
+  onInsertReference: () => void
+  onInsertSnippet: () => void
+  onCopyPath: () => void
+  onCopyRelativePath: () => void
+  onNewFile: () => void
+  onNewFolder: () => void
+  onRename: () => void
+  onDelete: () => void
+}
+
+export const ExplorerContextMenu: React.FC<ContextMenuProps> = ({
+  x,
+  y,
+  entry,
+  relativePath,
+  onClose,
+  onOpenFile,
+  onInsertReference,
+  onInsertSnippet,
+  onCopyPath,
+  onCopyRelativePath,
+  onNewFile,
+  onNewFolder,
+  onRename,
+  onDelete,
+}) => {
+  const menuRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const handleOutsideClick = (e: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        onClose()
+      }
+    }
+    window.addEventListener('mousedown', handleOutsideClick)
+    return () => window.removeEventListener('mousedown', handleOutsideClick)
+  }, [onClose])
+
+  const top = Math.min(y, window.innerHeight - 260)
+  const left = Math.min(x, window.innerWidth - 200)
+
+  return (
+    <div ref={menuRef} className={css.contextMenu} style={{ top, left }}>
+      {!entry.isDir && onOpenFile && (
+        <>
+          <div
+            className={css.menuItem}
+            onClick={() => {
+              onOpenFile()
+              onClose()
+            }}
+          >
+            <span>Open in New Tab</span>
+            <span className={css.menuShortcut}>Double-Click</span>
+          </div>
+          <div className={css.menuDivider} />
+        </>
+      )}
+      <div
+        className={css.menuItem}
+        onClick={() => {
+          onInsertReference()
+          onClose()
+        }}
+      >
+        <span>Insert Mention to Chat</span>
+        <span className={css.menuShortcut}>@</span>
+      </div>
+      {!entry.isDir && (
+        <div
+          className={css.menuItem}
+          onClick={() => {
+            onInsertSnippet()
+            onClose()
+          }}
+        >
+          <span>Insert Code to Chat</span>
+          <span className={css.menuShortcut}>Alt+Drop</span>
+        </div>
+      )}
+      <div className={css.menuDivider} />
+      {entry.isDir && (
+        <>
+          <div
+            className={css.menuItem}
+            onClick={() => {
+              onNewFile()
+              onClose()
+            }}
+          >
+            <span>New File...</span>
+          </div>
+          <div
+            className={css.menuItem}
+            onClick={() => {
+              onNewFolder()
+              onClose()
+            }}
+          >
+            <span>New Folder...</span>
+          </div>
+          <div className={css.menuDivider} />
+        </>
+      )}
+      <div
+        className={css.menuItem}
+        onClick={() => {
+          onCopyRelativePath()
+          onClose()
+        }}
+      >
+        <span>Copy Relative Path</span>
+      </div>
+      <div
+        className={css.menuItem}
+        onClick={() => {
+          onCopyPath()
+          onClose()
+        }}
+      >
+        <span>Copy Path</span>
+      </div>
+      <div className={css.menuDivider} />
+      <div
+        className={css.menuItem}
+        onClick={() => {
+          onRename()
+          onClose()
+        }}
+      >
+        <span>Rename...</span>
+        <span className={css.menuShortcut}>F2</span>
+      </div>
+      <div
+        className={css.menuItem}
+        onClick={() => {
+          onDelete()
+          onClose()
+        }}
+      >
+        <span style={{ color: '#f44336' }}>Delete</span>
+        <span className={css.menuShortcut}>Del</span>
+      </div>
+    </div>
+  )
+}

package/src/client/components/ExplorerDeleteModal.tsx

@@ -0,0 +1,124 @@
+import React, { useEffect, useRef, useState } from 'react'
+import css from '../explorer.module.css'
+import type { FsEntry } from '../utils/api.ts'
+import { renderFileIcon } from '../utils/vscode-theme.tsx'
+
+interface ExplorerDeleteModalProps {
+  entry: FsEntry
+  relativePath: string
+  onConfirm: () => Promise<void>
+  onClose: () => void
+}
+
+export const ExplorerDeleteModal: React.FC<ExplorerDeleteModalProps> = ({
+  entry,
+  relativePath,
+  onConfirm,
+  onClose,
+}) => {
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const cancelBtnRef = useRef<HTMLButtonElement>(null)
+  const modalRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    cancelBtnRef.current?.focus()
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.preventDefault()
+        onClose()
+      }
+    }
+
+    const handleMouseDown = (e: MouseEvent) => {
+      if (modalRef.current && !modalRef.current.contains(e.target as Node)) {
+        onClose()
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyDown)
+    document.addEventListener('mousedown', handleMouseDown)
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown)
+      document.removeEventListener('mousedown', handleMouseDown)
+    }
+  }, [onClose])
+
+  const handleDelete = async () => {
+    if (loading) return
+    setLoading(true)
+    setError(null)
+    try {
+      await onConfirm()
+      onClose()
+    } catch (err: any) {
+      setError(err?.message || 'Failed to delete')
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className={css.modalOverlay}>
+      <div ref={modalRef} className={css.modalCard} role="dialog" aria-modal="true">
+        <div className={css.modalHeader}>
+          <div className={css.modalTitleWrap}>
+            <svg width="15" height="15" viewBox="0 0 16 16" fill="currentColor">
+              <path d="M6.5 1h3a.5.5 0 0 1 .5.5v1H14a.5.5 0 0 1 0 1h-.6l-.8 11.2A2 2 0 0 1 10.6 16H5.4a2 2 0 0 1-2-1.8L2.6 3.5H2a.5.5 0 0 1 0-1h4v-1a.5.5 0 0 1 .5-.5zM7 2v.5h2V2H7zm-2.4 12.4a1 1 0 0 0 1 .6h5.2a1 1 0 0 0 1-.9L12.4 3.5H3.6l.8 10.9h.2zm2.9-9.9a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zm3 0a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5z" />
+            </svg>
+            <span>{entry.isDir ? 'Delete Folder' : 'Delete File'}</span>
+          </div>
+          <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 className={css.modalBody}>
+          <div>
+            Are you sure you want to permanently delete this {entry.isDir ? 'directory' : 'file'}?
+          </div>
+
+          <div className={css.modalItemPreview}>
+            <span className={css.iconWrap}>
+              {renderFileIcon(entry.name, entry.isDir, false, 16)}
+            </span>
+            <div className={css.modalItemInfo}>
+              <div className={css.modalItemName}>{entry.name}</div>
+              <div className={css.modalItemPath}>{relativePath}</div>
+            </div>
+          </div>
+
+          {entry.isDir && (
+            <div className={css.modalWarning}>
+              Warning: All nested files and subdirectories inside this folder will be permanently removed.
+            </div>
+          )}
+
+          {error && <div className={css.modalErrorBanner}>{error}</div>}
+        </div>
+
+        <div className={css.modalFooter}>
+          <button
+            ref={cancelBtnRef}
+            type="button"
+            className={css.modalBtnCancel}
+            onClick={onClose}
+            disabled={loading}
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            className={css.modalBtnDanger}
+            onClick={handleDelete}
+            disabled={loading}
+          >
+            {loading ? 'Deleting...' : 'Delete'}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/client/components/ExplorerEmptyContextMenu.tsx

@@ -0,0 +1,125 @@
+import React, { useEffect, useRef } from 'react'
+import css from '../explorer.module.css'
+
+interface ExplorerEmptyContextMenuProps {
+  x: number
+  y: number
+  onClose: () => void
+  onNewFile: () => void
+  onNewFolder: () => void
+  onToggleSearch: () => void
+  onExpandAll: () => void
+  onCollapseAll: () => void
+  onRefresh: () => void
+  onOpenOptions: () => void
+}
+
+export const ExplorerEmptyContextMenu: React.FC<ExplorerEmptyContextMenuProps> = ({
+  x,
+  y,
+  onClose,
+  onNewFile,
+  onNewFolder,
+  onToggleSearch,
+  onExpandAll,
+  onCollapseAll,
+  onRefresh,
+  onOpenOptions,
+}) => {
+  const menuRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const handleOutsideClick = (e: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        onClose()
+      }
+    }
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose()
+      }
+    }
+    window.addEventListener('mousedown', handleOutsideClick)
+    window.addEventListener('keydown', handleKeyDown)
+    return () => {
+      window.removeEventListener('mousedown', handleOutsideClick)
+      window.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [onClose])
+
+  const top = Math.min(y, window.innerHeight - 250)
+  const left = Math.min(x, window.innerWidth - 200)
+
+  return (
+    <div ref={menuRef} className={css.contextMenu} style={{ top, left }}>
+      <div
+        className={css.menuItem}
+        onClick={() => {
+          onNewFile()
+          onClose()
+        }}
+      >
+        <span>New File...</span>
+      </div>
+      <div
+        className={css.menuItem}
+        onClick={() => {
+          onNewFolder()
+          onClose()
+        }}
+      >
+        <span>New Folder...</span>
+      </div>
+      <div className={css.menuDivider} />
+      <div
+        className={css.menuItem}
+        onClick={() => {
+          onToggleSearch()
+          onClose()
+        }}
+      >
+        <span>Search Files...</span>
+        <span className={css.menuShortcut}>Ctrl+F</span>
+      </div>
+      <div className={css.menuDivider} />
+      <div
+        className={css.menuItem}
+        onClick={() => {
+          onExpandAll()
+          onClose()
+        }}
+      >
+        <span>Expand All</span>
+      </div>
+      <div
+        className={css.menuItem}
+        onClick={() => {
+          onCollapseAll()
+          onClose()
+        }}
+      >
+        <span>Collapse All</span>
+      </div>
+      <div className={css.menuDivider} />
+      <div
+        className={css.menuItem}
+        onClick={() => {
+          onRefresh()
+          onClose()
+        }}
+      >
+        <span>Refresh</span>
+      </div>
+      <div className={css.menuDivider} />
+      <div
+        className={css.menuItem}
+        onClick={() => {
+          onOpenOptions()
+          onClose()
+        }}
+      >
+        <span>Display Preferences...</span>
+      </div>
+    </div>
+  )
+}

package/src/client/components/ExplorerHeader.tsx

@@ -0,0 +1,81 @@
+import React from 'react'
+import css from '../explorer.module.css'
+
+interface ExplorerHeaderProps {
+  title: string
+  searchOpen: boolean
+  optionsOpen: boolean
+  onToggleSearch: () => void
+  onToggleOptions: () => void
+  onNewFile: () => void
+  onNewFolder: () => void
+  onRefresh: () => void
+  onExpandAll: () => void
+  onCollapseAll: () => void
+}
+
+export const ExplorerHeader: React.FC<ExplorerHeaderProps> = ({
+  title,
+  searchOpen,
+  optionsOpen,
+  onToggleSearch,
+  onToggleOptions,
+  onNewFile,
+  onNewFolder,
+  onRefresh,
+  onExpandAll,
+  onCollapseAll,
+}) => {
+  return (
+    <div className={css.header}>
+      <span className={css.headerTitle} title={title}>
+        {title}
+      </span>
+      <div className={css.headerActions}>
+        <button
+          className={`${css.iconBtn} ${searchOpen ? css.iconBtnActive : ''}`}
+          title="Search files and folders"
+          onClick={onToggleSearch}
+        >
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+            <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
+          </svg>
+        </button>
+        <button className={css.iconBtn} title="New File" onClick={onNewFile}>
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+            <path d="M9 1H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V6L9 1zm0 1.5L12.5 6H9V2.5zM8 8.5V11h1V8.5h2.5v-1H9V5H8v2.5H5.5v1H8z"/>
+          </svg>
+        </button>
+        <button className={css.iconBtn} title="New Folder" onClick={onNewFolder}>
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+            <path d="M7 2l2 2h5a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h5zm2.5 6.5H8V6H7v2.5H4.5v1H7V12h1V9.5h2.5v-1z"/>
+          </svg>
+        </button>
+        <button className={css.iconBtn} title="Refresh" onClick={onRefresh}>
+          <svg width="16" height="16" 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.iconBtn} title="Expand All" onClick={onExpandAll}>
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+            <path d="M4.646 5.854a.5.5 0 0 1 0-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8 3.207 5.354 5.854a.5.5 0 0 1-.708 0zm0 4.292a.5.5 0 0 0 0 .708l3 3a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8 12.793l-2.646-2.647a.5.5 0 0 0-.708 0z"/>
+          </svg>
+        </button>
+        <button className={css.iconBtn} title="Collapse All" onClick={onCollapseAll}>
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+            <path d="M4.646 2.854a.5.5 0 0 0 0 .708l3 3a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8 5.293 5.354 2.854a.5.5 0 0 0-.708 0zm0 10.292a.5.5 0 0 1 0-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8 10.707l-2.646 2.647a.5.5 0 0 1-.708 0z"/>
+          </svg>
+        </button>
+        <button
+          className={`${css.iconBtn} ${optionsOpen ? css.iconBtnActive : ''}`}
+          title="Explorer display preferences"
+          onClick={onToggleOptions}
+        >
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+            <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>
+        </button>
+      </div>
+    </div>
+  )
+}