Fix production build, implement tabs design

.prettierrc

@@ -1,3 +1,4 @@
 {
-  "singleQuote": true
-}
+  "singleQuote": true,
+  "trailingComma": "all"
+}

package.json

@@ -66,6 +66,7 @@
     "react-dom": "16.4.2",
     "react-hot-loader": "4.3.4",
     "styled-components": "3.4.0",
+    "ts-loader": "4.4.2",
     "tslint": "5.11.0",
     "tslint-config-airbnb": "5.9.2",
     "tslint-config-prettier": "1.14.0",
@@ -80,4 +81,4 @@
   "dependencies": {
     "electron-updater": "3.0.3"
   }
-}
+}

src/defaults/tab-animations.ts

@@ -5,11 +5,11 @@ export const tabAnimations = {
     duration: 0.2,
   },
   left: {
-    duration: 0.3,
+    duration: 0.4,
     easing: Power4.easeOut,
   },
   width: {
-    duration: 0.3,
+    duration: 0.4,
     easing: Power4.easeOut,
   },
 };

src/main/protocols.ts

@@ -6,7 +6,6 @@ import { parse } from 'url';
 import { Global } from './interfaces';
 
 declare const global: Global;
-
 (app as any).on('session-created', (sess: Electron.session) => {
   sess.protocol.registerBufferProtocol(
     'wexond-extension',

src/models/tab.ts

@@ -21,9 +21,13 @@ export class Tab {
   @observable
   public favicon: string = '';
 
+  @observable
+  public hovered: boolean = false;
+
+  @observable
   public isNew: boolean = true;
 
-  public url: string;
+  public url: string = '';
 
   public width: number = 0;
 

src/renderer/components.ts

@@ -5,11 +5,11 @@ class Components {
   public tab = {
     Root: tabStyles.StyledTab,
     Close: tabStyles.Close,
-    // Overlay: tabStyles.Overlay,
-    // Title: tabStyles.Title,
-    // Icon: tabStyles.Icon,
-    // Content: tabStyles.Content,
-    // RightBorder: tabStyles.RightBorder,
+    Overlay: tabStyles.Overlay,
+    Title: tabStyles.Title,
+    Icon: tabStyles.Icon,
+    Content: tabStyles.Content,
+    RightBorder: tabStyles.RightBorder,
   };
 
   [key: string]: any;

src/renderer/store.ts

@@ -184,7 +184,10 @@ class Store {
   constructor() {
     this.rearrangeTabsTimer.interval = setInterval(() => {
       // Set widths and positions for tabs 3 seconds after a tab was closed
-      if (this.rearrangeTabsTimer.canReset && this.rearrangeTabsTimer.time === 3) {
+      if (
+        this.rearrangeTabsTimer.canReset &&
+        this.rearrangeTabsTimer.time === 3
+      ) {
         updateTabsBounds();
         moveIndicatorToSelectedTab(true);
         this.rearrangeTabsTimer.canReset = false;

src/renderer/views/about/About/index.tsx

@@ -1,4 +1,4 @@
-import { observer } from 'mobx-React';
+import { observer } from 'mobx-react';
 import React from 'react';
 import { hot } from 'react-hot-loader';
 import store from '../../../store';

src/renderer/views/about/Item/index.tsx

@@ -1,4 +1,4 @@
-import { observer } from 'mobx-React';
+import { observer } from 'mobx-react';
 import React from 'react';
 
 import { Content, StyledItem, Title } from './styles';

src/renderer/views/app/AddressBar/index.tsx

@@ -1,17 +1,13 @@
-import { observer } from 'mobx-React';
+import { observer } from 'mobx-react';
 import React, { Component } from 'react';
-import { icons } from '../../../../defaults';
-import {
-  getAddressbarURL,
-  getPageById,
-  getSelectedPage,
-  getSelectedTab,
-  isURL,
-  loadSuggestions,
-} from '../../../../utils';
 import store from '../../../store';
 import Suggestions from '../Suggestions';
 import { Icon, Input, InputContainer, StyledAddressBar } from './styles';
+import { getSelectedTab } from '../../../../utils/tabs';
+import { isURL, getAddressbarURL } from '../../../../utils/url';
+import { getPageById, getSelectedPage } from '../../../../utils/pages';
+import { loadSuggestions } from '../../../../utils/suggestions';
+import { icons } from '../../../../defaults/icons';
 
 interface Props {
   visible: boolean;
@@ -36,7 +32,7 @@ export default class AddressBar extends Component<Props, {}> {
 
   public onInputFocus = () => {
     this.input.select();
-  }
+  };
 
   public autoComplete(text: string, suggestion: string) {
     const regex = /(http(s?)):\/\/(www.)?|www./gi;
@@ -92,7 +88,7 @@ export default class AddressBar extends Component<Props, {}> {
 
       this.input.value = suggestion.primaryText;
     }
-  }
+  };
 
   public onKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.which === 13) {
@@ -118,7 +114,7 @@ export default class AddressBar extends Component<Props, {}> {
 
       store.addressBar.toggled = false;
     }
-  }
+  };
 
   public onInput = () => {
     if (this.canSuggest) {
@@ -137,14 +133,14 @@ export default class AddressBar extends Component<Props, {}> {
     });
 
     store.selectedSuggestion = 0;
-  }
+  };
 
   public getInputValue = () => {
     if (this.input != null) {
       return this.input.value;
     }
     return null;
-  }
+  };
 
   public render() {
     const { visible } = this.props;

src/renderer/views/app/App/index.tsx

@@ -1,22 +1,13 @@
 import { clipboard, ipcRenderer, nativeImage, remote } from 'electron';
 import { createWriteStream } from 'fs';
 import http from 'http';
-import { observer } from 'mobx-React';
+import { observer } from 'mobx-react';
 import { basename, extname } from 'path';
 import React from 'react';
 import { parse } from 'url';
 
 import { UPDATE_RESTART_AND_INSTALL } from '../../../../constants';
 import database from '../../../../database';
-import { colors } from '../../../../defaults';
-import { ButtonType, PageMenuMode } from '../../../../enums';
-import {
-  bindKeys,
-  createTab,
-  createWorkspace,
-  getSelectedPage,
-  parseKeyBindings,
-} from '../../../../utils';
 import Button from '../../../components/Button';
 import ContextMenu from '../../../components/ContextMenu';
 import Snackbar from '../../../components/Snackbar';
@@ -26,6 +17,14 @@ import Pages from '../Pages';
 import Toolbar from '../Toolbar';
 import WorkspacesMenu from '../WorkspacesMenu';
 import { StyledApp } from './styles';
+import {
+  parseKeyBindings,
+  bindKeys,
+  getSelectedPage,
+  createTab,
+} from '../../../../utils';
+import { PageMenuMode, ButtonType } from '../../../../enums';
+import { colors } from '../../../../defaults';
 
 const { dialog } = remote;
 const keyBindingsJSON = require('../../../../../static/defaults/key-bindings.json');
@@ -38,18 +37,9 @@ class App extends React.Component {
   }
 
   public async componentDidMount() {
-    window.addEventListener('mousemove', e => {
-      store.mouse.x = e.pageX;
-      store.mouse.y = e.pageY;
-    });
-
-    window.addEventListener('mousedown', (e: MouseEvent) => {
-      store.pageMenu.toggle(false);
-    });
-
-    window.addEventListener('mouseup', (e: MouseEvent) => {
-      store.bookmarkDialogVisible = false;
-    });
+    window.addEventListener('mousemove', this.onWindowMouseMove);
+    window.addEventListener('mousedown', this.onWindowMouseDown);
+    window.addEventListener('mouseup', this.onWindowMouseUp);
 
     await store.loadFavicons();
 
@@ -58,12 +48,27 @@ class App extends React.Component {
 
     store.keyBindings = parseKeyBindings(keyBindingsJSON);
     bindKeys(store.keyBindings);
+  }
 
-    createWorkspace();
+  public onWindowMouseMove = (e: MouseEvent) => {
+    store.mouse.x = e.pageX;
+    store.mouse.y = e.pageY;
+  }
+
+  public onWindowMouseDown = (e: MouseEvent) => {
+    store.pageMenu.toggle(false);
+  }
+
+  public onWindowMouseUp = (e: MouseEvent) => {
+    store.bookmarkDialogVisible = false;
   }
 
   public componentWillUnmount() {
     store.pages = [];
+
+    window.removeEventListener('mousemove', this.onWindowMouseMove);
+    window.removeEventListener('mousedown', this.onWindowMouseDown);
+    window.removeEventListener('mouseup', this.onWindowMouseUp);
   }
 
   public onRestartClick = () => {

src/renderer/views/app/BookmarksDialog/index.tsx

@@ -1,4 +1,4 @@
-import { observer } from 'mobx-React';
+import { observer } from 'mobx-react';
 import React from 'react';
 import { ButtonsContainer, Root, Title } from './styles';
 

src/renderer/views/app/GlobalMenu/index.tsx

@@ -1,4 +1,4 @@
-import { observer } from 'mobx-React';
+import { observer } from 'mobx-react';
 import React from 'react';
 
 import { icons } from '../../../../defaults';

src/renderer/views/app/Menu/Item/index.tsx

@@ -1,4 +1,4 @@
-import { observer } from 'mobx-React';
+import { observer } from 'mobx-react';
 import React from 'react';
 
 import store from '../../../../store';

src/renderer/views/app/Menu/index.tsx

@@ -1,4 +1,4 @@
-import { observer } from 'mobx-React';
+import { observer } from 'mobx-react';
 import React from 'react';
 import store from '../../../store';
 import Item from './Item';

src/renderer/views/app/NavigationButtons/index.tsx

@@ -1,4 +1,4 @@
-import { observer } from 'mobx-React';
+import { observer } from 'mobx-react';
 import React from 'react';
 import { icons } from '../../../../defaults';
 import { getSelectedPage } from '../../../../utils';

src/renderer/views/app/Page/index.tsx

@@ -1,5 +1,5 @@
 import { remote } from 'electron';
-import { observer } from 'mobx-React';
+import { observer } from 'mobx-react';
 import { resolve } from 'path';
 import React from 'react';
 
@@ -52,23 +52,26 @@ export default class extends React.Component<{ page: Page }, {}> {
 
     // Custom event: fires when webview URL changes.
     this.onURLChange = setInterval(() => {
-      const url = this.webview.getURL();
-      if (url !== tab.url) {
-        this.tab.isNew = false;
-        this.tab.url = url;
-        this.emitEvent(
-          'tabs',
-          'onUpdated',
-          this.tab.id,
-          {
-            url,
-          },
-          getIpcTab(this.tab),
-        );
-        this.updateData();
-        store.isBookmarked = !!store.bookmarks.find(x => x.url === url);
+      if (this.webview.getWebContents()) {
+        const url = this.webview.getURL();
+        if (url !== tab.url) {
+          console.log('aha');
+          this.tab.isNew = false;
+          this.tab.url = url;
+          this.emitEvent(
+            'tabs',
+            'onUpdated',
+            this.tab.id,
+            {
+              url,
+            },
+            getIpcTab(this.tab),
+          );
+          this.updateData();
+          store.isBookmarked = !!store.bookmarks.find(x => x.url === url);
+        }
       }
-    }, 10);
+    }, 30);
   }
 
   public componentWillUnmount() {

src/renderer/views/app/Pages/index.tsx

@@ -1,6 +1,6 @@
-import { observer } from 'mobx-React';
+import { observer } from 'mobx-react';
 import React from 'react';
-import { getSelectedTab } from '../../../../utils';
+import { getSelectedTab, getCurrentWorkspace } from '../../../../utils';
 import store from '../../../store';
 import Newtab from '../../newtab/Newtab';
 import Page from '../Page';

src/renderer/views/app/Suggestion/index.tsx

@@ -1,4 +1,4 @@
-import { observer } from 'mobx-React';
+import { observer } from 'mobx-react';
 import React from 'react';
 import store from '../../../store';
 import {

src/renderer/views/app/Suggestions/index.tsx

@@ -1,4 +1,4 @@
-import { observer } from 'mobx-React';
+import { observer } from 'mobx-react';
 import React from 'react';
 import store from '../../../store';
 import Suggestion from '../Suggestion';