Refactor diff component and improve LiveView integration (#111)

* Pass diff_id to DiffComponent render

* Update diff container ID format

* Use phx-click with class toggle for dynamic LiveView content integration

* Remove broken click event listeners for file headers

* Refactor ghd-file-header styles for improved diff visibility and layout

* Refactor diff component header for improved structure and clarity

* Remove useless nil check

Author: kyleboe

assets/css/app.css

@@ -193,35 +193,22 @@ input.search-input:focus {
   position: -webkit-sticky;
   position: sticky;
   top: 0px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   z-index: 1;
 }
 
-.ghd-file-header .reveal-diff {
-  display: none;
-  float: right;
+.ghd-file-header .show-hide-diff {
   color: #999;
 }
 
-.ghd-file-header .reveal-diff path {
+.ghd-file-header .show-hide-diff path {
   fill: #999;
 }
 
-.ghd-file-header.collapsed .reveal-diff {
-  display: block;
-}
-
-.ghd-file-header .collapse-diff {
-  display: block;
-  float: right;
-  color: #999;
-}
-
-.ghd-file-header .collapse-diff path {
-  fill: #999;
-}
-
-.ghd-file-header.collapsed .collapse-diff {
-  display: none;
+.ghd-file:has(.hidden) .show-hide-diff {
+  rotate: 180deg;
 }
 
 .ghd-chunk-header .ghd-line-number {

assets/js/app.js

@@ -87,19 +87,3 @@ lines.forEach(line => {
     }
   })
 })
-
-const fileHeaders = document.querySelectorAll('.ghd-file-header')
-fileHeaders.forEach(header => {
-  header.addEventListener('click', e => {
-    const parent = header.parentNode
-
-    parent.querySelectorAll('.ghd-diff').forEach(diff => {
-      diff.classList.toggle('hidden')
-    })
-    header.classList.toggle('collapsed') && scrollIfNeeded(header)
-  })
-})
-
-const scrollIfNeeded = elem => {
-  elem.getBoundingClientRect().top < 0 && elem.scrollIntoView(true)
-}

lib/diff_web/live/components/diff_component.ex

@@ -1,18 +1,22 @@
 defmodule DiffWeb.DiffComponent do
   use DiffWeb, :live_component
+  alias Phoenix.LiveView.JS
 
   def render(assigns) do
     ~H"""
     <div class="ghd-file">
-      <div class="ghd-file-header">
-        <span class={"ghd-file-status ghd-file-status-#{diff_status(@diff)}"}>
-          <%= diff_status(@diff) %>
-        </span>
-        <%= file_header(@diff, diff_status(@diff)) %>
-        <span class="collapse-diff"><svg xmlns="http://www.w3.org/2000/svg" width="10" height="16" viewBox="0 0 10 16"><path fill-rule="evenodd" d="M10 10l-1.5 1.5L5 7.75 1.5 11.5 0 10l5-5 5 5z"/></svg></span>
-        <span class="reveal-diff"><svg xmlns="http://www.w3.org/2000/svg" width="10" height="16" viewBox="0 0 10 16"><path fill-rule="evenodd" d="M5 11L0 6l1.5-1.5L5 8.25 8.5 4.5 10 6l-5 5z"/></svg></span>
+      <div class="ghd-file-header" phx-click={JS.toggle_class("hidden", to: "##{@diff_id}-body")}>
+        <div>
+          <span class={"ghd-file-status ghd-file-status-#{diff_status(@diff)}"}>
+            <%= diff_status(@diff) %>
+          </span>
+          <%= file_header(@diff, diff_status(@diff)) %>
+        </div>
+        <svg class="show-hide-diff" xmlns="http://www.w3.org/2000/svg" width="10" height="16" viewBox="0 0 10 16">
+          <path fill-rule="evenodd" d="M10 10l-1.5 1.5L5 7.75 1.5 11.5 0 10l5-5 5 5z"/>
+        </svg>
       </div>
-      <div class="ghd-diff">
+      <div class="ghd-diff" id={"#{@diff_id}-body"}>
         <table class="ghd-diff">
           <%= for chunk <- @diff.chunks do %>
             <tr class="ghd-chunk-header">
@@ -46,31 +50,16 @@ defmodule DiffWeb.DiffComponent do
     """
   end
 
-  defp file_header(diff, status) do
-    from = diff.from
-    to = diff.to
+  defp file_header(%{from: from}, "changed"), do: from
+  defp file_header(%{from: from, to: to}, "renamed"), do: "#{from} -> #{to}"
+  defp file_header(%{from: from}, "removed"), do: from
+  defp file_header(%{to: to}, "added"), do: to
 
-    case status do
-      "changed" -> from
-      "renamed" -> "#{from} -> #{to}"
-      "removed" -> from
-      "added" -> to
-    end
-  end
-
-  defp diff_status(diff) do
-    from = diff.from
-    to = diff.to
-
-    cond do
-      !from -> "added"
-      !to -> "removed"
-      from == to -> "changed"
-      true -> "renamed"
-    end
-  end
+  defp diff_status(%{from: nil, to: _to}), do: "added"
+  defp diff_status(%{from: _from, to: nil}), do: "removed"
+  defp diff_status(%{from: from, to: to}) when from == to, do: "changed"
+  defp diff_status(_), do: "renamed"
 
-  defp line_number(ln) when is_nil(ln), do: ""
   defp line_number(ln), do: to_string(ln)
 
   defp line_id(diff, line) do

lib/diff_web/templates/live/diff.html.leex

@@ -36,7 +36,7 @@
       <% end %>
 
       <%= for diff_id <- @loaded_diffs do %>
-        <div id="diff-<%= diff_id %>">
+        <div id="<%= diff_id %>-container">
           <%= raw(Map.fetch!(@loaded_diff_content, diff_id)) %>
         </div>
       <% end %>

lib/diff_web/views/live_view.ex

@@ -21,7 +21,7 @@ defmodule DiffWeb.LiveView do
                 # Take the first diff (should only be one per file)
                 diff = List.first(diffs)
 
-                DiffWeb.DiffComponent.render(%{diff: diff})
+                DiffWeb.DiffComponent.render(%{diff: diff, diff_id: diff_id})
                 |> Phoenix.HTML.Safe.to_iodata()
                 |> IO.iodata_to_binary()
                 |> sanitize_utf8()