pull CompressToggleButton into its own function

Author: mkst

frontend/src/components/Diff/Diff.tsx

@@ -1,5 +1,4 @@
 /* eslint css-modules/no-unused-class: off */
-
 import {
     createContext,
     type CSSProperties,
@@ -147,7 +146,7 @@ function DiffBody({
                 }) => (
                     <FixedSizeList
                         className={styles.body}
-                        itemCount={flattened.length}
+                        itemCount={itemData.rows.length}
                         itemData={itemData}
                         itemSize={(fontSize ?? 12) * 1.33}
                         overscanCount={40}
@@ -187,6 +186,30 @@ function ThreeWayToggleButton({
     );
 }
 
+function CompressToggleButton({
+    enabled,
+    setEnabled,
+}: {
+    enabled: boolean;
+    setEnabled: (enabled: boolean) => void;
+}) {
+    return (
+        <button
+            className={styles.compressionToggle}
+            onClick={() => {
+                setEnabled(!enabled);
+            }}
+            title={
+                enabled
+                    ? "Do not compress streaks of matching lines"
+                    : "Compress streaks of matching lines"
+            }
+        >
+            {enabled ? <FoldIcon size={24} /> : <UnfoldIcon size={24} />}
+        </button>
+    );
+}
+
 export function scrollToLineNumber(
     editorView: RefObject<EditorView>,
     lineNumber: number,
@@ -422,25 +445,10 @@ export default function Diff({
     );
 
     const compressButton = (
-        <>
-            <button
-                className={styles.compressionToggle}
-                onClick={() => {
-                    setCompressionEnabled(!compressionEnabled);
-                }}
-                title={
-                    compressionEnabled
-                        ? "Do not compress streaks of matching lines"
-                        : "Compress streaks of matching lines"
-                }
-            >
-                {compressionEnabled ? (
-                    <FoldIcon size={24} />
-                ) : (
-                    <UnfoldIcon size={24} />
-                )}
-            </button>
-        </>
+        <CompressToggleButton
+            enabled={compressionEnabled}
+            setEnabled={setCompressionEnabled}
+        />
     );
 
     return (