Fix morescreen (which shows the custom themes now), remove invalid themes automatically

InitUiElements.ts

@@ -282,12 +282,7 @@ export class InitUiElements {
 
             tabs.push({
                 header: `<img src='./assets/add.svg'>`,
-                content: new VariableUiElement(State.state.osmConnection.userDetails.map(userdetails => {
+                content: new MoreScreen()
-                    if(userdetails.csCount < State.userJourney.moreScreenUnlock){
-                        return "";
-                    }
-                    return new MoreScreen().Render()
-                }, [Locale.language]))
             });
         }
 

Logic/Osm/OsmPreferences.ts

@@ -41,7 +41,19 @@ export class OsmPreferences {
         const self = this;
         source.addCallback(str => {
             if (str === undefined || str === "") {
-               return
+                return;
+            }
+            if(str === null){
+                console.error("Deleting "+allStartWith);
+                let count = parseInt(length.data);
+                for (let i = 0; i < count; i++) {
+                    // Delete all the preferences
+                    self.GetPreference(allStartWith + "-" + i, "")
+                        .setData("");
+                }
+                self.GetPreference(allStartWith + "-length", "")
+                    .setData("");
+                return
             }
 
             let i = 0;
@@ -75,7 +87,6 @@ export class OsmPreferences {
             }
 
             source.setData(str);
-            console.log("Long preference", key, "has", str.length, "chars");
         }
 
         length.addCallback(l => {

State.ts

@@ -205,6 +205,7 @@ export default class State {
             if (allPreferences === undefined) {
                 return installedThemes;
             }
+            const invalidThemes = []
             for (const allPreferencesKey in allPreferences) {
                 const themename = allPreferencesKey.match(/^mapcomplete-installed-theme-(.*)-combined-length$/);
                 if (themename && themename[1] !== "") {
@@ -226,11 +227,19 @@ export default class State {
                             definition: customLayout.data
                         });
                     } catch (e) {
-                        console.warn("Could not parse custom layout from preferences: ", allPreferencesKey, e, customLayout.data);
+                        console.warn("Could not parse custom layout from preferences - deleting: ", allPreferencesKey, e, customLayout.data);
+                        invalidThemes.push(themename[1])
                     }
                 }
             }
 
+            for (const invalid of invalidThemes) {
+                console.error("Attempting to remove ", invalid)
+                this.osmConnection.GetLongPreference(
+                    "installed-theme-" + invalid
+                ).setData(null);
+            }
+
             return installedThemes;
 
         });

UI/Base/TabbedComponent.ts

@@ -14,7 +14,6 @@ export class TabbedComponent extends UIElement {
             let element = elements[i];
             this.headers.push(Translations.W(element.header).onClick(() => self._source.setData(i)));
             const content = Translations.W(element.content)
-            this.ListenTo(content)
             this.content.push(content);
         }
     }
@@ -34,6 +33,7 @@ export class TabbedComponent extends UIElement {
         headerBar = "<div class='tabs-header-bar'>" + headerBar + "</div>"
 
         const content = this.content[this._source.data];
+        console.log("Rendering tab", this._source.data);
         return headerBar + "<div class='tab-content'>" + (content?.Render() ?? "") + "</div>";
     }
 

UI/MoreScreen.ts

@@ -12,11 +12,15 @@ import {Layout} from "../Customizations/Layout";
 
 export class MoreScreen extends UIElement {
 
+    
     constructor() {
         super(State.state.locationControl);
         this.ListenTo(State.state.osmConnection.userDetails);
         this.ListenTo(State.state.installedThemes);
-
+        
+        State.state.installedThemes.addCallback(themes => {
+            console.log("INSTALLED THEMES COUNT:", themes.length)
+        })
     }
 
     private createLinkButton(layout: Layout, customThemeDefinition: string = undefined) {
@@ -68,6 +72,7 @@ export class MoreScreen extends UIElement {
 
     InnerRender(): string {
 
+        console.log("Inner rendering MORE")
         const tr = Translations.t.general.morescreen;
 
         const els: UIElement[] = []