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

package-lock.json

@@ -60,6 +60,7 @@
         "dexie-export-import": "^4.1.4",
         "did-jwt": "^7.4.7",
         "did-resolver": "^4.1.0",
+        "diff": "^8.0.2",
         "dotenv": "^16.0.3",
         "electron-builder": "^26.0.12",
         "ethereum-cryptography": "^2.1.3",
@@ -9883,6 +9884,15 @@
         "yargs": "^17.2.1"
       }
     },
+    "node_modules/@trapezedev/project/node_modules/diff": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-5.2.0.tgz",
+      "integrity": "sha512-uIFDxqpRZGZ6ThOk84hEfqWoHx2devRFvpTZcTHur85vImfaxUbTW9Ryh4CpCuDnToOP1CEtXKIgytHBPVff5A==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.3.1"
+      }
+    },
     "node_modules/@trapezedev/project/node_modules/env-paths": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-3.0.0.tgz",
@@ -15869,11 +15879,9 @@
       "license": "Apache-2.0"
     },
     "node_modules/diff": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/diff/-/diff-5.2.0.tgz",
-      "integrity": "sha512-uIFDxqpRZGZ6ThOk84hEfqWoHx2devRFvpTZcTHur85vImfaxUbTW9Ryh4CpCuDnToOP1CEtXKIgytHBPVff5A==",
-      "dev": true,
-      "license": "BSD-3-Clause",
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-8.0.2.tgz",
+      "integrity": "sha512-sSuxWU5j5SR9QQji/o2qMvqRNYRDOcBTgsJ/DeCf4iSN4gW+gNMXM7wFIP+fdXZxoNiAnHUTGjCr+TSWXdRDKg==",
       "engines": {
         "node": ">=0.3.1"
       }

package.json

@@ -189,6 +189,7 @@
     "dexie-export-import": "^4.1.4",
     "did-jwt": "^7.4.7",
     "did-resolver": "^4.1.0",
+    "diff": "^8.0.2",
     "dotenv": "^16.0.3",
     "electron-builder": "^26.0.12",
     "ethereum-cryptography": "^2.1.3",

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>