Initial commit

2019-12-31 16:09:39 +01:00
commit 4e7f244190
108 changed files with 17296 additions and 0 deletions
--- a/src/App.vue
+++ b/src/App.vue
@@ -0,0 +1,83 @@
+<template>
+    <div id="app">
+      <div class="wrapper">
+          <TheHeader 
+            class="row"
+            github-url="https://github.com/undergroundwires/privacy.sexy"/>
+          <!-- <TheSearchBar> </TheSearchBar> -->
+          <!-- <div style="display: flex; justify-content: space-between;"> -->
+            <!-- <TheGrouper></TheGrouper> -->
+          <TheSelector class="row" />
+          <!-- </div> -->
+          <CardList />
+          <TheCodeArea class="row" theme="xcode"/>
+          <TheCodeButtons class="row" />
+      </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop  } from 'vue-property-decorator';
+import { ApplicationState, IApplicationState } from '@/application/State/ApplicationState';
+import TheHeader from './presentation/TheHeader.vue';
+import TheCodeArea from './presentation/TheCodeArea.vue';
+import TheCodeButtons from './presentation/TheCodeButtons.vue';
+import TheSearchBar from './presentation/TheSearchBar.vue';
+import TheSelector from './presentation/Scripts/Selector/TheSelector.vue';
+import TheGrouper from './presentation/Scripts/TheGrouper.vue';
+import CardList from './presentation/Scripts/Cards/CardList.vue';
+
+@Component({
+  components: {
+    TheHeader,
+    TheCodeArea,
+    TheCodeButtons,
+    TheSearchBar,
+    TheGrouper,
+    CardList,
+    TheSelector,
+  },
+})
+export default class App extends Vue {
+
+}
+</script>
+
+<style lang="scss">
+@import "@/presentation/styles/colors.scss";
+@import "@/presentation/styles/fonts.scss";
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  background: $light-gray;
+  font-family: 'Slabo 27px', serif;
+  color: $slate;
+}
+
+
+#app {
+  margin-right: auto;
+  margin-left: auto;
+  max-width: 1500px;
+  
+  .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;
+    }
+  }
+}
+
+
+@import "@/presentation/styles/tooltip.scss";
+@import "@/presentation/styles/tree.scss";
+</style>
--- a/src/application/ApplicationParser.ts
+++ b/src/application/ApplicationParser.ts
@@ -0,0 +1,103 @@
+import { Category } from '../domain/Category';
+import { Application } from '../domain/Application';
+import { Script } from '@/domain/Script';
+// import applicationFile from 'js-yaml-loader!@/application/application.yaml';
+// import applicationFile from 'json-loader!yaml-loader!@/application/application.yaml';
+import applicationFile, { YamlCategory, YamlScript, YamlDocumentable } from 'js-yaml-loader!./application.yaml';
+// import test from './test-loader!./test.txt';
+
+interface ApplicationResult {
+    readonly application: Application;
+    readonly selectedScripts: Script[];
+}
+
+export class ApplicationParser {
+
+    public static buildApplication(): ApplicationResult {
+        const name = applicationFile.name as string;
+        const version = applicationFile.version as number;
+        const categories = new Array<Category>();
+        const selectedScripts = new Array<Script>();
+        if (!applicationFile.actions || applicationFile.actions.length <= 0) {
+            throw new Error('Application does not define any action');
+        }
+        for (const action of applicationFile.actions) {
+            const category = ApplicationParser.parseCategory(action, selectedScripts);
+            categories.push(category);
+        }
+        const app = new Application(name, version, categories);
+        return {application: app, selectedScripts};
+    }
+    private static categoryIdCounter = 0;
+
+    private static parseCategory(category: YamlCategory, selectedScripts: Script[]): Category {
+        if (!category.children || category.children.length <= 0) {
+            throw Error('Category has no children');
+        }
+        const subCategories = new Array<Category>();
+        const subScripts = new Array<Script>();
+        for (const categoryOrScript of category.children) {
+            if (ApplicationParser.isCategory(categoryOrScript)) {
+                const subCategory = ApplicationParser.parseCategory(categoryOrScript as YamlCategory, selectedScripts);
+                subCategories.push(subCategory);
+            } else if (ApplicationParser.isScript(categoryOrScript)) {
+                const yamlScript = categoryOrScript as YamlScript;
+                const script = new Script(
+                    /* name */ yamlScript.name,
+                    /* code */ yamlScript.code,
+                    /* docs */ this.parseDocUrls(yamlScript));
+                subScripts.push(script);
+                if (yamlScript.default === true) {
+                    selectedScripts.push(script);
+                }
+            } else {
+                throw new Error(`Child element is neither a category or a script.
+                        Parent: ${category.category}, element: ${categoryOrScript}`);
+            }
+        }
+        return new Category(
+            /*id*/ ApplicationParser.categoryIdCounter++,
+            /*name*/ category.category,
+            /*docs*/ this.parseDocUrls(category),
+            /*categories*/ subCategories,
+            /*scripts*/ subScripts,
+        );
+    }
+
+    private static parseDocUrls(documentable: YamlDocumentable): ReadonlyArray<string> {
+        if (!documentable.docs) {
+            return [];
+        }
+        const docs = documentable.docs;
+        const result = new Array<string>();
+        const addDoc = (doc: string) => {
+            if (!doc) {
+                throw new Error('Documentiton url is null or empty');
+            }
+            if (doc.includes('\n')) {
+                throw new Error('Documentation url cannot be multi-lined.');
+            }
+            result.push(doc);
+        };
+        if (docs instanceof Array) {
+            for (const doc of docs) {
+                if (typeof doc !== 'string') {
+                    throw new Error('Docs field (documentation url) must be an array of strings');
+                }
+                addDoc(doc as string);
+            }
+        } else if (typeof docs === 'string') {
+            addDoc(docs as string);
+        } else {
+            throw new Error('Docs field (documentation url) must a string or array of strings');
+        }
+        return result;
+    }
+
+    private static isScript(categoryOrScript: any): boolean {
+        return categoryOrScript.code && categoryOrScript.code.length > 0;
+    }
+    private static isCategory(categoryOrScript: any): boolean {
+        return categoryOrScript.category && categoryOrScript.category.length > 0;
+    }
+}
--- a/src/application/State/ApplicationState.ts
+++ b/src/application/State/ApplicationState.ts
@@ -0,0 +1,65 @@
+import { UserFilter } from './Filter/UserFilter';
+import { IUserFilter } from './Filter/IUserFilter';
+import { ApplicationCode } from './Code/ApplicationCode';
+import { UserSelection } from './Selection/UserSelection';
+import { IUserSelection } from './Selection/IUserSelection';
+import { AsyncLazy } from '../../infrastructure/Threading/AsyncLazy';
+import { Signal } from '../../infrastructure/Events/Signal';
+import { ICategory } from '../../domain/ICategory';
+import { ApplicationParser } from '../ApplicationParser';
+import { IApplicationState } from './IApplicationState';
+import { Script } from '../../domain/Script';
+import { Application } from '../../domain/Application';
+import { IApplicationCode } from './Code/IApplicationCode';
+
+/** Mutatable singleton application state that's the single source of truth throughout the application */
+export class ApplicationState implements IApplicationState {
+    /** Get singleton application state */
+    public static GetAsync(): Promise<IApplicationState> {
+       return ApplicationState.instance.getValueAsync();
+    }
+
+    /** Application instance with all scripts. */
+    private static instance = new AsyncLazy<IApplicationState>(() => {
+        const app = ApplicationParser.buildApplication();
+        const state = new ApplicationState(app.application, app.selectedScripts);
+        return Promise.resolve(state);
+    });
+
+    public readonly code: IApplicationCode;
+    public readonly stateChanged = new Signal<IApplicationState>();
+    public readonly selection: IUserSelection;
+    public readonly filter: IUserFilter;
+
+    private constructor(
+        /** Inner instance of the all scripts */
+        private readonly app: Application,
+        /** Initially selected scripts */
+        public readonly defaultScripts: Script[]) {
+            this.selection = new UserSelection(app, defaultScripts);
+            this.code = new ApplicationCode(this.selection, app.version.toString());
+            this.filter = new UserFilter(app);
+        }
+
+    public getCategory(categoryId: number): ICategory | undefined {
+        return this.app.findCategory(categoryId);
+    }
+
+    public get categories(): ReadonlyArray<ICategory> {
+        return this.app.categories;
+    }
+
+    public get appName(): string {
+        return this.app.name;
+    }
+
+    public get appVersion(): number {
+        return this.app.version;
+    }
+
+    public get appTotalScripts(): number {
+        return this.app.totalScripts;
+    }
+}
+
+export { IApplicationState, IUserFilter };
--- a/src/application/State/Code/ApplicationCode.ts
+++ b/src/application/State/Code/ApplicationCode.ts
@@ -0,0 +1,27 @@
+import { CodeBuilder } from './CodeBuilder';
+import { IUserSelection } from './../Selection/IUserSelection';
+import { Signal } from '@/infrastructure/Events/Signal';
+import { IApplicationCode } from './IApplicationCode';
+import { IScript } from '@/domain/IScript';
+
+export class ApplicationCode implements IApplicationCode {
+    public readonly changed = new Signal<string>();
+    public current: string;
+
+    private readonly codeBuilder: CodeBuilder;
+
+    constructor(userSelection: IUserSelection, private readonly version: string) {
+        if (!userSelection) { throw new Error('userSelection is null or undefined'); }
+        if (!version) { throw new Error('version is null or undefined'); }
+        this.codeBuilder = new CodeBuilder();
+        this.setCode(userSelection.selectedScripts);
+        userSelection.changed.on((scripts) => {
+            this.setCode(scripts);
+        });
+    }
+
+    private setCode(scripts: ReadonlyArray<IScript>) {
+        this.current = this.codeBuilder.buildCode(scripts, this.version);
+        this.changed.notify(this.current);
+    }
+}
--- a/src/application/State/Code/CodeBuilder.ts
+++ b/src/application/State/Code/CodeBuilder.ts
@@ -0,0 +1,27 @@
+import { AdminRightsFunctionRenderer } from './Renderer/AdminRightsFunctionRenderer';
+import { AsciiArtRenderer } from './Renderer/AsciiArtRenderer';
+import { FunctionRenderer } from './Renderer/FunctionRenderer';
+import { Script } from '@/domain/Script';
+
+export class CodeBuilder {
+    private readonly functionRenderer: FunctionRenderer;
+    private readonly adminRightsFunctionRenderer: AdminRightsFunctionRenderer;
+    private readonly asciiArtRenderer: AsciiArtRenderer;
+
+    public constructor() {
+        this.functionRenderer = new FunctionRenderer();
+        this.adminRightsFunctionRenderer = new AdminRightsFunctionRenderer();
+        this.asciiArtRenderer = new AsciiArtRenderer();
+    }
+
+    public buildCode(scripts: ReadonlyArray<Script>, version: string): string {
+        if (!scripts) { throw new Error('scripts is undefined'); }
+        if (!version) { throw new Error('version is undefined'); }
+        return `@echo off\n\n${this.asciiArtRenderer.renderAsciiArt(version)}\n\n`
+            + `${this.adminRightsFunctionRenderer.renderAdminRightsFunction()}\n\n`
+            + scripts.map((script) => this.functionRenderer.renderFunction(script.name, script.code)).join('\n\n')
+            + '\n\n'
+            + 'pause\n'
+            + 'exit /b 0';
+    }
+}
--- a/src/application/State/Code/IApplicationCode.ts
+++ b/src/application/State/Code/IApplicationCode.ts
@@ -0,0 +1,6 @@
+import { ISignal } from '@/infrastructure/Events/ISignal';
+
+export interface IApplicationCode {
+    readonly changed: ISignal<string>;
+    readonly current: string;
+}
--- a/src/application/State/Code/Renderer/AdminRightsFunctionRenderer.ts
+++ b/src/application/State/Code/Renderer/AdminRightsFunctionRenderer.ts
@@ -0,0 +1,18 @@
+import { FunctionRenderer } from './FunctionRenderer';
+
+export class AdminRightsFunctionRenderer {
+    private readonly functionRenderer: FunctionRenderer;
+    constructor() {
+        this.functionRenderer = new FunctionRenderer();
+    }
+    public renderAdminRightsFunction() {
+        const name = 'Ensure admin priviliges';
+        const code = 'fltmc >nul 2>&1 || (\n' +
+        '   echo This batch script requires administrator privileges. Right-click on\n' +
+        '   echo the script and select "Run as administrator".\n' +
+        '   pause\n' +
+        '   exit 1\n' +
+        ')';
+        return this.functionRenderer.renderFunction(name, code);
+    }
+}
--- a/src/application/State/Code/Renderer/AsciiArtRenderer.ts
+++ b/src/application/State/Code/Renderer/AsciiArtRenderer.ts
@@ -0,0 +1,16 @@
+import { CodeRenderer } from './CodeRenderer';
+
+export class AsciiArtRenderer extends CodeRenderer {
+    public renderAsciiArt(version: string): string {
+        if (!version) { throw new Error('Version is not defined'); }
+        return (
+            '██████╗ ██████╗ ██╗██╗   ██╗ █████╗  ██████╗██╗   ██╗███████╗███████╗██╗  ██╗██╗   ██╗\n' +
+            '██╔══██╗██╔══██╗██║██║   ██║██╔══██╗██╔════╝╚██╗ ██╔╝██╔════╝██╔════╝╚██╗██╔╝╚██╗ ██╔╝\n' +
+            '██████╔╝██████╔╝██║██║   ██║███████║██║      ╚████╔╝ ███████╗█████╗   ╚███╔╝  ╚████╔╝ \n' +
+            '██╔═══╝ ██╔══██╗██║╚██╗ ██╔╝██╔══██║██║       ╚██╔╝  ╚════██║██╔══╝   ██╔██╗   ╚██╔╝  \n' +
+            '██║     ██║  ██║██║ ╚████╔╝ ██║  ██║╚██████╗   ██║██╗███████║███████╗██╔╝ ██╗   ██║   \n' +
+            '╚═╝     ╚═╝  ╚═╝╚═╝  ╚═══╝  ╚═╝  ╚═╝ ╚═════╝   ╚═╝╚═╝╚══════╝╚══════╝╚═╝  ╚═╝   ╚═╝ ')
+            .split('\n').map((line) => this.renderComment(line)).join('\n')
+            + `\n${this.renderComment(`https://privacy.sexy — v${version} — ${new Date().toUTCString()}`)}`;
+    }
+}
--- a/src/application/State/Code/Renderer/CodeRenderer.ts
+++ b/src/application/State/Code/Renderer/CodeRenderer.ts
@@ -0,0 +1,11 @@
+
+export abstract class CodeRenderer {
+
+    protected readonly totalFunctionSeparatorChars = 58;
+
+    protected readonly trailingHyphens = '-'.repeat(this.totalFunctionSeparatorChars);
+
+    protected renderComment(line?: string): string {
+        return line ? `:: ${line}` : ':: ';
+    }
+}
--- a/src/application/State/Code/Renderer/FunctionRenderer.ts
+++ b/src/application/State/Code/Renderer/FunctionRenderer.ts
@@ -0,0 +1,31 @@
+import { CodeRenderer } from './CodeRenderer';
+
+export class FunctionRenderer extends CodeRenderer {
+    public renderFunction(name: string, code: string) {
+        if (!name)  { throw new Error('name cannot be empty or null'); }
+        if (!code)  { throw new Error('code cannot be empty or null'); }
+        return this.renderFunctionStartComment(name) + '\n'
+            + `echo --- ${name}` + '\n'
+            + code + '\n'
+            + this.renderFunctionEndComment();
+    }
+
+    private renderFunctionStartComment(functionName: string): string {
+        if (functionName.length >= this.totalFunctionSeparatorChars) {
+            return this.renderComment(functionName);
+        }
+        return this.renderComment(this.trailingHyphens) + '\n' +
+            this.renderFunctionName(functionName) + '\n' +
+            this.renderComment(this.trailingHyphens);
+    }
+
+    private renderFunctionName(functionName: string) {
+        const autoFirstHypens = '-'.repeat(Math.floor((this.totalFunctionSeparatorChars - functionName.length) / 2));
+        const secondHypens = '-'.repeat(Math.ceil((this.totalFunctionSeparatorChars - functionName.length) / 2));
+        return `${this.renderComment()}${autoFirstHypens}${functionName}${secondHypens}`;
+    }
+
+    private renderFunctionEndComment(): string {
+        return this.renderComment(this.trailingHyphens);
+    }
+}
--- a/src/application/State/Filter/IFilterMatches.ts
+++ b/src/application/State/Filter/IFilterMatches.ts
@@ -0,0 +1,7 @@
+import { IScript, ICategory } from '@/domain/ICategory';
+
+export interface IFilterMatches {
+    readonly scriptMatches: ReadonlyArray<IScript>;
+    readonly categoryMatches: ReadonlyArray<ICategory>;
+    readonly query: string;
+}
--- a/src/application/State/Filter/IUserFilter.ts
+++ b/src/application/State/Filter/IUserFilter.ts
@@ -0,0 +1,9 @@
+import { IFilterMatches } from './IFilterMatches';
+import { ISignal } from '@/infrastructure/Events/Signal';
+
+export interface IUserFilter {
+    readonly filtered: ISignal<IFilterMatches>;
+    readonly filterRemoved: ISignal<void>;
+    setFilter(filter: string): void;
+    removeFilter(): void;
+}
--- a/src/application/State/Filter/UserFilter.ts
+++ b/src/application/State/Filter/UserFilter.ts
@@ -0,0 +1,34 @@
+import { IFilterMatches } from './IFilterMatches';
+import { Application } from '../../../domain/Application';
+import { IUserFilter } from './IUserFilter';
+import { Signal } from '@/infrastructure/Events/Signal';
+
+export class UserFilter implements IUserFilter {
+    public readonly filtered = new Signal<IFilterMatches>();
+    public readonly filterRemoved = new Signal<void>();
+
+    constructor(private application: Application) {
+
+    }
+
+    public setFilter(filter: string): void {
+        if (!filter) {
+            throw new Error('Filter must be defined and not empty. Use removeFilter() to remove the filter');
+        }
+        const filteredScripts = this.application.getAllScripts().filter(
+            (script) => script.name.toLowerCase().includes(filter.toLowerCase())
+                    || script.code.toLowerCase().includes(filter.toLowerCase()));
+
+        const matches: IFilterMatches = {
+            scriptMatches: filteredScripts,
+            categoryMatches: null,
+            query: filter,
+        };
+
+        this.filtered.notify(matches);
+    }
+
+    public removeFilter(): void {
+        this.filterRemoved.notify();
+    }
+}
--- a/src/application/State/IApplicationState.ts
+++ b/src/application/State/IApplicationState.ts
@@ -0,0 +1,21 @@
+import { IUserFilter } from './Filter/IUserFilter';
+import { IUserSelection } from './Selection/IUserSelection';
+import { ISignal } from '@/infrastructure/Events/ISignal';
+import { ICategory, IScript } from '@/domain/ICategory';
+import { IApplicationCode } from './Code/IApplicationCode';
+export { IUserSelection, IApplicationCode, IUserFilter };
+
+export interface IApplicationState {
+    /** Event that fires when the application states changes with new application state as parameter */
+    readonly code: IApplicationCode;
+    readonly filter: IUserFilter;
+    readonly stateChanged: ISignal<IApplicationState>;
+    readonly categories: ReadonlyArray<ICategory>;
+    readonly appName: string;
+    readonly appVersion: number;
+    readonly appTotalScripts: number;
+    readonly selection: IUserSelection;
+    readonly defaultScripts: ReadonlyArray<IScript>;
+    getCategory(categoryId: number): ICategory | undefined;
+}
+
--- a/src/application/State/Selection/IUserSelection.ts
+++ b/src/application/State/Selection/IUserSelection.ts
@@ -0,0 +1,14 @@
+import { ISignal } from '@/infrastructure/Events/Signal';
+import { IScript } from '@/domain/IScript';
+
+export interface IUserSelection {
+    readonly changed: ISignal<ReadonlyArray<IScript>>;
+    readonly selectedScripts: ReadonlyArray<IScript>;
+    readonly totalSelected: number;
+    addSelectedScript(scriptId: string): void;
+    removeSelectedScript(scriptId: string): void;
+    selectOnly(scripts: ReadonlyArray<IScript>): void;
+    isSelected(script: IScript): boolean;
+    selectAll(): void;
+    deselectAll(): void;
+}
--- a/src/application/State/Selection/UserSelection.ts
+++ b/src/application/State/Selection/UserSelection.ts
@@ -0,0 +1,86 @@
+import { IApplication } from '@/domain/IApplication';
+import { IUserSelection } from './IUserSelection';
+import { InMemoryRepository } from '@/infrastructure/Repository/InMemoryRepository';
+import { IScript } from '@/domain/Script';
+import { Signal } from '@/infrastructure/Events/Signal';
+
+export class UserSelection implements IUserSelection {
+    public readonly changed = new Signal<ReadonlyArray<IScript>>();
+
+    private readonly scripts = new InMemoryRepository<string, IScript>();
+
+    constructor(
+        private readonly app: IApplication,
+        /** Initially selected scripts */
+        selectedScripts: ReadonlyArray<IScript>) {
+        if (selectedScripts && selectedScripts.length > 0) {
+            for (const script of selectedScripts) {
+                this.scripts.addItem(script);
+            }
+        }
+    }
+
+    /** Add a script to users application */
+    public addSelectedScript(scriptId: string): void {
+        const script = this.app.findScript(scriptId);
+        if (!script) {
+            throw new Error(`Cannot add (id: ${scriptId}) as it is unknown`);
+        }
+        this.scripts.addItem(script);
+        this.changed.notify(this.scripts.getItems());
+    }
+
+    /** Remove a script from users application */
+    public removeSelectedScript(scriptId: string): void {
+        this.scripts.removeItem(scriptId);
+        this.changed.notify(this.scripts.getItems());
+    }
+
+    public isSelected(script: IScript): boolean {
+        return this.scripts.exists(script);
+    }
+
+    /** Get users scripts based on his/her selections */
+    public get selectedScripts(): ReadonlyArray<IScript> {
+        return this.scripts.getItems();
+    }
+
+    public get totalSelected(): number {
+        return this.scripts.getItems().length;
+    }
+
+    public selectAll(): void {
+        for (const script of this.app.getAllScripts()) {
+            if (!this.scripts.exists(script)) {
+                this.scripts.addItem(script);
+            }
+        }
+        this.changed.notify(this.scripts.getItems());
+    }
+
+    public deselectAll(): void {
+        const selectedScriptIds = this.scripts.getItems().map((script) => script.id);
+        for (const scriptId of selectedScriptIds) {
+            this.scripts.removeItem(scriptId);
+        }
+        this.changed.notify([]);
+    }
+
+    public selectOnly(scripts: readonly IScript[]): void {
+        if (!scripts || scripts.length === 0) {
+            throw new Error('Scripts are empty. Use deselectAll() if you want to deselect everything');
+        }
+        // Unselect from selected scripts
+        if (this.scripts.length !== 0) {
+            this.scripts.getItems()
+                .filter((existing) => !scripts.some((script) => existing.id === script.id))
+                .map((script) => script.id)
+                .forEach((scriptId) => this.scripts.removeItem(scriptId));
+        }
+        // Select from unselected scripts
+        scripts
+            .filter((script) => !this.scripts.exists(script))
+            .forEach((script) => this.scripts.addItem(script));
+        this.changed.notify(this.scripts.getItems());
+    }
+}
--- a/src/application/application.yaml
+++ b/src/application/application.yaml
--- a/src/application/application.yaml.d.ts
+++ b/src/application/application.yaml.d.ts
@@ -0,0 +1,23 @@
+declare module 'js-yaml-loader!*' {
+    type CategoryOrScript = YamlCategory | YamlScript;
+    type DocumentationUrls = ReadonlyArray<string> | string;
+    export interface YamlDocumentable {
+        docs?: DocumentationUrls;
+    }
+    export interface YamlScript extends YamlDocumentable {
+        name: string;
+        code: string;
+        default: boolean;
+    }
+    export interface YamlCategory extends YamlDocumentable {
+        children: ReadonlyArray<CategoryOrScript>;
+        category: string;
+    }
+    interface ApplicationYaml {
+        name: string;
+        version: number;
+        actions: ReadonlyArray<YamlCategory>;
+    }
+    const content: ApplicationYaml;
+    export default content;
+}
--- a/src/domain/Application.ts
+++ b/src/domain/Application.ts
@@ -0,0 +1,118 @@
+import { IEntity } from '../infrastructure/Entity/IEntity';
+import { ICategory } from './ICategory';
+import { IScript } from './IScript';
+import { IApplication } from './IApplication';
+
+export class Application implements IApplication {
+    private static mustHaveCategories(categories: ReadonlyArray<ICategory>) {
+        if (!categories || categories.length === 0) {
+            throw new Error('an application must consist of at least one category');
+        }
+    }
+    /**
+     * Checks all categories against duplicates, throws exception if it find any duplicates
+     * @return {number} Total unique categories
+     */
+    /** Checks all categories against duplicates, throws exception if it find any duplicates returns total categories */
+    private static mustNotHaveDuplicatedCategories(categories: ReadonlyArray<ICategory>): number {
+        return Application.ensureNoDuplicateEntities(categories, Application.visitAllCategoriesOnce);
+    }
+    /**
+     * Checks all scripts against duplicates, throws exception if it find any scripts duplicates total scripts.
+     * @return {number} Total unique scripts
+     */
+    private static mustNotHaveDuplicatedScripts(categories: ReadonlyArray<ICategory>): number {
+        return Application.ensureNoDuplicateEntities(categories, Application.visitAllScriptsOnce);
+    }
+    /**
+     * Checks entities against duplicates using a visit function, throws exception if it find any duplicates.
+     * @return {number} Result from the visit function
+     */
+    private static ensureNoDuplicateEntities<TKey>(
+        categories: ReadonlyArray<ICategory>,
+        visitFunction: (categories: ReadonlyArray<ICategory>,
+                        handler: (entity: IEntity<TKey>) => any) => number): number {
+        const totalOccurencesById = new Map<TKey, number>();
+        const totalVisited = visitFunction(categories,
+            (entity) =>
+                totalOccurencesById.set(entity.id,
+                    (totalOccurencesById.get(entity.id) || 0) + 1));
+        const duplicatedIds = new Array<TKey>();
+        totalOccurencesById.forEach((count, id) => {
+            if (count > 1) {
+                duplicatedIds.push(id);
+            }
+        });
+        if (duplicatedIds.length > 0) {
+            const duplicatedIdsText = duplicatedIds.map((id) => `"${id}"`).join(',');
+            throw new Error(
+                `Duplicate entities are detected with following id(s): ${duplicatedIdsText}`);
+        }
+        return totalVisited;
+    }
+    // Runs handler on each category and returns sum of total visited categories
+    private static visitAllCategoriesOnce(
+        categories: ReadonlyArray<ICategory>, handler: (category: ICategory) => any): number {
+        let total = 0;
+        for (const category of categories) {
+            handler(category);
+            total++;
+            if (category.subCategories && category.subCategories.length > 0) {
+                total += Application.visitAllCategoriesOnce(
+                    category.subCategories as ReadonlyArray<ICategory>, handler);
+            }
+        }
+        return total;
+    }
+    // Runs handler on each script and returns sum of total visited scripts
+    private static visitAllScriptsOnce(
+        categories: ReadonlyArray<ICategory>, handler: (script: IScript) => any): number {
+        let total = 0;
+        Application.visitAllCategoriesOnce(categories, (category) => {
+            if (category.scripts) {
+                for (const script of category.scripts) {
+                    handler(script);
+                    total++;
+                }
+            }
+        });
+        return total;
+    }
+    public readonly totalScripts: number;
+    public readonly totalCategories: number;
+
+    constructor(
+        public readonly name: string,
+        public readonly version: number,
+        public readonly categories: ReadonlyArray<ICategory>) {
+        Application.mustHaveCategories(categories);
+        this.totalCategories = Application.mustNotHaveDuplicatedCategories(categories);
+        this.totalScripts = Application.mustNotHaveDuplicatedScripts(categories);
+    }
+
+    public findCategory(categoryId: number): ICategory | undefined {
+        let result: ICategory | undefined;
+        Application.visitAllCategoriesOnce(this.categories, (category) => {
+            if (category.id === categoryId) {
+                result = category;
+            }
+        });
+        return result;
+    }
+    public findScript(scriptId: string): IScript | undefined {
+        let result: IScript | undefined;
+        Application.visitAllScriptsOnce(this.categories, (script) => {
+            if (script.id === scriptId) {
+                result = script;
+            }
+        });
+        return result;
+    }
+    public getAllScripts(): IScript[] {
+        const result = new Array<IScript>();
+        Application.visitAllScriptsOnce(this.categories, (script) => {
+            result.push(script);
+        });
+        return result;
+    }
+}
--- a/src/domain/Category.ts
+++ b/src/domain/Category.ts
@@ -0,0 +1,25 @@
+import { BaseEntity } from '../infrastructure/Entity/BaseEntity';
+import { IScript } from './IScript';
+import { ICategory } from './ICategory';
+
+export class Category extends BaseEntity<number> implements ICategory {
+    private static validate(category: ICategory) {
+        if (!category.name) {
+            throw new Error('name is null or empty');
+        }
+        if ((!category.subCategories || category.subCategories.length === 0)
+                && (!category.scripts || category.scripts.length === 0)) {
+            throw new Error('A category must have at least one sub-category or scripts');
+        }
+    }
+
+    constructor(
+        id: number,
+        public readonly name: string,
+        public readonly documentationUrls: ReadonlyArray<string>,
+        public readonly subCategories?: ReadonlyArray<ICategory>,
+        public readonly scripts?: ReadonlyArray<IScript>) {
+        super(id);
+        Category.validate(this);
+    }
+}
--- a/src/domain/IApplication.ts
+++ b/src/domain/IApplication.ts
@@ -0,0 +1,12 @@
+import { IScript } from '@/domain/IScript';
+import { ICategory } from '@/domain/ICategory';
+
+export interface IApplication {
+    readonly categories: ReadonlyArray<ICategory>;
+    findCategory(categoryId: number): ICategory | undefined;
+    findScript(scriptId: string): IScript | undefined;
+    getAllScripts(): ReadonlyArray<IScript>;
+}
+
+export { IScript } from '@/domain/IScript';
+export { ICategory } from '@/domain/ICategory';
--- a/src/domain/ICategory.ts
+++ b/src/domain/ICategory.ts
@@ -0,0 +1,13 @@
+import { IEntity } from '../infrastructure/Entity/IEntity';
+import { IScript } from './IScript';
+import { IDocumentable } from './IDocumentable';
+
+export interface ICategory extends IEntity<number>, IDocumentable {
+    readonly id: number;
+    readonly name: string;
+    readonly subCategories?: ReadonlyArray<ICategory>;
+    readonly scripts?: ReadonlyArray<IScript>;
+}
+
+export { IEntity } from '../infrastructure/Entity/IEntity';
+export { IScript } from './IScript';
--- a/src/domain/IDocumentable.ts
+++ b/src/domain/IDocumentable.ts
@@ -0,0 +1,3 @@
+export interface IDocumentable {
+    readonly documentationUrls: ReadonlyArray<string>;
+}
--- a/src/domain/IScript.ts
+++ b/src/domain/IScript.ts
@@ -0,0 +1,8 @@
+import { IEntity } from './../infrastructure/Entity/IEntity';
+import { IDocumentable } from './IDocumentable';
+
+export interface IScript extends IEntity<string>, IDocumentable {
+    readonly name: string;
+    readonly code: string;
+    readonly documentationUrls: ReadonlyArray<string>;
+}
--- a/src/domain/Script.ts
+++ b/src/domain/Script.ts
@@ -0,0 +1,51 @@
+import { BaseEntity } from '@/infrastructure/Entity/BaseEntity';
+import { IScript } from './IScript';
+
+export class Script extends BaseEntity<string> implements IScript {
+    private static ensureNoEmptyLines(name: string, code: string): void {
+        if (code.split('\n').some((line) => line.trim().length === 0)) {
+            throw Error(`Script has empty lines "${name}"`);
+        }
+    }
+
+    private static ensureCodeHasUniqueLines(name: string, code: string): void {
+        const lines = code.split('\n');
+        if (lines.length === 0) {
+            return;
+        }
+        const checkForDuplicates = (line: string) => {
+            const trimmed = line.trim();
+            if (trimmed.length === 1 && trimmed === ')' || trimmed === '(') {
+                return false;
+            }
+            return true;
+        };
+        const duplicateLines = new Array<string>();
+        const uniqueLines = new Set<string>();
+        let validatedLineCount = 0;
+        for (const line of lines) {
+            if (!checkForDuplicates(line)) {
+                continue;
+            }
+            uniqueLines.add(line);
+            if (uniqueLines.size !== validatedLineCount + 1) {
+                duplicateLines.push(line);
+            }
+            validatedLineCount++;
+        }
+        if (duplicateLines.length !== 0) {
+            throw Error(`Duplicates detected in script "${name}":\n ${duplicateLines.join('\n')}`);
+        }
+    }
+
+    constructor(public name: string, public code: string, public documentationUrls: ReadonlyArray<string>) {
+        super(name);
+        if (code == null || code.length === 0) {
+            throw new Error('Code is empty or null');
+        }
+        Script.ensureCodeHasUniqueLines(name, code);
+        Script.ensureNoEmptyLines(name, code);
+    }
+}
+
+export { IScript } from './IScript';
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -0,0 +1,59 @@
+
+// Two ways of typing other libraries: https://stackoverflow.com/a/53070501
+
+declare module 'liquor-tree' {
+    import { PluginObject } from 'vue';
+    import { VueClass } from 'vue-class-component/lib/declarations';
+    // https://github.com/amsik/liquor-tree/blob/master/src/lib/Tree.js
+    export interface ILiquorTree {
+        readonly model: ReadonlyArray<ILiquorTreeExistingNode>;
+        filter(query: string): void;
+        clearFilter(): void;
+        setModel(nodes: ReadonlyArray<ILiquorTreeNewNode>): void;
+    }
+    interface ICustomLiquorTreeData {
+        documentationUrls: ReadonlyArray<string>;
+    }
+    /**
+        * Returned from Node tree view events.
+        * See constructor in https://github.com/amsik/liquor-tree/blob/master/src/lib/Node.js
+        */
+    export interface ILiquorTreeExistingNode {
+        id: string;
+        data: ILiquorTreeNodeData;
+        states: ILiquorTreeNodeState | undefined;
+        children: ReadonlyArray<ILiquorTreeExistingNode> | undefined;
+    }
+    /**
+        * Sent to liquor tree to define of new nodes.
+        * https://github.com/amsik/liquor-tree/blob/master/src/lib/Node.js
+        */
+    export interface ILiquorTreeNewNode {
+        id: string;
+        text: string;
+        state: ILiquorTreeNodeState | undefined;
+        children: ReadonlyArray<ILiquorTreeNewNode> | undefined;
+        data: ICustomLiquorTreeData;
+    }
+    // https://github.com/amsik/liquor-tree/blob/master/src/lib/Node.js
+    interface ILiquorTreeNodeState {
+        checked: boolean;
+    }
+    interface ILiquorTreeNodeData extends ICustomLiquorTreeData {
+        text: string;
+    }
+    // https://github.com/amsik/liquor-tree/blob/master/src/components/TreeRoot.vue
+    interface ILiquorTreeOptions {
+        checkbox: boolean;
+        checkOnSelect: boolean;
+        filter: ILiquorTreeFilter;
+        deletion(node: ILiquorTreeNewNode): boolean;
+    }
+    // https://github.com/amsik/liquor-tree/blob/master/src/components/TreeRoot.vue
+    interface ILiquorTreeFilter {
+        emptyText: string;
+        matcher(query: string, node: ILiquorTreeNewNode): boolean;
+    }
+    const LiquorTree: PluginObject<any> & VueClass<any>;
+    export default LiquorTree;
+}
--- a/src/infrastructure/Clipboard.ts
+++ b/src/infrastructure/Clipboard.ts
@@ -0,0 +1,14 @@
+
+export class Clipboard {
+    public static copyText(text: string): void {
+        const el = document.createElement('textarea');
+        el.value = text;
+        el.setAttribute('readonly', ''); // to avoid focus
+        el.style.position = 'absolute';
+        el.style.left = '-9999px';
+        document.body.appendChild(el);
+        el.select();
+        document.execCommand('copy');
+        document.body.removeChild(el);
+    }
+}
--- a/src/infrastructure/Entity/BaseEntity.ts
+++ b/src/infrastructure/Entity/BaseEntity.ts
@@ -0,0 +1,14 @@
+import { IEntity } from './IEntity';
+
+export abstract class BaseEntity<TId> implements IEntity<TId> {
+    constructor(public id: TId) {
+        if (typeof id !== 'number' && !id) {
+            throw new Error('Id cannot be null or empty');
+        }
+    }
+    public equals(otherId: TId): boolean {
+        return this.id === otherId;
+    }
+}
+
+
--- a/src/infrastructure/Entity/IEntity.ts
+++ b/src/infrastructure/Entity/IEntity.ts
@@ -0,0 +1,5 @@
+/** Aggregate root */
+export interface IEntity<TId> {
+    id: TId;
+    equals(other: TId): boolean;
+}
--- a/src/infrastructure/Events/ISignal.ts
+++ b/src/infrastructure/Events/ISignal.ts
@@ -0,0 +1,4 @@
+export interface ISignal<T> {
+    on(handler: (data: T) => void): void;
+    off(handler: (data: T) => void): void;
+}
--- a/src/infrastructure/Events/Signal.ts
+++ b/src/infrastructure/Events/Signal.ts
@@ -0,0 +1,18 @@
+import { ISignal } from './ISignal';
+export { ISignal };
+
+export class Signal<T> implements ISignal<T> {
+    private handlers: Array<(data: T) => void> = [];
+
+    public on(handler: (data: T) => void): void {
+        this.handlers.push(handler);
+    }
+
+    public off(handler: (data: T) => void): void {
+        this.handlers = this.handlers.filter((h) => h !== handler);
+    }
+
+    public notify(data: T) {
+        this.handlers.slice(0).forEach((h) => h(data));
+    }
+}
--- a/src/infrastructure/Repository/IRepository.ts
+++ b/src/infrastructure/Repository/IRepository.ts
@@ -0,0 +1,9 @@
+import { IEntity } from '../Entity/IEntity';
+
+export interface IRepository<TKey, TEntity extends IEntity<TKey>> {
+    readonly length: number;
+    getItems(predicate?: (entity: TEntity) => boolean): TEntity[];
+    addItem(item: TEntity): void;
+    removeItem(id: TKey): void;
+    exists(item: TEntity): boolean;
+}
--- a/src/infrastructure/Repository/InMemoryRepository.ts
+++ b/src/infrastructure/Repository/InMemoryRepository.ts
@@ -0,0 +1,40 @@
+import { IEntity } from '../Entity/IEntity';
+import { IRepository } from './IRepository';
+
+export class InMemoryRepository<TKey, TEntity extends IEntity<TKey>> implements IRepository<TKey, TEntity> {
+    private readonly items: TEntity[];
+    constructor(items?: TEntity[]) {
+        this.items = items || new Array<TEntity>();
+    }
+
+    public get length(): number {
+        return this.items.length;
+    }
+
+    public getItems(predicate?: (entity: TEntity) => boolean): TEntity[] {
+        return predicate ? this.items.filter(predicate) : this.items;
+    }
+
+    public addItem(item: TEntity): void {
+        if (!item) {
+            throw new Error('Item is null');
+        }
+        if (this.exists(item)) {
+            throw new Error(`Cannot add (id: ${item.id}) as it is already exists`);
+        }
+        this.items.push(item);
+    }
+
+    public removeItem(id: TKey): void {
+        const index = this.items.findIndex((item) => item.id === id);
+        if (index === -1) {
+            throw new Error(`Cannot remove (id: ${id}) as it does not exist`);
+        }
+        this.items.splice(index, 1);
+    }
+
+    public exists(entity: TEntity): boolean {
+        const index = this.items.findIndex((item) => item.id === entity.id);
+        return index !== -1;
+    }
+}
--- a/src/infrastructure/SaveFileDialog.ts
+++ b/src/infrastructure/SaveFileDialog.ts
@@ -0,0 +1,16 @@
+import fileSaver from 'file-saver';
+
+export class SaveFileDialog {
+    public static saveText(text: string, fileName: string): void {
+        this.saveBlob(text, 'text/plain;charset=utf-8', fileName);
+    }
+
+    private static saveBlob(file: BlobPart, fileType: string, fileName: string): void {
+        try {
+            const blob = new Blob([file], { type: fileType });
+            fileSaver.saveAs(blob, fileName);
+        } catch (e) {
+            window.open('data:' + fileType + ',' + encodeURIComponent(file.toString()), '_blank', '');
+        }
+    }
+}
--- a/src/infrastructure/Threading/AsyncLazy.ts
+++ b/src/infrastructure/Threading/AsyncLazy.ts
@@ -0,0 +1,34 @@
+import { Signal } from '../Events/Signal';
+
+export class AsyncLazy<T> {
+    private valueCreated = new Signal();
+    private isValueCreated = false;
+    private isCreatingValue = false;
+    private value: T | undefined;
+
+    constructor(private valueFactory: () => Promise<T>) { }
+
+    public setValueFactory(valueFactory: () => Promise<T>) {
+        this.valueFactory = valueFactory;
+    }
+
+    public async getValueAsync(): Promise<T> {
+        // If value is already created, return the value directly
+        if (this.isValueCreated) {
+            return Promise.resolve(this.value as T);
+        }
+        // If value is being created, wait until the value is created and then return it.
+        if (this.isCreatingValue) {
+            return new Promise<T>((resolve, reject) => {
+                // Return/result when valueCreated event is triggered.
+                this.valueCreated.on(() => resolve(this.value));
+            });
+        }
+        this.isCreatingValue = true;
+        this.value = await this.valueFactory();
+        this.isCreatingValue = false;
+        this.isValueCreated = true;
+        this.valueCreated.notify(null);
+        return Promise.resolve(this.value);
+    }
+}
--- a/src/main.ts
+++ b/src/main.ts
@@ -0,0 +1,10 @@
+import Vue from 'vue';
+import App from './App.vue';
+import { ApplicationBootstrapper } from './presentation/Bootstrapping/ApplicationBootstrapper';
+
+new ApplicationBootstrapper()
+  .bootstrap(Vue);
+
+new Vue({
+  render: (h) => h(App),
+}).$mount('#app');
--- a/src/presentation/Bootstrapping/ApplicationBootstrapper.ts
+++ b/src/presentation/Bootstrapping/ApplicationBootstrapper.ts
@@ -0,0 +1,24 @@
+import { TreeBootstrapper } from './Modules/TreeBootstrapper';
+import { IconBootstrapper } from './Modules/IconBootstrapper';
+import { VueConstructor, IVueBootstrapper } from './IVueBootstrapper';
+import { VueBootstrapper } from './Modules/VueBootstrapper';
+import { TooltipBootstrapper } from './Modules/TooltipBootstrapper';
+
+export class ApplicationBootstrapper implements IVueBootstrapper {
+    public bootstrap(vue: VueConstructor): void {
+        vue.config.productionTip = false;
+        const bootstrappers = this.getAllBootstrappers();
+        for (const bootstrapper of bootstrappers) {
+            bootstrapper.bootstrap(vue);
+        }
+    }
+
+    private getAllBootstrappers(): IVueBootstrapper[] {
+        return [
+            new IconBootstrapper(),
+            new TreeBootstrapper(),
+            new VueBootstrapper(),
+            new TooltipBootstrapper(),
+        ];
+    }
+}
--- a/src/presentation/Bootstrapping/IVueBootstrapper.ts
+++ b/src/presentation/Bootstrapping/IVueBootstrapper.ts
@@ -0,0 +1,7 @@
+import { VueConstructor } from 'vue';
+
+export interface IVueBootstrapper {
+    bootstrap(vue: VueConstructor): void;
+}
+
+export { VueConstructor };
--- a/src/presentation/Bootstrapping/Modules/IconBootstrapper.ts
+++ b/src/presentation/Bootstrapping/Modules/IconBootstrapper.ts
@@ -0,0 +1,18 @@
+import { IVueBootstrapper, VueConstructor } from './../IVueBootstrapper';
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { faGithub } from '@fortawesome/free-brands-svg-icons';
+/** BRAND ICONS (PREFIX: fab) */
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+/** REGULAR ICONS (PREFIX: far) */
+import { faFolderOpen, faFolder } from '@fortawesome/free-regular-svg-icons';
+/** SOLID ICONS (PREFIX: fas (default)) */
+import { faTimes, faFileDownload, faCopy, faSearch, faInfoCircle } from '@fortawesome/free-solid-svg-icons';
+
+
+export class IconBootstrapper implements IVueBootstrapper {
+    public bootstrap(vue: VueConstructor): void {
+        library.add(faGithub, faFolderOpen, faFolder,
+            faTimes, faFileDownload, faCopy, faSearch, faInfoCircle);
+        vue.component('font-awesome-icon', FontAwesomeIcon);
+    }
+}
--- a/src/presentation/Bootstrapping/Modules/TooltipBootstrapper.ts
+++ b/src/presentation/Bootstrapping/Modules/TooltipBootstrapper.ts
@@ -0,0 +1,8 @@
+import { VueConstructor, IVueBootstrapper } from '../IVueBootstrapper';
+import VTooltip from 'v-tooltip';
+
+export class TooltipBootstrapper implements IVueBootstrapper {
+    public bootstrap(vue: VueConstructor): void {
+        vue.use(VTooltip);
+    }
+}
--- a/src/presentation/Bootstrapping/Modules/TreeBootstrapper.ts
+++ b/src/presentation/Bootstrapping/Modules/TreeBootstrapper.ts
@@ -0,0 +1,8 @@
+import LiquorTree from 'liquor-tree';
+import { VueConstructor, IVueBootstrapper } from './../IVueBootstrapper';
+
+export class TreeBootstrapper implements IVueBootstrapper {
+    public bootstrap(vue: VueConstructor): void {
+        vue.use(LiquorTree);
+    }
+}
--- a/src/presentation/Bootstrapping/Modules/VueBootstrapper.ts
+++ b/src/presentation/Bootstrapping/Modules/VueBootstrapper.ts
@@ -0,0 +1,7 @@
+import { VueConstructor, IVueBootstrapper } from './../IVueBootstrapper';
+
+export class VueBootstrapper implements IVueBootstrapper {
+    public bootstrap(vue: VueConstructor): void {
+        vue.config.productionTip = false;
+    }
+}
--- a/src/presentation/IconButton.vue
+++ b/src/presentation/IconButton.vue
@@ -0,0 +1,74 @@
+<template>
+    <button class="button" @click="onClicked">
+        <font-awesome-icon
+        class="button__icon"
+        :icon="[iconPrefix, iconName]" size="2x"  />
+        <div class="button__text">{{text}}</div>
+    </button>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue, Emit } from 'vue-property-decorator';
+import { StatefulVue, IApplicationState } from './StatefulVue';
+import { SaveFileDialog } from './../infrastructure/SaveFileDialog';
+import { Clipboard } from './../infrastructure/Clipboard';
+
+@Component
+export default class IconButton extends StatefulVue {
+  @Prop() public text!: number;
+  @Prop() public iconPrefix!: string;
+  @Prop() public iconName!: string;
+
+  @Emit('click')
+  public onClicked() {
+      return;
+  }
+
+}
+</script>
+
+<style scoped lang="scss">
+@import "@/presentation/styles/colors.scss";
+
+.button {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    background-color: $accent;
+    border: none;
+    color: $white;
+    padding:20px;
+    transition-duration: 0.4s;
+    overflow: hidden;
+    box-shadow: 0 3px 9px $dark-slate;
+    border-radius: 4px;
+
+    cursor: pointer;
+    // border: 0.1em solid $slate;
+	// border-radius: 80px;
+	// padding: 0.5em;
+    width: 10%;
+    min-width: 90px;
+    &:hover {
+        background: $white;
+        box-shadow: 0px 2px 10px 5px $accent;
+        color: $black;
+    }
+    &:hover>&__text {
+        display: block;
+    }
+    &:hover>&__icon {
+        display: none;
+    }
+    &__text {
+        display: none;
+        font-family: 'Yesteryear', cursive;
+        font-size: 1.5em;
+        color: $gray;
+        font-weight: 500;
+        line-height: 1.1;
+    }
+  }
+
+</style>
--- a/src/presentation/Scripts/Cards/CardList.vue
+++ b/src/presentation/Scripts/Cards/CardList.vue
@@ -0,0 +1,62 @@
+<template>
+  <div>
+    <div v-if="categoryIds != null && categoryIds.length > 0" class="cards">
+      <CardListItem
+        class="card"
+        v-for="categoryId of categoryIds"
+        v-bind:key="categoryId"
+        :categoryId="categoryId"
+        :activeCategoryId="activeCategoryId"
+        v-on:selected="onSelected(categoryId, $event)">
+      </CardListItem>
+    </div>
+    <div v-else class="error">Something went bad 😢</div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+import CardListItem from './CardListItem.vue';
+import { StatefulVue, IApplicationState } from '@/presentation/StatefulVue';
+import { ICategory } from '@/domain/ICategory';
+
+@Component({
+  components: {
+    CardListItem,
+  },
+})
+export default class CardList extends StatefulVue {
+  public categoryIds: number[] = [];
+  public activeCategoryId?: number = null;
+
+  public async mounted() {
+    const state = await this.getCurrentStateAsync();
+    this.setCategories(state.categories);
+  }
+
+  public onSelected(categoryId: number, isExpanded: boolean) {
+    this.activeCategoryId = isExpanded ? categoryId : undefined;
+  }
+
+  private setCategories(categories: ReadonlyArray<ICategory>): void {
+    this.categoryIds = categories.map((category) => category.id);
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import "@/presentation/styles/fonts.scss";
+.cards {
+  display: flex;
+  flex-flow: row wrap;
+  .card {
+
+  }
+}
+.error {
+  width: 100%;
+  text-align: center;
+  font-size: 3.5em;
+  font: $default-font;
+}
+</style>
--- a/src/presentation/Scripts/Cards/CardListItem.vue
+++ b/src/presentation/Scripts/Cards/CardListItem.vue
@@ -0,0 +1,248 @@
+<template>
+    <div class="card"
+          v-on:click="onSelected(!isExpanded)"
+          v-bind:class="{ 
+                    'is-collapsed': !isExpanded,
+                    'is-inactive': activeCategoryId && activeCategoryId != categoryId,
+                    'is-expanded': isExpanded}">
+      <div class="card__inner">
+        <span v-if="cardTitle && cardTitle.length > 0">{{cardTitle}}</span>
+        <span v-else>Oh no 😢</span>
+        <font-awesome-icon :icon="['far', isExpanded ? 'folder-open' : 'folder']" class="expand-button"  />
+      </div>
+      <div class="card__expander" v-on:click.stop>
+          <font-awesome-icon :icon="['fas', 'times']"  class="close-button" v-on:click="onSelected(false)"/>
+          <CardListItemScripts :categoryId="categoryId"></CardListItemScripts>
+    </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue, Watch, Emit } from 'vue-property-decorator';
+import CardListItemScripts from './CardListItemScripts.vue';
+import { StatefulVue } from '@/presentation/StatefulVue';
+
+@Component({
+  components: {
+    CardListItemScripts,
+  },
+})
+export default class CardListItem extends StatefulVue {
+  @Prop() public categoryId!: number;
+  @Prop() public activeCategoryId!: number;
+  public cardTitle?: string = '';
+  public isExpanded: boolean = false;
+
+  @Emit('selected')
+  public onSelected(isExpanded: boolean) {
+    this.isExpanded = isExpanded;
+  }
+
+  @Watch('activeCategoryId')
+  public async onActiveCategoryChanged(value: |number) {
+    this.isExpanded = value === this.categoryId;
+  }
+
+  public async mounted() {
+    this.cardTitle = this.categoryId ? await this.getCardTitleAsync(this.categoryId) : undefined;
+  }
+
+  @Watch('categoryId')
+  public async onCategoryIdChanged(value: |number) {
+    this.cardTitle = value ? await this.getCardTitleAsync(value) : undefined;
+  }
+
+
+  private async getCardTitleAsync(categoryId: number): Promise<string | undefined> {
+      const state = await this.getCurrentStateAsync();
+      const category = state.getCategory(this.categoryId);
+      return category ? category.name : undefined;
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import "@/presentation/styles/colors.scss";
+
+.card {
+  margin: 15px; 
+  width: calc((100% / 3) - 30px);
+  transition: all 0.2s ease-in-out;
+
+  //media queries for stacking cards
+  @media screen and (max-width: 991px) {
+    width: calc((100% / 2) - 30px);
+  }
+
+  @media screen and (max-width: 767px) {
+    width: 100%;
+  }
+  
+  @media screen and (max-width: 380px) {
+    width: 90%;
+  }
+
+  &:hover {
+    .card__inner {
+      background-color: $accent;
+      transform: scale(1.05);
+    }
+  }
+
+  &__inner {
+    width: 100%;
+    padding: 30px;
+    position: relative;
+    cursor: pointer;
+    
+    background-color: $gray;
+    color: $light-gray;
+    font-size: 1.5em;
+    text-transform: uppercase;
+    text-align: center;
+
+    transition: all 0.2s ease-in-out;
+    
+    &:after {
+      transition: all 0.3s ease-in-out;
+    }
+    
+    .expand-button {
+      width: 100%;
+      margin-top: .25em;
+    }
+  }
+
+  //Expander
+  &__expander {
+    transition: all 0.2s ease-in-out;
+    background-color: $slate;
+    width: 100%;
+    position: relative;
+    
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    
+    text-transform: uppercase;
+    color: $light-gray;
+    font-size: 1.5em;
+    
+    .close-button {
+      font-size: 0.75em;
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      cursor: pointer;
+      
+      &:hover {
+        opacity: 0.9;
+      }
+    }
+  }
+
+  &.is-collapsed {
+    
+    .card__inner {
+      &:after {
+        content: "";
+        opacity: 0;
+      }
+    }
+    .card__expander {
+      max-height: 0;
+      min-height: 0;
+      overflow: hidden;
+      margin-top: 0;
+      opacity: 0;
+    }
+  }
+
+  &.is-expanded {
+
+    .card__inner {
+      background-color: $accent;
+      
+      &:after{
+        content: "";
+        opacity: 1;
+        display: block;
+        height: 0;
+        width: 0;
+        position: absolute;
+        bottom: -30px;
+        left: calc(50% - 15px);
+        border-left: 15px solid transparent;
+        border-right: 15px solid transparent;
+        border-bottom: 15px solid #333a45;
+      }
+      
+    }
+
+    .card__expander {
+      min-height: 200px;
+      // max-height: 1000px;
+      // overflow-y: auto;
+
+      margin-top: 30px;
+      opacity: 1;
+    }
+
+    &:hover {
+      .card__inner {
+        transform: scale(1);
+      }
+    }
+  }
+  
+  &.is-inactive {
+    .card__inner {
+      pointer-events: none;
+      opacity: 0.5;
+    }
+    
+    &:hover {
+      .card__inner {
+        background-color: $gray;
+        transform: scale(1);
+      }
+    }
+  }
+}
+
+
+//Expander Widths
+
+//when 3 cards in a row
+@media screen and (min-width: 992px) {
+
+  .card:nth-of-type(3n+2) .card__expander {
+    margin-left: calc(-100% - 30px);
+  }
+  .card:nth-of-type(3n+3) .card__expander {
+    margin-left: calc(-200% - 60px);
+  }
+  .card:nth-of-type(3n+4) {
+    clear: left;
+  }
+  .card__expander {
+    width: calc(300% + 60px);
+  }
+
+}
+
+//when 2 cards in a row
+@media screen and (min-width: 768px) and (max-width: 991px) {
+
+  .card:nth-of-type(2n+2) .card__expander {
+    margin-left: calc(-100% - 30px);
+  }
+  .card:nth-of-type(2n+3) {
+    clear: left;
+  }
+  .card__expander {
+    width: calc(200% + 30px);
+  }
+
+}
+</style>
--- a/src/presentation/Scripts/Cards/CardListItemScripts.vue
+++ b/src/presentation/Scripts/Cards/CardListItemScripts.vue
@@ -0,0 +1,101 @@
+<template>
+    <span>
+        <span v-if="nodes != null && nodes.length > 0">
+            <SelectableTree
+              :nodes="nodes"
+              :selectedNodeIds="selectedNodeIds"
+              :filterPredicate="filterPredicate"
+              :filterText="filterText"
+              v-on:nodeSelected="checkNodeAsync($event)">
+            </SelectableTree>
+        </span>
+        <span v-else>Nooo 😢</span>
+    </span>
+</template>
+
+<script lang="ts">
+  import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
+  import { StatefulVue } from '@/presentation/StatefulVue';
+  import { Category } from '@/domain/Category';
+  import { IRepository } from '@/infrastructure/Repository/IRepository';
+  import { IScript } from '@/domain/IScript';
+  import { IApplicationState, IUserSelection } from '@/application/State/IApplicationState';
+  import { IFilterMatches } from '@/application/State/Filter/IFilterMatches';
+  import { ScriptNodeParser } from './ScriptNodeParser';
+  import SelectableTree, { FilterPredicate } from './../SelectableTree/SelectableTree.vue';
+  import { INode } from './../SelectableTree/INode';
+
+  @Component({
+    components: {
+      SelectableTree,
+    },
+  })
+  export default class CardListItemScripts extends StatefulVue {
+    @Prop() public categoryId!: number;
+
+    public nodes?: INode[] = null;
+    public selectedNodeIds?: string[] = null;
+    public filterText?: string = null;
+
+    private matches?: IFilterMatches;
+
+    public async mounted() {
+      // React to state changes
+      const state = await this.getCurrentStateAsync();
+      this.reactToChanges(state);
+      // Update initial state
+      await this.updateNodesAsync(this.categoryId);
+    }
+
+    public async checkNodeAsync(node: INode) {
+        if (node.children != null && node.children.length > 0) {
+            return; // only interested in script nodes
+          }
+        const state = await this.getCurrentStateAsync();
+        if (node.selected) {
+            state.selection.addSelectedScript(node.id);
+        } else {
+            state.selection.removeSelectedScript(node.id);
+        }
+    }
+
+    @Watch('categoryId')
+    public async updateNodesAsync(categoryId: |number) {
+        this.nodes = categoryId ?
+          await ScriptNodeParser.parseNodes(categoryId, await this.getCurrentStateAsync())
+            : undefined;
+    }
+
+    public filterPredicate(node: INode): boolean {
+      return this.matches.scriptMatches.some((script: IScript) => script.id === node.id);
+    }
+
+    private reactToChanges(state: IApplicationState) {
+      // Update selection data
+      const updateNodeSelection = (node: INode, selectedScripts: ReadonlyArray<IScript>): INode => {
+          return {
+            id: node.id,
+            text: node.text,
+            selected: selectedScripts.some((script) => script.id === node.id),
+            children: node.children ? node.children.map((child) => updateNodeSelection(child, selectedScripts)) : [],
+            documentationUrls: node.documentationUrls,
+          };
+      };
+      state.selection.changed.on(
+        (selectedScripts: ReadonlyArray<IScript>) =>
+          this.nodes = this.nodes.map((node: INode) => updateNodeSelection(node, selectedScripts)),
+          );
+      // Update search / filter data
+      state.filter.filterRemoved.on(() =>
+        this.filterText = '');
+      state.filter.filtered.on((matches: IFilterMatches) => {
+        this.filterText = matches.query;
+        this.matches = matches;
+      });
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+
+</style>
--- a/src/presentation/Scripts/Cards/ScriptNodeParser.ts
+++ b/src/presentation/Scripts/Cards/ScriptNodeParser.ts
@@ -0,0 +1,43 @@
+import { ICategory } from './../../../domain/ICategory';
+import { IApplicationState, IUserSelection } from '@/application/State/IApplicationState';
+import { INode } from './../SelectableTree/INode';
+
+export class ScriptNodeParser {
+    public static parseNodes(categoryId: number, state: IApplicationState): INode[] | undefined {
+        const category = state.getCategory(categoryId);
+        if (!category) {
+              throw new Error(`Category with id ${categoryId} does not exist`);
+          }
+        const tree = this.parseNodesRecursively(category, state.selection);
+        return tree;
+    }
+
+    private static parseNodesRecursively(parentCategory: ICategory, selection: IUserSelection): INode[] {
+          const nodes = new Array<INode>();
+          if (parentCategory.subCategories && parentCategory.subCategories.length > 0) {
+              for (const subCategory of parentCategory.subCategories) {
+                  const subCategoryNodes = this.parseNodesRecursively(subCategory, selection);
+                  nodes.push(
+                    {
+                      id: `cat${subCategory.id}`,
+                      text: subCategory.name,
+                      selected: false,
+                      children: subCategoryNodes,
+                      documentationUrls: subCategory.documentationUrls,
+                    });
+              }
+          }
+          if (parentCategory.scripts && parentCategory.scripts.length > 0) {
+              for (const script of parentCategory.scripts) {
+                  nodes.push( {
+                    id: script.id,
+                    text: script.name,
+                    selected: selection.isSelected(script),
+                    children: undefined,
+                    documentationUrls: script.documentationUrls,
+                });
+              }
+          }
+          return nodes;
+      }
+}
--- a/src/presentation/Scripts/CategoryTree.vue
+++ b/src/presentation/Scripts/CategoryTree.vue
@@ -0,0 +1,19 @@
+<template>
+    <div>
+        <CardList v-if="isGrouped">
+        </CardList>
+        <SelectableTree></SelectableTree>
+    </div>
+</template>
+
+<script lang="ts">
+    import { Component, Prop, Vue, Emit } from 'vue-property-decorator';
+    import { Category } from '@/domain/Category';
+    import { StatefulVue } from '@/presentation/StatefulVue';
+
+    /** Shows content of single category or many categories */
+    @Component
+    export default class CategoryTree extends StatefulVue {
+        @Prop() public data!: Category | Category[];
+    }
+</script>
--- a/src/presentation/Scripts/SelectableTree/INode.ts
+++ b/src/presentation/Scripts/SelectableTree/INode.ts
@@ -0,0 +1,7 @@
+export interface INode {
+    readonly id: string;
+    readonly text: string;
+    readonly documentationUrls: ReadonlyArray<string>;
+    readonly children?: ReadonlyArray<INode>;
+    readonly selected: boolean;
+}
--- a/src/presentation/Scripts/SelectableTree/Node.vue
+++ b/src/presentation/Scripts/SelectableTree/Node.vue
@@ -0,0 +1,46 @@
+<template>
+    <div id="node">
+        <div>{{ this.data.text }}</div>
+        <div
+          v-for="url of this.data.documentationUrls"
+          v-bind:key="url">
+            <a :href="url"
+                :alt="url"
+                target="_blank" class="docs"
+                  v-tooltip.top-center="url"
+                v-on:click.stop>
+                <font-awesome-icon :icon="['fas', 'info-circle']" />
+                </a>
+        </div>
+    </div>
+</template>
+
+
+<script lang="ts">
+    import { Component, Prop, Vue } from 'vue-property-decorator';
+    import { INode } from './INode';
+    /** Wrapper for Liquor Tree, reveals only abstracted INode for communication */
+    @Component
+    export default class Node extends Vue {
+        @Prop() public data: INode;
+    }
+</script>
+
+
+<style scoped lang="scss">
+@import "@/presentation/styles/colors.scss";
+#node {
+  display:flex;
+  flex-direction: row;
+    flex-wrap: wrap;
+  .docs {
+    color: $gray;
+    cursor: pointer;
+    margin-left:5px;
+    &:hover {
+        color: $slate;
+    }
+  }
+}
+
+</style>
--- a/src/presentation/Scripts/SelectableTree/SelectableTree.vue
+++ b/src/presentation/Scripts/SelectableTree/SelectableTree.vue
@@ -0,0 +1,181 @@
+<template>
+    <span>
+        <span v-if="initialNodes != null && initialNodes.length > 0">
+            <tree :options="liquorTreeOptions"
+                  :data="this.initialNodes"
+                  v-on:node:checked="nodeSelected($event)"
+                  v-on:node:unchecked="nodeSelected($event)"
+                  ref="treeElement"
+                >
+                <span class="tree-text" slot-scope="{ node }">
+                    <Node :data="convertExistingToNode(node)"/>
+                </span>
+            </tree>
+        </span>
+        <span v-else>Nooo 😢</span>
+    </span>
+</template>
+
+<script lang="ts">
+    import { Component, Prop, Vue, Emit, Watch } from 'vue-property-decorator';
+    import LiquorTree, { ILiquorTreeNewNode, ILiquorTreeExistingNode, ILiquorTree } from 'liquor-tree';
+    import Node from './Node.vue';
+    import { INode } from './INode';
+    export type FilterPredicate = (node: INode) => boolean;
+
+    /** Wrapper for Liquor Tree, reveals only abstracted INode for communication */
+    @Component({
+        components: {
+        LiquorTree,
+        Node,
+        },
+    })
+    export default class SelectableTree extends Vue {
+        @Prop() public filterPredicate?: FilterPredicate;
+        @Prop() public filterText?: string;
+        @Prop() public nodes?: INode[];
+
+        public initialNodes?: ILiquorTreeNewNode[] = null;
+        public liquorTreeOptions = this.getLiquorTreeOptions();
+
+        public mounted() {
+            // console.log('Mounted', 'initial nodes', this.nodes);
+            // console.log('Mounted', 'initial model', this.getLiquorTreeApi().model);
+
+            if (this.nodes) {
+                this.initialNodes = this.nodes.map((node) => this.toLiquorTreeNode(node));
+            } else {
+                throw new Error('Initial nodes are null or empty');
+            }
+
+            if (this.filterText) {
+               this.updateFilterText(this.filterText);
+            }
+        }
+
+        public nodeSelected(node: ILiquorTreeExistingNode) {
+            this.$emit('nodeSelected', this.convertExistingToNode(node));
+            return;
+        }
+
+        @Watch('filterText')
+        public updateFilterText(filterText: |string) {
+            const api = this.getLiquorTreeApi();
+            if (!filterText) {
+                api.clearFilter();
+            } else {
+                api.filter('filtered'); // text does not matter, it'll trigger the predicate
+            }
+        }
+
+        @Watch('nodes', {deep: true})
+        public setSelectedStatus(nodes: |ReadonlyArray<INode>) {
+            if (!nodes || nodes.length === 0) {
+                throw new Error('Updated nodes are null or empty');
+            }
+            // Update old node properties, re-setting it changes expanded status etc.
+            // It'll not be needed when this is merged: https://github.com/amsik/liquor-tree/pull/141
+            const updateCheckedState = (
+                oldNodes: ReadonlyArray<ILiquorTreeExistingNode>,
+                updatedNodes: ReadonlyArray<INode>): ILiquorTreeNewNode[] => {
+                    const newNodes = new Array<ILiquorTreeNewNode>();
+                    for (const oldNode of oldNodes) {
+                                for (const updatedNode of updatedNodes) {
+                                    if (oldNode.id === updatedNode.id) {
+                                        const newState = oldNode.states;
+                                        newState.checked = updatedNode.selected;
+                                        newNodes.push({
+                                            id: oldNode.id,
+                                            text: updatedNode.text,
+                                            children: oldNode.children == null ? [] :
+                                                updateCheckedState(
+                                                    oldNode.children,
+                                                    updatedNode.children),
+                                            state: newState,
+                                            data: {
+                                                documentationUrls: oldNode.data.documentationUrls,
+                                            },
+                                        });
+                                    }
+                                }
+                            }
+                    return newNodes;
+            };
+            const newModel = updateCheckedState(
+                this.getLiquorTreeApi().model, nodes);
+            this.getLiquorTreeApi().setModel(newModel);
+        }
+
+        private convertItem(liquorTreeNode: ILiquorTreeNewNode): INode {
+            if (!liquorTreeNode) { throw new Error('liquorTreeNode is undefined'); }
+            return {
+                id: liquorTreeNode.id,
+                text: liquorTreeNode.text,
+                selected: liquorTreeNode.state && liquorTreeNode.state.checked,
+                children: (!liquorTreeNode.children || liquorTreeNode.children.length === 0)
+                 ? [] : liquorTreeNode.children.map((childNode) => this.convertItem(childNode)),
+                documentationUrls: liquorTreeNode.data.documentationUrls,
+            };
+        }
+
+        private convertExistingToNode(liquorTreeNode: ILiquorTreeExistingNode): INode {
+            if (!liquorTreeNode) { throw new Error('liquorTreeNode is undefined'); }
+            return {
+                id: liquorTreeNode.id,
+                text: liquorTreeNode.data.text,
+                selected: liquorTreeNode.states && liquorTreeNode.states.checked,
+                children: (!liquorTreeNode.children || liquorTreeNode.children.length === 0)
+                 ? [] : liquorTreeNode.children.map((childNode) => this.convertExistingToNode(childNode)),
+                documentationUrls: liquorTreeNode.data.documentationUrls,
+            };
+        }
+
+
+        private toLiquorTreeNode(node: INode): ILiquorTreeNewNode {
+            if (!node) { throw new Error('node is undefined'); }
+            return {
+                id: node.id,
+                text: node.text,
+                state: {
+                    checked: node.selected,
+                },
+                children: (!node.children || node.children.length === 0) ? [] :
+                 node.children.map((childNode) => this.toLiquorTreeNode(childNode)),
+                data: {
+                    documentationUrls: node.documentationUrls,
+                },
+            };
+        }
+
+        private getLiquorTreeOptions(): any {
+            return {
+                checkbox: true,
+                checkOnSelect: true,
+                deletion: (node) => !node.children || node.children.length === 0,
+                filter: {
+                    matcher: (query: string, node: ILiquorTreeExistingNode) => {
+                        if (!this.filterPredicate) {
+                            throw new Error('Cannot filter as predicate is null');
+                        }
+                        return this.filterPredicate(this.convertExistingToNode(node));
+                    },
+                    emptyText: '🕵️Hmm.. Can not see one 🧐',
+                },
+            };
+        }
+
+        private getLiquorTreeApi(): ILiquorTree {
+            if (!this.$refs.treeElement) {
+                throw new Error('Referenced tree element cannot be found. Probably it\'s not rendered?');
+            }
+            return (this.$refs.treeElement as any).tree;
+        }
+    }
+
+</script>
+
+
+<style scoped lang="scss">
+@import "@/presentation/styles/colors.scss";
+
+</style>
--- a/src/presentation/Scripts/Selector/SelectableOption.vue
+++ b/src/presentation/Scripts/Selector/SelectableOption.vue
@@ -0,0 +1,32 @@
+<template>
+    <span
+        v-bind:class="{ 'disabled': enabled, 'enabled': !enabled}"
+        @click="onClicked()">{{label}}</span>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue, Emit } from 'vue-property-decorator';
+import { StatefulVue } from '@/presentation/StatefulVue';
+
+@Component
+export default class SelectableOption extends StatefulVue {
+  @Prop() public enabled: boolean;
+  @Prop() public label: string;
+  @Emit('click') public onClicked() { return; }
+}
+</script>
+
+<style scoped lang="scss">
+@import "@/presentation/styles/colors.scss";
+
+.enabled {
+    cursor: pointer;
+    &:hover {
+        font-weight:bold;
+        text-decoration:underline;
+    }
+}
+.disabled {
+    color:$gray;
+}
+</style>
--- a/src/presentation/Scripts/Selector/TheSelector.vue
+++ b/src/presentation/Scripts/Selector/TheSelector.vue
@@ -0,0 +1,106 @@
+<template>
+    <div class="container">
+        <div class="part">Select:</div>
+        <div class="part">
+            <SelectableOption
+                label="Recommended"
+                :enabled="isRecommendedSelected"
+                @click="selectRecommendedAsync()" />
+        </div>
+        <div class="part"> | </div>
+        <div class="part">
+            <SelectableOption
+            label="All"
+            :enabled="isAllSelected"
+            @click="selectAllAsync()" />
+        </div>
+        <div class="part"> | </div>
+        <div class="part">
+            <SelectableOption
+                label="None"
+                :enabled="isNoneSelected"
+                @click="selectNoneAsync()">
+            </SelectableOption>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+import { StatefulVue } from '@/presentation/StatefulVue';
+import SelectableOption from './SelectableOption.vue';
+import { IApplicationState } from '@/application/State/IApplicationState';
+import { IScript } from '@/domain/Script';
+
+@Component({
+  components: {
+    SelectableOption,
+  },
+})
+export default class TheSelector extends StatefulVue {
+    public isAllSelected = false;
+    public isNoneSelected = false;
+    public isRecommendedSelected = false;
+
+    public async mounted() {
+        const state = await this.getCurrentStateAsync();
+        this.updateSelections(state);
+        state.selection.changed.on(() => {
+            this.updateSelections(state);
+        });
+    }
+
+    public async selectAllAsync(): Promise<void> {
+        if (this.isAllSelected) {
+            return;
+        }
+        const state = await this.getCurrentStateAsync();
+        state.selection.selectAll();
+    }
+
+    public async selectRecommendedAsync(): Promise<void> {
+        if (this.isRecommendedSelected) {
+            return;
+        }
+        const state = await this.getCurrentStateAsync();
+        state.selection.selectOnly(state.defaultScripts);
+    }
+
+    public async selectNoneAsync(): Promise<void> {
+        if (this.isNoneSelected) {
+            return;
+        }
+        const state = await this.getCurrentStateAsync();
+        state.selection.deselectAll();
+    }
+
+    private updateSelections(state: IApplicationState) {
+        this.isNoneSelected = state.selection.totalSelected === 0;
+        this.isAllSelected = state.selection.totalSelected === state.appTotalScripts;
+        this.isRecommendedSelected = this.areSame(state.defaultScripts, state.selection.selectedScripts);
+    }
+
+    private areSame(scripts: ReadonlyArray<IScript>, other: ReadonlyArray<IScript>): boolean {
+        return (scripts.length === other.length) &&
+            scripts.every((script) => other.some((s) => s.id === script.id));
+    }
+}
+</script>
+
+<style scoped lang="scss">
+@import "@/presentation/styles/fonts.scss";
+
+.container {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items:flex-start;
+
+    .part {
+        display: flex;
+        margin-right:5px;
+    }
+    font:16px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
+}
+
+</style>
--- a/src/presentation/Scripts/TheGrouper.vue
+++ b/src/presentation/Scripts/TheGrouper.vue
@@ -0,0 +1,48 @@
+<template>
+    <div class="container">
+        Group by: <span 
+        v-bind:class="{ 'disabled': isGrouped, 'enabled': !isGrouped}"
+            @click="changeGrouping()" >Cards</Span> |
+        <span class="action"
+            v-bind:class="{ 'disabled': !isGrouped, 'enabled': isGrouped}"
+            @click="changeGrouping()">None</span>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+import { StatefulVue } from '@/presentation/StatefulVue';
+import { IApplicationState } from '@/application/State/IApplicationState';
+
+@Component
+export default class TheGrouper extends StatefulVue {
+    public isGrouped = true;
+
+    public changeGrouping() {
+        this.isGrouped = !this.isGrouped;
+    }
+
+}
+</script>
+
+<style scoped lang="scss">
+@import "@/presentation/styles/colors.scss";
+@import "@/presentation/styles/fonts.scss";
+
+.container {
+    // text-align:left;
+    font:16px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
+
+}
+.enabled {
+    cursor: pointer;
+    &:hover {
+        font-weight:bold;
+        text-decoration:underline;
+    }
+}
+.disabled {
+    color:$gray;
+}
+
+</style>
--- a/src/presentation/StatefulVue.ts
+++ b/src/presentation/StatefulVue.ts
@@ -0,0 +1,11 @@
+import { ApplicationState, IApplicationState } from '../application/State/ApplicationState';
+import { Vue } from 'vue-property-decorator';
+export { IApplicationState };
+
+export abstract class StatefulVue extends Vue {
+    public isLoading = true;
+
+    protected getCurrentStateAsync(): Promise<IApplicationState> {
+        return ApplicationState.GetAsync();
+    }
+}
--- a/src/presentation/TheCodeArea.vue
+++ b/src/presentation/TheCodeArea.vue
@@ -0,0 +1,53 @@
+<template>
+    <div :id="editorId" class="code-area" ></div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Watch, Vue } from 'vue-property-decorator';
+import { StatefulVue, IApplicationState } from './StatefulVue';
+import ace from 'ace-builds';
+import 'ace-builds/webpack-resolver';
+
+
+@Component
+export default class TheCodeArea extends StatefulVue {
+  public readonly editorId = 'codeEditor';
+  private editor!: ace.Ace.Editor;
+
+  @Prop() private theme!: string;
+
+  public async mounted() {
+    this.editor = this.initializeEditor();
+    const state = await this.getCurrentStateAsync();
+    this.updateCode(state.code.current);
+    state.code.changed.on((code) => this.updateCode(code));
+  }
+
+  private updateCode(code: string) {
+    this.editor.setValue(code || 'Something is bad 😢', 1);
+  }
+
+  private initializeEditor(): ace.Ace.Editor {
+    const lang = 'batchfile';
+    const theme = this.theme || 'github';
+    const editor = ace.edit(this.editorId);
+    editor.getSession().setMode(`ace/mode/${lang}`);
+    editor.setTheme(`ace/theme/${theme}`);
+    editor.setReadOnly(true);
+    editor.setAutoScrollEditorIntoView(true);
+    // this.editor.getSession().setUseWrapMode(true);
+    // this.editor.setOption("indentedSoftWrap", false);
+    return editor;
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.code-area {
+    /* ----- Fill its parent div ------ */
+    width: 100%;
+    /* height */
+    max-height: 1000px;
+    min-height: 200px;
+}
+</style>
--- a/src/presentation/TheCodeButtons.vue
+++ b/src/presentation/TheCodeButtons.vue
@@ -0,0 +1,64 @@
+<template>
+    <div class="container" v-if="hasCode">
+        <IconButton
+            text="Copy"
+            v-on:click="copyCodeAsync"
+            icon-prefix="fas" icon-name="copy">
+        </IconButton>
+        <IconButton
+            text="Download"
+            v-on:click="saveCodeAsync"
+            icon-prefix="fas" icon-name="file-download">
+        </IconButton>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+import { StatefulVue, IApplicationState } from './StatefulVue';
+import { SaveFileDialog } from './../infrastructure/SaveFileDialog';
+import { Clipboard } from './../infrastructure/Clipboard';
+import IconButton from './IconButton.vue';
+
+
+@Component({
+  components: {
+    IconButton,
+  },
+})
+export default class TheCodeButtons extends StatefulVue {
+  public hasCode = false;
+
+  public async mounted() {
+    const state = await this.getCurrentStateAsync();
+    this.hasCode = state.code.current && state.code.current.length > 0;
+    state.code.changed.on((code) => {
+      this.hasCode = code && code.length > 0;
+    });
+  }
+
+  public async copyCodeAsync() {
+      const state = await this.getCurrentStateAsync();
+      Clipboard.copyText(state.code.current);
+  }
+
+  public async saveCodeAsync() {
+      const state = await this.getCurrentStateAsync();
+      SaveFileDialog.saveText(state.code.current, 'privacy-script.bat');
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import "@/presentation/styles/colors.scss";
+
+.container {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}
+.container > * + * {
+  margin-left: 30px;
+}
+
+</style>
--- a/src/presentation/TheHeader.vue
+++ b/src/presentation/TheHeader.vue
@@ -0,0 +1,66 @@
+<template>
+    <div id="container">
+      <h1 class="child title" >{{ title }}</h1>
+      <h2 class="child subtitle">{{ subtitle }}</h2>
+      <a :href="githubUrl" target="_blank" class="child github" >
+          <font-awesome-icon :icon="['fab', 'github']" size="3x"  />
+      </a>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+import { StatefulVue } from './StatefulVue';
+
+@Component
+export default class TheHeader extends StatefulVue {
+  private title: string = '';
+  private subtitle: string = '';
+  @Prop() private githubUrl!: string;
+
+  public async mounted() {
+    const state = await this.getCurrentStateAsync();
+    this.title = state.appName;
+    this.subtitle = `Privacy generator tool for Windows v${state.appVersion}`;
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import "@/presentation/styles/colors.scss";
+#container {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+
+  .child {
+    display: flex;
+    text-align: center;
+  }
+
+  .title {
+    margin: 0;
+    color: $black;
+    text-transform: uppercase;
+    font-size: 2.5em;
+    font-weight: 500;
+    line-height: 1.1;
+  }
+  .subtitle {
+    margin: 0;
+    font-size: 1.5em;
+    color: $gray;
+    font-family: 'Yesteryear', cursive;
+    font-weight: 500;
+    line-height: 1.2;
+  }
+  .github {
+    color:inherit;
+    cursor: pointer;
+    &:hover {
+        opacity: 0.9;
+    }
+  }
+}
+ 
+</style>
--- a/src/presentation/TheSearchBar.vue
+++ b/src/presentation/TheSearchBar.vue
@@ -0,0 +1,78 @@
+<template>
+    <div class="container">
+        <div class="search">
+            <input type="text" class="searchTerm" placeholder="Search for configurations"
+              @input="updateFilterAsync($event.target.value)" >
+            <div class="iconWrapper">
+                <font-awesome-icon :icon="['fas', 'search']" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
+import { StatefulVue } from './StatefulVue';
+
+@Component
+export default class TheSearchBar extends StatefulVue {
+
+
+  public async updateFilterAsync(filter: |string) {
+    const state = await this.getCurrentStateAsync();
+    if (!filter) {
+      state.filter.removeFilter();
+    } else {
+      state.filter.setFilter(filter);
+    }
+  }
+
+}
+</script>
+
+<style scoped lang="scss">
+@import "@/presentation/styles/colors.scss";
+@import "@/presentation/styles/fonts.scss";
+
+.container {
+    padding-top: 30px;
+    padding-right: 30%;
+    padding-left: 30%;
+    font: $default-font;
+}
+
+.search {
+  width: 100%;
+  position: relative;
+  display: flex;
+}
+
+.searchTerm {
+  width: 100%;
+  border: 1.5px solid $gray;
+  border-right: none;
+  height: 36px;
+  border-radius: 3px 0 0 3px;
+  padding-left:10px;
+  padding-right:10px;
+  outline: none;
+  color: $gray;
+}
+
+.searchTerm:focus{
+  color: $slate;
+}
+
+.iconWrapper {
+  width: 40px;
+  height: 36px;
+  border: 1px solid $gray;
+  background: $gray;
+  text-align: center;
+  color: $white;
+  border-radius: 0 5px 5px 0;
+  font-size: 20px;
+  padding:5px;
+}
+
+</style>
--- a/src/presentation/styles/colors.scss
+++ b/src/presentation/styles/colors.scss
@@ -0,0 +1,8 @@
+$white: #fff;
+$light-gray: #eceef1;
+$gray: darken(#eceef1, 30%);
+$dark-gray: #616f86;
+$slate: darken(#eceef1, 70%);
+$dark-slate: #2f3133;
+$accent: #1abc9c;
+$black: #000
--- a/src/presentation/styles/fonts.scss
+++ b/src/presentation/styles/fonts.scss
@@ -0,0 +1,26 @@
+/* latin-ext */
+@font-face {
+    font-family: 'Slabo 27px';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Slabo 27px'), local('Slabo27px-Regular'), url('~@/presentation/styles/fonts/Slabo27px-v6.woff2') format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'Slabo 27px';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Slabo 27px'), local('Slabo27px-Regular'), url('~@/presentation/styles/fonts/Slabo27px-v6.woff2') format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'Yesteryear';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Yesteryear'), local('Yesteryear-Regular'), url('~@/presentation/styles/fonts/yesteryear-v8.woff2') format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+
+  $default-font: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
--- a/src/presentation/styles/fonts/Slabo27px-v6.woff2
+++ b/src/presentation/styles/fonts/Slabo27px-v6.woff2
--- a/src/presentation/styles/fonts/yesteryear-v8.woff2
+++ b/src/presentation/styles/fonts/yesteryear-v8.woff2
--- a/src/presentation/styles/tooltip.scss
+++ b/src/presentation/styles/tooltip.scss
@@ -0,0 +1,43 @@
+// based on https://github.com/Akryum/v-tooltip/blob/83615e394c96ca491a4df04b892ae87e833beb97/demo-src/src/App.vue#L179-L303
+.tooltip {
+    display: block !important;
+    z-index: 10000;
+    .tooltip-inner {
+      background: $black;
+      color: $white;
+      border-radius: 16px;
+      padding: 5px 10px 4px;
+    }
+    .tooltip-arrow {
+      width: 0;
+      height: 0;
+      border-style: solid;
+      position: absolute;
+      margin: 5px;
+      border-color: $black;
+      z-index: 1;
+    }
+    &[x-placement^="top"] {
+      margin-bottom: 5px;
+      .tooltip-arrow {
+        border-width: 5px 5px 0 5px;
+        border-left-color: transparent !important;
+        border-right-color: transparent !important;
+        border-bottom-color: transparent !important;
+        bottom: -5px;
+        left: calc(50% - 5px);
+        margin-top: 0;
+        margin-bottom: 0;
+      }
+    }
+    &[aria-hidden='true'] {
+      visibility: hidden;
+      opacity: 0;
+      transition: opacity .15s, visibility .15s;
+    }
+    &[aria-hidden='false'] {
+      visibility: visible;
+      opacity: 1;
+      transition: opacity .15s;
+    }
+  }
--- a/src/presentation/styles/tree.scss
+++ b/src/presentation/styles/tree.scss
@@ -0,0 +1,35 @@
+// Overrides base styling for LiquorTree
+
+.tree-node > .tree-content > .tree-anchor > span {
+    color: $white !important;
+}
+
+.tree-node {
+    white-space: normal !important;
+}
+
+.tree-arrow.has-child {
+    &.rtl:after, &:after {
+        border-color: $white !important;
+    }
+}
+
+.tree-node.selected > .tree-content {
+    > .tree-anchor > span {
+        font-weight: bolder;
+    }
+}
+
+.tree-content:hover {
+    background: $dark-gray !important;
+}
+
+.tree-checkbox {
+    &.checked {
+        background: $accent !important;
+    }
+    &.indeterminate {
+        border-color: $gray !important;
+    }
+    background: $dark-slate !important;
+}
--- a/src/shims-tsx.d.ts
+++ b/src/shims-tsx.d.ts
@@ -0,0 +1,13 @@
+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;
+    }
+  }
+}
--- a/src/shims-vue.d.ts
+++ b/src/shims-vue.d.ts
@@ -0,0 +1,4 @@
+declare module '*.vue' {
+  import Vue from 'vue';
+  export default Vue;
+}