From 4b4c01bb146f9fcde1e3e47ca859bbbfef0e95f0 Mon Sep 17 00:00:00 2001
From: Daniel Kempkens <daniel+git@kempkens.io>
Date: Mon, 21 Aug 2023 13:40:48 +0200
Subject: [PATCH] feat(chat): message bookmarks

---
 lib/bdfr_browser/message.ex                   |  1 +
 ...30821110436_add_chat_message_bookmarks.exs |  9 ++++++
 priv/templates/http/chat.eex                  | 29 ++++++++++++++++++-
 3 files changed, 38 insertions(+), 1 deletion(-)
 create mode 100644 priv/repo/migrations/20230821110436_add_chat_message_bookmarks.exs

diff --git a/lib/bdfr_browser/message.ex b/lib/bdfr_browser/message.ex
index 83480a3..ff4f96c 100644
--- a/lib/bdfr_browser/message.ex
+++ b/lib/bdfr_browser/message.ex
@@ -12,6 +12,7 @@ defmodule BdfrBrowser.Message do
     field :author, :string
     field :message, :string
     field :posted_at, :utc_datetime
+    field :bookmark, :string
 
     belongs_to :chat, Chat
   end
diff --git a/priv/repo/migrations/20230821110436_add_chat_message_bookmarks.exs b/priv/repo/migrations/20230821110436_add_chat_message_bookmarks.exs
new file mode 100644
index 0000000..acaf9b1
--- /dev/null
+++ b/priv/repo/migrations/20230821110436_add_chat_message_bookmarks.exs
@@ -0,0 +1,9 @@
+defmodule BdfrBrowser.Repo.Migrations.AddChatMessageBookmarks do
+  use Ecto.Migration
+
+  def change do
+    alter table("messages") do
+      add :bookmark, :string
+    end
+  end
+end
diff --git a/priv/templates/http/chat.eex b/priv/templates/http/chat.eex
index 65ccd53..364a909 100644
--- a/priv/templates/http/chat.eex
+++ b/priv/templates/http/chat.eex
@@ -1,7 +1,12 @@
 <h2>Chats</h2>
 
 <%= for message <- messages do %>
-  <div class="row" style="margin-bottom: 2px;">
+  <div class="row" style="margin-bottom: 2px;"
+    id="msg-<%= message.id %>"
+    <%= unless is_nil(message.bookmark) do %>
+      data-bookmark="<%= message.bookmark %>"
+    <% end %>
+  >
     <div class="card">
       <div class="card-body" style="padding: 8px;">
         <blockquote class="blockquote mb-0" style="font-size: 1rem;">
@@ -10,9 +15,31 @@
           <footer class="blockquote-footer">
             <a href="/user/<%= message.author %>"><%= message.author %></a>,
             <small><%= DateTime.to_iso8601(message.posted_at) %></small>
+
+            <%= unless is_nil(message.bookmark) do %>
+              <span class="badge text-bg-secondary"><%= message.bookmark %></span>
+            <% end %>
           </footer>
         </blockquote>
       </div>
     </div>
   </div>
 <% end %>
+
+<script>
+  const bookmarks = document.querySelectorAll('[data-bookmark]');
+  const header = document.getElementsByTagName('h2')[0];
+  let container = document.createElement('p');
+
+  for (var i = 0; i < bookmarks.length; i++) {
+    let bookmarkElement = document.createElement('a');
+    bookmarkElement.href = `#${bookmarks[i].id}`;
+    bookmarkElement.innerText = bookmarks[i].dataset.bookmark;
+    bookmarkElement.className = "btn btn-secondary btn-sm";
+    bookmarkElement.setAttribute('role', 'button');
+
+    container.appendChild(bookmarkElement);
+  }
+
+  header.after(container);
+</script>