{tabs.length === 0
?
@@ -311,7 +276,6 @@ export const Editor = memo(function Editor(props: EditorProps) {
entries={entries}
gitHistory={gitHistory}
vaultPath={vaultPath ?? ''}
- openTabs={tabs.map(t => t.entry)}
noteList={noteList}
noteListFilter={noteListFilter}
onToggleInspector={onToggleInspector}
diff --git a/src/components/EditorRightPanel.tsx b/src/components/EditorRightPanel.tsx
index 33936454..68153b13 100644
--- a/src/components/EditorRightPanel.tsx
+++ b/src/components/EditorRightPanel.tsx
@@ -12,7 +12,6 @@ interface EditorRightPanelProps {
entries: VaultEntry[]
gitHistory: GitCommit[]
vaultPath: string
- openTabs?: VaultEntry[]
noteList?: NoteListItem[]
noteListFilter?: { type: string | null; query: string }
onToggleInspector: () => void
@@ -31,7 +30,7 @@ interface EditorRightPanelProps {
export function EditorRightPanel({
showAIChat, inspectorCollapsed, inspectorWidth,
- inspectorEntry, inspectorContent, entries, gitHistory, vaultPath, openTabs,
+ inspectorEntry, inspectorContent, entries, gitHistory, vaultPath,
noteList, noteListFilter,
onToggleInspector, onToggleAIChat, onNavigateWikilink, onViewCommitDiff,
onUpdateFrontmatter, onDeleteProperty, onAddProperty, onCreateAndOpenNote, onOpenNote,
@@ -53,7 +52,6 @@ export function EditorRightPanel({
activeEntry={inspectorEntry}
activeNoteContent={inspectorContent}
entries={entries}
- openTabs={openTabs}
noteList={noteList}
noteListFilter={noteListFilter}
/>
diff --git a/src/components/TabBar.test.tsx b/src/components/TabBar.test.tsx
deleted file mode 100644
index 7b162536..00000000
--- a/src/components/TabBar.test.tsx
+++ /dev/null
@@ -1,316 +0,0 @@
-import { render, screen, fireEvent } from '@testing-library/react'
-import { describe, it, expect, vi } from 'vitest'
-import { TabBar } from './TabBar'
-import { computeTabMaxWidth } from '../utils/tabLayout'
-import type { VaultEntry } from '../types'
-
-function makeEntry(path: string, title: string): VaultEntry {
- return {
- path, filename: `${title}.md`, title, isA: 'Note',
- aliases: [], belongsTo: [], relatedTo: [],
- status: null, owner: null, cadence: null, archived: false,
- trashed: false, trashedAt: null,
- modifiedAt: null, createdAt: null, fileSize: 0,
- snippet: '', wordCount: 0, relationships: {}, icon: null, color: null, order: null, template: null, sort: null, outgoingLinks: [],
- }
-}
-
-function makeTabs(titles: string[]) {
- return titles.map((t) => ({
- entry: makeEntry(`/vault/${t.toLowerCase()}.md`, t),
- content: `# ${t}`,
- }))
-}
-
-describe('TabBar', () => {
- const defaultProps = {
- onSwitchTab: vi.fn(),
- onCloseTab: vi.fn(),
- onCreateNote: vi.fn(),
- onReorderTabs: vi.fn(),
- }
-
- it('renders all tabs', () => {
- const tabs = makeTabs(['Alpha', 'Beta', 'Gamma'])
- render(
)
- expect(screen.getByText('Alpha')).toBeInTheDocument()
- expect(screen.getByText('Beta')).toBeInTheDocument()
- expect(screen.getByText('Gamma')).toBeInTheDocument()
- })
-
- it('marks tabs as draggable', () => {
- const tabs = makeTabs(['Alpha', 'Beta'])
- render(
)
- const alphaTab = screen.getByText('Alpha').closest('[draggable]')
- expect(alphaTab).toHaveAttribute('draggable', 'true')
- })
-
- it('calls onReorderTabs on drag and drop', () => {
- const onReorderTabs = vi.fn()
- const tabs = makeTabs(['Alpha', 'Beta', 'Gamma'])
- render(
-
- )
-
- const alphaTab = screen.getByText('Alpha').closest('[draggable]')!
- const gammaTab = screen.getByText('Gamma').closest('[draggable]')!
-
- // Simulate drag start on Alpha (index 0)
- fireEvent.dragStart(alphaTab, {
- dataTransfer: { effectAllowed: 'move', setData: vi.fn() },
- })
-
- // Simulate drag over Gamma (index 2) - cursor past midpoint
- const rect = gammaTab.getBoundingClientRect()
- fireEvent.dragOver(gammaTab, {
- clientX: rect.left + rect.width * 0.75,
- dataTransfer: { dropEffect: 'move' },
- })
-
- // Drop
- fireEvent.drop(gammaTab, {
- dataTransfer: {},
- })
-
- // Alpha (0) dragged past Gamma (2) → should reorder from 0 to 2
- expect(onReorderTabs).toHaveBeenCalledWith(0, 2)
- })
-
- it('does not call onReorderTabs when dropping in same position', () => {
- const onReorderTabs = vi.fn()
- const tabs = makeTabs(['Alpha', 'Beta'])
- render(
-
- )
-
- const alphaTab = screen.getByText('Alpha').closest('[draggable]')!
-
- fireEvent.dragStart(alphaTab, {
- dataTransfer: { effectAllowed: 'move', setData: vi.fn() },
- })
-
- // Drag over same tab
- const rect = alphaTab.getBoundingClientRect()
- fireEvent.dragOver(alphaTab, {
- clientX: rect.left + rect.width / 2,
- dataTransfer: { dropEffect: 'move' },
- })
-
- fireEvent.drop(alphaTab, { dataTransfer: {} })
-
- expect(onReorderTabs).not.toHaveBeenCalled()
- })
-
- it('shows modified indicator dot on modified tabs', () => {
- const tabs = makeTabs(['Alpha', 'Beta'])
- const getNoteStatus = (path: string) => path === tabs[0].entry.path ? 'modified' as const : 'clean' as const
- render(
)
- const indicators = screen.getAllByTestId('tab-modified-indicator')
- expect(indicators).toHaveLength(1)
- })
-
- it('does not show modified indicator when no tabs are modified', () => {
- const tabs = makeTabs(['Alpha', 'Beta'])
- const getNoteStatus = () => 'clean' as const
- render(
)
- expect(screen.queryByTestId('tab-modified-indicator')).not.toBeInTheDocument()
- expect(screen.queryByTestId('tab-new-indicator')).not.toBeInTheDocument()
- })
-
- it('shows modified indicator on multiple tabs', () => {
- const tabs = makeTabs(['Alpha', 'Beta', 'Gamma'])
- const getNoteStatus = () => 'modified' as const
- render(
)
- expect(screen.getAllByTestId('tab-modified-indicator')).toHaveLength(3)
- })
-
- it('shows green new indicator on new tabs', () => {
- const tabs = makeTabs(['Alpha', 'Beta'])
- const getNoteStatus = (path: string) => path === tabs[0].entry.path ? 'new' as const : 'clean' as const
- render(
)
- expect(screen.getAllByTestId('tab-new-indicator')).toHaveLength(1)
- expect(screen.queryByTestId('tab-modified-indicator')).not.toBeInTheDocument()
- })
-
- it('does not reorder on drag cancel (dragEnd without drop)', () => {
- const onReorderTabs = vi.fn()
- const tabs = makeTabs(['Alpha', 'Beta', 'Gamma'])
- render(
-
- )
-
- const alphaTab = screen.getByText('Alpha').closest('[draggable]')!
- const betaTab = screen.getByText('Beta').closest('[draggable]')!
-
- fireEvent.dragStart(alphaTab, {
- dataTransfer: { effectAllowed: 'move', setData: vi.fn() },
- })
-
- const rect = betaTab.getBoundingClientRect()
- fireEvent.dragOver(betaTab, {
- clientX: rect.left + rect.width * 0.75,
- dataTransfer: { dropEffect: 'move' },
- })
-
- // Cancel via dragEnd (Escape or release outside tab bar)
- fireEvent.dragEnd(alphaTab)
-
- expect(onReorderTabs).not.toHaveBeenCalled()
- })
-
- it('reorders from last toward first position', () => {
- const onReorderTabs = vi.fn()
- const tabs = makeTabs(['Alpha', 'Beta', 'Gamma'])
- render(
-
- )
-
- const gammaTab = screen.getByText('Gamma').closest('[draggable]')!
- const alphaTab = screen.getByText('Alpha').closest('[draggable]')!
-
- fireEvent.dragStart(gammaTab, {
- dataTransfer: { effectAllowed: 'move', setData: vi.fn() },
- })
-
- // jsdom returns zero-sized rects, so clientX always hits "right half"
- // (insert after index 0 → insert index 1). This still validates
- // that dragging the last tab toward the front produces a reorder.
- const rect = alphaTab.getBoundingClientRect()
- fireEvent.dragOver(alphaTab, {
- clientX: rect.left + rect.width * 0.75,
- dataTransfer: { dropEffect: 'move' },
- })
-
- fireEvent.drop(alphaTab, { dataTransfer: {} })
-
- // Gamma (2) dragged onto Alpha (0) → reorder from 2 to 1
- expect(onReorderTabs).toHaveBeenCalledWith(2, 1)
- })
-
- it('shows pending save indicator (pulsing dot) when getNoteStatus returns pendingSave', () => {
- const tabs = makeTabs(['Alpha', 'Beta'])
- const getNoteStatus = (path: string) => path === tabs[0].entry.path ? 'pendingSave' as const : 'clean' as const
- render(
)
- expect(screen.getAllByTestId('tab-pending-save-indicator')).toHaveLength(1)
- expect(screen.queryByTestId('tab-modified-indicator')).not.toBeInTheDocument()
- expect(screen.queryByTestId('tab-new-indicator')).not.toBeInTheDocument()
- })
-
- it('renders nav back/forward buttons', () => {
- const tabs = makeTabs(['Alpha'])
- render(
)
- expect(screen.getByTestId('nav-back')).toBeInTheDocument()
- expect(screen.getByTestId('nav-forward')).toBeInTheDocument()
- })
-
- it('disables nav buttons when canGoBack/canGoForward are false', () => {
- const tabs = makeTabs(['Alpha'])
- render(
)
- expect(screen.getByTestId('nav-back')).toBeDisabled()
- expect(screen.getByTestId('nav-forward')).toBeDisabled()
- })
-
- it('enables nav buttons and fires handlers on click', () => {
- const onGoBack = vi.fn()
- const onGoForward = vi.fn()
- const tabs = makeTabs(['Alpha'])
- render(
)
-
- fireEvent.click(screen.getByTestId('nav-back'))
- expect(onGoBack).toHaveBeenCalledTimes(1)
-
- fireEvent.click(screen.getByTestId('nav-forward'))
- expect(onGoForward).toHaveBeenCalledTimes(1)
- })
-
- it('switches tab on click', () => {
- const onSwitchTab = vi.fn()
- const tabs = makeTabs(['Alpha', 'Beta'])
- render(
-
- )
-
- fireEvent.click(screen.getByText('Beta'))
- expect(onSwitchTab).toHaveBeenCalledWith(tabs[1].entry.path)
- })
-
- describe('responsive tab width', () => {
- it('wraps tabs in an overflow-hidden flex container', () => {
- const tabs = makeTabs(['Alpha'])
- const { container } = render(
-
- )
- const tabArea = container.querySelector('.overflow-hidden')
- expect(tabArea).toBeInTheDocument()
- expect(tabArea?.classList.contains('flex')).toBe(true)
- expect(tabArea?.classList.contains('min-w-0')).toBe(true)
- expect(tabArea?.classList.contains('flex-1')).toBe(true)
- })
-
- it('tab elements are shrinkable with min-w-0', () => {
- const tabs = makeTabs(['Alpha', 'Beta'])
- const { container } = render(
-
- )
- const tabEls = container.querySelectorAll('[draggable="true"]')
- expect(tabEls).toHaveLength(2)
- for (const el of tabEls) {
- expect(el.classList.contains('shrink-0')).toBe(false)
- expect(el.classList.contains('min-w-0')).toBe(true)
- }
- })
- })
-
- describe('computeTabMaxWidth', () => {
- it('caps at 360px when container is wide', () => {
- expect(computeTabMaxWidth(1200, 2)).toBe(360)
- })
-
- it('divides space equally among tabs', () => {
- expect(computeTabMaxWidth(500, 5)).toBe(100)
- })
-
- it('enforces minimum of 60px', () => {
- expect(computeTabMaxWidth(300, 10)).toBe(60)
- })
-
- it('returns 360 for zero tabs', () => {
- expect(computeTabMaxWidth(800, 0)).toBe(360)
- })
-
- it('floors the result to integer pixels', () => {
- // 1000 / 3 = 333.33 → 333
- expect(computeTabMaxWidth(1000, 3)).toBe(333)
- })
-
- it('handles single tab', () => {
- expect(computeTabMaxWidth(200, 1)).toBe(200)
- expect(computeTabMaxWidth(500, 1)).toBe(360)
- })
- })
-})
diff --git a/src/components/TabBar.tsx b/src/components/TabBar.tsx
deleted file mode 100644
index db15ea61..00000000
--- a/src/components/TabBar.tsx
+++ /dev/null
@@ -1,391 +0,0 @@
-import { memo, useState, useRef, useCallback, useEffect } from 'react'
-import { useDragRegion } from '../hooks/useDragRegion'
-import type { VaultEntry, NoteStatus } from '../types'
-import { cn } from '@/lib/utils'
-import { X } from 'lucide-react'
-import { Plus, Columns, ArrowsOutSimple, ArrowLeft, ArrowRight } from '@phosphor-icons/react'
-import { computeTabMaxWidth } from '@/utils/tabLayout'
-import { isEmoji } from '../utils/emoji'
-
-interface Tab {
- entry: VaultEntry
- content: string
-}
-
-interface TabBarProps {
- tabs: Tab[]
- activeTabPath: string | null
- getNoteStatus?: (path: string) => NoteStatus
- onSwitchTab: (path: string) => void
- onCloseTab: (path: string) => void
- onCreateNote?: () => void
- onReorderTabs?: (fromIndex: number, toIndex: number) => void
- onRenameTab?: (path: string, newTitle: string) => void
- canGoBack?: boolean
- canGoForward?: boolean
- onGoBack?: () => void
- onGoForward?: () => void
- leftPanelsCollapsed?: boolean
-}
-
-const DISABLED_ICON_STYLE = { opacity: 0.4, cursor: 'not-allowed' } as const
-
-// --- Inline edit ---
-
-/** Inline edit input shown when user double-clicks a tab title. */
-function InlineTabEdit({ initialValue, onSave, onCancel }: {
- initialValue: string
- onSave: (value: string) => void
- onCancel: () => void
-}) {
- const [value, setValue] = useState(initialValue)
- const inputRef = useRef
(null)
- // Guard against double-fire: Enter calls handleSave, then React unmounts
- // the input (editingPath → null), which triggers blur → handleSave again.
- const committedRef = useRef(false)
-
- useEffect(() => {
- inputRef.current?.select()
- }, [])
-
- const handleSave = useCallback(() => {
- if (committedRef.current) return
- committedRef.current = true
- const trimmed = value.trim()
- if (trimmed && trimmed !== initialValue) {
- onSave(trimmed)
- } else {
- onCancel()
- }
- }, [value, initialValue, onSave, onCancel])
-
- return (
- setValue(e.target.value)}
- onKeyDown={(e) => {
- if (e.key === 'Enter') handleSave()
- if (e.key === 'Escape') onCancel()
- e.stopPropagation()
- }}
- onBlur={handleSave}
- onClick={(e) => e.stopPropagation()}
- onMouseDown={(e) => e.stopPropagation()}
- draggable={false}
- onDragStart={(e) => e.preventDefault()}
- style={{
- width: '100%',
- minWidth: 40,
- maxWidth: 150,
- background: 'var(--background)',
- border: '1px solid var(--ring)',
- borderRadius: 3,
- padding: '2px 6px',
- fontSize: 12,
- fontWeight: 500,
- color: 'var(--foreground)',
- outline: 'none',
- fontFamily: 'inherit',
- }}
- />
- )
-}
-
-// --- Drag-and-drop helpers ---
-
-function computeDropTarget(dragIdx: number | null, dropIdx: number | null): number | null {
- if (dragIdx === null || dropIdx === null || dragIdx === dropIdx) return null
- const toIndex = dropIdx > dragIdx ? dropIdx - 1 : dropIdx
- return toIndex !== dragIdx ? toIndex : null
-}
-
-function computeInsertIndex(e: React.DragEvent, index: number): number {
- const rect = e.currentTarget.getBoundingClientRect()
- return e.clientX < rect.left + rect.width / 2 ? index : index + 1
-}
-
-function useTabDrag(onReorderTabs?: (from: number, to: number) => void) {
- const [dragIndex, setDragIndex] = useState(null)
- const [dropIndex, setDropIndex] = useState(null)
- // Refs mirror state so event handlers always read the latest values,
- // avoiding stale closures when dragover and drop fire in the same frame.
- const dragIndexRef = useRef(null)
- const dropIndexRef = useRef(null)
- const dragNodeRef = useRef(null)
- const onReorderRef = useRef(onReorderTabs)
- useEffect(() => { onReorderRef.current = onReorderTabs })
-
- const resetDrag = useCallback(() => {
- if (dragNodeRef.current) dragNodeRef.current.style.opacity = ''
- dragNodeRef.current = null
- dragIndexRef.current = null
- dropIndexRef.current = null
- setDragIndex(null)
- setDropIndex(null)
- }, [])
-
- const handleDragStart = useCallback((e: React.DragEvent, index: number) => {
- dragIndexRef.current = index
- setDragIndex(index)
- e.dataTransfer.effectAllowed = 'move'
- e.dataTransfer.setData('text/plain', String(index))
- dragNodeRef.current = e.currentTarget
- requestAnimationFrame(() => {
- if (dragNodeRef.current) dragNodeRef.current.style.opacity = '0.5'
- })
- }, [])
-
- const handleDragOver = useCallback((e: React.DragEvent, index: number) => {
- e.preventDefault()
- e.dataTransfer.dropEffect = 'move'
- const currentDrag = dragIndexRef.current
- if (currentDrag === null || currentDrag === index) {
- dropIndexRef.current = null
- setDropIndex(null)
- return
- }
- const idx = computeInsertIndex(e, index)
- dropIndexRef.current = idx
- setDropIndex(idx)
- }, [])
-
- const handleDrop = useCallback((e: React.DragEvent) => {
- e.preventDefault()
- const toIndex = computeDropTarget(dragIndexRef.current, dropIndexRef.current)
- if (toIndex !== null && onReorderRef.current) {
- onReorderRef.current(dragIndexRef.current!, toIndex)
- }
- resetDrag()
- }, [resetDrag])
-
- const handleBarDragLeave = useCallback((e: React.DragEvent) => {
- const related = e.relatedTarget as HTMLElement | null
- if (!e.currentTarget.contains(related)) {
- dropIndexRef.current = null
- setDropIndex(null)
- }
- }, [])
-
- return { dragIndex, dropIndex, handleDragStart, handleDragEnd: resetDrag, handleDragOver, handleDrop, handleBarDragLeave }
-}
-
-// --- Sub-components ---
-
-function DropIndicator({ side }: { side: 'left' | 'right' }) {
- return (
-
- )
-}
-
-const STATUS_DOT: Record = {
- unsaved: { color: 'var(--accent-blue, #3b82f6)', testId: 'tab-unsaved-indicator', title: 'Auto-saving…', pulse: true },
- pendingSave: { color: 'var(--accent-green)', testId: 'tab-pending-save-indicator', title: 'Saving to disk…', pulse: true },
- new: { color: 'var(--accent-green)', testId: 'tab-new-indicator', title: 'New (uncommitted)' },
- modified: { color: 'var(--accent-orange)', testId: 'tab-modified-indicator', title: 'Modified (uncommitted)' },
-}
-
-function StatusDot({ status }: { status: NoteStatus }) {
- const cfg = STATUS_DOT[status]
- if (!cfg) return null
- return (
-
- )
-}
-
-function TabItem({ tab, isActive, isEditing, noteStatus, isDragging, showDropBefore, showDropAfter, tabMaxWidth, onSwitch, onClose, onDoubleClick, onRenameSave, onRenameCancel, dragProps }: {
- tab: Tab
- isActive: boolean
- isEditing: boolean
- noteStatus: NoteStatus
- isDragging: boolean
- showDropBefore: boolean
- showDropAfter: boolean
- tabMaxWidth: number
- onSwitch: () => void
- onClose: () => void
- onDoubleClick: () => void
- onRenameSave: (newTitle: string) => void
- onRenameCancel: () => void
- dragProps: React.HTMLAttributes
-}) {
- return (
- !isEditing && onSwitch()}
- >
- {showDropBefore && }
- {isEditing ? (
-
- ) : (
- { e.stopPropagation(); onDoubleClick() }}>
- {tab.entry.icon && isEmoji(tab.entry.icon) && {tab.entry.icon}}
- {tab.entry.title}
-
- )}
-
-
- {showDropAfter && }
-
- )
-}
-
-function NavButtons({ canGoBack, canGoForward, onGoBack, onGoForward }: {
- canGoBack?: boolean; canGoForward?: boolean; onGoBack?: () => void; onGoForward?: () => void
-}) {
- return (
-
- )
-}
-
-function TabBarActions({ onCreateNote }: { onCreateNote?: () => void }) {
- return (
-
-
-
-
-
-
-
- {tabs.map((tab, index) => (
-
onSwitchTab(tab.entry.path)}
- onClose={() => onCloseTab(tab.entry.path)}
- onDoubleClick={() => onRenameTab && setEditingPath(tab.entry.path)}
- onRenameSave={(newTitle) => { setEditingPath(null); onRenameTab?.(tab.entry.path, newTitle) }}
- onRenameCancel={() => setEditingPath(null)}
- dragProps={{
- onDragStart: (e) => handleDragStart(e, index),
- onDragEnd: handleDragEnd,
- onDragOver: (e) => handleDragOver(e, index),
- onDrop: handleDrop,
- }}
- />
- ))}
-
-
-
-