Feature(offline): better support for making changes while offline

src/UI/BigComponents/PendingChangesView.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+  import { Changes } from "../../Logic/Osm/Changes"
+  import type { SpecialVisualizationState } from "../SpecialVisualization"
+
+  export let state: { changes: Changes } & SpecialVisualizationState
+  let pending = state.changes.pendingChanges
+  let backend = state.osmConnection.Backend()
+  let debug = state.featureSwitches.featureSwitchIsDebugging
+</script>
+{#if $pending?.length > 0}
+  <div class="p-4">
+
+    <h3>Pending changes</h3>
+
+    There are currently {$pending.length} pending changes:
+
+    <table class="gap-x-2">
+      <tr>
+        <th>
+          Theme
+        </th>
+        <th>
+          Type
+        </th>
+        <th>
+          Object
+        </th>
+      </tr>
+      {#each $pending as change}
+        <tr>
+          <td>{change.meta.theme}</td>
+          <td>{change.meta.changeType}</td>
+          <td>
+            <a href={`${backend}/${change.type}/${change.id}`} target="_blank">
+              {change.type}/{change.id}
+            </a>
+          </td>
+
+        </tr>
+      {/each}
+    </table>
+
+    {#if $debug}
+      {#each $pending as change}
+        {JSON.stringify(change)}
+      {/each}
+    {/if}
+  </div>
+
+{/if}
+
+
+<style>
+  td {
+      padding-left: 2rem;
+      padding-right: 2rem;
+  }
+</style>