Add selecting next/previous tunit and highlight it

lib/outlook_web/components/tunit_editor_component.ex

@@ -14,7 +14,7 @@ defmodule OutlookWeb.TunitEditorComponent do
         <%= @current_tunit.content |> raw %>
       </div> --%>
       <form phx-change="update_current_tunit" phx-target={@target}>
-        <textarea name="content" class="h-48 rounded border-slate-500 resize-none bg-transparent w-full"
+        <textarea id="tunit-editor-content" name="content" class="h-48 rounded border-slate-500 resize-none bg-transparent w-full"
           disabled={!@current_tunit.status}><%= @current_tunit.content %></textarea>
       </form>
       <.status_selector target={@target} disabled={!@current_tunit.status} tunit={@current_tunit} />

lib/outlook_web/live/translation_live/form_component.ex

@@ -8,7 +8,7 @@ defmodule OutlookWeb.TranslationLive.FormComponent do
   def render(assigns) do
     ~H"""
     <div class="flex gap-8 max-h-fit">
-      <div class="basis-1/2 overflow-auto">
+      <div class="basis-1/2 overflow-auto" id="translation-form-container" target="@myself" phx-hook="translation_form">
         <.header>
           <%= @title %>
           <:subtitle>Use this form to manage translation records in your database.</:subtitle>
@@ -63,6 +63,7 @@ defmodule OutlookWeb.TranslationLive.FormComponent do
      socket
      |> assign(assigns)
      |> assign(:current_tunit, %TranslationUnit{status: nil})
+     |> assign(:tunit_ids, InternalTree.get_tunit_ids(translation.article.content))
      |> assign(:changeset, changeset)
      |> assign_article_tree(translation)
      |> assign(:deepl_progress, nil)}
@@ -118,11 +119,33 @@ defmodule OutlookWeb.TranslationLive.FormComponent do
     {:noreply, socket |> assign(:current_tunit, tunit)}
   end
 
-  def handle_event("select_current_tunit", %{"nid" => nid}, socket) do
-    {:noreply,
-      socket
-      |> update_translation_with_current_tunit(socket.assigns.current_tunit.status)
-      |> assign(:current_tunit, socket.assigns.translation_content[nid])}
+  def handle_event("select_tunit_by_nid", %{"nid" => nid}, socket) do
+    {:noreply, change_tunit(socket, nid)}
+  end
+
+  def handle_event("select_next_tunit", _, socket) do
+    {:noreply, select_next_tunit(socket, &Kernel.+/2)}
+  end
+
+  def handle_event("select_previous_tunit", _, socket) do
+    {:noreply, select_next_tunit(socket, &Kernel.-/2)}
+  end
+
+  defp select_next_tunit(socket, direction) do
+    tunit_ids = socket.assigns.tunit_ids
+    current_tunit_nid = socket.assigns.current_tunit.status && socket.assigns.current_tunit.nid || List.last(tunit_ids)
+    index_current = Enum.find_index(tunit_ids, fn nid -> nid == current_tunit_nid end)
+    index_next = direction.(index_current, 1) |> Integer.mod(length(tunit_ids))
+    next_nid = Enum.at(tunit_ids, index_next)
+    change_tunit(socket, next_nid)
+  end
+
+  defp change_tunit(socket, nid) do
+    fun = fn n -> n.nid == nid && "yes" || "no" end
+    socket
+    |> assign(:article_tree, InternalTree.garnish(socket.assigns.article_tree, %{tunits: %{current: fun}}))
+    |> update_translation_with_current_tunit(socket.assigns.current_tunit.status)
+    |> assign(:current_tunit, socket.assigns.translation_content[nid])
   end
 
   @doc "updating on browser events"
@@ -146,7 +169,7 @@ defmodule OutlookWeb.TranslationLive.FormComponent do
       :article_tree,
       InternalTree.add_phx_click_event(translation.article.content,
         nodes: :tunits,
-        click: "select_current_tunit",
+        click: "select_tunit_by_nid",
         target: socket.assigns.myself)
       |> InternalTree.garnish(%{tunits: %{class: "tunit"}}))
   end