restructure presentation layer

- Move most GUI related code to /presentation
- Move components to /components (separate from bootstrap and style)
- Move shared components helpers to /components/shared
- Rename Bootstrapping to bootstrapping to enforce same naming
  convention in /presentation

src/presentation/background.ts

@@ -0,0 +1,137 @@
+'use strict';
+
+// This is main process of Electron, started as first thing when app starts.
+// This script is running through entire life of the application.
+// It doesn't have any windows which you can see on screen, opens the main window from here.
+
+import { app, protocol, BrowserWindow, shell } from 'electron';
+import { createProtocol } from 'vue-cli-plugin-electron-builder/lib';
+import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer';
+import path from 'path';
+import { autoUpdater } from 'electron-updater';
+import log from 'electron-log';
+
+
+const isDevelopment = process.env.NODE_ENV !== 'production';
+declare const __static: string; // https://github.com/electron-userland/electron-webpack/issues/172
+
+// Keep a global reference of the window object, if you don't, the window will
+// be closed automatically when the JavaScript object is garbage collected.
+let win: BrowserWindow | null;
+
+// Scheme must be registered before the app is ready
+protocol.registerSchemesAsPrivileged([
+  { scheme: 'app', privileges: { secure: true, standard: true } },
+]);
+
+// Setup logging
+autoUpdater.logger = log; // https://www.electron.build/auto-update#debugging
+log.transports.file.level = 'silly';
+if (!process.env.IS_TEST) {
+  Object.assign(console, log.functions);  // override console.log, console.warn etc.
+}
+
+
+function createWindow() {
+  // Create the browser window.
+  win = new BrowserWindow({
+    width: 1350,
+    height: 955,
+    webPreferences: {
+      // Use pluginOptions.nodeIntegration, leave this alone
+      // See https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration
+      nodeIntegration: (process.env
+          .ELECTRON_NODE_INTEGRATION as unknown) as boolean,
+    },
+    // https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/recipes.html#set-tray-icon
+    icon: path.join(__static, 'icon.png'),
+  });
+
+  win.setMenuBarVisibility(false);
+  configureExternalsUrlsOpenBrowser(win);
+  loadApplication(win);
+
+  win.on('closed', () => {
+    win = null;
+  });
+}
+
+// Quit when all windows are closed.
+app.on('window-all-closed', () => {
+  // On macOS it is common for applications and their menu bar
+  // to stay active until the user quits explicitly with Cmd + Q
+  if (process.platform !== 'darwin') {
+    app.quit();
+  }
+});
+
+app.on('activate', () => {
+  // On macOS it's common to re-create a window in the app when the
+  // dock icon is clicked and there are no other windows open.
+  if (win === null) {
+    createWindow();
+  }
+});
+
+// This method will be called when Electron has finished
+// initialization and is ready to create browser windows.
+// Some APIs can only be used after this event occurs.
+app.on('ready', async () => {
+  if (isDevelopment && !process.env.IS_TEST) {
+    // Install Vue Devtools
+    try {
+      await installExtension(VUEJS_DEVTOOLS);
+    } catch (e) {
+      console.error('Vue Devtools failed to install:', e.toString()); // tslint:disable-line:no-console
+    }
+  }
+  createWindow();
+});
+
+// See electron-builder issue "checkForUpdatesAndNotify updates but does not notify on Windows 10"
+// https://github.com/electron-userland/electron-builder/issues/2700
+// https://github.com/electron/electron/issues/10864
+if (process.platform === 'win32') {
+  // https://docs.microsoft.com/en-us/windows/win32/shell/appid#how-to-form-an-application-defined-appusermodelid
+  app.setAppUserModelId('Undergroundwires.PrivacySexy');
+}
+
+// Exit cleanly on request from parent process in development mode.
+if (isDevelopment) {
+  if (process.platform === 'win32') {
+    process.on('message', (data) => {
+      if (data === 'graceful-exit') {
+        app.quit();
+      }
+    });
+  } else {
+    process.on('SIGTERM', () => {
+      app.quit();
+    });
+  }
+}
+
+function loadApplication(window: BrowserWindow) {
+  if (process.env.WEBPACK_DEV_SERVER_URL) {
+    // Load the url of the dev server if in development mode
+    win.loadURL(process.env.WEBPACK_DEV_SERVER_URL as string);
+    if (!process.env.IS_TEST) {
+      win.webContents.openDevTools();
+    }
+  } else {
+    createProtocol('app');
+    // Load the index.html when not in development
+    win.loadURL('app://./index.html');
+    // tslint:disable-next-line:max-line-length
+    autoUpdater.checkForUpdatesAndNotify(); // https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/recipes.html#check-for-updates-in-background-js-ts
+  }
+}
+
+function configureExternalsUrlsOpenBrowser(window: BrowserWindow) {
+  window.webContents.on('new-window', (event, url) => { // handle redirect
+    if (url !== win.webContents.getURL()) {
+      event.preventDefault();
+      shell.openExternal(url);
+    }
+  });
+}

