UI: style offline basemap management better, make translatable

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>