Add default keymap icon hint

src/components/keymap/header/keymap-header.component.html

@@ -16,6 +16,7 @@
         />)
         <i class="fa keymap__is-default"
            [ngClass]="{'fa-star-o': !keymap.isDefault, 'fa-star': keymap.isDefault}"
+           [title]="starTitle"
            (click)="setDefault()"
         ></i>
         <i class="glyphicon glyphicon-trash keymap__remove pull-right" title=""

src/components/keymap/header/keymap-header.component.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, Input, Renderer, ViewChild } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, Input, OnChanges, Renderer, ViewChild } from '@angular/core';
 
 import { Store } from '@ngrx/store';
 
@@ -10,15 +10,22 @@ import { KeymapActions } from '../../../store/actions';
 @Component({
     selector: 'keymap-header',
     template: require('./keymap-header.component.html'),
-    styles: [require('./keymap-header.component.scss')]
+    styles: [require('./keymap-header.component.scss')],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class KeymapHeaderComponent {
+export class KeymapHeaderComponent implements OnChanges {
     @Input() keymap: Keymap;
     @ViewChild('name') keymapName: ElementRef;
     @ViewChild('abbr') keymapAbbr: ElementRef;
 
+    private starTitle: string;
+
     constructor(private store: Store<AppState>, private renderer: Renderer) { }
 
+    ngOnChanges() {
+        this.setTitle();
+    }
+
     setDefault() {
         if (!this.keymap.isDefault) {
             this.store.dispatch(KeymapActions.setDefault(this.keymap.abbreviation));
@@ -51,4 +58,10 @@ export class KeymapHeaderComponent {
         newAbbr = newAbbr.toUpperCase();
         this.store.dispatch(KeymapActions.editKeymapAbbr(this.keymap.abbreviation, newAbbr));
     }
+
+    setTitle(): void {
+        this.starTitle = this.keymap.isDefault
+        ? 'This is the default keymap which gets activated when powering the keyboard.'
+        : 'Makes this keymap the default keymap which gets activated when powering the keyboard.';
+    }
 }

src/components/side-menu/side-menu.component.html

@@ -11,7 +11,7 @@
             <li *ngFor="let keymap of keymaps$ | async" class="sidebar__level-2--item">
                 <div class="sidebar__level-2" [routerLinkActive]="['active']">
                     <a [routerLink]="['/keymap', keymap.abbreviation]">{{keymap.name}}</a>
-                    <i *ngIf="keymap.isDefault" class="fa fa-star sidebar__fav"></i>
+                    <i *ngIf="keymap.isDefault" class="fa fa-star sidebar__fav" title="This is the default keymap which gets activated when powering the keyboard."></i>
                 </div>
             </li>
         </ul>

src/store/reducers/keymap.ts

@@ -62,7 +62,12 @@ export default function(state = initialState, action: Action): KeymapState {
 
         case KeymapActions.SET_DEFAULT:
             newState = state.entities.map((keymap: Keymap) => {
-                keymap.isDefault = (keymap.abbreviation === action.payload);
+                if (keymap.abbreviation === action.payload || keymap.isDefault) {
+                    let newKeymap: Keymap = new Keymap();
+                    Object.assign(newKeymap, keymap);
+                    keymap = newKeymap;
+                    keymap.isDefault = keymap.abbreviation === action.payload;
+                }
 
                 return keymap;
             });