Add "Unite with next" button

assets/css/article.css

@@ -9,13 +9,17 @@
 
 .article span.tunit {
   @apply hover:bg-gray-300;
+  padding: 5px 0;
+  margin: -5px 0;
 }
 
 .dark .article span.tunit {
   @apply hover:bg-gray-700;
+  padding: 5px 0;
+  margin: -5px 0;
 }
 
-.article span.tunit[current="yes"] {
+.article span.tunit[current="yes"], .article span.tunit[selected="yes"] {
   @apply bg-amber-300 text-stone-700 hover:bg-amber-200 hover:text-red-900;
 }
 

lib/outlook/internal_tree/tunit_modifications.ex

@@ -8,14 +8,14 @@ defmodule Outlook.InternalTree.TunitModifications do
         name: "unite_with_next",
         fn: &unite_with_next/2,
         label: "Unite with next",
-        description: "unite translation unit with next"
+        description: "unite selected translation unit with (unselected) next"
       },
-      %{
+      # %{
-        name: "split_tunit",
+      #   name: "split_tunit",
-        fn: &split_tunit/2,
+      #   fn: &split_tunit/2,
-        label: "Split Translation unit",
+      #   label: "Split Translation unit",
-        description: "split translation unit into two"
+      #   description: "split translation unit into two"
-      }
+      # }
     ]
   end
 

lib/outlook_web/components/layouts/app.html.heex

@@ -2,8 +2,8 @@
   <.breakpoint_indicator :if={Mix.env == :dev} />
   <.dark_mode_widget />
 </header>
-<main class="px-4 py-20 sm:px-6 lg:px-8">
+<main class="px-4 sm:px-6 lg:px-8 lg:mx-auto h-screen">
-  <div class="mx-auto max-w-4xl">
+  <div class="mx-auto max-w-4xl h-fit">
     <.flash kind={:info} title="Success!" flash={@flash} />
     <.flash kind={:error} title="Error!" flash={@flash} />
     <.flash

lib/outlook_web/components/tunit_editor_component.ex

