Use change.id as React key instead of array index

Co-authored-by: ulrikandersen <11440456+ulrikandersen@users.noreply.github.com>

Author: Copilot

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

@@ -3,18 +3,14 @@
 import React from "react";
 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;
 }) => {
@@ -28,7 +24,7 @@ const PopulatedDiffList = ({
     >
       {changes.map((change, i) => (
         <DiffListItem
-          key={i}
+          key={change.id}
           path={change?.path}
           text={change?.text}
           selected={selectedChange === i}