Expose note title in the app

priv/static/index.html

@@ -67,6 +67,7 @@
 
       <note-form mode="add" id="new-note">
         <div class="note">
+          <p class="title"></p>
           <p class="content"></p>
           <div class="toolbar">
             <button class="add">➕</button>
@@ -96,6 +97,7 @@
     <dialog id="edit-note-dialog">
       <note-form mode="edit" id="edit-note">
         <div class="note">
+          <p class="title"></p>
           <p class="content"></p>
           <div class="toolbar">
             <button class="save">💾</button>

priv/static/js/components.js

@@ -552,6 +552,7 @@ class NoteForm extends HTMLElement {
 
     this.note = {
       type: "note",
+      title: "",
       content: "",
       reminder: null,
     };
@@ -559,6 +560,7 @@ class NoteForm extends HTMLElement {
 
   connectedCallback() {
     this.mode = this.attributes.mode.value;
+    this.titleField = this.querySelector(".title");
     this.content = this.querySelector(".content");
     this.tasklistModeButton = this.querySelector(".tasklist-mode");
     this.noteModeButton = this.querySelector(".note-mode");
@@ -656,10 +658,12 @@ class NoteForm extends HTMLElement {
     }
 
     this.addEventListener("contentChange", () => {
+      this.#setNote("title", this.titleField.firstChild.value);
       this.#setNote("content", this.content.firstChild.value);
     });
 
     this.#updateUI();
+    this.#setTitle();
     this.#setContent();
   }
 
@@ -667,12 +671,14 @@ class NoteForm extends HTMLElement {
     this.note = note;
     this.reminderPicker.value = note.reminder;
     this.#updateUI();
+    this.#setTitle();
     this.#setContent();
   }
 
   #reset() {
     this.note = {
       type: "note",
+      title: "",
       content: "",
       reminder: null,
     };
@@ -680,6 +686,7 @@ class NoteForm extends HTMLElement {
     this.reminderPicker.value = null;
 
     this.#updateUI();
+    this.#setTitle();
     this.#setContent();
   }
 
@@ -723,6 +730,12 @@ class NoteForm extends HTMLElement {
     }
   }
 
+  #setTitle() {
+    const title = html`<editable-area></editable-area>`;
+    this.titleField.replaceChildren(title);
+    title.value = this.note.title;
+  }
+
   #setContent() {
     const contentFun =
       contentMap[`${this.note.type}_${typeof this.note.content}`];

priv/static/js/jenot.js

@@ -209,10 +209,21 @@ function renderNote(note) {
   container.classList.add("note");
   container.classList.add("readonly");
 
+  if (note.title && note.title !== "") {
+    const title = document.createElement("p");
+    title.classList.add("title");
+    title.replaceChildren(...renderText(note.title));
+    container.appendChild(title);
+  }
+
   if (note.type === "note") {
-    container.replaceChildren(...renderText(note.content));
+    const body = document.createElement("p");
+    body.classList.add("body");
+    body.replaceChildren(...renderText(note.content));
+    container.appendChild(body);
   } else if (note.type === "tasklist") {
     const list = document.createElement("ul");
+    list.classList.add("body");
 
     note.content.forEach((task) => {
       const item = document.createElement("li");

priv/static/js/synced-store.js

@@ -5,6 +5,7 @@ function notesEqual(n1, n2) {
   return (
     n1.id === n2.id &&
     n1.type === n2.type &&
+    n1.title === n2.title &&
     n1.content === n2.content &&
     n1.deleted === n2.deleted &&
     n1.reminder?.enabled === n2.reminder?.enabled &&
@@ -119,6 +120,7 @@ class WebNoteStore {
 const draftTemplate = {
   id: "draft",
   type: "note",
+  title: "",
   content: "",
   reminder: null,
 };
@@ -209,6 +211,7 @@ export class SyncedNoteStore extends EventTarget {
     const entry = {
       id: "id_" + now,
       type: note.type,
+      title: note.title,
       content: note.content,
       reminder: note.reminder
         ? {

priv/static/style.css

@@ -243,6 +243,16 @@ task-list ul {
 
 /* Note form */
 
+note-form:focus-within .title {
+  display: block;
+}
+
+note-form .title {
+  display: none;
+  font-size: 1.2em;
+  font-weight: bold;
+}
+
 note-form .content {
   min-height: 2.5em;
 }
@@ -302,6 +312,11 @@ button {
   padding: 4px 8px;
 }
 
+.note.readonly .title {
+  font-size: 1.2em;
+  font-weight: bold;
+}
+
 .note.readonly ul {
   display: flex;
   flex-direction: column;