Add status preview in translation_live/show

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;
 }

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"

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>