src/presentation/components/App.vue

@@ -0,0 +1,72 @@
+<template>
+  <div id="app">
+      <div class="wrapper">
+        <TheHeader class="row" />
+        <TheSearchBar class="row" />
+        <TheScriptArea class="row" />
+        <TheCodeButtons class="row code-buttons" />
+        <TheFooter />
+      </div>
+   </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+import TheHeader from '@/presentation/components/TheHeader.vue';
+import TheFooter from '@/presentation/components/TheFooter/TheFooter.vue';
+import TheCodeButtons from '@/presentation/components/Code/CodeButtons/TheCodeButtons.vue';
+import TheScriptArea from '@/presentation/components/Scripts/TheScriptArea.vue';
+import TheSearchBar from '@/presentation/components/TheSearchBar.vue';
+
+@Component({
+  components: {
+    TheHeader,
+    TheCodeButtons,
+    TheScriptArea,
+    TheSearchBar,
+    TheFooter,
+  },
+})
+export default class App extends Vue {
+
+}
+</script>
+
+<style lang="scss">
+@import "@/presentation/styles/colors.scss";
+@import "@/presentation/styles/fonts.scss";
+@import "@/presentation/styles/media.scss";
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  background: $light-gray;
+  font-family: $main-font;
+  color: $slate;
+}
+
+#app {
+  margin-right: auto;
+  margin-left: auto;
+  max-width: 1600px;
+  .wrapper {
+    margin: 0% 2% 0% 2%;
+    background-color: white;
+    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.06);
+    padding: 2%;
+    display:flex;
+    flex-direction: column;
+    .row {
+      margin-bottom: 10px;
+    }
+    .code-buttons {
+      padding-bottom: 10px;
+    }
+  }
+}
+
+@import "@/presentation/styles/tooltip.scss";
+@import "@/presentation/styles/tree.scss";
+</style>

src/presentation/components/Code/CodeButtons/TheCodeButtons.vue

@@ -33,7 +33,7 @@
 
 <script lang="ts">
 import { Component } from 'vue-property-decorator';
-import { StatefulVue } from '@/presentation/StatefulVue';
+import { StatefulVue } from '@/presentation/components/Shared/StatefulVue';
 import { SaveFileDialog, FileType } from '@/infrastructure/SaveFileDialog';
 import { Clipboard } from '@/infrastructure/Clipboard';
 import IconButton from './IconButton.vue';

src/presentation/components/Code/TheCodeArea.vue

@@ -9,7 +9,7 @@
 
 <script lang="ts">
 import { Component, Prop } from 'vue-property-decorator';
-import { StatefulVue } from '@/presentation/StatefulVue';
+import { StatefulVue } from '@/presentation/components/Shared/StatefulVue';
 import ace from 'ace-builds';
 import 'ace-builds/webpack-resolver';
 import { ICodeChangedEvent } from '@/application/Context/State/Code/Event/ICodeChangedEvent';
@@ -17,7 +17,7 @@ import { IScript } from '@/domain/IScript';
 import { ScriptingLanguage } from '@/domain/ScriptingLanguage';
 import { ICategoryCollectionState } from '@/application/Context/State/ICategoryCollectionState';
 import { CodeBuilderFactory } from '@/application/Context/State/Code/Generation/CodeBuilderFactory';
