UX: privacy policy: split up list in multiple parts, add interactive question

src/Models/MenuState.ts

@@ -100,6 +100,11 @@ export class MenuState {
         })
 
         this.allToggles = [
+            {
+                toggle: this.privacyPanelIsOpened,
+                name: "privacy",
+                showOverOthers: true,
+            },
             {
                 toggle: this.menuIsOpened,
                 name: "menu",
@@ -120,11 +125,6 @@ export class MenuState {
                 name: "community",
                 showOverOthers: true,
             },
-            {
-                toggle: this.privacyPanelIsOpened,
-                name: "privacy",
-                showOverOthers: true,
-            },
             {
                 toggle: this.filtersPanelIsOpened,
                 name: "filters",

src/UI/BigComponents/PrivacyPolicy.svelte

@@ -1,8 +1,14 @@
 <script lang="ts">
   import Tr from "../Base/Tr.svelte"
   import Translations from "../i18n/Translations"
+  import TagRenderingEditable from "../Popup/TagRendering/TagRenderingEditable.svelte"
+  import type { SpecialVisualizationState } from "../SpecialVisualization"
+  import UserRelatedState from "../../Logic/State/UserRelatedState"
 
   const t = Translations.t.privacy
+  export let state: SpecialVisualizationState
+  const usersettings = UserRelatedState.usersettingsConfig
+  const editPrivacy = usersettings.tagRenderings.find(tr => tr.id === "more_privacy")
 </script>
 
 <div class="link-underline flex flex-col">
@@ -20,7 +26,39 @@
   <h3>
     <Tr t={t.editingTitle} />
   </h3>
-  <Tr t={t.editing} />
+  <Tr t={t.editingIntro} />
+  <Tr t={t.editingIntro} />
+  <ul>
+    <li>
+      <Tr t={t.items.changesYouMake} />
+    </li>
+    <li>
+      <Tr t={t.items.username} />
+    </li>
+    <li>
+      <Tr t={t.items.date} />
+    </li>
+    <li>
+      <Tr t={t.items.theme} />
+    </li>
+    <li>
+      <Tr t={t.items.language} />
+    </li>
+    <li>
+      <Tr t={t.items.distanceIndicator} />
+    </li>
+    <li>
+      <TagRenderingEditable config={editPrivacy} selectedElement={{
+              type: "Feature",
+              properties: { id: "settings" },
+              geometry: { type: "Point", coordinates: [0, 0] },
+            }}
+                            {state}
+                            tags={state.userRelatedState.preferencesAsTags} />
+    </li>
+  </ul>
+
+  <Tr t={t.editingOutro} />
 
   <h3>
     <Tr t={t.miscCookiesTitle} />

src/UI/ThemeViewGUI.svelte

@@ -661,7 +661,7 @@
         <Tr t={Translations.t.privacy.title} />
       </h2>
       <div class="overflow-auto p-4">
-        <PrivacyPolicy />
+        <PrivacyPolicy {state}/>
       </div>
     </div>
   </FloatOver>