diff --git a/design/archived-note-indicator.pen b/design/archived-note-indicator.pen new file mode 100644 index 00000000..ebcc2d64 --- /dev/null +++ b/design/archived-note-indicator.pen @@ -0,0 +1 @@ +{"children":[],"variables":{}} \ No newline at end of file diff --git a/src/components/ArchivedNoteBanner.test.tsx b/src/components/ArchivedNoteBanner.test.tsx new file mode 100644 index 00000000..9d8c7985 --- /dev/null +++ b/src/components/ArchivedNoteBanner.test.tsx @@ -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() + expect(screen.getByTestId('archived-note-banner')).toBeTruthy() + expect(screen.getByText('Archived')).toBeTruthy() + }) + + it('renders unarchive button with keyboard hint', () => { + render() + 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() + fireEvent.click(screen.getByTestId('unarchive-btn')) + expect(onUnarchive).toHaveBeenCalledOnce() + }) +}) diff --git a/src/components/ArchivedNoteBanner.tsx b/src/components/ArchivedNoteBanner.tsx new file mode 100644 index 00000000..e55e1b78 --- /dev/null +++ b/src/components/ArchivedNoteBanner.tsx @@ -0,0 +1,48 @@ +import { Archive, ArrowUUpLeft } from '@phosphor-icons/react' + +interface ArchivedNoteBannerProps { + onUnarchive: () => void +} + +export function ArchivedNoteBanner({ onUnarchive }: ArchivedNoteBannerProps) { + return ( +
+ + Archived + +
+ ) +} diff --git a/src/components/EditorContent.tsx b/src/components/EditorContent.tsx index 8a03e5ef..784352da 100644 --- a/src/components/EditorContent.tsx +++ b/src/components/EditorContent.tsx @@ -3,6 +3,7 @@ import type { useCreateBlockNote } from '@blocknote/react' import { DiffView } from './DiffView' import { BreadcrumbBar } from './BreadcrumbBar' import { TrashedNoteBanner } from './TrashedNoteBanner' +import { ArchivedNoteBanner } from './ArchivedNoteBanner' import { RawEditorView } from './RawEditorView' import { countWords } from '../utils/wikilinks' import { SingleEditorView } from './SingleEditorView' @@ -173,6 +174,9 @@ export function EditorContent({ onDeletePermanently={() => onDeleteNote?.(activeTab.entry.path)} /> )} + {activeTab?.entry.archived && breadcrumbProps.onUnarchiveNote && ( + breadcrumbProps.onUnarchiveNote!(activeTab.entry.path)} /> + )} )