Use fix sidebar to instrument and control layout changes

src/app/ide/ide.component.html

@@ -0,0 +1,44 @@
+<div class="tfw-grid-ide-statusbar">
+  <div class="btn-group btn-group-sm flex-wrap tao-grid-center-left">
+    <button *ngFor="let file of files"
+            class="btn tfw-tab-btn"
+            (click)="tabSwitchButtonHandler(file)"
+            [class.active]="filename === file"
+            [class.disabled]="filename === file"
+            [disabled]="filename === file"
+            [class.tao-tab-btn-saved]="filename === file && codeState === 'SAVED'">
+      <span *ngIf="filename !== file">{{file}}</span>
+      <span *ngIf="filename === file"
+            [class.underline]="codeState === 'DIRTY'">{{file}}</span>
+    </button>
+  </div>
+
+  <div class="btn-group-sm tfw-deploy-btn-group">
+    <button *ngIf="showDeployButton"
+            type="submit"
+            class="btn tfw-deploy-btn tao-grid-top-center"
+            (click)="sendCodeIfDirty(); deployCode()"
+            [disabled]="deployButtonState === 'DEPLOYING' || deployButtonState === 'DEPLOYED'"
+            [class.deployed]="deployButtonState === 'DEPLOYED'"
+            [class.deploy]="deployButtonState === 'DEPLOYING'"
+            [class.disabled]="deployButtonState === 'DEPLOYING' || deployButtonState === 'DEPLOYED'"
+            [class.failed]="deployButtonState === 'FAILED'"
+    >
+      <span *ngIf="deployButtonState === 'TODEPLOY'">Deploy</span>
+      <span *ngIf="deployButtonState === 'DEPLOYED'">
+        <img src="images/greentick_icon.svg"/>
+        <span>Deployed</span>
+      </span>
+      <span *ngIf="deployButtonState === 'DEPLOYING'"><div class="loader"></div>Reloading app...</span>
+      <span *ngIf="deployButtonState === 'FAILED'">Deployment failed. Retry</span></button>
+  </div>
+</div>
+
+<div (keyup)="setCodeState('DIRTY'); setDeployButtonState('TODEPLOY'); resetAutoSaveCountdown()"
+  ace-editor
+  [(text)]="code"
+  [mode]="language"
+  [theme]="theme"
+  class="tfw-ace-editor"
+>
+</div>