fix: folder click shows overview doc, add same-name filter, move + to header

src/components/DocTree.tsx

@@ -7,6 +7,7 @@ interface DocTreeProps {
   files: DocFile[]
   selectedPath?: string
   onSelect: (file: DocFile) => void
+  onFolderClick?: (folderPath: string) => void
 }
 
 interface TreeNodeProps {
@@ -16,6 +17,7 @@ interface TreeNodeProps {
   ancestorsLast: boolean[]
   selectedPath?: string
   onSelect: (file: DocFile) => void
+  onFolderClick?: (folderPath: string) => void
   expandedSet: Set<string>
   onToggle: (path: string) => void
 }
@@ -27,6 +29,7 @@ const TreeNode = React.memo(({
   ancestorsLast,
   selectedPath,
   onSelect,
+  onFolderClick,
   expandedSet,
   onToggle,
 }: TreeNodeProps) => {
@@ -36,32 +39,24 @@ const TreeNode = React.memo(({
 
   const handleClick = () => {
     if (isDir) {
+      onFolderClick?.(file.relativePath)
       onToggle(file.relativePath)
     } else {
       onSelect(file)
     }
   }
 
-  const renderIndent = () => {
-    const parts: React.ReactNode[] = []
-    
+  const getIndent = (): string => {
+    let result = ''
     for (let i = 0; i < level; i++) {
-      const showLine = !ancestorsLast[i]
-      parts.push(
-        <span key={i} className="inline-block w-4 text-center text-zinc-600">
-          {showLine ? '│' : ' '}
-        </span>
-      )
+      result += ancestorsLast[i] ? '   ' : '│  '
     }
-    
-    const connector = isLast ? '└──' : '├──'
-    parts.push(
-      <span key="connector" className="text-zinc-500">
-        {connector}
-      </span>
-    )
-    
-    return parts
+    result += isLast ? '└─ ' : '├─ '
+    return result
+  }
+
+  const getIndentWidth = (): number => {
+    return level * 3 + 3
   }
 
   const showChildren = isDir && isExpanded && file.children
@@ -71,7 +66,7 @@ const TreeNode = React.memo(({
       <div
         onClick={handleClick}
         className={clsx(
-          'flex items-center py-1 cursor-pointer text-sm select-none rounded',
+          'flex items-center py-0.5 cursor-pointer text-base select-none rounded',
           isDir
             ? 'text-zinc-400 hover:text-zinc-200'
             : isSelected
@@ -79,11 +74,14 @@ const TreeNode = React.memo(({
               : 'text-zinc-400 hover:text-zinc-200'
         )}
       >
-        <span className="font-mono text-xs leading-none">
-          {renderIndent()}
+        <span 
+          className="text-zinc-500 font-mono whitespace-pre" 
+          style={{ width: `${getIndentWidth()}ch` }}
+        >
+          {getIndent()}
         </span>
         <span className={clsx(
-          'ml-1 truncate',
+          'truncate',
           isDir && 'font-medium'
         )}>
           {getDisplayName(file.name)}
@@ -99,6 +97,7 @@ const TreeNode = React.memo(({
           ancestorsLast={[...ancestorsLast, isLast]}
           selectedPath={selectedPath}
           onSelect={onSelect}
+          onFolderClick={onFolderClick}
           expandedSet={expandedSet}
           onToggle={onToggle}
         />
@@ -109,7 +108,7 @@ const TreeNode = React.memo(({
 
 TreeNode.displayName = 'TreeNode'
 
-export const DocTree = ({ files, selectedPath, onSelect }: DocTreeProps) => {
+export const DocTree = ({ files, selectedPath, onSelect, onFolderClick }: DocTreeProps) => {
   const [expandedSet, setExpandedSet] = useState<Set<string>>(() => {
     const set = new Set<string>()
     files.forEach(f => {
@@ -141,6 +140,7 @@ export const DocTree = ({ files, selectedPath, onSelect }: DocTreeProps) => {
           ancestorsLast={[]}
           selectedPath={selectedPath}
           onSelect={onSelect}
+          onFolderClick={onFolderClick}
           expandedSet={expandedSet}
           onToggle={handleToggle}
         />