-import Responsive from '@/presentation/Responsive.vue';
+import Responsive from '@/presentation/components/Shared/Responsive.vue';
 
 @Component({
   components: {

src/presentation/components/Scripts/Cards/CardList.vue

@@ -26,9 +26,9 @@
 
 <script lang="ts">
 import CardListItem from './CardListItem.vue';
-import Responsive from '@/presentation/Responsive.vue';
+import Responsive from '@/presentation/components/Shared/Responsive.vue';
 import { Component } from 'vue-property-decorator';
-import { StatefulVue } from '@/presentation/StatefulVue';
+import { StatefulVue } from '@/presentation/components/Shared/StatefulVue';
 import { ICategory } from '@/domain/ICategory';
 import { hasDirective } from './NonCollapsingDirective';
 import { ICategoryCollectionState } from '@/application/Context/State/ICategoryCollectionState';

src/presentation/components/Scripts/Cards/CardListItem.vue

@@ -33,8 +33,8 @@
 
 <script lang="ts">
 import { Component, Prop, Watch, Emit } from 'vue-property-decorator';
-import ScriptsTree from '@/presentation/Scripts/ScriptsTree/ScriptsTree.vue';
-import { StatefulVue } from '@/presentation/StatefulVue';
+import ScriptsTree from '@/presentation/components/Scripts/ScriptsTree/ScriptsTree.vue';
+import { StatefulVue } from '@/presentation/components/Shared/StatefulVue';
 
 @Component({
   components: {

src/presentation/components/Scripts/Menu/Selector/SelectableOption.vue

@@ -7,7 +7,7 @@
 
 <script lang="ts">
 import { Component, Prop, Emit, Vue } from 'vue-property-decorator';
-import { NonCollapsing } from '@/presentation/Scripts/Cards/NonCollapsingDirective';
+import { NonCollapsing } from '@/presentation/components/Scripts/Cards/NonCollapsingDirective';
 
 @Component({
     directives: { NonCollapsing },

src/presentation/components/Scripts/Menu/Selector/TheSelector.vue

@@ -50,7 +50,7 @@
 
 <script lang="ts">
 import { Component } from 'vue-property-decorator';
-import { StatefulVue } from '@/presentation/StatefulVue';
+import { StatefulVue } from '@/presentation/components/Shared/StatefulVue';
 import SelectableOption from './SelectableOption.vue';
 import { IScript } from '@/domain/IScript';
 import { SelectedScript } from '@/application/Context/State/Selection/SelectedScript';

src/presentation/components/Scripts/Menu/TheOsChanger.vue

@@ -17,7 +17,7 @@
 <script lang="ts">
 import { Component } from 'vue-property-decorator';
 import { OperatingSystem } from '@/domain/OperatingSystem';
-import { StatefulVue } from '@/presentation/StatefulVue';
+import { StatefulVue } from '@/presentation/components/Shared/StatefulVue';
 import { ICategoryCollectionState } from '@/application/Context/State/ICategoryCollectionState';
 import { ApplicationFactory } from '@/application/ApplicationFactory';
 

src/presentation/components/Scripts/Menu/TheScriptsMenu.vue

@@ -14,7 +14,7 @@ import { Component } from 'vue-property-decorator';
 import TheOsChanger from './TheOsChanger.vue';
 import TheSelector from './Selector/TheSelector.vue';
 import TheGrouper from './Grouping/TheGrouper.vue';
-import { StatefulVue } from '@/presentation/StatefulVue';
+import { StatefulVue } from '@/presentation/components/Shared/StatefulVue';
 import { ICategoryCollectionState } from '@/application/Context/State/ICategoryCollectionState';
 import { IEventSubscription } from '@/infrastructure/Events/IEventSource';
 

src/presentation/components/Scripts/ScriptsTree/ScriptsTree.vue

@@ -16,7 +16,7 @@
 
 <script lang="ts">
 import { Component, Prop, Watch } from 'vue-property-decorator';
-import { StatefulVue } from '@/presentation/StatefulVue';
+import { StatefulVue } from '@/presentation/components/Shared/StatefulVue';
 import { IScript } from '@/domain/IScript';
 import { ICategory } from '@/domain/ICategory';
 import { ICategoryCollectionState } from '@/application/Context/State/ICategoryCollectionState';

src/presentation/components/Scripts/ScriptsTree/SelectableTree/Node/RevertToggle.vue

@@ -15,7 +15,7 @@
 <script lang="ts">
 import { Component, Prop, Watch } from 'vue-property-decorator';
 import { IReverter } from './Reverter/IReverter';
-import { StatefulVue } from '@/presentation/StatefulVue';
+import { StatefulVue } from '@/presentation/components/Shared/StatefulVue';
 import { INode } from './INode';
 import { SelectedScript } from '@/application/Context/State/Selection/SelectedScript';
 import { getReverter } from './Reverter/ReverterFactory';

src/presentation/components/Scripts/TheScriptArea.vue

@@ -14,11 +14,11 @@
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
-import TheCodeArea from '@/presentation/Code/TheCodeArea.vue';
-import TheScriptsList from '@/presentation/Scripts/TheScriptsList.vue';
-import TheScriptsMenu from '@/presentation/Scripts/Menu/TheScriptsMenu.vue';
-import HorizontalResizeSlider from '@/presentation/Scripts/Slider/HorizontalResizeSlider.vue';
-import { Grouping } from '@/presentation/Scripts/Menu/Grouping/Grouping';
+import TheCodeArea from '@/presentation/components/Code/TheCodeArea.vue';
+import TheScriptsList from '@/presentation/components/Scripts/TheScriptsList.vue';
+import TheScriptsMenu from '@/presentation/components/Scripts/Menu/TheScriptsMenu.vue';
+import HorizontalResizeSlider from '@/presentation/components/Scripts/Slider/HorizontalResizeSlider.vue';
+import { Grouping } from '@/presentation/components/Scripts/Menu/Grouping/Grouping';
 
 @Component({
   components: {

src/presentation/components/Scripts/TheScriptsList.vue

@@ -29,12 +29,12 @@
 </template>
 
 <script lang="ts">
-import TheGrouper from '@/presentation/Scripts/Menu/Grouping/TheGrouper.vue';
-import ScriptsTree from '@/presentation/Scripts/ScriptsTree/ScriptsTree.vue';
-import CardList from '@/presentation/Scripts/Cards/CardList.vue';
+import TheGrouper from '@/presentation/components/Scripts/Menu/Grouping/TheGrouper.vue';
+import ScriptsTree from '@/presentation/components/Scripts/ScriptsTree/ScriptsTree.vue';
+import CardList from '@/presentation/components/Scripts/Cards/CardList.vue';
 import { Component, Prop } from 'vue-property-decorator';
-import { StatefulVue } from '@/presentation/StatefulVue';
-import { Grouping } from '@/presentation/Scripts/Menu/Grouping/Grouping';
+import { StatefulVue } from '@/presentation/components/Shared/StatefulVue';
+import { Grouping } from '@/presentation/components/Scripts/Menu/Grouping/Grouping';
 import { IFilterResult } from '@/application/Context/State/Filter/IFilterResult';
 import { ICategoryCollectionState } from '@/application/Context/State/ICategoryCollectionState';
 import { ApplicationFactory } from '@/application/ApplicationFactory';

src/presentation/components/Shared/StatefulVue.ts

@@ -4,7 +4,7 @@ import { IApplicationContext } from '@/application/Context/IApplicationContext';
 import { buildContextAsync } from '@/application/Context/ApplicationContextFactory';
 import { IApplicationContextChangedEvent } from '@/application/Context/IApplicationContext';
 import { ICategoryCollectionState } from '@/application/Context/State/ICategoryCollectionState';
-import { EventSubscriptionCollection } from '../infrastructure/Events/EventSubscriptionCollection';
+import { EventSubscriptionCollection } from '@/infrastructure/Events/EventSubscriptionCollection';
 
 // @ts-ignore because https://github.com/vuejs/vue-class-component/issues/91
 @Component

src/presentation/components/TheSearchBar.vue

@@ -11,8 +11,8 @@
 
 <script lang="ts">
 import { Component, Watch } from 'vue-property-decorator';
-import { StatefulVue } from './StatefulVue';
-import { NonCollapsing } from '@/presentation/Scripts/Cards/NonCollapsingDirective';
+import { StatefulVue } from '@/presentation/components/Shared/StatefulVue';
+import { NonCollapsing } from '@/presentation/components/Scripts/Cards/NonCollapsingDirective';
 import { IUserFilter } from '@/application/Context/State/Filter/IUserFilter';
 import { IFilterResult } from '@/application/Context/State/Filter/IFilterResult';
 import { ICategoryCollectionState } from '@/application/Context/State/ICategoryCollectionState';

src/presentation/main.ts

@@ -0,0 +1,10 @@
+import Vue from 'vue';
+import App from './components/App.vue';
+import { ApplicationBootstrapper } from './bootstrapping/ApplicationBootstrapper';
+
+new ApplicationBootstrapper()
+    .bootstrap(Vue);
+
+new Vue({
+    render: (h) => h(App),
+}).$mount('#app');

src/presentation/shims-tsx.d.ts

@@ -0,0 +1,17 @@
+import Vue, { VNode } from 'vue';
+
+declare global {
+    namespace JSX {
+        // tslint:disable no-empty-interface
+        interface Element extends VNode {
+        }
+
+        // tslint:disable no-empty-interface
+        interface ElementClass extends Vue {
+        }
+
+        interface IntrinsicElements {
+            [elem: string]: any;
+        }
+    }
+}

src/presentation/shims-vue.d.ts

@@ -0,0 +1,4 @@
+declare module '*.vue' {
+    import Vue from 'vue';
+    export default Vue;
+}