[templates] Fix note parsing

vrobbler/apps/tasks/models.py

@@ -76,33 +76,62 @@ class TaskLogData(BaseLogData):
         return separator.join(lines).encode("utf-8").decode("unicode_escape")
 
     def notes_as_html(self) -> str:
+        import bleach
+        import markdown
+        from django.utils.safestring import mark_safe
+        from scrobbles.dataclasses import BaseLogData
+
         if not self.notes:
             return ""
 
+        md = markdown.Markdown(extensions=["extra"])
+        allowed_tags = [
+            "p", "br", "strong", "em", "a", "ul", "ol", "li",
+            "code", "pre", "blockquote", "h1", "h2", "h3", "h4", "h5", "h6",
+            "hr", "img",
+        ]
+
         notes = self.notes
         if isinstance(notes, dict):
             notes = [{k: v} for k, v in notes.items()]
         if isinstance(notes, str):
             notes = [notes]
 
-        html_notes = []
+        note_items = []
         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>'
-                )
+                note_items.append((timestamp, note_text.strip()))
             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>')
+                        note_items.append((None, line.strip()))
             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)
+                        note_items.append((None, item.strip()))
+
+        html_parts = []
+        for i, (ts, text) in enumerate(note_items):
+            if i > 0:
+                html_parts.append('<hr class="note-divider">')
+
+            ts_html = ""
+            if ts:
+                ts_html = f'<h5 class="note-timestamp">{BaseLogData._format_timestamp(ts)}</h5>'
+
+            content_html = bleach.clean(
+                md.convert(text),
+                tags=allowed_tags,
+                strip=True,
+            )
+
+            html_parts.append(
+                f'<div class="note-item">{ts_html}<div class="note-content">{content_html}</div></div>'
+            )
+
+        return mark_safe("".join(html_parts))
 
 
 class Task(LongPlayScrobblableMixin):