From 724d161f5083a2fad9b5a5670264e102ad48d1fa Mon Sep 17 00:00:00 2001
From: Thelonius Kort <tnt@users.noreply.github.com>
Date: Wed, 8 Mar 2023 20:43:42 +0100
Subject: [PATCH] Add status preview in translation_live/show

---
 assets/css/article.css                        | 24 +++++++++++++++----
 lib/outlook_web/live/translation_live/show.ex | 10 +++++++-
 .../live/translation_live/show.html.heex      |  4 ++--
 3 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/assets/css/article.css b/assets/css/article.css
index d6a7029..f67ff01 100644
--- a/assets/css/article.css
+++ b/assets/css/article.css
@@ -7,22 +7,38 @@
   max-width: 25rem;
 }
 
-.article .tunit {
+.article span.tunit {
   @apply hover:bg-gray-300;
 }
 
-.dark .article .tunit {
+.dark .article span.tunit {
   @apply hover:bg-gray-700;
 }
 
-.article .tunit[current="yes"] {
+.article span.tunit[current="yes"] {
   @apply bg-amber-300 text-stone-700 hover:bg-amber-200 hover:text-red-900;
 }
 
-.dark .article .tunit[current="yes"] {
+.dark .article span.tunit[current="yes"] {
   @apply bg-amber-500/70 text-white hover:bg-amber-500/70 hover:text-red-900;
 }
 
+.article.show_status span.tunit[status="untranslated"] {
+  @apply text-red-900;
+}
+
+.dark .article.show_status span.tunit[status="untranslated"] {
+  @apply text-red-500;
+}
+
+.dark .article.show_status span.tunit[status="passable"] {
+  @apply text-amber-50;
+}
+
+.dark .article.show_status span.tunit[status="done"] {
+  @apply text-green-100;
+}
+
 .article a.hide-link {
   display: none;
 }
diff --git a/lib/outlook_web/live/translation_live/show.ex b/lib/outlook_web/live/translation_live/show.ex
index e1e2ec6..68bba37 100644
--- a/lib/outlook_web/live/translation_live/show.ex
+++ b/lib/outlook_web/live/translation_live/show.ex
@@ -10,10 +10,18 @@ defmodule OutlookWeb.TranslationLive.Show do
 
   @impl true
   def handle_params(%{"id" => id}, _, socket) do
+    translation = Translations.get_translation!(id)
     {:noreply,
      socket
      |> assign(:page_title, page_title(socket.assigns.live_action))
-     |> assign(:translation, Translations.get_translation!(id))}
+     |> assign(:translation, translation)
+     |> assign(:translation_tree,
+       InternalTree.render_translation(
+         translation.article.content, translation.content
+       ) |> InternalTree.garnish(
+         %{tunits: %{status: fn n -> n.status end, class: :tunit}}
+       )
+     )}
   end
 
   defp page_title(:show), do: "Show Translation"
diff --git a/lib/outlook_web/live/translation_live/show.html.heex b/lib/outlook_web/live/translation_live/show.html.heex
index af472bc..9818d43 100644
--- a/lib/outlook_web/live/translation_live/show.html.heex
+++ b/lib/outlook_web/live/translation_live/show.html.heex
@@ -18,8 +18,8 @@
   <:item title="Unauthorized"><%= @translation.unauthorized %></:item>
 </.list>
 
-<div class="article">
-  <.render_doc tree={InternalTree.render_translation(@translation.article.content, @translation.content)} />
+<div class="article show_status">
+  <.render_doc tree={@translation_tree} />
 </div>
 
 <.back navigate={~p"/articles/#{@translation.article}"}>Back to <article></article></.back>