fix: always show breadcrumb filename

This commit is contained in:
lucaronin
2026-04-10 21:08:45 +02:00
parent 717fa9d1a6
commit 71a3be577d
2 changed files with 61 additions and 5 deletions

View File

@@ -0,0 +1,59 @@
import { render, screen } from '@testing-library/react'
import { describe, expect, it, vi } from 'vitest'
import { BreadcrumbBar } from './BreadcrumbBar'
import './Editor.css'
import type { VaultEntry } from '../types'
const baseEntry: VaultEntry = {
path: '/vault/note/test.md',
filename: 'test.md',
title: 'Test Note',
isA: 'Note',
aliases: [],
belongsTo: [],
relatedTo: [],
status: null,
archived: false,
modifiedAt: 1700000000,
createdAt: null,
fileSize: 100,
snippet: '',
wordCount: 0,
relationships: {},
icon: null,
color: null,
order: null,
outgoingLinks: [],
template: null,
sort: null,
sidebarLabel: null,
view: null,
visible: null,
properties: {},
organized: false,
favorite: false,
favoriteIndex: null,
listPropertiesDisplay: [],
hasH1: false,
}
const defaultProps = {
wordCount: 100,
showDiffToggle: false,
diffMode: false,
diffLoading: false,
onToggleDiff: vi.fn(),
}
describe('BreadcrumbBar filename visibility', () => {
it('keeps the filename visible in the breadcrumb by default', () => {
render(<BreadcrumbBar entry={baseEntry} {...defaultProps} />)
expect(screen.getByText('test')).toBeVisible()
})
it('keeps the filename visible even when the bar is marked as title-hidden', () => {
const { container } = render(<BreadcrumbBar entry={baseEntry} {...defaultProps} />)
container.querySelector('.breadcrumb-bar')?.setAttribute('data-title-hidden', '')
expect(screen.getByText('test')).toBeVisible()
})
})

View File

@@ -22,7 +22,8 @@
opacity: 0.55;
}
/* Breadcrumb bar: title + border toggled via data attribute (no React re-render) */
/* Breadcrumb bar: border can still react to the data attribute, but the
breadcrumb filename/title stays visible at all times. */
.breadcrumb-bar {
transition: border-color 0.2s ease;
}
@@ -32,10 +33,6 @@
}
.breadcrumb-bar__title {
display: none;
}
.breadcrumb-bar[data-title-hidden] .breadcrumb-bar__title {
display: flex;
}