Display notes in block mode, add dummy new-note control

Author: CrossEye

tiddlers/$__supp-info_notes_content.json

@@ -4,6 +4,6 @@
     "Another note, just to prove I can."
   ],
   "Quick Start": [
-    "And a note on another tiddler"
+    "And a note on another tiddler, with a [[link|Hard and Soft Links]] just for demo."
   ]
 }

tiddlers/$__supp-info_notes_content.json.meta

@@ -1,5 +1,5 @@
 created: 20251107151758434
-modified: 20251107152250615
+modified: 20251107173841789
 tags: $:/tags/SupplementaryInfo
 title: $:/supp-info/notes/content
 type: application/json

tiddlers/$__supp-info_notes_view-template.tid

@@ -1,18 +1,29 @@
 created: 20251107152410791
-modified: 20251107173101719
+modified: 20251107204927451
 tags: $:/tags/ViewTemplate
 title: $:/supp-info/notes/view-template
 type: text/vnd.tiddlywiki
 
+\procedure add-note()
+<$action-log clicked=<<now>> />
+\end add-note
+
 <% if [{$:/supp-info/notes/content}jsonget<currentTiddler>] %>
 <div class="supp-notes">
 <$let count={{{ [{$:/supp-info/notes/content}jsonindexes<currentTiddler>last[]add[1]] }}}>
 
 <details open>
-  <summary><<count>> Note(s)</summary>
+  <summary>
+    <<count>> Note(s)  
+    <span class="controls">
+      <$button actions=<<add-note>> ><span class="icon">{{$:/core/images/new-button}}</span></$button>
+    </span>
+  </summary>
   <div class="note-list">
       <$list filter="[{$:/supp-info/notes/content}jsonindexes<currentTiddler>]" variable="index">
-        <div class="note"><$text text={{{ [{$:/supp-info/notes/content}jsonget<currentTiddler>,<index>] }}}/></div>
+        <div class="note">
+          <$wikify name="note" text={{{ [{$:/supp-info/notes/content}jsonget<currentTiddler>,<index>] }}} output="html"><<note>></$wikify>
+        </div>
       </$list>
   </div>
 </details>
@@ -25,6 +36,11 @@ type: text/vnd.tiddlywiki
   div.debug {background: red; color: white; font-weight: bold; font-size: 150%;}
   background-color: #ffc;
   padding: 0;
+  .controls {
+    display: inline-block;
+    margin-left: 1em;
+    svg {width: 1em; height: 1em; vertical-align: middle;}
+  }
   summary {background-color: #996; color: white; padding: .5em; font-weight: bold;}
   .note-list {padding: .5em;}
   .note {border: 1px solid #ccc; padding: .25em; margin-top: .5em; &>:first-child {margin-top: 0;}}