From 35b9fab7245280bbe3dfab6caca057b6f534425b Mon Sep 17 00:00:00 2001
From: Nathan Chapman <nathan@windmillapps.org>
Date: Wed, 20 Nov 2024 09:28:19 -0700
Subject: [PATCH] Small updates and fixes

---
 assets/css/app.css                            | 34 +++++++++++++++++++
 lib/send_it/marketing.ex                      |  2 +-
 lib/send_it_web/components/core_components.ex | 26 ++++++++------
 .../live/contact_live/show.html.heex          |  7 ++--
 lib/send_it_web/live/message_live/index.ex    |  2 +-
 .../live/message_live/index.html.heex         |  2 +-
 .../live/message_live/show.html.heex          | 12 ++++---
 7 files changed, 62 insertions(+), 23 deletions(-)

diff --git a/assets/css/app.css b/assets/css/app.css
index 5b7fc93..b2cd917 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -293,10 +293,31 @@ input[type="checkbox"] {
   }
 }
 
+.dl-default {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+
+  & dt {
+    font-weight: bold;
+  }
+
+  & dd {
+    padding: 1rem;
+    background-color: var(--grey-dark);
+    margin: 0;
+    border-radius: 1rem;
+  }
+}
+
 .error {
   color: var(--red);
 }
 
+.back-link {
+  margin-bottom: 2rem;
+}
+
 .banner {
   max-width: 1024px;
   margin: 0 auto;
@@ -312,4 +333,17 @@ input[type="checkbox"] {
   & p {
     font-size: 1.75em;
   }
+}
+
+.text-content {
+
+  & h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p:not(:last-child) {
+    margin-bottom: 1rem;
+  }
 }
\ No newline at end of file
diff --git a/lib/send_it/marketing.ex b/lib/send_it/marketing.ex
index 6c1882c..1f80e0e 100644
--- a/lib/send_it/marketing.ex
+++ b/lib/send_it/marketing.ex
@@ -130,7 +130,7 @@ defmodule SendIt.Marketing do
 
   """
   def list_messages do
-    Repo.all(Message)
+    Repo.all(from m in Message, order_by: [desc: m.inserted_at])
   end
 
   @doc """
diff --git a/lib/send_it_web/components/core_components.ex b/lib/send_it_web/components/core_components.ex
index d976319..c172692 100644
--- a/lib/send_it_web/components/core_components.ex
+++ b/lib/send_it_web/components/core_components.ex
@@ -495,14 +495,12 @@ defmodule SendItWeb.CoreComponents do
 
   def list(assigns) do
     ~H"""
-    <div>
-      <dl>
-        <div :for={item <- @item}>
-          <dt><%= item.title %></dt>
-          <dd><%= render_slot(item) %></dd>
-        </div>
-      </dl>
-    </div>
+    <dl class="dl-default">
+      <div :for={item <- @item}>
+        <dt><%= item.title %></dt>
+        <dd><%= render_slot(item) %></dd>
+      </div>
+    </dl>
     """
   end
 
@@ -518,10 +516,9 @@ defmodule SendItWeb.CoreComponents do
 
   def back(assigns) do
     ~H"""
-    <div>
+    <div class="back-link">
       <.link navigate={@navigate}>
-        <.icon name="hero-arrow-left-solid" />
-        <%= render_slot(@inner_block) %>
+        &larr; <%= render_slot(@inner_block) %>
       </.link>
     </div>
     """
@@ -627,4 +624,11 @@ defmodule SendItWeb.CoreComponents do
   def translate_errors(errors, field) when is_list(errors) do
     for {^field, {msg, opts}} <- errors, do: translate_error({msg, opts})
   end
+
+  @doc """
+  Converts time into readable time
+  """
+  def format_date(date) do
+    Calendar.strftime(date, "%a, %b %d %Y")
+  end
 end
diff --git a/lib/send_it_web/live/contact_live/show.html.heex b/lib/send_it_web/live/contact_live/show.html.heex
index ebaef1c..ff9a3ee 100644
--- a/lib/send_it_web/live/contact_live/show.html.heex
+++ b/lib/send_it_web/live/contact_live/show.html.heex
@@ -1,6 +1,7 @@
+<.back navigate={~p"/contacts"}>Back to contacts</.back>
+
 <.header>
-  Contact <%= @contact.id %>
-  <:subtitle>This is a contact record from your database.</:subtitle>
+  Contact
   <:actions>
     <.link patch={~p"/contacts/#{@contact}/edit"} phx-click={JS.push_focus()}>
       <.button>Edit contact</.button>
@@ -14,8 +15,6 @@
   <:item title="Subscribed"><%= @contact.subscribed %></:item>
 </.list>
 
-<.back navigate={~p"/contacts"}>Back to contacts</.back>
-
 <.modal :if={@live_action == :edit} id="contact-modal" show on_cancel={JS.patch(~p"/contacts/#{@contact}")}>
   <.live_component
     module={SendItWeb.ContactLive.FormComponent}
diff --git a/lib/send_it_web/live/message_live/index.ex b/lib/send_it_web/live/message_live/index.ex
index 86ed951..44498df 100644
--- a/lib/send_it_web/live/message_live/index.ex
+++ b/lib/send_it_web/live/message_live/index.ex
@@ -34,7 +34,7 @@ defmodule SendItWeb.MessageLive.Index do
 
   @impl true
   def handle_info({SendItWeb.MessageLive.FormComponent, {:saved, message}}, socket) do
-    {:noreply, stream_insert(socket, :messages, message)}
+    {:noreply, stream_insert(socket, :messages, message, at: 0)}
   end
 
   @impl true
diff --git a/lib/send_it_web/live/message_live/index.html.heex b/lib/send_it_web/live/message_live/index.html.heex
index 7e2f52c..0f8615d 100644
--- a/lib/send_it_web/live/message_live/index.html.heex
+++ b/lib/send_it_web/live/message_live/index.html.heex
@@ -16,7 +16,7 @@
     <%= message.subject %>
   </:col>
   <:col :let={{_id, message}} label="Created">
-    <%= message.inserted_at %>
+    <%= format_date(message.inserted_at) %>
   </:col>
   <:action :let={{id, message}}>
     <.link
diff --git a/lib/send_it_web/live/message_live/show.html.heex b/lib/send_it_web/live/message_live/show.html.heex
index 0f238ab..2db52b0 100644
--- a/lib/send_it_web/live/message_live/show.html.heex
+++ b/lib/send_it_web/live/message_live/show.html.heex
@@ -1,6 +1,8 @@
+<.back navigate={~p"/messages"}>Back to messages</.back>
+
 <.header>
-  Message <%= @message.id %>
-  <:subtitle>This is a message record from your database.</:subtitle>
+  Message
+  <:subtitle>Sent: <%= format_date(@message.inserted_at) %></:subtitle>
 </.header>
 
 <.list>
@@ -8,12 +10,12 @@
     <%= @message.subject %>
   </:item>
   <:item title="Content">
-    <%= @message.content %>
+    <div class="text-content">
+      <%= raw(@message.content) %>
+    </div>
   </:item>
 </.list>
 
-<.back navigate={~p"/messages"}>Back to messages</.back>
-
 <.modal
   :if={@live_action == :edit}
   id="message-modal"