[templates] Cleaning up how notes are displayed

vrobbler/apps/scrobbles/views.py

@@ -801,7 +801,7 @@ class ScrobbleDetailView(DetailView):
         FormClass = self.get_form_class()
 
         log = self.object.log or {}
-        log["notes"] = self.object.logdata.notes_as_str()
+        log["notes"] = self.object.logdata.notes_as_str(separator="\n")
 
         return FormClass(initial=log)
 

vrobbler/apps/tasks/models.py

@@ -38,7 +38,7 @@ class TaskLogData(BaseLogData):
         "todoist_project_id",
     }
 
-    def notes_as_str(self) -> str:
+    def notes_as_str(self, separator: str = " | ") -> str:
         """Return formatted notes with line breaks and no keys"""
         labels_str = ""
         if self.labels:
@@ -60,7 +60,34 @@ class TaskLogData(BaseLogData):
                     lines += note
                 if isinstance(note, str):
                     lines.append(note)
-        return "\n".join(lines).encode("utf-8").decode("unicode_escape")
+        return separator.join(lines).encode("utf-8").decode("unicode_escape")
+
+    def notes_as_html(self) -> str:
+        if not self.notes:
+            return ""
+
+        notes = self.notes
+        if isinstance(notes, str):
+            notes = [notes]
+
+        html_notes = []
+        for note in notes:
+            if isinstance(note, dict):
+                timestamp, note_text = next(iter(note.items()))
+                note_text = " ".join(note_text.strip().split())
+                html_notes.append(
+                    f'<div class="sticky-note">{timestamp}: {note_text}</div>'
+                )
+            elif isinstance(note, str):
+                escaped = note.encode("utf-8").decode("unicode_escape")
+                for line in escaped.split("\n"):
+                    if line.strip():
+                        html_notes.append(f'<div class="sticky-note">{line}</div>')
+            elif isinstance(note, list):
+                for item in note:
+                    if isinstance(item, str):
+                        html_notes.append(f'<div class="sticky-note">{item}</div>')
+        return "".join(html_notes)
 
 
 class Task(LongPlayScrobblableMixin):

vrobbler/templates/foods/food_detail.html

@@ -34,7 +34,7 @@
                 <tr>
                         <td><a href={{scrobble.get_absolute_url}}>{{scrobble.local_timestamp}}</a></td>
                         <td>{% if scrobble.logdata.calories %}{{scrobble.logdata.calories}}{% else %}{{scrobble.media_obj.calories}}{% endif %}</td>
-                        <td>{% for note in scrobble.logdata.notes %}{{note}}{% if not forloop.last %}; {% endif%}{% endfor %}
+                        <td>{{scrobble.logdata.notes_as_str|safe}}</td>
                 </tr>
                 {% endfor %}
             </tbody>

vrobbler/templates/lifeevents/lifeevent_detail.html

@@ -37,7 +37,7 @@
                     <tr>
                         <td><a href="{{scrobble.get_absolute_url}}">{{scrobble.local_timestamp}}</a></td>
                         <td><a href="{{scrobble.get_media_source_url}}">{{scrobble.logdata.title}}</a></td>
-                        <td>{{scrobble.logdata.notes_as_html|safe}}</td>
+                        <td>{{scrobble.logdata.notes_as_str|safe}}</td>
                         <td>{{scrobble.source}}</td>
                     </tr>
                     {% endfor %}

vrobbler/templates/locations/geolocation_detail.html

@@ -66,7 +66,7 @@
                     <tr>
                         <td><a href={{scrobble.get_absolute_url}}>{{scrobble.local_timestamp}}</a></td>
                         <td>{% for person in scrobble.logdata.with_people%}{{person}}{% if not forloop.last %}, {% endif%}{% endfor %}</td>
-                        <td>{% for note in scrobble.logdata.notes %}{{note}}{% if not forloop.last %}; {% endif%}{% endfor %}
+                        <td>{{scrobble.logdata.notes_as_str|safe}}</td>
                     </tr>
                     {% endfor %}
                 </tbody>

vrobbler/templates/scrobbles/scrobble_detail.html

@@ -11,6 +11,7 @@
 <div class="row">
 
 <h1>{{ object.media_obj }} - {{object.media_type}}</h1>
+<h2 class="text-muted">{{ object.local_timestamp }}</h2>
 
 {% with notes_html=object.logdata.notes_as_html %}
 {% if notes_html %}
@@ -27,8 +28,10 @@
 <p>Rate: {{object.logdata.avg_seconds_per_page}}s per page</p>
 {% endif %}
 
-<details class="mb-3">
+<button class="btn btn-secondary mb-3" type="button" data-bs-toggle="collapse" data-bs-target="#editLogForm">
-  <summary>Edit Log</summary>
+  Edit Log
+</button>
+<div class="collapse mb-3" id="editLogForm">
   <form method="post" class="needs-validation mt-3" novalidate>
     {% csrf_token %}
     {% for field in log_form %}
@@ -46,7 +49,7 @@
 
     <button type="submit" class="btn btn-primary">Save</button>
   </form>
-</details>
+</div>
 
 <h2 class="mt-4">Other Scrobbles of This Media</h2>
 {% if related_scrobbles %}

vrobbler/templates/tasks/task_detail.html

@@ -64,7 +64,7 @@
                     <tr>
                         <td><a href="{{scrobble.get_absolute_url}}">{{scrobble.local_timestamp}}</a></td>
                         <td><a href="{{scrobble.get_media_source_url}}">{{scrobble.logdata.title}}</a></td>
-                        <td>{{scrobble.logdata.notes_as_html|safe}}</td>
+                        <td>{{scrobble.logdata.notes_as_str|safe}}</td>
                         <td>{{scrobble.source}}</td>
                     </tr>
                     {% endfor %}