Further work on professional services page

UI/Base/Title.ts

@@ -6,6 +6,8 @@ export default class Title extends BaseUIElement {
     public readonly title: BaseUIElement;
     public readonly level: number;
     public readonly id : string
+    
+    private static readonly defaultClassesPerLevel = ["", "text-3xl font-bold","text-2xl font-bold","text-xl font-bold", "text-lg font-bold"]
 
     constructor(embedded: string | BaseUIElement, level: number = 3) {
         super()
@@ -16,6 +18,7 @@ export default class Title extends BaseUIElement {
         }
         this.level = level;
         this.id = this.title.ConstructElement()?.innerText?.replace(/ /g, '_') ?? ""
+        this.SetClass(Title.defaultClassesPerLevel[level] ?? "")
     }
 
     AsMarkdown(): string {

UI/LanguagePicker.ts

@@ -9,7 +9,7 @@ export default class LanguagePicker {
         languages: string[],
         label: string | BaseUIElement = "") {
 
-        if (languages.length <= 1) {
+        if (languages === undefined || languages.length <= 1) {
             return undefined;
         }
 

UI/ProfessionalGui.ts

@@ -17,7 +17,8 @@ class TableOfContents extends Combine {
     private readonly titles: Title[]
 
     constructor(elements: Combine | Title[], options: {
-        noTopLevel: false | boolean
+        noTopLevel: false | boolean,
+        maxDepth?: number
     }) {
         let titles: Title[]
         if (elements instanceof Combine) {
@@ -49,7 +50,7 @@ class TableOfContents extends Combine {
         }
         if (options.noTopLevel) {
             const minLevel = Math.min(...els.map(e => e.level))
-            els = els.filter(e => e.level !== minLevel)
+            els = els.filter(e => e.level !== minLevel && e.level <= (options.maxDepth + minLevel))
         }
 
 
@@ -97,10 +98,18 @@ class TableOfContents extends Combine {
 }
 
 class Snippet extends Toggleable {
-    constructor(translations) {
+    constructor(translations, ...extraContent: BaseUIElement[]) {
         super(
             new Title(translations.title, 3),
-            new Combine([
+            new SnippetContent(translations, ...extraContent)
+        )
+    }
+}
+
+
+class SnippetContent extends Combine {
+    constructor(translations:any, ...extras: BaseUIElement[]) {
+           super([
                 translations.intro,
                 new List([
                     translations.li0,
@@ -111,9 +120,10 @@ class Snippet extends Toggleable {
                     translations.li5,
                     translations.li6,
                 ]),
-                translations.outro
-            ]).SetClass("flex flex-col")
-        )
+                translations.outro,
+                ...extras
+            ])
+            this.SetClass("flex flex-col")
     }
 }
 
@@ -128,14 +138,14 @@ export default class ProfessionalGui {
             new FixedUiElement(`<img class="w-12 h-12 sm:h-24 sm:w-24" src="./assets/svg/logo.svg" alt="MapComplete Logo">`)
                 .SetClass("flex-none m-3"),
             new Combine([
-                new Title(t.title, 1).SetClass("font-bold text-3xl"),
+                new Title(t.title, 1),
                 t.intro
             ]).SetClass("flex flex-col")
         ]).SetClass("flex")
 
         const content = new Combine([
             header,
-            new Title(t.osmTitle, 2).SetClass("text-2xl"),
+            new Title(t.osmTitle, 2),
             t.text0,
             t.text1,
             new Accordeon([
@@ -145,20 +155,26 @@ export default class ProfessionalGui {
                 new Snippet(t.aboutOsm.vandalism),
             ]).SetClass("flex flex-col"),
 
-            new Title(t.aboutMc.title, 2).SetClass("text-2xl"),
+            new Title(t.aboutMc.title, 2),
             t.aboutMc.text0,
             t.aboutMc.text1,
             t.aboutMc.text2,
             new Accordeon([
                 new Snippet(t.aboutMc.layers),
                 new Snippet(t.aboutMc.survey),
-                new Snippet(t.aboutMc.internalUse)
+                new Snippet(t.aboutMc.internalUse),
+                new Snippet(t.services)
             ]),
             new Title(t.drawbacks.title, 2).SetClass("text-2xl"),
             t.drawbacks.intro,
             new Accordeon([
                 new Snippet(t.drawbacks.unsuitedData),
-                new Snippet(t.drawbacks.licenseNuances)
+                new Snippet(t.drawbacks.licenseNuances,
+                   new Title( t.drawbacks.licenseNuances.usecaseMapDifferentSources.title, 4),
+                    new SnippetContent(t.drawbacks.licenseNuances.usecaseMapDifferentSources),
+                    new Title( t.drawbacks.licenseNuances.usecaseGatheringOpenData.title, 4),
+                    new SnippetContent(t.drawbacks.licenseNuances.usecaseGatheringOpenData)
+                    )
             ]),
 
         ]).SetClass("flex flex-col pb-12 m-3 lg:w-3/4 lg:ml-10 link-underline")
@@ -175,10 +191,12 @@ export default class ProfessionalGui {
         const leftContents: BaseUIElement[] = [
             backToIndex,
             new TableOfContents(content, {
-                noTopLevel: true
+                noTopLevel: true,
+                maxDepth: 2
             }).SetClass("subtle"),
-            LanguagePicker.CreateLanguagePicker(Translations.t.index.title.SupportedLanguages()).SetClass("mt-4 self-end flex-col"),
-        ].map(el => el.SetClass("pl-4"))
+            
+            LanguagePicker.CreateLanguagePicker(Translations.t.professional.title.SupportedLanguages())?.SetClass("mt-4 self-end flex-col"),
+        ].map(el => el?.SetClass("pl-4"))
         const leftBar = new Combine([
             new Combine(leftContents).SetClass("sticky top-4 m-4")
         ]).SetClass("block w-full md:w-2/6 lg:w-1/6")