shadcn.io is not affiliated with official shadcn/ui
Note Organizer CRUD Block for Solid
A notes window with folders, a note list and an editor that autosaves: Delete moves a note to a Recently deleted folder where it can be restored or deleted forever, and Undo reverses the move.
Installation
Overview
Make deleting forgiving without a confirmation dialog on every note, with this notes window for Solid with Ark UI. It is a framed window of fixed height inside a hairline frame with a plus mark on each corner: a top bar with the title and the one Shine Button, New note; at the start the folders as a nav, Notes, Work, Recipes and Recently deleted, each with its count; then the notes of the open folder, pinned ones first with a Pinned word; and at the end the open note's editor, a title Input, a Textarea and a Pin Toggle. The editor autosaves: a keystroke changes the note at once and, after 0.6 seconds without typing, a check beside the title says Saved. Delete does not destroy a note, it moves it to Recently deleted and the foot says "Moved Packing list to Recently deleted." beside an Undo. In that folder each note has Restore, which sends it home, and Delete forever, an Alert Dialog that says nothing brings the note back; the folder's heading says nothing is removed by itself. The window never grows, and below the medium breakpoint it shows one pane at a time with Back buttons. An Empty state covers an empty folder or no open note. For notes apps, document trays, drafts and any list where mistakes should be reversible.
FAQ
How do I fill it with my own notes?
Edit NOTES: each has an id, a title, a body, an edited ISO date, a pinned flag, a place of notes, work or recipes, and a deleted flag. The folder counts, the order of the list and the Recently deleted contents are all derived from those fields, so a deleted note remembers the folder it came from.
How does autosave work, and is anything really saved?
Typing updates the note in state straight away, so there is never an unsaved draft; the Saved mark only appears after a bounded 0.6 seconds without typing (immediately under reduced motion) and the polite line says "Saved in this demo." Nothing leaves the tab. In your app send the change from the same place, debounced, and show Saved when the request returns.
Why is there no confirmation when I delete a note?
Because Delete is a move: the note goes to Recently deleted, can be restored from there, and Undo in the foot reverses the move at once. Only Delete forever asks first, with an alert dialog whose first focus is Cancel, and that one cannot be undone, which the dialog says.
What does Pin do?
A pinned note sits at the top of its folder with a Pinned word and keeps that place while you edit it. Deleting a note unpins it. Pinning is a toggle with a pressed state, and the polite line says "Pinned Packing list to the top."
What stays local, and how do I wire a real save?
Notes live in state in this tab and a reload brings the originals back. In your app call your API from typeTitle, typeBody, pin, soften, restoreNote and forever; a server-side Recently deleted folder should purge on its own schedule if you want one, since this block says nothing is removed by itself.
How does it look on a phone?
One pane shows at a time: the note list first, with a Back to folders button, then the editor with a Back to notes button. Choosing a note moves focus to its title and each Back button returns focus to the row or folder you came from. The top bar keeps the title and New note.