Merge pull request #622 from shapehq/copilot/sub-pr-607

Use change.id as React key instead of array index

Author: ulrikandersen

src/features/sidebar/view/internal/diffbar/components/DiffList.tsx

@@ -2,11 +2,7 @@
 
 import { Box, Typography } from "@mui/material"
 import PopulatedDiffList from "./PopulatedDiffList"
-
-interface Change {
-  path?: string
-  text?: string
-}
+import { DiffChange } from "@/features/diff/domain/DiffChange"
 
 export type DiffListStatus = "idle" | "loading" | "empty" | "ready" | "error"
 
@@ -16,7 +12,7 @@ const DiffList = ({
   selectedChange,
   onClick,
 }: {
-  changes: Change[]
+  changes: DiffChange[]
   status: DiffListStatus
   selectedChange: number | null
   onClick: (i: number) => void

src/features/sidebar/view/internal/diffbar/components/PopulatedDiffList.tsx

@@ -2,18 +2,14 @@
 
 import SpacedList from "@/common/ui/SpacedList"
 import DiffListItem from "./DiffListItem"
-
-interface Change {  
-  path?: string;  
-  text?: string;  
-}  
+import { DiffChange } from "@/features/diff/domain/DiffChange"
 
 const PopulatedDiffList = ({
   changes,
   selectedChange,
   onClick,
 }: {
-  changes: Change[]
+  changes: DiffChange[]
   selectedChange: number | null
   onClick: (i: number) => void
 }) => {
@@ -27,7 +23,7 @@ const PopulatedDiffList = ({
     >
       {changes.map((change, i) => (
         <DiffListItem
-          key={i}
+          key={change.id}
           path={change?.path}
           text={change?.text}
           selected={selectedChange === i}