Add revert all toggle

- Also aligns items on top menu vertically
- Renames SelectionStatus to RecommentationLevel in the top menu to make
  it more clear.
- In App.vue it renames row class to `app__row` to avoid misusage as styles are not scoped in it.
- In ScriptsArea, remove unintended row class refering to global style,
 make styling menu class more verbose and lower bottom margin.
- Change category toggle so its status become reverted when all of its
  reversible scripts are reverted, before it did not care about
  reversible scripts but required all scripts to be reverted. If a
  category has no reversible scripts, revert toggle returns false.

.github/ISSUE_TEMPLATE/3-feature-request.md

@@ -5,6 +5,7 @@ labels: enhancement
 ---
 
 <!--
+<<<<<<< HEAD
 Thank you for suggesting an idea to improve privacy better 🤗.
 Please fill in as much of the template below as you're able.
 -->
@@ -15,6 +16,16 @@ Please fill in as much of the template below as you're able.
 What are we trying to solve?
 Please add a clear and concise description of the problem you are seeking to solve with this feature request.
 E.g. I'm always frustrated when [...]
+=======
+Thank you for suggesting an idea to make privacy better. 🤗
+Please fill in as much of the template below as you're able.
+-->
+
+### Problem Description
+
+<!--
+Please add a clear and concise description of the problem you are seeking to solve with this feature request. Ex. I'm always frustrated when [...]
+>>>>>>> 6f2a8f8... Add issue template for suggesting new scripts
 -->
 
 ### Proposed solution

src/application/Context/State/Selection/IUserSelection.ts

