Use other string diff algorithm and optimize logs page

web-app/src/routes/(authenticated)/website/[websiteId]/logs/+page.svelte

@@ -2,36 +2,17 @@
   import WebsiteEditor from "$lib/components/WebsiteEditor.svelte";
   import DateTime from "$lib/components/DateTime.svelte";
   import Modal from "$lib/components/Modal.svelte";
-  import type { PageServerData } from "./$types";
-  import diff from "fast-diff";
+  import type { PageServerData, ActionData } from "./$types";
   import { page } from "$app/stores";
   import { tables } from "$lib/db-schema";
   import { previewContent } from "$lib/runes.svelte";
   import DOMPurify from "isomorphic-dompurify";
+  import { enhanceForm } from "$lib/utils";
+  import { enhance } from "$app/forms";
+  import { sending } from "$lib/runes.svelte";
+  import LoadingSpinner from "$lib/components/LoadingSpinner.svelte";
 
-  const { data }: { data: PageServerData } = $props();
-
-  const htmlDiff = (oldValue: string, newValue: string) => {
-    return diff(oldValue, newValue)
-      .map(([type, value]) => {
-        let newString = "";
-
-        switch (type) {
-          case 1:
-            newString += `<ins>${value}</ins>`;
-            break;
-          case 0:
-            newString += `${value}`;
-            break;
-          case -1:
-            newString += `<del>${value}</del>`;
-            break;
-        }
-
-        return newString;
-      })
-      .join("");
-  };
+  const { data, form }: { data: PageServerData; form: ActionData } = $props();
 
   let resources = $state({});
 
@@ -48,16 +29,18 @@
   }
 
   previewContent.value = data.home.main_content;
-
-  let logsSection: HTMLElement;
 </script>
 
+{#if sending.value}
+  <LoadingSpinner />
+{/if}
+
 <WebsiteEditor
   id={data.website.id}
   contentType={data.website.content_type}
   title={data.website.title}
 >
-  <section id="logs" bind:this={logsSection}>
+  <section id="logs">
     <hgroup>
       <h2>
         <a href="#logs">Logs</a>
@@ -153,15 +136,34 @@
 
                   <hgroup>
                     <h3>Log changes</h3>
-                    <p>{table_name} &mdash; {operation}</p>
+                    <p>{table_name} &mdash; {operation} &mdash; User "{username}"</p>
                   </hgroup>
 
-                  <pre style="white-space: pre-wrap">{@html DOMPurify.sanitize(
-                      htmlDiff(oldValue, newValue),
-                      {
-                        ALLOWED_TAGS: ["ins", "del"]
-                      }
-                    )}</pre>
+                  {#if old_value && new_value}
+                    <h4>Difference</h4>
+                    <form action="?/computeDiff" method="POST" use:enhance={enhanceForm()}>
+                      <input type="hidden" name="id" value={id} />
+                      <button type="submit">Compute diff</button>
+                    </form>
+                    {#if form?.logId === id && form?.currentDiff}
+                      <pre style="white-space: pre-wrap">{@html DOMPurify.sanitize(
+                          form.currentDiff,
+                          { ALLOWED_TAGS: ["ins", "del"] }
+                        )}</pre>
+                    {/if}
+                  {/if}
+
+                  {#if new_value && !old_value}
+                    <h4>New value</h4>
+                    <pre style="white-space: pre-wrap">{@html (DOMPurify.sanitize(newValue),
+                      { ALLOWED_TAGS: ["ins", "del"] })}</pre>
+                  {/if}
+
+                  {#if old_value && !new_value}
+                    <h4>Old value</h4>
+                    <pre style="white-space: pre-wrap">{@html (DOMPurify.sanitize(oldValue),
+                      { ALLOWED_TAGS: ["ins", "del"] })}</pre>
+                  {/if}
                 </Modal>
               </td>
             </tr>
@@ -189,7 +191,7 @@
       {/snippet}
       <p>
         {$page.url.searchParams.get("logs_results_page") ?? 1} / {Math.max(
-          Math.ceil(data.resultChangeLogCount / 50),
+          Math.ceil(data.resultChangeLogCount / 20),
           1
         )}
       </p>
@@ -222,7 +224,7 @@
           type="hidden"
           name="logs_results_page"
           value={Math.min(
-            Math.max(Math.ceil(data.resultChangeLogCount / 50), 1),
+            Math.max(Math.ceil(data.resultChangeLogCount / 20), 1),
             Number.parseInt($page.url.searchParams.get("logs_results_page") ?? "1") + 1
           )}
         />
@@ -230,20 +232,20 @@
         <button
           type="submit"
           disabled={($page.url.searchParams.get("logs_results_page") ?? "1") ===
-            Math.max(Math.ceil(data.resultChangeLogCount / 50), 1).toString()}>Next</button
+            Math.max(Math.ceil(data.resultChangeLogCount / 20), 1).toString()}>Next</button
         >
       </form>
       <form method="GET">
         <input
           type="hidden"
           name="logs_results_page"
-          value={Math.max(Math.ceil(data.resultChangeLogCount / 50), 1)}
+          value={Math.max(Math.ceil(data.resultChangeLogCount / 20), 1)}
         />
         {@render commonFilterInputs()}
         <button
           type="submit"
           disabled={($page.url.searchParams.get("logs_results_page") ?? "1") ===
-            Math.max(Math.ceil(data.resultChangeLogCount / 50), 1).toString()}>Last</button
+            Math.max(Math.ceil(data.resultChangeLogCount / 20), 1).toString()}>Last</button
         >
       </form>
     </div>