@openspecui/web 0.9.0 → 0.9.3

package/src/components/dialog.tsx

@@ -1,193 +0,0 @@
-import { useEffect, useMemo, useRef, type ReactNode } from 'react'
-
-interface DialogProps {
-  open: boolean
-  title: ReactNode // can include icon / status chips etc.
-  onClose: () => void
-  children: ReactNode
-  footer?: ReactNode
-  className?: string
-  bodyClassName?: string
-  maxHeight?: string
-  borderVariant?: 'default' | 'success' | 'error'
-}
-
-/**
- * Unified dialog component backed by the native HTMLDialogElement.
- * Preserves the previous DialogShell layout while using showModal/close
- * for proper focus trapping and ESC handling.
- */
-export function Dialog({
-  open,
-  title,
-  onClose,
-  children,
-  footer,
-  className = '',
-  bodyClassName = '',
-  maxHeight = '86vh',
-  borderVariant = 'default',
-}: DialogProps) {
-  const dialogRef = useRef<HTMLDialogElement>(null)
-
-  // Synchronize the native dialog with the controlled `open` prop
-  useEffect(() => {
-    const dialog = dialogRef.current
-    if (!dialog) return
-
-    if (open && !dialog.open) {
-      dialog.showModal()
-    } else if (!open && dialog.open) {
-      dialog.close()
-    }
-  }, [open])
-
-  // Close on ESC / cancel and backdrop clicks
-  useEffect(() => {
-    const dialog = dialogRef.current
-    if (!dialog) return
-
-    const handleCancel = (event: Event) => {
-      event.preventDefault()
-      onClose()
-    }
-
-    const handleClick = (event: MouseEvent) => {
-      const rect = dialog.getBoundingClientRect()
-      const isInDialog =
-        event.clientX >= rect.left &&
-        event.clientX <= rect.right &&
-        event.clientY >= rect.top &&
-        event.clientY <= rect.bottom
-
-      if (!isInDialog) {
-        onClose()
-      }
-    }
-
-    dialog.addEventListener('cancel', handleCancel)
-    dialog.addEventListener('click', handleClick)
-
-    return () => {
-      dialog.removeEventListener('cancel', handleCancel)
-      dialog.removeEventListener('click', handleClick)
-    }
-  }, [onClose])
-
-  const borderClass =
-    borderVariant === 'error'
-      ? 'border-red-500/60'
-      : borderVariant === 'success'
-        ? 'border-green-500/50'
-        : 'border-border'
-
-  const styles = useMemo(() => {
-    const css = String.raw
-    return (
-      <style>{css`
-        /* 1. 对话框的基础状态（关闭状态） */
-        dialog.openspec-dialog {
-          margin: auto;
-          opacity: 0.6;
-          transform: translateY(12px);
-          /* 必须把 overlay 也加入过渡，否则关闭时会瞬间消失 */
-          transition:
-            opacity 260ms cubic-bezier(0.22, 0.61, 0.36, 1),
-            transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1),
-            overlay 320ms allow-discrete,
-            display 260ms allow-discrete;
-        }
-
-        /* 2. 对话框的打开状态 */
-        dialog.openspec-dialog[open] {
-          opacity: 1;
-          transform: translateY(0);
-        }
-
-        /* 3. 对话框打开瞬间的起始帧 */
-        @starting-style {
-          dialog.openspec-dialog[open] {
-            opacity: 0.6;
-            transform: translateY(12px);
-          }
-        }
-
-        /* --- 下面是 Backdrop (背景遮罩) 的动画 --- */
-
-        /* 4. 背景遮罩的基础状态 */
-        dialog.openspec-dialog::backdrop {
-          background-color: rgba(0, 0, 0, 0); /* 初始透明 */
-          backdrop-filter: grayscale(0.5);
-          transition:
-            display 0.35s allow-discrete,
-            overlay 0.35s allow-discrete,
-            background-color 0.35s ease,
-            backdrop-filter 0.35s ease;
-        }
-
-        /* 5. 背景遮罩的打开状态 */
-        dialog.openspec-dialog[open]::backdrop {
-          background-color: rgba(0, 0, 0, 0.5);
-          backdrop-filter: grayscale(1);
-        }
-
-        /* 6. 背景遮罩的起始帧 */
-        @starting-style {
-          dialog.openspec-dialog[open]::backdrop {
-            background-color: rgba(0, 0, 0, 0);
-            backdrop-filter: grayscale(0.5);
-          }
-        }
-
-      `}</style>
-    )
-  }, [])
-
-  return (
-    <>
-      {styles}
-      <dialog
-        ref={dialogRef}
-        className="openspec-dialog w-[calc(100%-2rem)] max-w-2xl border-0 bg-transparent p-0"
-      >
-        <div
-          className={`bg-background relative flex w-full flex-col overflow-hidden rounded-lg border shadow-xl ${borderClass} ${className}`}
-          style={{ maxHeight }}
-        >
-          {/* Header (non-shrinking) */}
-          <div className="border-border flex flex-none shrink-0 items-center justify-between border-b px-4 py-3">
-            <div className="flex items-center gap-2">{title}</div>
-            <button
-              onClick={onClose}
-              className="hover:bg-muted rounded p-1"
-              aria-label="Close dialog"
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                className="h-4 w-4"
-                stroke="currentColor"
-                fill="none"
-                strokeWidth="2"
-              >
-                <path strokeLinecap="round" strokeLinejoin="round" d="M6 6l12 12M6 18L18 6" />
-              </svg>
-            </button>
-          </div>
-
-          {/* Body */}
-          <div className={`min-h-0 flex-1 overflow-auto px-4 py-3 ${bodyClassName}`}>
-            {children}
-          </div>
-
-          {/* Footer */}
-          {footer && (
-            <div className="border-border flex flex-none shrink-0 items-center justify-end gap-2 border-t px-4 py-3">
-              {footer}
-            </div>
-          )}
-        </div>
-      </dialog>
-    </>
-  )
-}

