From c0c475ff564b23a4dabcc03ac2909207a8eb61ce Mon Sep 17 00:00:00 2001
From: undergroundwires <undergroundwires@users.noreply.github.com>
Date: Sun, 29 Aug 2021 11:33:16 +0100
Subject: [PATCH] Change "grouping" to "view"

1. *Grouping* becomes *view*. Because *view* is more clear and extensible than *grouping*. It increases flexibility to extend by e.g. adding *flat* as a new view as discussed in #50, in this case "flat *view*" would make more sense than "flat *grouping*".
2. *None* becomes *tree*. Because *tree* is more descriptive than *none*.

Updates labels on top menu. As labels are updated, the file structure/names are refactored to follow the same concept. `TheScriptsList` is renamed to `TheScriptsView`. Also refactors `ViewChanger` so view types are presented in same way.
---
 .../Scripts/Menu/Grouping/Grouping.ts         |  4 --
 .../Scripts/Menu/Grouping/TheGrouper.vue      | 66 -------------------
 .../Scripts/Menu/MenuOptionListItem.vue       |  2 +-
 .../Scripts/Menu/TheScriptsMenu.vue           |  8 +--
 .../Scripts/Menu/View/TheViewChanger.vue      | 61 +++++++++++++++++
 .../components/Scripts/Menu/View/ViewType.ts  |  4 ++
 .../components/Scripts/TheScriptArea.vue      | 12 ++--
 .../Scripts/{ => View}/Cards/CardList.vue     |  0
 .../Scripts/{ => View}/Cards/CardListItem.vue |  2 +-
 .../Cards/NonCollapsingDirective.ts           |  0
 .../ScriptsTree/ScriptNodeParser.ts           |  0
 .../{ => View}/ScriptsTree/ScriptsTree.vue    |  0
 .../SelectableTree/INodeSelectedEvent.ts      |  0
 .../SelectableTree/LiquorTree/LiquorTree.d.ts |  0
 .../LiquorTree/LiquorTreeOptions.ts           |  0
 .../NodeWrapper/NodePredicateFilter.ts        |  2 +-
 .../NodeWrapper/NodeStateUpdater.ts           |  2 +-
 .../LiquorTree/NodeWrapper/NodeTranslator.ts  |  2 +-
 .../SelectableTree/Node/DocumentationUrls.vue |  0
 .../ScriptsTree/SelectableTree/Node/INode.ts  |  0
 .../ScriptsTree/SelectableTree/Node/Node.vue  |  0
 .../SelectableTree/Node/RevertToggle.vue      |  0
 .../Node/Reverter/CategoryReverter.ts         |  0
 .../SelectableTree/Node/Reverter/IReverter.ts |  0
 .../Node/Reverter/ReverterFactory.ts          |  0
 .../Node/Reverter/ScriptReverter.ts           |  0
 .../SelectableTree/SelectableTree.vue         |  0
 .../TheScriptsView.vue}                       | 19 +++---
 src/presentation/components/TheSearchBar.vue  |  2 +-
 .../Cards/NonCollapsingDirective.spec.ts      |  4 +-
 .../Tree}/ScriptNodeParser.spec.ts            |  6 +-
 .../NodeWrapper/NodePredicateFilter.spec.ts   |  4 +-
 .../NodeWrapper/NodeStateUpdater.spec.ts      |  4 +-
 .../NodeWrapper/NodeTranslator.spec.ts        |  4 +-
 .../Node/Reverter/CategoryReverter.spec.ts    |  4 +-
 .../Node/Reverter/ReverterFactory.spec.ts     | 13 ++--
 .../Node/Reverter/ScriptReverter.spec.ts      |  4 +-
 37 files changed, 112 insertions(+), 117 deletions(-)
 delete mode 100644 src/presentation/components/Scripts/Menu/Grouping/Grouping.ts
 delete mode 100644 src/presentation/components/Scripts/Menu/Grouping/TheGrouper.vue
 create mode 100644 src/presentation/components/Scripts/Menu/View/TheViewChanger.vue
 create mode 100644 src/presentation/components/Scripts/Menu/View/ViewType.ts
 rename src/presentation/components/Scripts/{ => View}/Cards/CardList.vue (100%)
 rename src/presentation/components/Scripts/{ => View}/Cards/CardListItem.vue (98%)
 rename src/presentation/components/Scripts/{ => View}/Cards/NonCollapsingDirective.ts (100%)
 rename src/presentation/components/Scripts/{ => View}/ScriptsTree/ScriptNodeParser.ts (100%)
 rename src/presentation/components/Scripts/{ => View}/ScriptsTree/ScriptsTree.vue (100%)
 rename src/presentation/components/Scripts/{ => View}/ScriptsTree/SelectableTree/INodeSelectedEvent.ts (100%)
 rename src/presentation/components/Scripts/{ => View}/ScriptsTree/SelectableTree/LiquorTree/LiquorTree.d.ts (100%)
 rename src/presentation/components/Scripts/{ => View}/ScriptsTree/SelectableTree/LiquorTree/LiquorTreeOptions.ts (100%)
 rename src/presentation/components/Scripts/{ => View}/ScriptsTree/SelectableTree/LiquorTree/NodeWrapper/NodePredicateFilter.ts (93%)
 rename src/presentation/components/Scripts/{ => View}/ScriptsTree/SelectableTree/LiquorTree/NodeWrapper/NodeStateUpdater.ts (97%)
 rename src/presentation/components/Scripts/{ => View}/ScriptsTree/SelectableTree/LiquorTree/NodeWrapper/NodeTranslator.ts (97%)
 rename src/presentation/components/Scripts/{ => View}/ScriptsTree/SelectableTree/Node/DocumentationUrls.vue (100%)
 rename src/presentation/components/Scripts/{ => View}/ScriptsTree/SelectableTree/Node/INode.ts (100%)
 rename src/presentation/components/Scripts/{ => View}/ScriptsTree/SelectableTree/Node/Node.vue (100%)
 rename src/presentation/components/Scripts/{ => View}/ScriptsTree/SelectableTree/Node/RevertToggle.vue (100%)
 rename src/presentation/components/Scripts/{ => View}/ScriptsTree/SelectableTree/Node/Reverter/CategoryReverter.ts (100%)
 rename src/presentation/components/Scripts/{ => View}/ScriptsTree/SelectableTree/Node/Reverter/IReverter.ts (100%)
 rename src/presentation/components/Scripts/{ => View}/ScriptsTree/SelectableTree/Node/Reverter/ReverterFactory.ts (100%)
 rename src/presentation/components/Scripts/{ => View}/ScriptsTree/SelectableTree/Node/Reverter/ScriptReverter.ts (100%)
 rename src/presentation/components/Scripts/{ => View}/ScriptsTree/SelectableTree/SelectableTree.vue (100%)
 rename src/presentation/components/Scripts/{TheScriptsList.vue => View/TheScriptsView.vue} (87%)
 rename tests/unit/presentation/components/Scripts/{ => View}/Cards/NonCollapsingDirective.spec.ts (96%)
 rename tests/unit/presentation/components/Scripts/{ScriptsTree => View/Tree}/ScriptNodeParser.spec.ts (97%)
 rename tests/unit/presentation/components/Scripts/{ScriptsTree => View/Tree}/SelectableTree/LiquorTree/NodeWrapper/NodePredicateFilter.spec.ts (93%)
 rename tests/unit/presentation/components/Scripts/{ScriptsTree => View/Tree}/SelectableTree/LiquorTree/NodeWrapper/NodeStateUpdater.spec.ts (97%)
 rename tests/unit/presentation/components/Scripts/{ScriptsTree => View/Tree}/SelectableTree/LiquorTree/NodeWrapper/NodeTranslator.spec.ts (96%)
 rename tests/unit/presentation/components/Scripts/{ScriptsTree => View/Tree}/SelectableTree/Node/Reverter/CategoryReverter.spec.ts (97%)
 rename tests/unit/presentation/components/Scripts/{ScriptsTree => View/Tree}/SelectableTree/Node/Reverter/ReverterFactory.spec.ts (80%)
 rename tests/unit/presentation/components/Scripts/{ScriptsTree => View/Tree}/SelectableTree/Node/Reverter/ScriptReverter.spec.ts (97%)

