From 77a9f148cfe2b592a5fdc78338483a5ddda641bb Mon Sep 17 00:00:00 2001
From: Adrian Gruntkowski <adrian.gruntkowski@gmail.com>
Date: Sun, 9 Feb 2025 00:03:01 +0100
Subject: [PATCH] Expose note title in the app

---
 priv/static/index.html         |  2 ++
 priv/static/js/components.js   | 13 +++++++++++++
 priv/static/js/jenot.js        | 13 ++++++++++++-
 priv/static/js/synced-store.js |  3 +++
 priv/static/style.css          | 15 +++++++++++++++
 5 files changed, 45 insertions(+), 1 deletion(-)

diff --git a/priv/static/index.html b/priv/static/index.html
index c736c2c..b08d0d6 100644
--- a/priv/static/index.html
+++ b/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>
diff --git a/priv/static/js/components.js b/priv/static/js/components.js
index 563a98f..d15d6e3 100644
--- a/priv/static/js/components.js
+++ b/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}`];
diff --git a/priv/static/js/jenot.js b/priv/static/js/jenot.js
index 6ad2d93..bf6cc25 100644
--- a/priv/static/js/jenot.js
+++ b/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");
diff --git a/priv/static/js/synced-store.js b/priv/static/js/synced-store.js
index de65ade..4b96cc4 100644
--- a/priv/static/js/synced-store.js
+++ b/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
         ? {
diff --git a/priv/static/style.css b/priv/static/style.css
index eaba3eb..72c0167 100644
--- a/priv/static/style.css
+++ b/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;