src/components/Breadcrumbs/Breadcrumbs.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

import { useTabsStore } from '@/stores/useTabsStore'
import { useFilesStore } from '@/stores/useFilesStore'

export default function Breadcrumbs() {
  const tabs = useTabsStore((s) => s.tabs)
  const activeTabId = useTabsStore((s) => s.activeTabId)
  const rootPath = useFilesStore((s) => s.rootPath)

  if (!activeTabId || !rootPath) return null

  const activeTab = tabs.find((t) => t.id === activeTabId)
  if (!activeTab) return null

  const fullPath = activeTab.path
  let relativePath = fullPath

  if (fullPath.startsWith(rootPath)) {
    relativePath = fullPath.slice(rootPath.length).replace(/^[\\/]/, '')
  }

  const segments = relativePath.split(/[\\/]/)
  const lastIdx = segments.length - 1

  return (
    <div className="flex items-center h-[26px] px-4 shrink-0 bg-editor-bg select-none gap-0 text-ui-xs overflow-hidden">
      {segments.map((segment, i) => {
        const isLast = i === lastIdx

        if (isLast) {
          return (
            <span
              key={i}
              className="truncate text-text-primary font-medium"
            >
              {segment}
            </span>
          )
        }

        return (
          <span key={i} className="flex items-center gap-0 min-w-0 shrink-0">
            <button
              className="truncate text-text-muted hover:text-text-secondary px-1 py-0.5 rounded transition-all duration-fast hover:bg-panel-hover cursor-pointer"
            >
              {segment}
            </button>
            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="shrink-0 text-text-muted opacity-30 mx-[2px]">
              <polyline points="9 18 15 12 9 6" />
            </svg>
          </span>
        )
      })}
    </div>
  )
}