@@ -12,6 +12,7 @@ export interface IUserSelection {
     addOrUpdateAllInCategory(categoryId: number, revert: boolean): void;
     addSelectedScript(scriptId: string, revert: boolean): void;
     addOrUpdateSelectedScript(scriptId: string, revert: boolean): void;
+    addOrUpdateAll(scripts: readonly ISelectedScript[]): void;
     removeSelectedScript(scriptId: string): void;
     selectOnly(scripts: ReadonlyArray<IScript>): void;
     isSelected(scriptId: string): boolean;

src/application/Context/State/Selection/UserSelection.ts

@@ -57,18 +57,8 @@ export class UserSelection implements IUserSelection {
     public addOrUpdateAllInCategory(categoryId: number, revert: boolean = false): void {
         const category = this.collection.findCategory(categoryId);
         const scriptsToAddOrUpdate = category.getAllScriptsRecursively()
-            .filter((script) =>
-                !this.scripts.exists(script.id)
-                    || this.scripts.getById(script.id).revert !== revert,
-            );
-        if (!scriptsToAddOrUpdate.length) {
-            return;
-        }
-        for (const script of scriptsToAddOrUpdate) {
-            const selectedScript = new SelectedScript(script, revert);
-            this.scripts.addOrUpdateItem(selectedScript);
-        }
-        this.changed.notify(this.scripts.getItems());
+            .map((script) => new SelectedScript(script, revert));
+        this.addOrUpdateAll(scriptsToAddOrUpdate);
     }
 
     public addSelectedScript(scriptId: string, revert: boolean): void {
@@ -139,4 +129,22 @@ export class UserSelection implements IUserSelection {
         }
         this.changed.notify(this.scripts.getItems());
     }
+
+    public addOrUpdateAll(scripts: readonly SelectedScript[]): void {
+        if (!scripts.length) {
+            return;
+        }
+        const scriptsToAddOrUpdate = scripts
+            .filter((script) =>
+                !this.scripts.exists(script.id)
+                    || this.scripts.getById(script.id).revert !== script.revert,
+            );
+        if (!scriptsToAddOrUpdate.length) {
+            return;
+        }
+        for (const script of scriptsToAddOrUpdate) {
+            this.scripts.addOrUpdateItem(script);
+        }
+        this.changed.notify(this.scripts.getItems());
+    }
 }

src/domain/UserScriptPosition.ts

@@ -0,0 +1,8 @@
+/* Represents preferred position in generated user script */
+export class ScriptPosition {
+    constructor(
+        public readonly positionInFile: number,
+        public readonly positionInCategory: number) {
+
+    }
+}

src/presentation/components/App.vue

@@ -1,10 +1,10 @@
 <template>
   <div id="app">
       <div class="wrapper">
-        <TheHeader class="row" />
-        <TheSearchBar class="row" />
-        <TheScriptArea class="row" />
-        <TheCodeButtons class="row code-buttons" />
+        <TheHeader class="app__row" />
+        <TheSearchBar class="app__row" />
+        <TheScriptArea class="app__row" />
+        <TheCodeButtons class="app__row code-buttons" />
         <TheFooter />
       </div>
    </div>
@@ -58,7 +58,7 @@ body {
     padding: 2%;
     display:flex;
     flex-direction: column;
-    .row {
+    .app__row {
       margin-bottom: 10px;
     }
     .code-buttons {

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

@@ -9,16 +9,12 @@
 
 <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 },
 })
-<<<<<<< HEAD:src/presentation/components/Scripts/Menu/MenuOptionListItem.vue
 export default class MenuOptionListItem extends Vue {
-=======
-export default class MenuOption extends Vue {
->>>>>>> 25de66d... Fix excessive highlighting on hover:src/presentation/components/Scripts/Menu/MenuOption.vue
   @Prop() public enabled: boolean;
   @Prop() public label: string;
   @Emit('click') public onClicked() { return; }

src/presentation/components/Scripts/Menu/Selector/SelectionTypeHandler.ts → src/presentation/components/Scripts/Menu/Recommendation/RecommendationStatusHandler.ts

@@ -3,33 +3,26 @@ import { ISelectedScript } from '@/application/Context/State/Selection/ISelected
 import { RecommendationLevel } from '@/domain/RecommendationLevel';
 import { scrambledEqual } from '@/application/Common/Array';
 import { ICategoryCollectionState } from '@/application/Context/State/ICategoryCollectionState';
+import { RecommendationStatusType } from './RecommendationStatusType';
 
-export enum SelectionType {
-    Standard,
-    Strict,
-    All,
-    None,
-    Custom,
-}
-
-export class SelectionTypeHandler {
+export class RecommendationStatusHandler {
     constructor(private readonly state: ICategoryCollectionState) {
         if (!state) { throw new Error('undefined state'); }
     }
-    public selectType(type: SelectionType) {
-        if (type === SelectionType.Custom) {
+    public setRecommendationStatusType(type: RecommendationStatusType) {
+        if (type === RecommendationStatusType.Custom) {
             throw new Error('cannot select custom type');
         }
         const selector = selectors.get(type);
         selector.select(this.state);
     }
-    public getCurrentSelectionType(): SelectionType {
+    public getCurrentRecommendationStatusType(): RecommendationStatusType {
         for (const [type, selector] of Array.from(selectors.entries())) {
             if (selector.isSelected(this.state)) {
                 return type;
             }
         }
-        return SelectionType.Custom;
+        return RecommendationStatusType.Custom;
     }
 }
 
@@ -38,16 +31,16 @@ interface ISingleTypeHandler {
     select: (state: ICategoryCollectionState) => void;
 }
 
-const selectors = new Map<SelectionType, ISingleTypeHandler>([
-    [SelectionType.None, {
+const selectors = new Map<RecommendationStatusType, ISingleTypeHandler>([
+    [RecommendationStatusType.None, {
         select: (state) =>
             state.selection.deselectAll(),
         isSelected: (state) =>
             state.selection.selectedScripts.length === 0,
     }],
-    [SelectionType.Standard, getRecommendationLevelSelector(RecommendationLevel.Standard)],
-    [SelectionType.Strict, getRecommendationLevelSelector(RecommendationLevel.Strict)],
-    [SelectionType.All, {
+    [RecommendationStatusType.Standard, getRecommendationLevelSelector(RecommendationLevel.Standard)],
+    [RecommendationStatusType.Strict, getRecommendationLevelSelector(RecommendationLevel.Strict)],
+    [RecommendationStatusType.All, {
         select: (state) =>
             state.selection.selectAll(),
         isSelected: (state) =>

src/presentation/components/Scripts/Menu/Recommendation/RecommendationStatusType.ts

@@ -0,0 +1,7 @@
+export enum RecommendationStatusType {
+    Standard,
+    Strict,
+    All,
+    None,
+    Custom,
+}

src/presentation/components/Scripts/Menu/Selector/TheSelector.vue → src/presentation/components/Scripts/Menu/Recommendation/TheRecommendationSelector.vue

@@ -2,31 +2,31 @@
     <MenuOptionList label="Select">
         <MenuOptionListItem
             label="None"
-            :enabled="this.currentSelection !== SelectionType.None"
-            @click="selectType(SelectionType.None)"
+            :enabled="this.currentSelection !== RecommendationStatusType.None"
+            @click="setRecommendationStatusType(RecommendationStatusType.None)"
             v-tooltip=" 'Deselect all selected scripts.<br/>' +
                         '💡 Good start to dive deeper into tweaks and select only what you want.'"
             />
         <MenuOptionListItem
             label="Standard"
-            :enabled="this.currentSelection !== SelectionType.Standard"
-            @click="selectType(SelectionType.Standard)"
+            :enabled="this.currentSelection !== RecommendationStatusType.Standard"
+            @click="setRecommendationStatusType(RecommendationStatusType.Standard)"
             v-tooltip=" '🛡️ Balanced for privacy and functionality.<br/>' +
                         'OS and applications will function normally.<br/>' +
                         '💡 Recommended for everyone'"
             />
         <MenuOptionListItem
             label="Strict"
-            :enabled="this.currentSelection !== SelectionType.Strict"
-            @click="selectType(SelectionType.Strict)"
+            :enabled="this.currentSelection !== RecommendationStatusType.Strict"
+            @click="setRecommendationStatusType(RecommendationStatusType.Strict)"
             v-tooltip=" '🚫 Stronger privacy, disables risky functions that may leak your data.<br/>' +
                         '⚠️ Double check to remove scripts where you would trade functionality for privacy<br/>' +
                         '💡 Recommended for daily users that prefers more privacy over non-essential functions'"
             />
         <MenuOptionListItem
             label="All"
-            :enabled="this.currentSelection !== SelectionType.All"
-            @click="selectType(SelectionType.All)"
+            :enabled="this.currentSelection !== RecommendationStatusType.All"
+            @click="setRecommendationStatusType(RecommendationStatusType.All)"
             v-tooltip=" '🔒 Strongest privacy, disabling any functionality that may leak your data.<br/>' +
                         '🛑 Not designed for daily users, it will break important functionalities.<br/>' +
                         '💡 Only recommended for extreme use-cases like crime labs where no leak is acceptable'"
@@ -35,40 +35,41 @@
 </template>
 
 <script lang="ts">
+import MenuOptionList from '../MenuOptionList.vue';
+import MenuOptionListItem from '../MenuOptionListItem.vue';
 import { Component } from 'vue-property-decorator';
 import { StatefulVue } from '@/presentation/components/Shared/StatefulVue';
 import { ICategoryCollectionState } from '@/application/Context/State/ICategoryCollectionState';
-import { SelectionType, SelectionTypeHandler } from './SelectionTypeHandler';
-import MenuOptionList from './../MenuOptionList.vue';
-import MenuOptionListItem from '../MenuOptionListItem.vue';
+import { RecommendationStatusHandler } from './RecommendationStatusHandler';
+import { RecommendationStatusType } from './RecommendationStatusType';
 
 @Component({
   components: {
     MenuOptionList,
     MenuOptionListItem,
   },
 })
-export default class TheSelector extends StatefulVue {
-    public SelectionType = SelectionType;
-    public currentSelection = SelectionType.None;
-    private selectionTypeHandler: SelectionTypeHandler;
+export default class TheRecommendationSelector extends StatefulVue {
+    public RecommendationStatusType = RecommendationStatusType;
+    public currentSelection = RecommendationStatusType.None;
+    private selectionStatusTypeHandler: RecommendationStatusHandler;
 
-    public async selectType(type: SelectionType) {
+    public setRecommendationStatusType(type: RecommendationStatusType) {
         if (this.currentSelection === type) {
             return;
         }
-        this.selectionTypeHandler.selectType(type);
+        this.selectionStatusTypeHandler.setRecommendationStatusType(type);
     }
 
     protected handleCollectionState(newState: ICategoryCollectionState): void {
         this.events.unsubscribeAll();
-        this.selectionTypeHandler = new SelectionTypeHandler(newState);
+        this.selectionStatusTypeHandler = new RecommendationStatusHandler(newState);
         this.updateSelections();
         this.events.register(newState.selection.changed.on(() => this.updateSelections()));
     }
 
     private updateSelections() {
-       this.currentSelection = this.selectionTypeHandler.getCurrentSelectionType();
+       this.currentSelection = this.selectionStatusTypeHandler.getCurrentRecommendationStatusType();
     }
 }
 

src/presentation/components/Scripts/Menu/Revert/RevertStatusHandler.ts

@@ -0,0 +1,29 @@
+import { SelectedScript } from '@/application/Context/State/Selection/SelectedScript';
+import { RevertStatusType } from './RevertStatusType';
+import { IUserSelection } from '@/application/Context/State/Selection/IUserSelection';
+
+export class RevertStatusHandler {
+    public getCurrentStatusType(scripts: readonly SelectedScript[]): RevertStatusType {
+        const allRevertStatuses = getReversibleScripts(scripts)
+            .map((script) => script.revert);
+        if (!allRevertStatuses.length) {
+            return RevertStatusType.NothingIsReversible;
+        }
+        if (allRevertStatuses.every((c) => c === true)) {
+            return RevertStatusType.AllReverted;
+        }
+        if (allRevertStatuses.every((c) => c === false)) {
+            return RevertStatusType.NoneReverted;
+        }
+        return RevertStatusType.SomeReverted;
+    }
+    public setType(revert: boolean, selection: IUserSelection) {
+        const scriptsToChange = getReversibleScripts(selection.selectedScripts)
+            .map((script) => new SelectedScript(script.script, revert));
+        selection.addOrUpdateAll(scriptsToChange);
+    }
+}
+
+function getReversibleScripts(scripts: readonly SelectedScript[]) {
+    return scripts.filter((script) => script.script.canRevert());
+}

src/presentation/components/Scripts/Menu/Revert/RevertStatusType.ts

@@ -0,0 +1,6 @@
+export enum RevertStatusType {
+    NothingIsReversible,
+    NoneReverted,
+    SomeReverted,
+    AllReverted,
+}