package/src/components/folder-editor-viewer.tsx

@@ -1,411 +0,0 @@
-import { CodeEditor } from '@/components/code-editor'
-import { useArchiveFilesSubscription, useChangeFilesSubscription } from '@/lib/use-subscription'
-import { ChevronRight, File, FileText, Folder, Loader2 } from 'lucide-react'
-import { useEffect, useMemo, useState } from 'react'
-
-/**
- * 排序文件条目，确保子项紧跟在父目录后面
- * 规则：同一目录下，文件夹优先于文件，同类型按字母排序
- */
-function compareEntries(
-  a: { path: string; type: 'file' | 'directory' },
-  b: { path: string; type: 'file' | 'directory' }
-): number {
-  const aParts = a.path.split('/')
-  const bParts = b.path.split('/')
-
-  // 逐级比较路径
-  const minLen = Math.min(aParts.length, bParts.length)
-  for (let i = 0; i < minLen; i++) {
-    const aIsLast = i === aParts.length - 1
-    const bIsLast = i === bParts.length - 1
-
-    // 如果当前层级的名称不同
-    if (aParts[i] !== bParts[i]) {
-      // 如果都是最后一级，比较类型（文件夹优先）
-      if (aIsLast && bIsLast) {
-        if (a.type !== b.type) return a.type === 'directory' ? -1 : 1
-      }
-      // 如果只有一个是最后一级，另一个还有子级（说明是文件夹）
-      else if (aIsLast && !bIsLast) {
-        // a 是当前级的项，b 还有子级（b 的当前级是文件夹）
-        if (a.type === 'directory') {
-          // 都是文件夹，按字母排序
-          return aParts[i].localeCompare(bParts[i])
-        }
-        // a 是文件，b 是文件夹，文件夹优先
-        return 1
-      } else if (!aIsLast && bIsLast) {
-        if (b.type === 'directory') {
-          return aParts[i].localeCompare(bParts[i])
-        }
-        return -1
-      }
-      // 都不是最后一级，直接按字母排序
-      return aParts[i].localeCompare(bParts[i])
-    }
-
-    // 名称相同，继续比较下一级
-  }
-
-  // 路径前缀相同，短的在前（父目录在子项之前）
-  return aParts.length - bParts.length
-}
-
-/** 获取文件名（不含路径） */
-function getFileName(path: string): string {
-  return path.split('/').pop() ?? path
-}
-
-/** 获取父目录路径 */
-function getParentPath(path: string): string {
-  const parts = path.split('/')
-  return parts.slice(0, -1).join('/')
-}
-
-const css = String.raw
-const layoutStyles = css`
-  /* 窄屏：单列布局 */
-  .fev-layout {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    gap: 0.75rem;
-  }
-  .fev-sidebar-tabs {
-    flex-shrink: 0;
-  }
-  .fev-sidebar-tree {
-    display: none;
-  }
-  .fev-editor-wrapper {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    min-height: 320px;
-  }
-
-  /* 宽屏：grid 布局，文件列表在右侧 */
-  @container (min-width: 768px) {
-    .fev-layout {
-      display: grid;
-      grid-template-columns: 1fr 220px;
-      gap: 1rem;
-    }
-    .fev-sidebar-tabs {
-      display: none;
-    }
-    .fev-sidebar-tree {
-      display: block;
-      order: 2;
-    }
-    .fev-editor-wrapper {
-      order: 1;
-      min-height: 480px;
-    }
-  }
-  .CodeMirror {
-    line-height: 21px;
-  }
-`
-
-interface FileEntry {
-  path: string
-  type: 'file' | 'directory'
-  content?: string | null
-}
-
-/** 面包屑路径导航 */
-function Breadcrumb({
-  path,
-  entries,
-  onNavigate,
-}: {
-  path: string
-  entries: FileEntry[]
-  onNavigate: (path: string) => void
-}) {
-  const parts = path.split('/')
-  const isMarkdown = path.endsWith('.md')
-
-  // 构建可点击的路径段
-  const segments: { name: string; path: string; isFile: boolean }[] = []
-  for (let i = 0; i < parts.length; i++) {
-    const segmentPath = parts.slice(0, i + 1).join('/')
-    const isFile = i === parts.length - 1
-    segments.push({ name: parts[i], path: segmentPath, isFile })
-  }
-
-  return (
-    <div className="border-border/50 bg-muted/20 flex items-center gap-1 overflow-x-auto border-b px-3 py-2 text-xs">
-      {segments.map((segment, i) => {
-        const isLast = i === segments.length - 1
-        const canNavigate =
-          !isLast && entries.some((e) => e.type === 'file' && e.path.startsWith(segment.path + '/'))
-
-        return (
-          <span key={segment.path} className="flex items-center gap-1">
-            {i > 0 && <ChevronRight className="text-muted-foreground/50 h-3 w-3" />}
-            {isLast ? (
-              <span className="text-foreground flex items-center gap-1.5">
-                {segment.isFile ? (
-                  isMarkdown ? (
-                    <FileText className="h-3.5 w-3.5" />
-                  ) : (
-                    <File className="h-3.5 w-3.5" />
-                  )
-                ) : (
-                  <Folder className="h-3.5 w-3.5" />
-                )}
-                {segment.name}
-              </span>
-            ) : canNavigate ? (
-              <button
-                onClick={() => {
-                  // 找到该目录下的第一个文件
-                  const firstFile = entries.find(
-                    (e) => e.type === 'file' && e.path.startsWith(segment.path + '/')
-                  )
-                  if (firstFile) onNavigate(firstFile.path)
-                }}
-                className="text-muted-foreground hover:text-foreground flex items-center gap-1.5 transition-colors"
-              >
-                <Folder className="h-3.5 w-3.5" />
-                {segment.name}
-              </button>
-            ) : (
-              <span className="text-muted-foreground flex items-center gap-1.5">
-                <Folder className="h-3.5 w-3.5" />
-                {segment.name}
-              </span>
-            )}
-          </span>
-        )
-      })}
-    </div>
-  )
-}
-
-/** 窄屏下的文件标签栏 */
-function FileTabs({
-  entries,
-  selectedPath,
-  onSelect,
-}: {
-  entries: FileEntry[]
-  selectedPath: string | null
-  onSelect: (path: string) => void
-}) {
-  const files = entries.filter((e) => e.type === 'file')
-
-  return (
-    <div className="scrollbar-thin scrollbar-track-transparent border-border bg-muted/30 flex gap-1 overflow-x-auto rounded-md border p-1">
-      {files.map((entry) => {
-        const isActive = entry.path === selectedPath
-        const isMarkdown = entry.path.endsWith('.md')
-
-        return (
-          <button
-            key={entry.path}
-            onClick={() => onSelect(entry.path)}
-            title={entry.path}
-            className={`flex shrink-0 items-center gap-1.5 rounded px-2.5 py-1.5 text-xs transition-colors ${
-              isActive
-                ? 'bg-background text-foreground shadow-sm'
-                : 'text-muted-foreground hover:bg-background/50 hover:text-foreground'
-            }`}
-          >
-            {isMarkdown ? <FileText className="h-3.5 w-3.5" /> : <File className="h-3.5 w-3.5" />}
-            <span className="max-w-[120px] truncate">{getFileName(entry.path)}</span>
-          </button>
-        )
-      })}
-    </div>
-  )
-}
-
-/** 宽屏下的文件树列表 */
-function FileTree({
-  entries,
-  selectedPath,
-  onSelect,
-}: {
-  entries: FileEntry[]
-  selectedPath: string | null
-  onSelect: (path: string) => void
-}) {
-  // 计算每个条目相对于其父目录的缩进级别
-  const getIndentLevel = (entry: FileEntry): number => {
-    const parentPath = getParentPath(entry.path)
-    if (!parentPath) return 0
-
-    // 找到直接父目录
-    const parentExists = entries.some((e) => e.type === 'directory' && e.path === parentPath)
-    if (parentExists) {
-      const parentEntry = entries.find((e) => e.path === parentPath)!
-      return getIndentLevel(parentEntry) + 1
-    }
-    // 父目录不存在于列表中，计算路径深度
-    return entry.path.split('/').length - 1
-  }
-
-  return (
-    <div className="border-border bg-muted/30 flex h-full flex-col rounded-md border">
-      <div className="border-border/50 text-muted-foreground border-b px-3 py-2 text-xs font-medium uppercase">
-        Files
-      </div>
-      <div className="scrollbar-thin scrollbar-track-transparent flex-1 overflow-y-auto">
-        {entries.map((entry) => {
-          const depth = getIndentLevel(entry)
-          const isActive = entry.path === selectedPath
-          const isFile = entry.type === 'file'
-
-          const icon = isFile ? (
-            entry.path.endsWith('.md') ? (
-              <FileText className="h-4 w-4 shrink-0" />
-            ) : (
-              <File className="h-4 w-4 shrink-0" />
-            )
-          ) : (
-            <Folder className="h-4 w-4 shrink-0" />
-          )
-
-          return (
-            <button
-              key={entry.path}
-              disabled={!isFile}
-              onClick={() => isFile && onSelect(entry.path)}
-              className={`flex w-full items-center gap-2 px-3 py-1.5 text-sm transition-colors ${
-                isActive
-                  ? 'bg-primary/10 text-foreground'
-                  : isFile
-                    ? 'text-muted-foreground hover:bg-muted/50 hover:text-foreground'
-                    : 'text-muted-foreground cursor-default'
-              }`}
-              style={{ paddingLeft: 12 + depth * 14 }}
-            >
-              {icon}
-              <span className={`truncate ${!isFile ? 'text-foreground font-medium' : ''}`}>
-                {getFileName(entry.path)}
-              </span>
-            </button>
-          )
-        })}
-      </div>
-    </div>
-  )
-}
-
-export function FolderEditorViewer({
-  changeId,
-  archived = false,
-}: {
-  changeId: string
-  archived?: boolean
-}) {
-  const {
-    data: files,
-    isLoading,
-    error,
-  } = archived ? useArchiveFilesSubscription(changeId) : useChangeFilesSubscription(changeId)
-  const [selectedPath, setSelectedPath] = useState<string | null>(null)
-
-  const sortedEntries = useMemo(() => {
-    if (!files) return []
-    return [...files].sort(compareEntries)
-  }, [files])
-
-  useEffect(() => {
-    if (!sortedEntries.length) {
-      setSelectedPath(null)
-      return
-    }
-    const current = sortedEntries.find(
-      (entry) => entry.path === selectedPath && entry.type === 'file'
-    )
-    if (!current) {
-      const firstFile = sortedEntries.find((entry) => entry.type === 'file')
-      setSelectedPath(firstFile?.path ?? null)
-    }
-  }, [sortedEntries, selectedPath])
-
-  const activeFile = useMemo(() => {
-    if (!sortedEntries.length || !selectedPath) return null
-    return (
-      sortedEntries.find((entry) => entry.path === selectedPath && entry.type === 'file') ?? null
-    )
-  }, [sortedEntries, selectedPath])
-
-  if (isLoading) {
-    return (
-      <div className="border-border bg-muted/20 flex h-[400px] items-center justify-center rounded-md border">
-        <Loader2 className="text-muted-foreground h-6 w-6 animate-spin" />
-      </div>
-    )
-  }
-
-  if (error) {
-    return (
-      <div className="border-destructive/50 bg-destructive/10 text-destructive rounded-md border p-4 text-sm">
-        Failed to load files: {error.message}
-      </div>
-    )
-  }
-
-  if (!sortedEntries.length) {
-    return (
-      <div className="bg-muted/20 text-muted-foreground rounded-md p-4 text-sm">
-        No files found for this change.
-      </div>
-    )
-  }
-
-  return (
-    <div className="@container-[size] h-full">
-      <style>{layoutStyles}</style>
-      <div className="fev-layout">
-        {/* 窄屏：文件标签栏 */}
-        <div className="fev-sidebar-tabs">
-          <FileTabs
-            entries={sortedEntries}
-            selectedPath={selectedPath}
-            onSelect={setSelectedPath}
-          />
-        </div>
-
-        {/* 宽屏：文件树 */}
-        <div className="fev-sidebar-tree">
-          <FileTree
-            entries={sortedEntries}
-            selectedPath={selectedPath}
-            onSelect={setSelectedPath}
-          />
-        </div>
-
-        {/* 编辑器区域：面包屑 + CodeMirror */}
-        <div className="fev-editor-wrapper border-border bg-background overflow-hidden rounded-md border shadow-sm">
-          {activeFile ? (
-            <>
-              <Breadcrumb
-                path={activeFile.path}
-                entries={sortedEntries}
-                onNavigate={setSelectedPath}
-              />
-              <CodeEditor
-                key={activeFile.path}
-                value={activeFile.content ?? ''}
-                filename={activeFile.path}
-                readOnly
-                className="min-h-0 flex-1"
-              />
-            </>
-          ) : (
-            <div className="text-muted-foreground flex h-full items-center justify-center">
-              Select a file to view
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}