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:
Luca Rossi
2026-03-03 02:31:10 +01:00
committed by GitHub
parent 4d7252c78f
commit 35144aedfb
4 changed files with 79 additions and 0 deletions

View File

@@ -0,0 +1,48 @@
import { Archive, ArrowUUpLeft } from '@phosphor-icons/react'
interface ArchivedNoteBannerProps {
onUnarchive: () => void
}
export function ArchivedNoteBanner({ onUnarchive }: ArchivedNoteBannerProps) {
return (
<div
data-testid="archived-note-banner"
style={{
display: 'flex',
alignItems: 'center',
gap: 6,
padding: '4px 16px',
background: 'var(--muted)',
borderBottom: '1px solid var(--border)',
fontSize: 12,
color: 'var(--muted-foreground)',
flexShrink: 0,
}}
>
<Archive size={13} weight="bold" />
<span>Archived</span>
<button
data-testid="unarchive-btn"
onClick={onUnarchive}
style={{
display: 'inline-flex',
alignItems: 'center',
gap: 4,
marginLeft: 'auto',
padding: '2px 8px',
background: 'transparent',
border: '1px solid var(--border)',
borderRadius: 4,
fontSize: 11,
color: 'var(--muted-foreground)',
cursor: 'pointer',
}}
title="Unarchive (Cmd+E)"
>
<ArrowUUpLeft size={12} />
Unarchive
</button>
</div>
)
}