@@ -9,12 +9,12 @@ defmodule OutlookWeb.TunitEditorComponent do
 
   def tunit_editor(assigns) do
     ~H"""
-    <div id="translation-unit-editor" phx-nohook="tunit_editor">
+    <div id="translation-unit-editor" phx-no-hook="tunit_editor" phx-target={@target}>
       <%!-- <div class="h-48 p-2 border border-slate-500 rounded" contenteditable phx-no-change="update_current_tunit">
         <%= @current_tunit.content |> raw %>
       </div> --%>
       <form phx-change="update_current_tunit" phx-target={@target}>
-        <textarea id="tunit-editor-content" name="content" class="h-48 rounded border-slate-500 resize-none bg-transparent w-full"
+        <textarea id="tunit-editor-content" name="content" class="h-96 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} />
@@ -24,7 +24,7 @@ defmodule OutlookWeb.TunitEditorComponent do
 
   defp statuses() do
     [ {:untranslated, "bg-red-800"},
-      {:passable, "bg-amber-500"},
+      {:passable, "bg-amber-500/70"},
       {:done, "bg-green-700"} ]
   end
 

lib/outlook_web/live/article_live/menu_component.ex

@@ -0,0 +1,24 @@
+defmodule OutlookWeb.ArticleLive.MenuComponent do
+  use OutlookWeb, :live_component
+
+  attr :entries, :list
+  # attr :target, :integer, default: 0  # @myself of the Live(View|Component) where the handlers reside
+  attr :handler, :string
+
+  @impl true
+  def render(assigns) do
+    ~H"""
+    <div>
+      <.menu_item :for={entry <- @entries} entry={entry} handler={@handler} />
+    </div>
+    """
+  end
+
+  def menu_item(assigns) do
+    ~H"""
+    <div title={@entry.description} phx-click={@handler} phx-value-modifier={@entry.name}>
+      <%= @entry.label %>
+    </div>
+    """
+  end
+end

lib/outlook_web/live/article_live/new.ex

@@ -17,6 +17,7 @@ defmodule OutlookWeb.ArticleLive.New do
       |> assign(:raw_html_input, %RawHtmlInput{})
       |> assign(:changeset, Articles.change_raw_html_input(%RawHtmlInput{}))
       |> assign(:selected_els, [])
+      |> assign(:selected_tunits, [])
       |> assign(:step, :import_raw_html)}
   end
 
@@ -26,6 +27,7 @@ defmodule OutlookWeb.ArticleLive.New do
     article = %Article{author_id: author.id}
     {:noreply,
      socket
+     |> assign(:menu_entries, InternalTree.tunit_modifiers()) # REMOVE ME!
      |> assign(:author, author)
      |> assign(:article, article)}
   end
@@ -43,7 +45,9 @@ defmodule OutlookWeb.ArticleLive.New do
         {:noreply,
           socket
           |> assign(:raw_internal_tree,
-            HtmlPreparations.convert_raw_html_input(raw_html_input_params["content"]))
+            HtmlPreparations.convert_raw_html_input(raw_html_input_params["content"])
+            |> InternalTree.garnish(%{})
+            )
           |> assign(:step, :review_raw_internaltree)}
       false ->
         {:noreply, assign(socket, :changeset, changeset)}
@@ -54,10 +58,42 @@ defmodule OutlookWeb.ArticleLive.New do
   def handle_event("approve_raw_internaltree", _, socket) do
       socket = socket
       |> assign(:raw_internal_tree,
-          InternalTree.partition_text(socket.assigns.raw_internal_tree))
+          InternalTree.partition_text(socket.assigns.raw_internal_tree)
+          |> InternalTree.garnish(%{tunits: %{class: :tunit}})
+          |> InternalTree.add_phx_click_event(
+              nodes: :tunits,
+              click: "toggle_selected_tunit")
+        )
+      |> assign(:menu_entries, InternalTree.tunit_modifiers())
     {:noreply, socket |> assign(:step, :review_translation_units)}
   end
 
+  @impl true
+  def handle_event("toggle_selected_tunit", %{"nid" => tunit_id}, socket) do
+    {:noreply, toggle_selected_tunit(socket, tunit_id)}
+  end
+
+  defp toggle_selected_tunit(socket, tunit_id) do
+    before = socket.assigns.selected_tunits
+    selected_tunits = case Enum.member?(before, tunit_id) do
+      false -> List.insert_at(before, -1, tunit_id)
+      true -> List.delete(before, tunit_id)
+    end
+    fun = fn n -> n.nid in selected_tunits && "yes" || "no" end
+    socket
+    |> assign(:raw_internal_tree, InternalTree.garnish(socket.assigns.raw_internal_tree, %{tunits: %{selected: fun}}))
+    |> assign(:selected_tunits, selected_tunits)
+  end
+
+  @impl true
+  def handle_event("modify_tunits", %{"modifier" => modifier}, socket) do
+    {:noreply,
+      socket
+      |> assign(:raw_internal_tree,
+        InternalTree.modify_tunits(socket.assigns.raw_internal_tree, modifier, socket.assigns.selected_tunits)
+      )}
+  end
+
   @impl true
   def handle_event("approve_translation_units", _, socket) do
     {:noreply, socket |> assign(:step, :final_form)}

lib/outlook_web/live/article_live/new.html.heex

@@ -4,7 +4,7 @@
 
 <.import_raw_html :if={@step == :import_raw_html} changeset={@changeset} />
 <.review_raw_internaltree :if={@step == :review_raw_internaltree} raw_internal_tree={@raw_internal_tree} />
-<.review_translation_units :if={@step == :review_translation_units} />
+<.review_translation_units :if={@step == :review_translation_units} raw_internal_tree={@raw_internal_tree} menu_entries={@menu_entries} />
 <.live_component
   :if={@step == :final_form}
   module={OutlookWeb.ArticleLive.FormComponent}

lib/outlook_web/live/article_live/new_components.ex

@@ -44,6 +44,17 @@ defmodule OutlookWeb.ArticleLive.NewComponents do
   def review_translation_units(assigns) do
     ~H"""
       <div>Review Translation Units</div>
+      <div class="flex gap-4">
+        <div id="html-tree" class="w-96 overflow-auto whitespace-nowrap">
+          <.render_tree tree={@raw_internal_tree} ></.render_tree>
+        </div>
+        <div id="partition-preview" class="article show-boundary overflow-auto h-full">
+          <.render_doc tree={@raw_internal_tree} ></.render_doc>
+        </div>
+        <div>
+          <.live_component module={OutlookWeb.ArticleLive.MenuComponent} entries={@menu_entries} handler="modify_tunits" id={:review_tunits} />
+        </div>
+      </div>
       <.button phx-click="approve_translation_units">Continue</.button>
     """
   end