Sidebar & Navigation
Relevant source files
The following files were used as context for generating this wiki page:
The Sidebar & Navigation system in Augenblick serves as the primary interface for organizing and accessing notes. It provides a structured view of active notes (split between pinned and unpinned) and trashed notes, while also facilitating layout management through a resizable sidebar and global hotkey navigation. Sources: plans/migration.inventory.md, src/App.tsx
Architecture and Layout
The navigation interface is composed of a resizable sidebar and a main content area. The sidebar's width is managed as persistent state, defaulting to 260px and clamped between 200px and 400px. A vertical resize handle allows for manual adjustment via mouse dragging or keyboard arrows (10px increments). Sources: src/stores/notesStore.ts:31, src/App.tsx:288-301, plans/migration.inventory.md:154-157
Component Hierarchy
The sidebar architecture uses a specialized set of components to handle different note states and sections:
- Sidebar: The top-level container that manages view modes ("notes" or "trash").
- NoteItem: Represents active notes, displaying titles, relative interaction times, and expiry rings.
- TrashItem: Represents notes in the trash, showing a deletion countdown.
- Footer Controls: Context-sensitive buttons for note creation, trash toggling, and clearing the trash.
Sources: src/App.tsx:271-286, plans/migration.inventory.md:162-171
The diagram above illustrates the structural relationship between the sidebar's view modes and its internal components. Sources: src/features/sidebar/Sidebar.tsx, src/App.tsx:271-286
Navigation Modes and State
The system operates in two primary view modes: notes and trash. Navigation between these modes is handled through the notesStore and triggered by either sidebar buttons or keyboard shortcuts (e.g., Esc to return to notes view). Sources: src/stores/notesStore.ts:5, src/App.tsx:283-285
View Mode Logic
| Mode | Display Content | Footer Actions |
|---|---|---|
| Notes | Pinned notes (max 5) followed by unpinned active notes. | "New Note", "Trash" (with count badge). |
| Trash | Trashed notes ordered by trashedAt date. | "Empty Trash", "Back to Notes". |
Sources: plans/migration.inventory.md:164-171, src/stores/notesStore.ts:162-167
Note Organization and Reordering
Notes are organized within the sidebar using a multi-tiered priority system. Pinned notes always appear at the top, restricted to a maximum of 5. Active notes are otherwise sorted by their sort_order attribute. Sources: src/stores/notesStore.ts:153-157, plans/migration.inventory.md:31-33
Drag and Drop Reordering
The system utilizes @dnd-kit to allow manual reordering within the "pinned" and "notes" sections independently.
- Reorder Intent: User drags a
NoteItem. - State Update: The
notesStoreupdates thesort_orderin the local list and pushes the previous state to an undo stack (depth 20). - Persistence: The new ID order is sent to the backend via
notes_reorder(ids).
Sources: src/stores/notesStore.ts:246-271, plans/migration.inventory.md:104-108
This sequence shows the flow of data from a user interaction to the persistent storage layer during reordering. Sources: src/stores/notesStore.ts:246-253, src/test/features/Sidebar.test.tsx:16-44
Keyboard Navigation and Shortcuts
The application provides deep integration with system-level and application-level hotkeys to manage navigation without mouse input. Sources: src/App.tsx:238-265, plans/migration.inventory.md:184-196
Selection Movement
Users can navigate the note list using Cmd/Ctrl + Shift + ArrowUp/Down. This navigation respects the visual order (pinned first, then active notes) and clamps at the boundaries of the list. Sources: src/App.tsx:244-247, plans/migration.inventory.md:110-113
Hotkey Mapping
| Shortcut | Action | Target |
|---|---|---|
Cmd+N | Create new note | Global |
Cmd+W | Move selected to trash / Close | Active Note |
Cmd+P | Toggle Pin/Unpin | Selected Note |
Cmd+K | Open Command Palette | Global |
Cmd+Shift+Up/Down | Move selection | Sidebar List |
Esc | Back to Notes / Close Palette | Trash View |
Sources: src/App.tsx:238-265, plans/migration.inventory.md:184-196
Summary
The Sidebar & Navigation system provides a robust framework for note management through persistent state, prioritized list organization, and extensive keyboard accessibility. By separating active concerns (notes and pins) from archival concerns (trash), it maintains a clear interface for the auto-expiring note lifecycle. Sources: src/features/sidebar/Sidebar.tsx, src/stores/notesStore.ts, plans/migration.inventory.md