for project changes, make the description into a colored diff that's easier to compare

src/views/NewActivityView.vue

@@ -259,26 +259,40 @@
                     >
                       {{ getDisplayFieldName(field) }}
                     </td>
-                    <td
-                      class="border border-gray-300 px-3 py-2 text-gray-600 break-words align-top"
-                    >
-                      <vue-markdown
-                        v-if="field === 'description' && difference.old"
-                        :source="formatFieldValue(difference.old)"
-                        class="markdown-content"
-                      />
-                      <span v-else>{{ formatFieldValue(difference.old) }}</span>
-                    </td>
-                    <td
-                      class="border border-gray-300 px-3 py-2 text-green-700 font-medium break-words align-top"
-                    >
-                      <vue-markdown
-                        v-if="field === 'description' && difference.new"
-                        :source="formatFieldValue(difference.new)"
-                        class="markdown-content"
-                      />
-                      <span v-else>{{ formatFieldValue(difference.new) }}</span>
-                    </td>
+                    <template v-if="field === 'description'">
+                      <td
+                        colspan="2"
+                        class="border border-gray-300 px-3 py-2 break-words align-top"
+                      >
+                        <div class="w-3/5 mx-auto">
+                          <div
+                            v-for="(change, index) in getDescriptionDiff(
+                              difference.old,
+                              difference.new,
+                            )"
+                            :key="index"
+                          >
+                            <vue-markdown
+                              :source="change.value"
+                              :style="getDiffStyle(change)"
+                              class="markdown-content inline-block"
+                            />
+                          </div>
+                        </div>
+                      </td>
+                    </template>
+                    <template v-else>
+                      <td
+                        class="border border-gray-300 px-3 py-2 text-gray-600 break-words align-top"
+                      >
+                        <span>{{ formatFieldValue(difference.old) }}</span>
+                      </td>
+                      <td
+                        class="border border-gray-300 px-3 py-2 text-green-700 font-medium break-words align-top"
+                      >
+                        <span>{{ formatFieldValue(difference.new) }}</span>
+                      </td>
+                    </template>
                   </tr>
                 </tbody>
               </table>
@@ -309,6 +323,7 @@
 <script lang="ts">
 import { Component, Vue } from "vue-facing-decorator";
 import VueMarkdown from "vue-markdown-render";
+import { diffLines, Change } from "diff";
 
 import GiftedDialog from "../components/GiftedDialog.vue";
 import QuickNav from "../components/QuickNav.vue";
@@ -915,5 +930,34 @@ export default class NewActivityView extends Vue {
       return "New Location";
     }
   }
+
+  /**
+   * Computes the line-by-line diff between two description strings
+   *
+   * @param oldValue The old description value
+   * @param newValue The new description value
+   * @returns An array of Change objects from the diff library
+   */
+  getDescriptionDiff(oldValue: unknown, newValue: unknown): Change[] {
+    const oldStr = this.formatFieldValue(oldValue);
+    const newStr = this.formatFieldValue(newValue);
+    return diffLines(oldStr, newStr);
+  }
+
+  /**
+   * Gets the background color style for a diff change
+   *
+   * @param change A Change object from the diff library
+   * @returns A CSS style object with background color
+   */
+  getDiffStyle(change: Change): Record<string, string> {
+    if (change.added) {
+      return { backgroundColor: "#d4edda" }; // Light green
+    }
+    if (change.removed) {
+      return { backgroundColor: "#f8d7da" }; // Light red
+    }
+    return {};
+  }
 }
 </script>