feat(desktop): Session Review Images (#12360)

packages/ui/src/components/session-review.css

@@ -166,6 +166,10 @@
     color: var(--icon-diff-delete-base);
   }
 
+  [data-slot="session-review-change"][data-type="modified"] {
+    color: var(--icon-diff-modified-base);
+  }
+
   [data-slot="session-review-file-container"] {
     padding: 0;
   }

packages/ui/src/components/session-review.tsx

@@ -332,8 +332,9 @@ export const SessionReview = (props: SessionReviewProps) => {
                 const beforeText = () => (typeof diff.before === "string" ? diff.before : "")
                 const afterText = () => (typeof diff.after === "string" ? diff.after : "")
 
-                const isAdded = () => beforeText().length === 0 && afterText().length > 0
+                const isAdded = () => diff.status === "added" || (beforeText().length === 0 && afterText().length > 0)
-                const isDeleted = () => afterText().length === 0 && beforeText().length > 0
+                const isDeleted = () =>
+                  diff.status === "deleted" || (afterText().length === 0 && beforeText().length > 0)
                 const isImage = () => isImageFile(diff.file)
                 const isAudio = () => isAudioFile(diff.file)
 
@@ -422,6 +423,7 @@ export const SessionReview = (props: SessionReviewProps) => {
                   if (!isImage()) return
                   if (imageSrc()) return
                   if (imageStatus() !== "idle") return
+                  if (isDeleted()) return
 
                   const reader = props.readFile
                   if (!reader) return
@@ -546,6 +548,11 @@ export const SessionReview = (props: SessionReviewProps) => {
                                   {i18n.t("ui.sessionReview.change.removed")}
                                 </span>
                               </Match>
+                              <Match when={isImage()}>
+                                <span data-slot="session-review-change" data-type="modified">
+                                  {i18n.t("ui.sessionReview.change.modified")}
+                                </span>
+                              </Match>
                               <Match when={true}>
                                 <DiffChanges changes={diff} />
                               </Match>
@@ -564,28 +571,51 @@ export const SessionReview = (props: SessionReviewProps) => {
                           scheduleAnchors()
                         }}
                       >
-                        <Dynamic
+                        <Switch>
-                          component={diffComponent}
+                          <Match when={isImage() && imageSrc()}>
-                          preloadedDiff={diff.preloaded}
+                            <div data-slot="session-review-image-container">
-                          diffStyle={diffStyle()}
+                              <img data-slot="session-review-image" src={imageSrc()} alt={diff.file} />
-                          onRendered={() => {
+                            </div>
-                            props.onDiffRendered?.()
+                          </Match>
-                            scheduleAnchors()
+                          <Match when={isImage() && isDeleted()}>
-                          }}
+                            <div data-slot="session-review-image-container" data-removed>
-                          enableLineSelection={props.onLineComment != null}
+                              <span data-slot="session-review-image-placeholder">
-                          onLineSelected={handleLineSelected}
+                                {i18n.t("ui.sessionReview.change.removed")}
-                          onLineSelectionEnd={handleLineSelectionEnd}
+                              </span>
-                          selectedLines={selectedLines()}
+                            </div>
-                          commentedLines={commentedLines()}
+                          </Match>
-                          before={{
+                          <Match when={isImage() && !imageSrc()}>
-                            name: diff.file!,
+                            <div data-slot="session-review-image-container">
-                            contents: typeof diff.before === "string" ? diff.before : "",
+                              <span data-slot="session-review-image-placeholder">
-                          }}
+                                {imageStatus() === "loading" ? "Loading..." : "Image"}
-                          after={{
+                              </span>
-                            name: diff.file!,
+                            </div>
-                            contents: typeof diff.after === "string" ? diff.after : "",
+                          </Match>
-                          }}
+                          <Match when={!isImage()}>
-                        />
+                            <Dynamic
+                              component={diffComponent}
+                              preloadedDiff={diff.preloaded}
+                              diffStyle={diffStyle()}
+                              onRendered={() => {
+                                props.onDiffRendered?.()
+                                scheduleAnchors()
+                              }}
+                              enableLineSelection={props.onLineComment != null}
+                              onLineSelected={handleLineSelected}
+                              onLineSelectionEnd={handleLineSelectionEnd}
+                              selectedLines={selectedLines()}
+                              commentedLines={commentedLines()}
+                              before={{
+                                name: diff.file!,
+                                contents: typeof diff.before === "string" ? diff.before : "",
+                              }}
+                              after={{
+                                name: diff.file!,
+                                contents: typeof diff.after === "string" ? diff.after : "",
+                              }}
+                            />
+                          </Match>
+                        </Switch>
 
                         <For each={comments()}>
                           {(comment) => (

packages/ui/src/i18n/ar.ts

@@ -8,6 +8,7 @@ export const dict = {
 
   "ui.sessionReview.change.added": "مضاف",
   "ui.sessionReview.change.removed": "محذوف",
+  "ui.sessionReview.change.modified": "معدل",
   "ui.lineComment.label.prefix": "تعليق على ",
   "ui.lineComment.label.suffix": "",
   "ui.lineComment.editorLabel.prefix": "جارٍ التعليق على ",

packages/ui/src/i18n/br.ts

@@ -8,6 +8,7 @@ export const dict = {
 
   "ui.sessionReview.change.added": "Adicionado",
   "ui.sessionReview.change.removed": "Removido",
+  "ui.sessionReview.change.modified": "Modificado",
   "ui.lineComment.label.prefix": "Comentar em ",
   "ui.lineComment.label.suffix": "",
   "ui.lineComment.editorLabel.prefix": "Comentando em ",

packages/ui/src/i18n/bs.ts

@@ -11,6 +11,7 @@ export const dict = {
   "ui.sessionReview.collapseAll": "Sažmi sve",
   "ui.sessionReview.change.added": "Dodano",
   "ui.sessionReview.change.removed": "Uklonjeno",
+  "ui.sessionReview.change.modified": "Izmijenjeno",
 
   "ui.lineComment.label.prefix": "Komentar na ",
   "ui.lineComment.label.suffix": "",

packages/ui/src/i18n/da.ts

@@ -8,6 +8,7 @@ export const dict = {
 
   "ui.sessionReview.change.added": "Tilføjet",
   "ui.sessionReview.change.removed": "Fjernet",
+  "ui.sessionReview.change.modified": "Ændret",
   "ui.lineComment.label.prefix": "Kommenter på ",
   "ui.lineComment.label.suffix": "",
   "ui.lineComment.editorLabel.prefix": "Kommenterer på ",

packages/ui/src/i18n/de.ts

@@ -12,6 +12,7 @@ export const dict = {
 
   "ui.sessionReview.change.added": "Hinzugefügt",
   "ui.sessionReview.change.removed": "Entfernt",
+  "ui.sessionReview.change.modified": "Geändert",
   "ui.lineComment.label.prefix": "Kommentar zu ",
   "ui.lineComment.label.suffix": "",
   "ui.lineComment.editorLabel.prefix": "Kommentiere ",

packages/ui/src/i18n/en.ts

@@ -7,6 +7,7 @@ export const dict = {
   "ui.sessionReview.collapseAll": "Collapse all",
   "ui.sessionReview.change.added": "Added",
   "ui.sessionReview.change.removed": "Removed",
+  "ui.sessionReview.change.modified": "Modified",
 
   "ui.lineComment.label.prefix": "Comment on ",
   "ui.lineComment.label.suffix": "",

packages/ui/src/i18n/es.ts

@@ -8,6 +8,7 @@ export const dict = {
 
   "ui.sessionReview.change.added": "Añadido",
   "ui.sessionReview.change.removed": "Eliminado",
+  "ui.sessionReview.change.modified": "Modificado",
   "ui.lineComment.label.prefix": "Comentar en ",
   "ui.lineComment.label.suffix": "",
   "ui.lineComment.editorLabel.prefix": "Comentando en ",

packages/ui/src/i18n/fr.ts

@@ -8,6 +8,7 @@ export const dict = {
 
   "ui.sessionReview.change.added": "Ajouté",
   "ui.sessionReview.change.removed": "Supprimé",
+  "ui.sessionReview.change.modified": "Modifié",
   "ui.lineComment.label.prefix": "Commenter sur ",
   "ui.lineComment.label.suffix": "",
   "ui.lineComment.editorLabel.prefix": "Commentaire sur ",

packages/ui/src/i18n/ja.ts

@@ -8,6 +8,7 @@ export const dict = {
 
   "ui.sessionReview.change.added": "追加",
   "ui.sessionReview.change.removed": "削除",
+  "ui.sessionReview.change.modified": "変更",
   "ui.lineComment.label.prefix": "",
   "ui.lineComment.label.suffix": "へのコメント",
   "ui.lineComment.editorLabel.prefix": "",

packages/ui/src/i18n/ko.ts

@@ -8,6 +8,7 @@ export const dict = {
 
   "ui.sessionReview.change.added": "추가됨",
   "ui.sessionReview.change.removed": "삭제됨",
+  "ui.sessionReview.change.modified": "수정됨",
   "ui.lineComment.label.prefix": "",
   "ui.lineComment.label.suffix": "에 댓글 달기",
   "ui.lineComment.editorLabel.prefix": "",

packages/ui/src/i18n/no.ts

@@ -11,6 +11,7 @@ export const dict: Record<Keys, string> = {
 
   "ui.sessionReview.change.added": "Lagt til",
   "ui.sessionReview.change.removed": "Fjernet",
+  "ui.sessionReview.change.modified": "Endret",
   "ui.lineComment.label.prefix": "Kommenter på ",
   "ui.lineComment.label.suffix": "",
   "ui.lineComment.editorLabel.prefix": "Kommenterer på ",

packages/ui/src/i18n/pl.ts

@@ -8,6 +8,7 @@ export const dict = {
 
   "ui.sessionReview.change.added": "Dodano",
   "ui.sessionReview.change.removed": "Usunięto",
+  "ui.sessionReview.change.modified": "Zmodyfikowano",
   "ui.lineComment.label.prefix": "Komentarz do ",
   "ui.lineComment.label.suffix": "",
   "ui.lineComment.editorLabel.prefix": "Komentowanie: ",

packages/ui/src/i18n/ru.ts

@@ -8,6 +8,7 @@ export const dict = {
 
   "ui.sessionReview.change.added": "Добавлено",
   "ui.sessionReview.change.removed": "Удалено",
+  "ui.sessionReview.change.modified": "Изменено",
   "ui.lineComment.label.prefix": "Комментарий к ",
   "ui.lineComment.label.suffix": "",
   "ui.lineComment.editorLabel.prefix": "Комментирование: ",

packages/ui/src/i18n/th.ts

@@ -7,6 +7,7 @@ export const dict = {
   "ui.sessionReview.collapseAll": "ย่อทั้งหมด",
   "ui.sessionReview.change.added": "เพิ่ม",
   "ui.sessionReview.change.removed": "ลบ",
+  "ui.sessionReview.change.modified": "แก้ไข",
 
   "ui.lineComment.label.prefix": "แสดงความคิดเห็นบน ",
   "ui.lineComment.label.suffix": "",

packages/ui/src/i18n/zh.ts

@@ -12,6 +12,7 @@ export const dict = {
 
   "ui.sessionReview.change.added": "已添加",
   "ui.sessionReview.change.removed": "已移除",
+  "ui.sessionReview.change.modified": "已修改",
   "ui.lineComment.label.prefix": "评论 ",
   "ui.lineComment.label.suffix": "",
   "ui.lineComment.editorLabel.prefix": "正在评论 ",

packages/ui/src/i18n/zht.ts

@@ -12,6 +12,7 @@ export const dict = {
 
   "ui.sessionReview.change.added": "已新增",
   "ui.sessionReview.change.removed": "已移除",
+  "ui.sessionReview.change.modified": "已修改",
   "ui.lineComment.label.prefix": "評論 ",
   "ui.lineComment.label.suffix": "",
   "ui.lineComment.editorLabel.prefix": "正在評論 ",