Add creating and basic editing of translation

lib/outlook_web/components/tunit_editor_component.ex

@@ -0,0 +1,51 @@
+defmodule OutlookWeb.TunitEditorComponent do
+
+  use Phoenix.Component
+
+  import OutlookWeb.CoreComponents
+  # alias Phoenix.LiveView.JS
+
+  defp statuses do
+    [ {:untranslated, "bg-red-800 col-span-3 disabled:border-gray-600"},
+      {:passable, "bg-amber-500 col-span-2 disabled:border-gray-600"},
+      {:done, "bg-green-700 disabled:border-gray-600"} ]
+  end
+
+  attr :current_tunit, :any
+  attr :target, :string
+
+  def tunit_editor(assigns) do
+    assigns = unless assigns.current_tunit do
+      assigns
+      |> assign(
+        current_tunit: %Outlook.InternalTree.TranslationUnit{},
+        disabled: true
+      )
+    else
+      assigns |> assign(disabled: false)
+    end
+    ~H"""
+      <div id="translation-unit-editor" phx-nohook="tunit_editor">
+        <%!-- <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} disabled={@disabled}>
+          <textarea name="content" class="h-48 rounded border-slate-500 resize-none"><%= @current_tunit.content %></textarea>
+        </form>
+      </div>
+      <div class="grid grid-cols-scheise gap-3">
+        <div :for={{status, class} <- statuses()}>
+          <.status_button class={class} status={status} target={@target} disabled={@current_tunit.status == status}></.status_button>
+        </div>
+      </div>
+    """
+  end
+
+  defp status_button(assigns) do
+    ~H"""
+      <.link  phx-click="tunit_status" phx-value-status={@status} phx-target={@target}>
+        <.button class={@class} title="select translation status" disabled={@disabled}><%= @status |> to_string %></.button>
+      </.link>
+    """
+  end
+end