Update editing translation

lib/outlook_web/live/translation_live/form_component.ex

@@ -7,8 +7,8 @@ defmodule OutlookWeb.TranslationLive.FormComponent do
   @impl true
   def render(assigns) do
     ~H"""
-    <div class="flex">
-      <div>
+    <div class="flex gap-8 max-h-fit">
+      <div class="basis-1/2 overflow-auto">
         <.header>
           <%= @title %>
           <:subtitle>Use this form to manage translation records in your database.</:subtitle>
@@ -29,19 +29,21 @@ defmodule OutlookWeb.TranslationLive.FormComponent do
           <.input field={{f, :teaser}} type="textarea" label="teaser" class="h-28" />
           <%!-- <.input field={{f, :content}} type="text" label="content" /> --%>
           <.input field={{f, :date}} type="datetime-local" label="date" />
-          <.input field={{f, :public}} type="checkbox" label="public" />
-          <.input field={{f, :unauthorized}} type="checkbox" label="unauthorized" />
+          <div class="flex items-center justify-between">
+            <.input field={{f, :public}} type="checkbox" label="public" />
+            <.input field={{f, :unauthorized}} type="checkbox" label="unauthorized" />
+          </div>
           <:actions>
             <.button phx-disable-with="Saving...">Save Translation</.button>
           </:actions>
         </.simple_form>
         <.tunit_editor current_tunit={@current_tunit} target={@myself} />
-    </div>
-      <div class="article">
+      </div>
+      <div class="article basis-1/2 overflow-auto">
         <.button phx-disable-with="Translating..." phx-click="translate-deepl" phx-target={@myself}
           data-confirm-not="Are you sure? All previously translated text will be lost.">Translate with Deepl</.button>
         <progress :if={@deepl_progress} max="100" value={@deepl_progress} />
-        <.render_doc tree={@translation.article.content} />
+        <.render_doc tree={@article_tree} />
       </div>
     </div>
     """
@@ -56,6 +58,7 @@ defmodule OutlookWeb.TranslationLive.FormComponent do
      |> assign(assigns)
      |> assign(:current_tunit, nil)
      |> assign(:changeset, changeset)
+     |> assign_article_tree(translation)
      |> assign(:deepl_progress, nil)}
   end
 
@@ -125,6 +128,14 @@ defmodule OutlookWeb.TranslationLive.FormComponent do
   end
   defp update_current_tunit(socket), do: socket
 
+  defp assign_article_tree(socket, translation) do
+     socket
+     |> assign(
+      :article_tree,
+      InternalTree.garnish(translation.article.content,
+        %{tunits: %{phx: %{click: "select_current_tunit", target: socket.assigns.myself}}}))
+  end
+
   defp update_translation_with_current_tunit(socket) do
     translation_content = if socket.assigns.current_tunit do
         socket.assigns.translation_content

lib/outlook_web/live/translation_live/new_edit.ex

@@ -11,9 +11,9 @@ defmodule OutlookWeb.TranslationLive.NewEdit do
   def render(assigns) do
     ~H"""
     <.live_component
-      module={OutlookWeb.TranslationLive.FormComponent}
+      module={FormComponent}
       id={@form_cmpnt_id}
-      title="New Translation"
+      title={@page_title}
       action={@live_action}
       translation={@translation}
       translation_content={@translation_content}
@@ -62,4 +62,7 @@ defmodule OutlookWeb.TranslationLive.NewEdit do
     send_update(self(), FormComponent, deepl_translation: payload, id: @form_cmpnt_id)
     {:noreply, socket}
   end
+
+  defp page_title(:new), do: "New Translation"
+  defp page_title(:edit), do: "Edit Translation"
 end