diff --git a/src/presentation/components/Scripts/Menu/Grouping/Grouping.ts b/src/presentation/components/Scripts/Menu/Grouping/Grouping.ts
deleted file mode 100644
index ccaf200f..00000000
--- a/src/presentation/components/Scripts/Menu/Grouping/Grouping.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export enum Grouping {
-    Cards = 1,
-    None = 0,
-}
diff --git a/src/presentation/components/Scripts/Menu/Grouping/TheGrouper.vue b/src/presentation/components/Scripts/Menu/Grouping/TheGrouper.vue
deleted file mode 100644
index 23c44704..00000000
--- a/src/presentation/components/Scripts/Menu/Grouping/TheGrouper.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<template>
-    <div class="container">
-        <MenuOptionList
-            label="Group by"
-            class="part">
-            <MenuOptionListItem
-                label="Cards"
-                :enabled="!cardsSelected"
-                @click="groupByCard()"
-            />
-            <MenuOptionListItem
-                label="None"
-                :enabled="!noneSelected"
-                @click="groupByNone()"
-            />
-        </MenuOptionList>
-        <span class="part">
-        </span>
-    </div>
-</template>
-
-<script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
-import { Grouping } from './Grouping';
-import MenuOptionList from './../MenuOptionList.vue';
-import MenuOptionListItem from './../MenuOptionListItem.vue';
-
-const DefaultGrouping = Grouping.Cards;
-
-@Component({
-  components: {
-    MenuOptionList,
-    MenuOptionListItem,
-  },
-})
-export default class TheGrouper extends Vue {
-    public cardsSelected = false;
-    public noneSelected = false;
-
-    private currentGrouping: Grouping;
-
-    public mounted() {
-        this.changeGrouping(DefaultGrouping);
-    }
-    public groupByCard() {
-        this.changeGrouping(Grouping.Cards);
-    }
-    public groupByNone() {
-        this.changeGrouping(Grouping.None);
-    }
-
-    private changeGrouping(newGrouping: Grouping) {
-        if (this.currentGrouping === newGrouping) {
-            return;
-        }
-        this.currentGrouping = newGrouping;
-        this.cardsSelected = newGrouping === Grouping.Cards;
-        this.noneSelected = newGrouping === Grouping.None;
-        this.$emit('groupingChanged', this.currentGrouping);
-    }
-}
-</script>
-
-<style scoped lang="scss">
-
-</style>
diff --git a/src/presentation/components/Scripts/Menu/MenuOptionListItem.vue b/src/presentation/components/Scripts/Menu/MenuOptionListItem.vue
index 1c98c9ce..a8b98150 100644
--- a/src/presentation/components/Scripts/Menu/MenuOptionListItem.vue
+++ b/src/presentation/components/Scripts/Menu/MenuOptionListItem.vue
@@ -9,7 +9,7 @@
 
 <script lang="ts">
 import { Component, Prop, Emit, Vue } from 'vue-property-decorator';
