refactor: simplify solid reactivity across app and web (#20497)

3 files changed, 38 insertions, 34 deletions

diff --git a/packages/web/src/components/Share.tsx b/packages/web/src/components/Share.tsx
index de12baede..3ee86c270 100644
--- a/packages/web/src/components/Share.tsx
+++ b/packages/web/src/components/Share.tsx
@@ -366,21 +366,13 @@ export default function Share(props: {
                         <Suspense>
                           <For each={filteredParts()}>
                             {(part, partIndex) => {
-                              const last = createMemo(
-                                () =>
-                                  data().messages.length === msgIndex() + 1 &&
-                                  filteredParts().length === partIndex() + 1,
-                              )
+                              const last = () =>
+                                data().messages.length === msgIndex() + 1 && filteredParts().length === partIndex() + 1
 
                               onMount(() => {
                                 const hash = window.location.hash.slice(1)
                                 // Wait till all parts are loaded
-                                if (
-                                  hash !== "" &&
-                                  !hasScrolledToAnchor &&
-                                  filteredParts().length === partIndex() + 1 &&
-                                  data().messages.length === msgIndex() + 1
-                                ) {
+                                if (hash !== "" && !hasScrolledToAnchor && last()) {
                                   hasScrolledToAnchor = true
                                   scrollToAnchor(hash)
                                 }
diff --git a/packages/web/src/components/share/common.tsx b/packages/web/src/components/share/common.tsx
index 7ca4daa6a..aebc95537 100644
--- a/packages/web/src/components/share/common.tsx
+++ b/packages/web/src/components/share/common.tsx
@@ -83,12 +83,15 @@ export function createOverflow() {
       return overflow()
     },
     ref(el: HTMLElement) {
+      const sync = () => {
+        setOverflow(el.scrollHeight > el.clientHeight + 1)
+      }
+
       const ro = new ResizeObserver(() => {
-        if (el.scrollHeight > el.clientHeight + 1) {
-          setOverflow(true)
-        }
-        return
+        sync()
       })
+
+      sync()
       ro.observe(el)
 
       onCleanup(() => {
diff --git a/packages/web/src/components/share/content-diff.tsx b/packages/web/src/components/share/content-diff.tsx
index 9ccd554d0..c8dd35b38 100644
--- a/packages/web/src/components/share/content-diff.tsx
+++ b/packages/web/src/components/share/content-diff.tsx
@@ -1,5 +1,5 @@
 import { parsePatch } from "diff"
-import { createMemo } from "solid-js"
+import { createMemo, For } from "solid-js"
 import { ContentCode } from "./content-code"
 import styles from "./content-diff.module.css"
 
@@ -160,28 +160,37 @@ export function ContentDiff(props: Props) {
   return (
     <div class={styles.root}>
       <div data-component="desktop">
-        {rows().map((r) => (
-          <div data-component="diff-row" data-type={r.type}>
-            <div data-slot="before" data-diff-type={r.type === "removed" || r.type === "modified" ? "removed" : ""}>
-              <ContentCode code={r.left} flush lang={props.lang} />
-            </div>
-            <div data-slot="after" data-diff-type={r.type === "added" || r.type === "modified" ? "added" : ""}>
-              <ContentCode code={r.right} lang={props.lang} flush />
+        <For each={rows()}>
+          {(row) => (
+            <div data-component="diff-row" data-type={row.type}>
+              <div
+                data-slot="before"
+                data-diff-type={row.type === "removed" || row.type === "modified" ? "removed" : ""}
+              >
+                <ContentCode code={row.left} flush lang={props.lang} />
+              </div>
+              <div data-slot="after" data-diff-type={row.type === "added" || row.type === "modified" ? "added" : ""}>
+                <ContentCode code={row.right} lang={props.lang} flush />
+              </div>
             </div>
-          </div>
-        ))}
+          )}
+        </For>
       </div>
 
       <div data-component="mobile">
-        {mobileRows().map((block) => (
-          <div data-component="diff-block" data-type={block.type}>
-            {block.lines.map((line) => (
-              <div data-diff-type={block.type === "removed" ? "removed" : block.type === "added" ? "added" : ""}>
-                <ContentCode code={line} lang={props.lang} flush />
-              </div>
-            ))}
-          </div>
-        ))}
+        <For each={mobileRows()}>
+          {(block) => (
+            <div data-component="diff-block" data-type={block.type}>
+              <For each={block.lines}>
+                {(line) => (
+                  <div data-diff-type={block.type === "removed" ? "removed" : block.type === "added" ? "added" : ""}>
+                    <ContentCode code={line} lang={props.lang} flush />
+                  </div>
+                )}
+              </For>
+            </div>
+          )}
+        </For>
       </div>
     </div>
   )