coming along well - electron is pretty nice

app/components/Content/Content.scss

@@ -0,0 +1,36 @@
+@import '../../scss/variables';
+
+.content {
+  flex: 1;
+
+  .path-container {
+    display: flex;
+  }
+
+  .content-button {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: $blue;
+    transition: background 0.2s;
+    outline: none;
+    padding: 0 15px;
+
+    &:hover {
+      background: darken($blue, 5%);
+    }
+  }
+
+  .content-input {
+    flex: 1;
+    background: darken($dark-blue, 3%);
+    border: none;
+    color: $blue--lighter;
+    padding: 5px;
+
+    &::-webkit-input-placeholder {
+      color: $dark-blue--2;
+    }
+  }
+}

app/components/Content/Content.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+// import fs from 'fs';
+// import { exec } from 'child_process';
+import { inject, observer } from 'mobx-react';
+import * as _ from 'lodash';
+import { AppState } from '../../state/AppState';
+
+import './Content.scss';
+
+interface Props {
+  AppState?: AppState;
+}
+
+@inject('AppState')
+@observer
+export class Content extends React.Component<Props, any> {
+  constructor() {
+    super();
+    this.state = {
+      path: '',
+    };
+  }
+
+  // private async startGame(): Promise<void> {
+  //   const { path } = this.state;
+
+  //   // set the realm list
+  //   await this.setRealmList();
+
+  //   // launch wow
+  //   exec(`"${path}/WoW.exe"`, (err, output) => {
+  //     console.log(err);
+  //     console.log(output);
+  //   });
+  // }
+
+  // private setRealmList(): Promise<any> {
+  //   const { path } = this.state;
+
+  //   return new Promise((resolve, reject) => {
+  //     fs.writeFile(`${path}/realmlist.wtf`, 'set realmlist logon.elysium-project.org', err => {
+  //       err ? reject(err) : resolve();
+  //     });
+  //   });
+  // }
+
+  private onFolderSelect(e: React.ChangeEvent<HTMLInputElement>): void {
+    const path: string = _.get(e, `target.files[0].path`);
+
+    if (path) {
+      this.props.AppState.setDirectory(path);
+    }
+  }
+
+  private onInputChange(e: any): void {
+    this.props.AppState.setDirectory(e.target.value);
+  }
+
+  public render(): any {
+    const { selectedExpansion } = this.props.AppState;
+
+    return (
+      <div className="content">
+        <div className="path-container">
+          <input
+            type="text"
+            className="content-input"
+            placeholder="Your wow directory"
+            value={selectedExpansion.directory}
+            onChange={this.onInputChange.bind(this)}
+          />
+          <label htmlFor="folder-browser" className="content-button">
+            Browse
+          </label>
+          <input
+            id="folder-browser"
+            type="file"
+            {...{ webkitdirectory: 'true' }}
+            onChange={this.onFolderSelect.bind(this)}
+            style={{ display: 'none' }}
+          />
+        </div>
+      </div>
+    );
+  }
+}

app/components/Header/Header.scss

@@ -1,11 +1,12 @@
 @import '../../scss/variables.scss';
 
 .header {
-  background: $dark-blue--1;
+  background: $dark-blue--2;
   display: flex;
   align-items: center;
-  height: 40px;
+  height: 30px;
   padding: 0 10px;
+  border-bottom: 1px solid $dark-blue--3;
 }
 
 .header__draggable-region {

app/components/Header/Header.tsx

@@ -1,14 +1,26 @@
 import { remote } from 'electron';
 import React from 'react';
+import { observer, inject } from 'mobx-react';
+import { AppState } from '../../state/AppState';
 import './Header.scss';
 
-export class Header extends React.Component<any, any> {
+interface Props {
+  AppState?: AppState;
+}
 
-  exit() {
+@inject('AppState')
+@observer
+export class Header extends React.Component<Props, any> {
+
+  constructor(props: Props) {
+    super(props);
+  }
+
+  private exit(): void {
     window.close();
   }
 
-  maximize() {
+  private maximize(): void {
     if (remote.getCurrentWindow().isMaximized()) {
       remote.getCurrentWindow().restore();
     } else {
@@ -16,14 +28,14 @@ export class Header extends React.Component<any, any> {
     }
   }
 
-  minimize() {
+  private minimize(): void {
     remote.getCurrentWindow().minimize();
   }
 
-  render() {
+  public render(): any {
     return (
       <div className="header">
-        <div className="header__draggable-region"/>
+        <div className="header__draggable-region"></div>
         <div className="header-icon header-icon--minimize" onClick={this.minimize.bind(this)}/>
         <div className="header-icon header-icon--maximize" onClick={this.maximize.bind(this)}/>
         <div className="fa fa-times fa-lg header-icon" onClick={() => this.exit()}/>

app/components/Header/index.ts

@@ -1 +0,0 @@
-export * from './Header';

app/components/ServerList/ServerList.scss

@@ -0,0 +1,7 @@
+@import '../../scss/variables.scss';
+
+.server-list {
+  background: darken($dark-blue, 1%);
+  width: 200px;
+  border-right: 1px solid $dark-blue--3;
+}

app/components/ServerList/ServerList.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { inject, observer } from 'mobx-react';
+import { AppState } from '../../state/AppState';
+
+import './ServerList.scss';
+
+interface Props {
+  AppState?: AppState;
+}
+
+@inject('AppState')
+@observer
+export class ServerList extends React.Component<Props, any> {
+
+  constructor(props: Props) {
+    super(props);
+  }
+
+  public render(): any {
+    return (
+      <div className="server-list">Server list</div>
+    );
+  }
+}

app/components/SubHeader/SubHeader.scss

@@ -0,0 +1,22 @@
+@import '../../scss/variables.scss';
+
+.sub-header {
+  background: $dark-blue--1;
+  border-bottom: 1px solid $dark-blue--3;
+  display: flex;
+  height: 100px;
+  overflow: auto;
+
+  .sub-header__item {
+    width: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+
+    &:hover, &.selected {
+      background: $dark-blue--3;
+    }
+
+  }
+}

app/components/SubHeader/SubHeader.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { inject, observer } from 'mobx-react';
+import * as _ from 'lodash';
+import { AppState } from '../../state/AppState';
+
+import './SubHeader.scss';
+
+interface Props {
+  AppState?: AppState;
+}
+
+@inject('AppState')
+@observer
+export class SubHeader extends React.Component<Props, any> {
+  constructor(props: Props) {
+    super(props);
+  }
+
+  public componentDidMount(): void {
+    this.renderItems();
+  }
+
+  private selectExpansion(exp: string): void {
+    this.props.AppState.setSelectedExpansion(exp);
+  }
+
+  private renderItems(): any {
+    const { selectedExpKey } = this.props.AppState;
+    return _.map(this.props.AppState.expansions, (exp, key) => {
+      return (
+        <div key={key} className={'sub-header__item ' + (key === selectedExpKey && 'selected')} onClick={() => this.selectExpansion(key)}>
+          <div style={{ textAlign: 'center' }}>{exp.name}</div>
+        </div>
+      );
+    });
+  }
+
+  public render(): any {
+    return (
+      <div className="sub-header">
+        {this.renderItems()}
+      </div>
+    );
+  }
+}

app/components/index.ts

@@ -0,0 +1,4 @@
+export * from './Content/Content';
+export * from './Header/Header';
+export * from './ServerList/ServerList';
+export * from './SubHeader/SubHeader';