.

src/app/components/pages/page/tower/tower.component.ts

@@ -49,13 +49,18 @@ export class TowerComponent implements OnInit {
           });
 
         if (this.tower) {
+          console.log(this.tower, this.tower.latestVersion, value);
+        }
+        if (this.tower && this.tower.latestVersion === value) {
           let difference = this.tower.blocks.map((b, index) => {
             return b === value.blocks[index];
           });
 
+          console.log(this.tower.blocks);
           if (
-            (difference.every(i => i) && this.tower.blocks.length < value.blocks.length) ||
+            (difference.every(i => i) && this.tower.blocks.length + 1 === value.blocks.length) ||
-            this.tower.blocks.filter(b => b.isDone).length + 1 === value.blocks.filter(b => b.isDone).length
+            (this.tower.blocks.length === value.blocks.length &&
+              this.tower.blocks.filter(b => b.isDone).length + 1 === value.blocks.filter(b => b.isDone).length)
           ) {
             const lastBlock = top(this.blocks);
             if (lastBlock) {

src/app/components/pages/pages.component.html

@@ -2,8 +2,8 @@
   <!-- wrapper for easier styling -->
   <app-select-add
     [options]="pageNames"
-    [default]="(selectedPage$ | async).name"
+    [default]="(selectedPage$ | async)?.name"
-    (value)="selectedPageName = $event"
+    (value)="selectPage($event)"
     [placeholder]="'Add a new page…'"
   ></app-select-add>
 </div>

src/app/components/pages/pages.component.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, ViewChild } from '@angular/core';
+import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
 import { Page } from '../../model/page';
 import { DataService } from '../../services/data.service';
 import { ModalService } from '../../services/modal.service';
@@ -12,7 +12,7 @@ const USER_DATA_KEY = 'life-towers.user-data.v.2';
   templateUrl: './pages.component.html',
   styleUrls: ['./pages.component.scss']
 })
-export class PagesComponent {
+export class PagesComponent implements OnInit {
   @ViewChild('top') top: ElementRef;
   @ViewChild('page') page: ElementRef;
   @ViewChild('bottom') bottom: ElementRef;
@@ -27,39 +27,59 @@ export class PagesComponent {
     return [];
   }
 
-  set selectedPageName(value: string) {
+  selectedPageName: string;
-    window.localStorage.setItem(
-      USER_DATA_KEY,
-      JSON.stringify({
-        selectedPage: value
-      })
-    );
-    const index = this.pageNames.indexOf(value);
-    this._selectedPage.next(index >= 0 ? this.pages[0] : null);
-  }
 
   private readonly _selectedPage: BehaviorSubject<Page> = new BehaviorSubject(null);
   readonly selectedPage$: Observable<Page> = this._selectedPage.asObservable();
 
   constructor(public dataService: DataService, private modalService: ModalService) {
     const userData = JSON.parse(window.localStorage.getItem(USER_DATA_KEY));
-    if (userData !== null && userData.selectedPage !== undefined) {
+    if (userData !== null) {
       this.selectedPageName = userData.selectedPage;
     }
+  }
 
+  ngOnInit() {
     this.dataService.children$.subscribe(pages => {
       if (pages) {
-        this.pages = pages;
+        if (this.pages && this.pages.length - 1 === pages.length) {
-        if (!this._selectedPage.getValue() && this.pages.length > 0) {
+          this.selectedPageName = null;
-          this.selectedPageName = this.pages[0].name;
-        } else if (this._selectedPage.getValue()) {
-          // To trigger update on new page.
-          this.selectedPageName = this._selectedPage.getValue().name;
         }
+        this.pages = pages;
+        this.selectPage(this.selectedPageName);
       }
     });
   }
 
+  selectPage(name: string) {
+    console.log(name);
+    if (!name) {
+      if (this.pages && this.pages.length > 0) {
+        name = this.pages[0].name;
+      }
+    }
+    this.selectedPageName = name;
+
+    window.localStorage.setItem(
+      USER_DATA_KEY,
+      JSON.stringify({
+        selectedPage: name
+      })
+    );
+
+    if (this.pages && name) {
+      if (!this.pageNames.includes(name)) {
+        this.dataService.addPage(name);
+      }
+
+      const index = this.pageNames.indexOf(name);
+      this._selectedPage.next(this.pages[index]);
+      return;
+    }
+
+    this._selectedPage.next(null);
+  }
+
   async openSettings() {
     try {
       await this.modalService.showSettings(this.selectedPage$);

src/app/components/shared/select-add/select-add.component.ts

@@ -59,12 +59,12 @@ export class SelectAddComponent {
       this.select(this.newOption);
       this.newOption = '';
     }
-    this.toggle();
   }
 
   select(option: string) {
     this.selected = option;
     this.value.emit(this.selected);
+    this.toggle();
   }
 
   toggle() {