UI: style offline basemap management better, make translatable

langs/en.json

@@ -751,6 +751,22 @@
         "typeText": "Type some text to add a comment",
         "warnAnonymous": "You are not logged in. We won't be able to contact you to resolve your issue."
     },
+    "offline": {
+        "actions": "Actions",
+        "autoCheckmark": "Automatically download the basemap when browsing around",
+        "autoExplanation": "If checked, MapComplete will automatically download the basemap to the cache for the area. This results in bigger initial data loads, but requires less internet over the long run. If you plan to visit a region with less connectivity, you can also select the area you want to download below.",
+        "autoExplanationIntro": "What does automatically downloading basemaps mean?",
+        "date": "Map generation data",
+        "delete": "Delete basemap",
+        "deleteAll": "Delete all basemaps",
+        "download": "Download area",
+        "installing": "Data is being downloaded",
+        "localOnMap": "Offline basemaps on the map",
+        "name": "Name",
+        "overview": "Offline basemaps overview",
+        "range": "Zoom ranges",
+        "size": "Size"
+    },
     "plantDetection": {
         "back": "Back to species overview",
         "button": "Automatically detect the plant species using the AI of Plantnet.org",

src/UI/BigComponents/OfflineManagement.svelte

@@ -20,6 +20,9 @@
   import type { AreaDescription } from "../../Logic/OfflineBasemapManager"
   import { OfflineBasemapManager } from "../../Logic/OfflineBasemapManager"
   import Checkbox from "../Base/Checkbox.svelte"
+  import Translations from "../i18n/Translations"
+  import { default as Trans } from "../Base/Tr.svelte"
+  import AccordionSingle from "../Flowbite/AccordionSingle.svelte"
 
   export let state: ThemeViewState & SpecialVisualizationState = undefined
   export let autoDownload = state.autoDownloadOfflineBasemap
@@ -147,25 +150,29 @@
       ],
     }),
   })
+  const t = Translations.t.offline
 </script>
 
-<div class="max-h-leave-room flex h-full flex-col">
+<div class="max-h-leave-room flex h-full flex-col overflow-auto ">
   <Checkbox selected={autoDownload}>
-    Automatically download the basemap when browsing around
+    <Trans t={t.autoCheckmark} />
   </Checkbox>
+  <AccordionSingle noBorder>
+    <Trans slot="header" cls="text-sm" t={t.autoExplanationIntro} />
+    <div class="low-interaction">
+      <Trans t={t.autoExplanation} />
+    </div>
+  </AccordionSingle>
   <div>
-    If checked, MapComplete will automatically download the basemap to the cache for the area. This
-    results in bigger initial data loads, but requires less internet over the long run. If you plan
-    to visit a region with less connectivity, you can also select the area you want to download
-    below.
+
   </div>
   {#if $installed === undefined}
     <Loading />
   {:else}
-    <div class="h-full overflow-auto pb-16">
+    <div class="pb-16">
       <Accordion class="" inactiveClass="text-black">
         <AccordionItem paddingDefault="p-2">
-          <div slot="header">Map</div>
+          <Trans slot="header" t={t.localOnMap} />
           <div class="leave-room relative">
             <div class="absolute left-0 top-0 h-full w-full rounded-lg">
               <MaplibreMap {map} {mapProperties} />
@@ -176,7 +183,9 @@
               <div class="mb-16 h-32 w-16" />
               {#if $focusTileIsInstalling}
                 <div class="normal-background rounded-lg">
-                  <Loading>Data is being downloaded</Loading>
+                  <Loading>
+                    <Trans t={t.installing} />
+                  </Loading>
                 </div>
               {:else}
                 <button
@@ -185,7 +194,7 @@
                   class:disabled={$focusTileIsInstalled}
                 >
                   <DownloadIcon class="h-8 w-8" />
-                  Download
+                  <Trans t={t.download} />
                 </button>
               {/if}
             </div>
@@ -193,8 +202,7 @@
         </AccordionItem>
 
         <AccordionItem paddingDefault="p-2">
-          <div slot="header">Offline tile management</div>
-
+          <Trans t={t.overview} slot="header" />
           <div class="leave-room">
             {Utils.toHumanByteSize(Utils.sum($installed.map((area) => area.size)))}
             <button
@@ -203,15 +211,25 @@
               }}
             >
               <TrashIcon class="w-6" />
-              Delete all
+              <Trans t={t.deleteAll} />
             </button>
             <table class="w-full">
               <tr>
-                <th>Name</th>
-                <th>Map generation date</th>
-                <th>Size</th>
-                <th>Zoom ranges</th>
-                <th>Actions</th>
+                <th>
+                  <Trans t={t.name} />
+                </th>
+                <th>
+                  <Trans t={t.date} />
+                </th>
+                <th>
+                  <Trans t={t.size} />
+                </th>
+                <th>
+                  <Trans t={t.range} />
+                </th>
+                <th>
+                  <Trans t={t.actions} />
+                </th>
               </tr>
               {#each $installed ?? [] as area}
                 <tr>
@@ -229,7 +247,8 @@
                   <td>
                     <button on:click={() => del(area)}>
                       <TrashIcon class="w-6" />
-                      Delete this map
+                      <Trans t={t.delete} />
+
                     </button>
                   </td>
                 </tr>