Feature(offline): add management module for offline basemaps

src/UI/BigComponents/MenuDrawerIndex.svelte

@@ -16,7 +16,6 @@
   import Tr from "../Base/Tr.svelte"
   import LoginToggle from "../Base/LoginToggle.svelte"
   import { CloseButton } from "flowbite-svelte"
-  import HotkeyTable from "./HotkeyTable.svelte"
   import { Utils } from "../../Utils"
   import Constants from "../../Models/Constants"
   import Mastodon from "../../assets/svg/Mastodon.svelte"
@@ -61,6 +60,8 @@
   import QueuedImagesView from "../Image/QueuedImagesView.svelte"
   import InsetSpacer from "../Base/InsetSpacer.svelte"
   import UserCircle from "@rgossiaux/svelte-heroicons/solid/UserCircle"
+  import OfflineManagement from "./OfflineManagement.svelte"
+  import { GlobeEuropeAfrica } from "@babeard/svelte-heroicons/solid/GlobeEuropeAfrica"
 
   export let state: {
     favourites: FavouritesFeatureSource
@@ -71,7 +72,6 @@
     mapProperties?: MapProperties
     userRelatedState?: UserRelatedState
   }
-  let hotkeys = Hotkeys._docs
   let userdetails = state.osmConnection.userDetails
 
   let usersettingslayer = new LayerConfig(<LayerConfigJson>usersettings, "usersettings", true)
@@ -134,13 +134,17 @@
     <SidebarUnit>
       <LoginToggle {state}>
         <LoginButton osmConnection={state.osmConnection} slot="not-logged-in" />
-        <div class="flex items-center gap-x-4 w-fit m-2">
+        <div class="flex items-center gap-x-4 w-full m-2">
           {#if $userdetails.img}
             <img alt="avatar" src={$userdetails.img} class="h-12 w-12 rounded-full" />
             {:else}
             <UserCircle class="h-14 w-14" color="gray"/>
           {/if}
-          <b>{$userdetails.name}</b>
+          <div class="flex flex-col w-full gap-y-2">
+
+            <b>{$userdetails.name}</b>
+            <LogoutButton clss="as-link small subtle text-sm" osmConnection={state.osmConnection} />
+          </div>
         </div>
       </LoginToggle>
 
@@ -194,22 +198,16 @@
             </div>
           </Page>
         {/if}
-        {#if $hotkeys.length > 0}
-          <div class="hidden-on-mobile w-full">
-            <Page {onlyLink} shown={pg.hotkeys}>
-              <svelte:fragment slot="header">
-                <BoltIcon />
-                <Tr t={Translations.t.hotkeyDocumentation.title} />
-              </svelte:fragment>
-              <HotkeyTable />
-            </Page>
-          </div>
-        {/if}
-
-        <div class="self-end">
-          <LogoutButton osmConnection={state.osmConnection} />
-        </div>
       </LoginToggle>
+
+      <Page {onlyLink} shown={pg.manageOffline} fullscreen>
+        <svelte:fragment slot="header">
+          <GlobeEuropeAfrica />
+          Manage offline basemap
+        </svelte:fragment>
+        <OfflineManagement {state} />
+      </Page>
+
       <LanguagePicker
         preferredLanguages={state.userRelatedState.osmConnection.userDetails.mapD(
           (ud) => ud.languages
@@ -268,6 +266,7 @@
         <Forgejo class="h-6 w-6" />
         <Tr t={Translations.t.general.attribution.gotoSourceCode} />
       </a>
+
       <a class="flex" href={`${Constants.weblate}projects/mapcomplete/`} target="_blank">
         <TranslateIcon class="h-6 w-6" />
         <Tr t={Translations.t.translations.activateButton} />