feat: show archived note indicator banner in editor (#183)
Adds a subtle ArchivedNoteBanner component below the breadcrumb bar when a note is archived. Banner includes: - Muted gray background with archive icon + 'Archived' label - 'Unarchive' button (ArrowUUpLeft icon) wired to same handler as Cmd+E - Keyboard hint shown in button title Editor remains fully editable (banner is purely informational). Indicator appears/disappears reactively via entry.archived from store. Co-authored-by: Test <test@test.com>
This commit is contained in:
26
src/components/ArchivedNoteBanner.test.tsx
Normal file
26
src/components/ArchivedNoteBanner.test.tsx
Normal file
@@ -0,0 +1,26 @@
|
||||
import { render, screen, fireEvent } from '@testing-library/react'
|
||||
import { describe, it, expect, vi } from 'vitest'
|
||||
import { ArchivedNoteBanner } from './ArchivedNoteBanner'
|
||||
|
||||
describe('ArchivedNoteBanner', () => {
|
||||
it('renders archive icon and label', () => {
|
||||
render(<ArchivedNoteBanner onUnarchive={vi.fn()} />)
|
||||
expect(screen.getByTestId('archived-note-banner')).toBeTruthy()
|
||||
expect(screen.getByText('Archived')).toBeTruthy()
|
||||
})
|
||||
|
||||
it('renders unarchive button with keyboard hint', () => {
|
||||
render(<ArchivedNoteBanner onUnarchive={vi.fn()} />)
|
||||
const btn = screen.getByTestId('unarchive-btn')
|
||||
expect(btn).toBeTruthy()
|
||||
expect(btn.textContent).toContain('Unarchive')
|
||||
expect(btn.title).toBe('Unarchive (Cmd+E)')
|
||||
})
|
||||
|
||||
it('calls onUnarchive when button is clicked', () => {
|
||||
const onUnarchive = vi.fn()
|
||||
render(<ArchivedNoteBanner onUnarchive={onUnarchive} />)
|
||||
fireEvent.click(screen.getByTestId('unarchive-btn'))
|
||||
expect(onUnarchive).toHaveBeenCalledOnce()
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user