tweaking share edit

app/packages/web/src/components/DiffView.tsx

@@ -1,5 +1,5 @@
 import { type Component, createSignal, onMount } from "solid-js"
-import { diffLines, type Change } from "diff"
+import { diffLines } from "diff"
 import CodeBlock from "./CodeBlock"
 import styles from "./diffview.module.css"
 
@@ -23,42 +23,49 @@ const DiffView: Component<DiffViewProps> = (props) => {
     const chunks = diffLines(props.oldCode, props.newCode)
     const diffRows: DiffRow[] = []
 
-    chunks.forEach((chunk: Change) => {
+    for (const chunk of chunks) {
       const lines = chunk.value.split(/\r?\n/)
       if (lines.at(-1) === "") lines.pop()
 
-      lines.forEach((line) => {
+      for (const line of lines) {
         diffRows.push({
           left: chunk.removed ? line : chunk.added ? "" : line,
           right: chunk.added ? line : chunk.removed ? "" : line,
-          type: chunk.added ? "added"
-            : chunk.removed ? "removed"
+          type: chunk.added
+            ? "added"
+            : chunk.removed
+              ? "removed"
               : "unchanged",
         })
-      })
-    })
+      }
+    }
 
     setRows(diffRows)
   })
 
   return (
     <div class={`${styles.diff} ${props.class ?? ""}`}>
-      {rows().map((r) => (
-        <div data-section="row">
+      <div class={styles.column}>
+        {rows().map((r) => (
           <CodeBlock
             code={r.left}
             lang={props.lang}
             data-section="cell"
             data-diff-type={r.type === "removed" ? "removed" : ""}
           />
+        ))}
+      </div>
+
+      <div class={styles.column}>
+        {rows().map((r) => (
           <CodeBlock
             code={r.right}
             lang={props.lang}
             data-section="cell"
             data-diff-type={r.type === "added" ? "added" : ""}
           />
-        </div>
-      ))}
+        ))}
+      </div>
     </div>
   )
 }