In this episode, we add the ability to include notes on each card in our app. First, we enhance the edit card modal by introducing a new textarea input, replacing the standard input field so users can write more detailed notes. To make this reusable, we create a new TextArea component based on our existing text input, and update our forms to use this component where notes are needed.
After the UI is set up, we update our logic to store any notes entered when editing a card. We make sure that the database treats notes as an optional field (nullable), so you don’t have to provide them if you don’t want to. To confirm everything works, we edit a card, add some notes, save, and check that it’s all safely stored.
Lastly, as a nice touch, we add a small icon to any card that has notes. We pick a note-style icon from Heroicons, tweak its size and color, and ensure it only shows up when there are actually notes to display.
It’s a simple set of changes, but it adds a lot of flexibility to our cards by letting users add extra context wherever they need it!