UX: add version number to loading screen

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mapcomplete",
-  "version": "0.33.8",
+  "version": "0.33.9",
   "repository": "https://github.com/pietervdvn/MapComplete",
   "description": "A small website to edit OSM easily",
   "bugs": "https://github.com/pietervdvn/MapComplete/issues",

public/css/index-tailwind-output.css

@@ -1341,6 +1341,10 @@ video {
   align-items: center;
 }
 
+.items-baseline {
+  align-items: baseline;
+}
+
 .items-stretch {
   align-items: stretch;
 }

scripts/generateLayouts.ts

@@ -443,6 +443,7 @@ async function createLandingPage(layout: LayoutConfig, manifest, whiteIcons, alr
             /.*\/src\/index\.ts.*/,
             `<script type="module" src="./index_${layout.id}.ts"></script>`,
         )
+        .replace("Version", Constants.vNumber)
 
     return output
 }

src/Models/Constants.ts

@@ -6,7 +6,7 @@ import { AuthConfig } from "../Logic/Osm/AuthConfig"
 export type PriviligedLayerType = (typeof Constants.priviliged_layers)[number]
 
 export default class Constants {
-    public static vNumber = packagefile.version
+    public static vNumber : string = packagefile.version
     /**
      * API key for Maproulette
      *

theme.html

@@ -58,9 +58,16 @@
                 </p>
             </div>
 
+            <div class="flex justify-between items-end w-full">
+                
             <!-- IMAGE-START -->
             <img class="p-8 h-32 w-32 self-start" src="./assets/svg/add.svg">
             <!-- IMAGE-END -->
+                <div class="h-min subtle"> 
+                Version
+                </div>
+                
+            </div>
         </div>
     </div>
 </div>