-import { NonCollapsing } from '@/presentation/components/Scripts/Cards/NonCollapsingDirective';
+import { NonCollapsing } from '@/presentation/components/Scripts/View/Cards/NonCollapsingDirective';
 
 @Component({
     directives: { NonCollapsing },
diff --git a/src/presentation/components/Scripts/Menu/TheScriptsMenu.vue b/src/presentation/components/Scripts/Menu/TheScriptsMenu.vue
index 052e7450..b66026ec 100644
--- a/src/presentation/components/Scripts/Menu/TheScriptsMenu.vue
+++ b/src/presentation/components/Scripts/Menu/TheScriptsMenu.vue
@@ -2,9 +2,9 @@
     <div id="container">
         <TheSelector class="item" />
         <TheOsChanger class="item"  />
-        <TheGrouper
+        <TheViewChanger
             class="item"
-            v-on:groupingChanged="$emit('groupingChanged', $event)"
+            v-on:viewChanged="$emit('viewChanged', $event)"
             v-if="!this.isSearching" />
     </div>
 </template>
@@ -13,7 +13,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 TheViewChanger from './View/TheViewChanger.vue';
 import { StatefulVue } from '@/presentation/components/Shared/StatefulVue';
 import { ICategoryCollectionState } from '@/application/Context/State/ICategoryCollectionState';
 import { IEventSubscription } from '@/infrastructure/Events/IEventSource';
@@ -22,7 +22,7 @@ import { IEventSubscription } from '@/infrastructure/Events/IEventSource';
   components: {
     TheSelector,
     TheOsChanger,
-    TheGrouper,
+    TheViewChanger,
   },
 })
 export default class TheScriptsMenu extends StatefulVue {
diff --git a/src/presentation/components/Scripts/Menu/View/TheViewChanger.vue b/src/presentation/components/Scripts/Menu/View/TheViewChanger.vue
new file mode 100644
index 00000000..c1206fda
--- /dev/null
+++ b/src/presentation/components/Scripts/Menu/View/TheViewChanger.vue
@@ -0,0 +1,61 @@
+<template>
+    <MenuOptionList
+        label="View"
+        class="part">
+        <MenuOptionListItem
+            v-for="view in this.viewOptions" :key="view.type"
+            :label="view.displayName"
+            :enabled="currentView !== view.type"
+            @click="setView(view.type)"
+        />
+    </MenuOptionList>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+import { ViewType } from './ViewType';
+import MenuOptionList from './../MenuOptionList.vue';
+import MenuOptionListItem from './../MenuOptionListItem.vue';
+
+const DefaultView = ViewType.Cards;
+
+@Component({
+  components: {
+    MenuOptionList,
+    MenuOptionListItem,
+  },
+})
+export default class TheViewChanger extends Vue {
+    public readonly viewOptions: IViewOption[] = [
+        { type: ViewType.Cards, displayName: 'Cards' },
+        { type: ViewType.Tree, displayName: 'Tree' },
+    ];
+    public ViewType = ViewType;
+    public currentView?: ViewType = null;
+
+    public mounted() {
+        this.setView(DefaultView);
+    }
+    public groupBy(type: ViewType) {
+        this.setView(type);
+    }
+
+    private setView(view: ViewType) {
+        if (this.currentView === view) {
+            throw new Error(`View is already "${ViewType[view]}"`);
+        }
+        this.currentView = view;
+        this.$emit('viewChanged', this.currentView);
+    }
+}
+
+interface IViewOption {
+    readonly type: ViewType;
+    readonly displayName: string;
+}
+
+</script>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/src/presentation/components/Scripts/Menu/View/ViewType.ts b/src/presentation/components/Scripts/Menu/View/ViewType.ts
new file mode 100644
index 00000000..68eebb00
--- /dev/null
+++ b/src/presentation/components/Scripts/Menu/View/ViewType.ts
@@ -0,0 +1,4 @@
+export enum ViewType {
+    Cards = 1,
+    Tree = 0,
+}
diff --git a/src/presentation/components/Scripts/TheScriptArea.vue b/src/presentation/components/Scripts/TheScriptArea.vue
index edbc9b9d..889cb5a9 100644
--- a/src/presentation/components/Scripts/TheScriptArea.vue
+++ b/src/presentation/components/Scripts/TheScriptArea.vue
@@ -1,9 +1,9 @@
 <template>
 <div class="scripts">
-    <TheScriptsMenu v-on:groupingChanged="grouping = $event" />
+    <TheScriptsMenu v-on:viewChanged="currentView = $event" />
     <HorizontalResizeSlider class="row">
         <template v-slot:left>
-            <TheScriptsList :grouping="grouping" />
+            <TheScriptsView :currentView="currentView" />
         </template>
         <template v-slot:right>
             <TheCodeArea theme="xcode" />
@@ -15,21 +15,21 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
 import TheCodeArea from '@/presentation/components/Code/TheCodeArea.vue';
-import TheScriptsList from '@/presentation/components/Scripts/TheScriptsList.vue';
+import TheScriptsView from '@/presentation/components/Scripts/View/TheScriptsView.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';
+import { ViewType } from '@/presentation/components/Scripts/Menu/View/ViewType';
 
 @Component({
   components: {
     TheCodeArea,
-    TheScriptsList,
+    TheScriptsView,
     TheScriptsMenu,
     HorizontalResizeSlider,
   },
 })
 export default class TheScriptArea extends Vue {
-    public grouping = Grouping.Cards;
+    public currentView = ViewType.Cards;
 }
 </script>
 
diff --git a/src/presentation/components/Scripts/Cards/CardList.vue b/src/presentation/components/Scripts/View/Cards/CardList.vue
similarity index 100%
rename from src/presentation/components/Scripts/Cards/CardList.vue
rename to src/presentation/components/Scripts/View/Cards/CardList.vue
diff --git a/src/presentation/components/Scripts/Cards/CardListItem.vue b/src/presentation/components/Scripts/View/Cards/CardListItem.vue
similarity index 98%
rename from src/presentation/components/Scripts/Cards/CardListItem.vue
rename to src/presentation/components/Scripts/View/Cards/CardListItem.vue
index 2bd6b709..e7e60213 100644
--- a/src/presentation/components/Scripts/Cards/CardListItem.vue
+++ b/src/presentation/components/Scripts/View/Cards/CardListItem.vue
@@ -33,7 +33,7 @@
 
 <script lang="ts">
 import { Component, Prop, Watch, Emit } from 'vue-property-decorator';
-import ScriptsTree from '@/presentation/components/Scripts/ScriptsTree/ScriptsTree.vue';
+import ScriptsTree from '@/presentation/components/Scripts/View/ScriptsTree/ScriptsTree.vue';
 import { StatefulVue } from '@/presentation/components/Shared/StatefulVue';
 
 @Component({
diff --git a/src/presentation/components/Scripts/Cards/NonCollapsingDirective.ts b/src/presentation/components/Scripts/View/Cards/NonCollapsingDirective.ts
similarity index 100%
rename from src/presentation/components/Scripts/Cards/NonCollapsingDirective.ts
rename to src/presentation/components/Scripts/View/Cards/NonCollapsingDirective.ts
diff --git a/src/presentation/components/Scripts/ScriptsTree/ScriptNodeParser.ts b/src/presentation/components/Scripts/View/ScriptsTree/ScriptNodeParser.ts
similarity index 100%
rename from src/presentation/components/Scripts/ScriptsTree/ScriptNodeParser.ts
rename to src/presentation/components/Scripts/View/ScriptsTree/ScriptNodeParser.ts
diff --git a/src/presentation/components/Scripts/ScriptsTree/ScriptsTree.vue b/src/presentation/components/Scripts/View/ScriptsTree/ScriptsTree.vue
similarity index 100%
rename from src/presentation/components/Scripts/ScriptsTree/ScriptsTree.vue
rename to src/presentation/components/Scripts/View/ScriptsTree/ScriptsTree.vue
diff --git a/src/presentation/components/Scripts/ScriptsTree/SelectableTree/INodeSelectedEvent.ts b/src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/INodeSelectedEvent.ts
similarity index 100%
rename from src/presentation/components/Scripts/ScriptsTree/SelectableTree/INodeSelectedEvent.ts
rename to src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/INodeSelectedEvent.ts
diff --git a/src/presentation/components/Scripts/ScriptsTree/SelectableTree/LiquorTree/LiquorTree.d.ts b/src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/LiquorTree/LiquorTree.d.ts
similarity index 100%
rename from src/presentation/components/Scripts/ScriptsTree/SelectableTree/LiquorTree/LiquorTree.d.ts
rename to src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/LiquorTree/LiquorTree.d.ts
diff --git a/src/presentation/components/Scripts/ScriptsTree/SelectableTree/LiquorTree/LiquorTreeOptions.ts b/src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/LiquorTree/LiquorTreeOptions.ts
similarity index 100%
rename from src/presentation/components/Scripts/ScriptsTree/SelectableTree/LiquorTree/LiquorTreeOptions.ts
rename to src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/LiquorTree/LiquorTreeOptions.ts
diff --git a/src/presentation/components/Scripts/ScriptsTree/SelectableTree/LiquorTree/NodeWrapper/NodePredicateFilter.ts b/src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/LiquorTree/NodeWrapper/NodePredicateFilter.ts
similarity index 93%
rename from src/presentation/components/Scripts/ScriptsTree/SelectableTree/LiquorTree/NodeWrapper/NodePredicateFilter.ts
rename to src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/LiquorTree/NodeWrapper/NodePredicateFilter.ts
index ae6710fe..786bf9de 100644
--- a/src/presentation/components/Scripts/ScriptsTree/SelectableTree/LiquorTree/NodeWrapper/NodePredicateFilter.ts
+++ b/src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/LiquorTree/NodeWrapper/NodePredicateFilter.ts
@@ -1,6 +1,6 @@
 import { ILiquorTreeFilter, ILiquorTreeExistingNode } from 'liquor-tree';
 import { convertExistingToNode } from './NodeTranslator';
-import { INode } from './../../Node/INode';
+import { INode } from '../../Node/INode';
 
 export type FilterPredicate = (node: INode) => boolean;
 
diff --git a/src/presentation/components/Scripts/ScriptsTree/SelectableTree/LiquorTree/NodeWrapper/NodeStateUpdater.ts b/src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/LiquorTree/NodeWrapper/NodeStateUpdater.ts
similarity index 97%
rename from src/presentation/components/Scripts/ScriptsTree/SelectableTree/LiquorTree/NodeWrapper/NodeStateUpdater.ts
rename to src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/LiquorTree/NodeWrapper/NodeStateUpdater.ts
index d859b879..52420faf 100644
--- a/src/presentation/components/Scripts/ScriptsTree/SelectableTree/LiquorTree/NodeWrapper/NodeStateUpdater.ts
+++ b/src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/LiquorTree/NodeWrapper/NodeStateUpdater.ts
@@ -1,5 +1,5 @@
 import { ILiquorTreeNode, ILiquorTreeNodeState } from 'liquor-tree';
-import { NodeType } from './../../Node/INode';
+import { NodeType } from '../../Node/INode';
 
 export function getNewState(
     node: ILiquorTreeNode,
diff --git a/src/presentation/components/Scripts/ScriptsTree/SelectableTree/LiquorTree/NodeWrapper/NodeTranslator.ts b/src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/LiquorTree/NodeWrapper/NodeTranslator.ts
similarity index 97%
rename from src/presentation/components/Scripts/ScriptsTree/SelectableTree/LiquorTree/NodeWrapper/NodeTranslator.ts
rename to src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/LiquorTree/NodeWrapper/NodeTranslator.ts
index f5c5bbe0..0688b515 100644
--- a/src/presentation/components/Scripts/ScriptsTree/SelectableTree/LiquorTree/NodeWrapper/NodeTranslator.ts
+++ b/src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/LiquorTree/NodeWrapper/NodeTranslator.ts
@@ -1,5 +1,5 @@
 import { ILiquorTreeNewNode, ILiquorTreeExistingNode } from 'liquor-tree';
-import { INode } from './../../Node/INode';
+import { INode } from '../../Node/INode';
 
 // Functions to translate INode to LiqourTree models and vice versa for anti-corruption
 
diff --git a/src/presentation/components/Scripts/ScriptsTree/SelectableTree/Node/DocumentationUrls.vue b/src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/DocumentationUrls.vue
similarity index 100%
rename from src/presentation/components/Scripts/ScriptsTree/SelectableTree/Node/DocumentationUrls.vue
rename to src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/DocumentationUrls.vue
diff --git a/src/presentation/components/Scripts/ScriptsTree/SelectableTree/Node/INode.ts b/src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/INode.ts
similarity index 100%
rename from src/presentation/components/Scripts/ScriptsTree/SelectableTree/Node/INode.ts
rename to src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/INode.ts
diff --git a/src/presentation/components/Scripts/ScriptsTree/SelectableTree/Node/Node.vue b/src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/Node.vue
similarity index 100%
rename from src/presentation/components/Scripts/ScriptsTree/SelectableTree/Node/Node.vue
rename to src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/Node.vue
diff --git a/src/presentation/components/Scripts/ScriptsTree/SelectableTree/Node/RevertToggle.vue b/src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/RevertToggle.vue
similarity index 100%
rename from src/presentation/components/Scripts/ScriptsTree/SelectableTree/Node/RevertToggle.vue
rename to src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/RevertToggle.vue
diff --git a/src/presentation/components/Scripts/ScriptsTree/SelectableTree/Node/Reverter/CategoryReverter.ts b/src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/Reverter/CategoryReverter.ts
similarity index 100%
rename from src/presentation/components/Scripts/ScriptsTree/SelectableTree/Node/Reverter/CategoryReverter.ts
rename to src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/Reverter/CategoryReverter.ts
diff --git a/src/presentation/components/Scripts/ScriptsTree/SelectableTree/Node/Reverter/IReverter.ts b/src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/Reverter/IReverter.ts
similarity index 100%
rename from src/presentation/components/Scripts/ScriptsTree/SelectableTree/Node/Reverter/IReverter.ts
rename to src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/Reverter/IReverter.ts
diff --git a/src/presentation/components/Scripts/ScriptsTree/SelectableTree/Node/Reverter/ReverterFactory.ts b/src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/Reverter/ReverterFactory.ts
similarity index 100%
rename from src/presentation/components/Scripts/ScriptsTree/SelectableTree/Node/Reverter/ReverterFactory.ts
rename to src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/Reverter/ReverterFactory.ts
diff --git a/src/presentation/components/Scripts/ScriptsTree/SelectableTree/Node/Reverter/ScriptReverter.ts b/src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/Reverter/ScriptReverter.ts
similarity index 100%
rename from src/presentation/components/Scripts/ScriptsTree/SelectableTree/Node/Reverter/ScriptReverter.ts
rename to src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/Reverter/ScriptReverter.ts
diff --git a/src/presentation/components/Scripts/ScriptsTree/SelectableTree/SelectableTree.vue b/src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/SelectableTree.vue
similarity index 100%
rename from src/presentation/components/Scripts/ScriptsTree/SelectableTree/SelectableTree.vue
rename to src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/SelectableTree.vue
diff --git a/src/presentation/components/Scripts/TheScriptsList.vue b/src/presentation/components/Scripts/View/TheScriptsView.vue
similarity index 87%
rename from src/presentation/components/Scripts/TheScriptsList.vue
rename to src/presentation/components/Scripts/View/TheScriptsView.vue
index 227b2d62..a87beb93 100644
--- a/src/presentation/components/Scripts/TheScriptsList.vue
+++ b/src/presentation/components/Scripts/View/TheScriptsView.vue
@@ -1,8 +1,8 @@
 <template>
     <div class="scripts">
         <div v-if="!isSearching">
-            <CardList v-if="grouping === Grouping.Cards"/>
-            <div class="tree" v-if="grouping === Grouping.None">
+            <CardList v-if="currentView === ViewType.Cards"/>
+            <div class="tree" v-else-if="currentView === ViewType.Tree">
                 <ScriptsTree />
             </div>
         </div>
@@ -29,12 +29,12 @@
 </template>
 
 <script lang="ts">
-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 TheGrouper from '@/presentation/components/Scripts/Menu/View/TheViewChanger.vue';
+import ScriptsTree from '@/presentation/components/Scripts/View/ScriptsTree/ScriptsTree.vue';
+import CardList from '@/presentation/components/Scripts/View/Cards/CardList.vue';
 import { Component, Prop } from 'vue-property-decorator';
 import { StatefulVue } from '@/presentation/components/Shared/StatefulVue';
-import { Grouping } from '@/presentation/components/Scripts/Menu/Grouping/Grouping';
+import { ViewType } from '@/presentation/components/Scripts/Menu/View/ViewType';
 import { IFilterResult } from '@/application/Context/State/Filter/IFilterResult';
 import { ICategoryCollectionState } from '@/application/Context/State/ICategoryCollectionState';
 import { ApplicationFactory } from '@/application/ApplicationFactory';
@@ -56,14 +56,13 @@ filters: {
     },
 },
 })
-export default class TheScriptsList extends StatefulVue {
-    @Prop() public grouping: Grouping;
-
+export default class TheScriptsView extends StatefulVue {
     public repositoryUrl = '';
-    public Grouping = Grouping; // Make it accessible from the view
     public searchQuery = '';
     public isSearching = false;
     public searchHasMatches = false;
+    @Prop() public currentView: ViewType;
+    public ViewType = ViewType; // Make it accessible from the view
 
     public async created() {
         const app = await ApplicationFactory.Current.getAppAsync();
diff --git a/src/presentation/components/TheSearchBar.vue b/src/presentation/components/TheSearchBar.vue
index ffcf5137..732ad6a0 100644
--- a/src/presentation/components/TheSearchBar.vue
+++ b/src/presentation/components/TheSearchBar.vue
@@ -12,7 +12,7 @@
 <script lang="ts">
 import { Component, Watch } from 'vue-property-decorator';
 import { StatefulVue } from '@/presentation/components/Shared/StatefulVue';
-import { NonCollapsing } from '@/presentation/components/Scripts/Cards/NonCollapsingDirective';
+import { NonCollapsing } from '@/presentation/components/Scripts/View/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';
diff --git a/tests/unit/presentation/components/Scripts/Cards/NonCollapsingDirective.spec.ts b/tests/unit/presentation/components/Scripts/View/Cards/NonCollapsingDirective.spec.ts
similarity index 96%
rename from tests/unit/presentation/components/Scripts/Cards/NonCollapsingDirective.spec.ts
rename to tests/unit/presentation/components/Scripts/View/Cards/NonCollapsingDirective.spec.ts
index 775bb1b2..4411eda4 100644
--- a/tests/unit/presentation/components/Scripts/Cards/NonCollapsingDirective.spec.ts
+++ b/tests/unit/presentation/components/Scripts/View/Cards/NonCollapsingDirective.spec.ts
@@ -1,7 +1,7 @@
 import 'mocha';
 import { expect } from 'chai';
-import { NonCollapsing } from '@/presentation/components/Scripts/Cards/NonCollapsingDirective';
-import { hasDirective } from '@/presentation/components/Scripts/Cards/NonCollapsingDirective';
+import { NonCollapsing } from '@/presentation/components/Scripts/View/Cards/NonCollapsingDirective';
+import { hasDirective } from '@/presentation/components/Scripts/View/Cards/NonCollapsingDirective';
 
 const expectedAttributeName = 'data-interaction-does-not-collapse';
 
diff --git a/tests/unit/presentation/components/Scripts/ScriptsTree/ScriptNodeParser.spec.ts b/tests/unit/presentation/components/Scripts/View/Tree/ScriptNodeParser.spec.ts
similarity index 97%
rename from tests/unit/presentation/components/Scripts/ScriptsTree/ScriptNodeParser.spec.ts
rename to tests/unit/presentation/components/Scripts/View/Tree/ScriptNodeParser.spec.ts
index f3b3784b..029ca563 100644
--- a/tests/unit/presentation/components/Scripts/ScriptsTree/ScriptNodeParser.spec.ts
+++ b/tests/unit/presentation/components/Scripts/View/Tree/ScriptNodeParser.spec.ts
@@ -1,9 +1,9 @@
 import 'mocha';
 import { expect } from 'chai';
-import { getScriptNodeId, getScriptId, getCategoryNodeId, getCategoryId } from '@/presentation/components/Scripts/ScriptsTree/ScriptNodeParser';
+import { getScriptNodeId, getScriptId, getCategoryNodeId, getCategoryId } from '@/presentation/components/Scripts/View/ScriptsTree/ScriptNodeParser';
 import { parseSingleCategory,
-    parseAllCategories } from '@/presentation/components/Scripts/ScriptsTree/ScriptNodeParser';
-import { INode, NodeType } from '@/presentation/components/Scripts/ScriptsTree/SelectableTree/Node/INode';
+    parseAllCategories } from '@/presentation/components/Scripts/View/ScriptsTree/ScriptNodeParser';
+import { INode, NodeType } from '@/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/INode';
 import { IScript } from '@/domain/IScript';
 import { ICategory } from '@/domain/ICategory';
 import { CategoryStub } from '@tests/unit/stubs/CategoryStub';
diff --git a/tests/unit/presentation/components/Scripts/ScriptsTree/SelectableTree/LiquorTree/NodeWrapper/NodePredicateFilter.spec.ts b/tests/unit/presentation/components/Scripts/View/Tree/SelectableTree/LiquorTree/NodeWrapper/NodePredicateFilter.spec.ts
similarity index 93%
rename from tests/unit/presentation/components/Scripts/ScriptsTree/SelectableTree/LiquorTree/NodeWrapper/NodePredicateFilter.spec.ts
rename to tests/unit/presentation/components/Scripts/View/Tree/SelectableTree/LiquorTree/NodeWrapper/NodePredicateFilter.spec.ts
index a1d1f283..5234313f 100644
--- a/tests/unit/presentation/components/Scripts/ScriptsTree/SelectableTree/LiquorTree/NodeWrapper/NodePredicateFilter.spec.ts
+++ b/tests/unit/presentation/components/Scripts/View/Tree/SelectableTree/LiquorTree/NodeWrapper/NodePredicateFilter.spec.ts
@@ -1,7 +1,7 @@
 import 'mocha';
 import { expect } from 'chai';
-import { NodeType, INode } from '@/presentation/components/Scripts/ScriptsTree/SelectableTree/Node/INode';
-import { NodePredicateFilter } from '@/presentation/components/Scripts/ScriptsTree/SelectableTree/LiquorTree/NodeWrapper/NodePredicateFilter';
+import { NodeType, INode } from '@/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/INode';
+import { NodePredicateFilter } from '@/presentation/components/Scripts/View/ScriptsTree/SelectableTree/LiquorTree/NodeWrapper/NodePredicateFilter';
 import { ILiquorTreeExistingNode } from 'liquor-tree';
 
 describe('NodePredicateFilter', () => {
diff --git a/tests/unit/presentation/components/Scripts/ScriptsTree/SelectableTree/LiquorTree/NodeWrapper/NodeStateUpdater.spec.ts b/tests/unit/presentation/components/Scripts/View/Tree/SelectableTree/LiquorTree/NodeWrapper/NodeStateUpdater.spec.ts
similarity index 97%
rename from tests/unit/presentation/components/Scripts/ScriptsTree/SelectableTree/LiquorTree/NodeWrapper/NodeStateUpdater.spec.ts
rename to tests/unit/presentation/components/Scripts/View/Tree/SelectableTree/LiquorTree/NodeWrapper/NodeStateUpdater.spec.ts
index ccb37f52..f9e6713c 100644
--- a/tests/unit/presentation/components/Scripts/ScriptsTree/SelectableTree/LiquorTree/NodeWrapper/NodeStateUpdater.spec.ts
+++ b/tests/unit/presentation/components/Scripts/View/Tree/SelectableTree/LiquorTree/NodeWrapper/NodeStateUpdater.spec.ts
@@ -1,8 +1,8 @@
 import 'mocha';
 import { expect } from 'chai';
 import { ILiquorTreeNode } from 'liquor-tree';
-import { NodeType } from '@/presentation/components/Scripts/ScriptsTree/SelectableTree/Node/INode';
-import { getNewState } from '@/presentation/components/Scripts/ScriptsTree/SelectableTree/LiquorTree/NodeWrapper/NodeStateUpdater';
+import { NodeType } from '@/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/INode';
+import { getNewState } from '@/presentation/components/Scripts/View/ScriptsTree/SelectableTree/LiquorTree/NodeWrapper/NodeStateUpdater';
 
 describe('NodeStateUpdater', () => {
     describe('getNewState', () => {
diff --git a/tests/unit/presentation/components/Scripts/ScriptsTree/SelectableTree/LiquorTree/NodeWrapper/NodeTranslator.spec.ts b/tests/unit/presentation/components/Scripts/View/Tree/SelectableTree/LiquorTree/NodeWrapper/NodeTranslator.spec.ts
similarity index 96%
rename from tests/unit/presentation/components/Scripts/ScriptsTree/SelectableTree/LiquorTree/NodeWrapper/NodeTranslator.spec.ts
rename to tests/unit/presentation/components/Scripts/View/Tree/SelectableTree/LiquorTree/NodeWrapper/NodeTranslator.spec.ts
index cb37e1c1..0adc26e7 100644
--- a/tests/unit/presentation/components/Scripts/ScriptsTree/SelectableTree/LiquorTree/NodeWrapper/NodeTranslator.spec.ts
+++ b/tests/unit/presentation/components/Scripts/View/Tree/SelectableTree/LiquorTree/NodeWrapper/NodeTranslator.spec.ts
@@ -1,8 +1,8 @@
 import 'mocha';
 import { expect } from 'chai';
-import { NodeType, INode } from '@/presentation/components/Scripts/ScriptsTree/SelectableTree/Node/INode';
+import { NodeType, INode } from '@/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/INode';
 import { ILiquorTreeExistingNode, ILiquorTreeNewNode, ILiquorTreeNodeData, ICustomLiquorTreeData } from 'liquor-tree';
-import { convertExistingToNode, toNewLiquorTreeNode } from '@/presentation/components/Scripts/ScriptsTree/SelectableTree/LiquorTree/NodeWrapper/NodeTranslator';
+import { convertExistingToNode, toNewLiquorTreeNode } from '@/presentation/components/Scripts/View/ScriptsTree/SelectableTree/LiquorTree/NodeWrapper/NodeTranslator';
 
 describe('NodeTranslator', () => {
     it('convertExistingToNode', () => {
diff --git a/tests/unit/presentation/components/Scripts/ScriptsTree/SelectableTree/Node/Reverter/CategoryReverter.spec.ts b/tests/unit/presentation/components/Scripts/View/Tree/SelectableTree/Node/Reverter/CategoryReverter.spec.ts
similarity index 97%
rename from tests/unit/presentation/components/Scripts/ScriptsTree/SelectableTree/Node/Reverter/CategoryReverter.spec.ts
rename to tests/unit/presentation/components/Scripts/View/Tree/SelectableTree/Node/Reverter/CategoryReverter.spec.ts
index 592f25a1..0cfb2720 100644
--- a/tests/unit/presentation/components/Scripts/ScriptsTree/SelectableTree/Node/Reverter/CategoryReverter.spec.ts
+++ b/tests/unit/presentation/components/Scripts/View/Tree/SelectableTree/Node/Reverter/CategoryReverter.spec.ts
@@ -1,7 +1,7 @@
 import 'mocha';
 import { expect } from 'chai';
-import { CategoryReverter } from '@/presentation/components/Scripts/ScriptsTree/SelectableTree/Node/Reverter/CategoryReverter';
-import { getCategoryNodeId } from '@/presentation/components/Scripts/ScriptsTree/ScriptNodeParser';
+import { CategoryReverter } from '@/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/Reverter/CategoryReverter';
+import { getCategoryNodeId } from '@/presentation/components/Scripts/View/ScriptsTree/ScriptNodeParser';
 import { SelectedScript } from '@/application/Context/State/Selection/SelectedScript';
 import { UserSelection } from '@/application/Context/State/Selection/UserSelection';
 import { CategoryStub } from '@tests/unit/stubs/CategoryStub';
diff --git a/tests/unit/presentation/components/Scripts/ScriptsTree/SelectableTree/Node/Reverter/ReverterFactory.spec.ts b/tests/unit/presentation/components/Scripts/View/Tree/SelectableTree/Node/Reverter/ReverterFactory.spec.ts
similarity index 80%
rename from tests/unit/presentation/components/Scripts/ScriptsTree/SelectableTree/Node/Reverter/ReverterFactory.spec.ts
rename to tests/unit/presentation/components/Scripts/View/Tree/SelectableTree/Node/Reverter/ReverterFactory.spec.ts
index 1d827f73..22099225 100644
--- a/tests/unit/presentation/components/Scripts/ScriptsTree/SelectableTree/Node/Reverter/ReverterFactory.spec.ts
+++ b/tests/unit/presentation/components/Scripts/View/Tree/SelectableTree/Node/Reverter/ReverterFactory.spec.ts
@@ -1,11 +1,12 @@
 import 'mocha';
 import { expect } from 'chai';
-import { INode, NodeType } from '@/presentation/components/Scripts/ScriptsTree/SelectableTree/Node/INode';
-import {
-    getReverter } from '@/presentation/components/Scripts/ScriptsTree/SelectableTree/Node/Reverter/ReverterFactory';
-import { ScriptReverter } from '@/presentation/components/Scripts/ScriptsTree/SelectableTree/Node/Reverter/ScriptReverter';
-import { CategoryReverter } from '@/presentation/components/Scripts/ScriptsTree/SelectableTree/Node/Reverter/CategoryReverter';
-import { getScriptNodeId, getCategoryNodeId } from '@/presentation/components/Scripts/ScriptsTree/ScriptNodeParser';
+import { INode, NodeType } from '@/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/INode';
+// tslint:disable-next-line:max-line-length
+import { getReverter } from '@/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/Reverter/ReverterFactory';
+import { ScriptReverter } from '@/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/Reverter/ScriptReverter';
+import { CategoryReverter } from '@/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/Reverter/CategoryReverter';
+// tslint:disable-next-line:max-line-length
+import { getScriptNodeId, getCategoryNodeId } from '@/presentation/components/Scripts/View/ScriptsTree/ScriptNodeParser';
 import { CategoryCollectionStub } from '@tests/unit/stubs/CategoryCollectionStub';
 import { CategoryStub } from '@tests/unit/stubs/CategoryStub';
 import { ScriptStub } from '@tests/unit/stubs/ScriptStub';
diff --git a/tests/unit/presentation/components/Scripts/ScriptsTree/SelectableTree/Node/Reverter/ScriptReverter.spec.ts b/tests/unit/presentation/components/Scripts/View/Tree/SelectableTree/Node/Reverter/ScriptReverter.spec.ts
similarity index 97%
rename from tests/unit/presentation/components/Scripts/ScriptsTree/SelectableTree/Node/Reverter/ScriptReverter.spec.ts
rename to tests/unit/presentation/components/Scripts/View/Tree/SelectableTree/Node/Reverter/ScriptReverter.spec.ts
index 920f6bd1..19addf98 100644
--- a/tests/unit/presentation/components/Scripts/ScriptsTree/SelectableTree/Node/Reverter/ScriptReverter.spec.ts
+++ b/tests/unit/presentation/components/Scripts/View/Tree/SelectableTree/Node/Reverter/ScriptReverter.spec.ts
@@ -1,7 +1,7 @@
 import 'mocha';
 import { expect } from 'chai';
-import { ScriptReverter } from '@/presentation/components/Scripts/ScriptsTree/SelectableTree/Node/Reverter/ScriptReverter';
-import { getScriptNodeId } from '@/presentation/components/Scripts/ScriptsTree/ScriptNodeParser';
+import { ScriptReverter } from '@/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/Reverter/ScriptReverter';
+import { getScriptNodeId } from '@/presentation/components/Scripts/View/ScriptsTree/ScriptNodeParser';
 import { UserSelection } from '@/application/Context/State/Selection/UserSelection';
 import { SelectedScript } from '@/application/Context/State/Selection/SelectedScript';
 import { CategoryCollectionStub } from '@tests/unit/stubs/CategoryCollectionStub';