UX: add indicicator in settings of pending changes, add button to clear the selected changes

src/UI/BigComponents/PendingChangesIndicator.svelte

@@ -5,13 +5,15 @@
   import Loading from "../Base/Loading.svelte"
   import Translations from "../i18n/Translations"
   import Tr from "../Base/Tr.svelte"
+  import { TagUtils } from "../../Logic/Tags/TagUtils"
 
   export let state: SpecialVisualizationState
+  export let compact: boolean = true
 
   const changes: Changes = state.changes
   const isUploading: Store<boolean> = changes.isUploading
-  const pendingChangesCount: Store<number> = changes.pendingChanges.map((ls) => ls.length)
   const errors = changes.errors
+  const pending = changes.pendingChanges
 </script>
 
 <div
@@ -22,16 +24,43 @@
     <Loading>
       <Tr cls="thx" t={Translations.t.general.uploadingChanges} />
     </Loading>
-  {:else if $pendingChangesCount === 1}
+  {:else if $pending.length === 1}
     <Tr cls="alert" t={Translations.t.general.uploadPendingSingle} />
-  {:else if $pendingChangesCount > 1}
+  {:else if $pending.length > 1}
     <Tr
       cls="alert"
-      t={Translations.t.general.uploadPending.Subs({ count: $pendingChangesCount })}
+      t={Translations.t.general.uploadPending.Subs({ count: $pending.length })}
     />
   {/if}
 
   {#each $errors as error}
     <Tr cls="alert" t={Translations.t.general.uploadError.Subs({ error })} />
   {/each}
+
+  {#if !compact && $pending.length > 0}
+    <button on:click={() => state.changes.pendingChanges.set([])}>
+      <Tr t={Translations.t.general.clearPendingChanges} />
+    </button>
+
+    <ul>
+
+      {#each $pending as pending}
+        <li>
+
+          {#if pending.changes !== undefined}
+            Create {pending.type}/{pending.id} {JSON.stringify(TagUtils.KVObjtoProperties(pending.tags))}
+          {:else}
+            Modify {pending.type}/{pending.id} {JSON.stringify(pending.tags)}
+          {/if}
+          {#if pending.type === "way" && pending.changes?.nodes}
+            {pending.changes.nodes.join(" ")}
+          {/if}
+
+        </li>
+      {/each}
+    </ul>
+
+  {/if}
+
+
 </div>

src/UI/SpecialVisualizations.ts

@@ -99,6 +99,7 @@ import NothingKnown from "./Popup/NothingKnown.svelte"
 import { CombinedFetcher } from "../Logic/Web/NearbyImagesSearch"
 import { And } from "../Logic/Tags/And"
 import CloseNoteButton from "./Popup/Notes/CloseNoteButton.svelte"
+import PendingChangesIndicator from "./BigComponents/PendingChangesIndicator.svelte"
 
 class NearbyImageVis implements SpecialVisualization {
     // Class must be in SpecialVisualisations due to weird cyclical import that breaks the tests
@@ -118,7 +119,6 @@ class NearbyImageVis implements SpecialVisualization {
         "A component showing nearby images loaded from various online services such as Mapillary. In edit mode and when used on a feature, the user can select an image to add to the feature"
     funcName = "nearby_images"
     needsUrls = CombinedFetcher.apiUrls
-    svelteBased = true
 
     constr(
         state: SpecialVisualizationState,
@@ -2014,8 +2014,16 @@ export default class SpecialVisualizations {
                         return mostShadowed?.description ?? matchingPresets[0]?.description
                     })
                     return new VariableUiElement(translation)
-                },
+                }
             },
+            {
+                funcName:"pending_changes",
+                docs: "A module showing the pending changes, with the option to clear the pending changes",
+                args:[],
+                constr(state: SpecialVisualizationState, tagSource: UIEventSource<Record<string, string>>, argument: string[], feature: Feature, layer: LayerConfig): BaseUIElement {
+                    return new SvelteUIElement(PendingChangesIndicator, {state, compact: false})
+                }
+            }
         ]
 
         specialVisualizations.push(new AutoApplyButton(specialVisualizations))