Add 'Revert All Selection' feature #68

This commit introduces 'Revert: None - Selected' toggle, enabling users
to revert all reversible scripts with a single action, improving user
safety and control over script effects.

This feature addresses user-reported concerns about the ease of
reverting script changes. This feature should enhance the user experience
by streamlining the revert process along with providing essential
information about script reversibility.

Key changes:

- Add buttons to revert all selected scripts or setting all selected
  scripts to non-revert state.
- Add tooltips with detailed explanations about consequences of
  modifying revert states, includinginformation about irreversible
  script changes.

Supporting changes:

- Align items on top menu vertically for better visual consistency.
- Rename `SelectionType` to `RecommendationStatusType` for more clarity.
- Rename `IReverter` to `Reverter` to move away from `I` prefix
  convention.
- The `.script` CSS class was duplicated in `TheScriptsView.vue` and
  `TheScriptsArea.vue`, leading to style collisions in the development
  environment. The class has been renamed to component-specific classes
  to avoid such issues in the future.

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

@@ -29,7 +29,6 @@ $gap: 0.25rem;
 .list {
   font-family: $font-normal;
   display: flex;
-  align-items: center;
   :deep(.items) {
     > * + *::before {
       content: '|';

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

@@ -4,33 +4,31 @@ import { scrambledEqual } from '@/application/Common/Array';
 import { ICategoryCollection } from '@/domain/ICategoryCollection';
 import { ReadonlyScriptSelection, ScriptSelection } from '@/application/Context/State/Selection/Script/ScriptSelection';
 import { SelectedScript } from '@/application/Context/State/Selection/Script/SelectedScript';
+import { RecommendationStatusType } from './RecommendationStatusType';
 
-export enum SelectionType {
-  Standard,
-  Strict,
-  All,
-  None,
-  Custom,
-}
-
-export function setCurrentSelectionType(type: SelectionType, context: SelectionMutationContext) {
-  if (type === SelectionType.Custom) {
+export function setCurrentRecommendationStatus(
+  type: RecommendationStatusType,
+  context: SelectionMutationContext,
+) {
+  if (type === RecommendationStatusType.Custom) {
     throw new Error('Cannot select custom type.');
   }
   const selector = selectors.get(type);
   if (!selector) {
-    throw new Error(`Cannot handle the type: ${SelectionType[type]}`);
+    throw new Error(`Cannot handle the type: ${RecommendationStatusType[type]}`);
   }
   selector.select(context);
 }
 
-export function getCurrentSelectionType(context: SelectionCheckContext): SelectionType {
+export function getCurrentRecommendationStatus(
+  context: SelectionCheckContext,
+): RecommendationStatusType {
   for (const [type, selector] of selectors.entries()) {
     if (selector.isSelected(context)) {
       return type;
     }
   }
-  return SelectionType.Custom;
+  return RecommendationStatusType.Custom;
 }
 
 export interface SelectionCheckContext {
@@ -43,19 +41,19 @@ export interface SelectionMutationContext {
   readonly collection: ICategoryCollection,
 }
 
-interface SelectionTypeHandler {
+interface RecommendationStatusTypeHandler {
   isSelected: (context: SelectionCheckContext) => boolean;
   select: (context: SelectionMutationContext) => void;
 }
 
-const selectors = new Map<SelectionType, SelectionTypeHandler>([
-  [SelectionType.None, {
+const selectors = new Map<RecommendationStatusType, RecommendationStatusTypeHandler>([
+  [RecommendationStatusType.None, {
     select: ({ selection }) => selection.deselectAll(),
     isSelected: ({ selection }) => 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: ({ selection }) => selection.selectAll(),
     isSelected: (
       { selection, collection },
@@ -65,7 +63,7 @@ const selectors = new Map<SelectionType, SelectionTypeHandler>([
 
 function getRecommendationLevelSelector(
   level: RecommendationLevel,
-): SelectionTypeHandler {
+): RecommendationStatusTypeHandler {
   return {
     select: (context) => selectOnly(level, context),
     isSelected: (context) => hasAllSelectedLevelOf(level, context),

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/Recommendation/TheRecommendationSelector.vue

@@ -4,11 +4,11 @@
       <!-- None -->
       <MenuOptionListItem
         label="None"
-        :enabled="currentSelection !== SelectionType.None"
-        @click="selectType(SelectionType.None)"
+        :enabled="currentRecommendationStatusType !== RecommendationStatusType.None"
+        @click="selectRecommendationStatusType(RecommendationStatusType.None)"
       />
       <template #tooltip>
-        <SelectionTypeDocumentation
+        <RecommendationDocumentation
           :privacy-rating="0"
           description="Deselects all scripts. Good starting point to review and select individual tweaks."
           recommendation="Recommended for users who prefer total control over changes. It allows you to examine and select only the tweaks you require."
@@ -20,11 +20,11 @@
     <TooltipWrapper>
       <MenuOptionListItem
         label="Standard"
-        :enabled="currentSelection !== SelectionType.Standard"
-        @click="selectType(SelectionType.Standard)"
+        :enabled="currentRecommendationStatusType !== RecommendationStatusType.Standard"
+        @click="selectRecommendationStatusType(RecommendationStatusType.Standard)"
       />
       <template #tooltip>
-        <SelectionTypeDocumentation
+        <RecommendationDocumentation
           :privacy-rating="2"
           description="Provides a balanced approach between privacy and functionality."
           recommendation="Recommended for most users who wish to improve privacy with best-practices without affecting stability."
@@ -41,11 +41,11 @@
     <TooltipWrapper>
       <MenuOptionListItem
         label="Strict"
-        :enabled="currentSelection !== SelectionType.Strict"
-        @click="selectType(SelectionType.Strict)"
+        :enabled="currentRecommendationStatusType !== RecommendationStatusType.Strict"
+        @click="selectRecommendationStatusType(RecommendationStatusType.Strict)"
       />
       <template #tooltip>
-        <SelectionTypeDocumentation
+        <RecommendationDocumentation
           :privacy-rating="3"
           description="Focuses heavily on privacy by disabling some non-critical functions that could leak data."
           recommendation="Recommended for advanced users who prioritize privacy over non-essential functionality."
@@ -66,11 +66,11 @@
     <TooltipWrapper>
       <MenuOptionListItem
         label="All"
-        :enabled="currentSelection !== SelectionType.All"
-        @click="selectType(SelectionType.All)"
+        :enabled="currentRecommendationStatusType !== RecommendationStatusType.All"
+        @click="selectRecommendationStatusType(RecommendationStatusType.All)"
       />
       <template #tooltip>
-        <SelectionTypeDocumentation
+        <RecommendationDocumentation
           :privacy-rating="4"
           description="Strongest privacy by disabling any functionality that may risk data exposure."
           recommendation="Recommended for extreme use cases where no data leak is acceptable like crime labs."
@@ -93,15 +93,16 @@ import TooltipWrapper from '@/presentation/components/Shared/TooltipWrapper.vue'
 import { ICategoryCollection } from '@/domain/ICategoryCollection';
 import MenuOptionList from '../MenuOptionList.vue';
 import MenuOptionListItem from '../MenuOptionListItem.vue';
-import { SelectionType, setCurrentSelectionType, getCurrentSelectionType } from './SelectionTypeHandler';
-import SelectionTypeDocumentation from './SelectionTypeDocumentation.vue';
+import { setCurrentRecommendationStatus, getCurrentRecommendationStatus } from './RecommendationStatusHandler';
+import { RecommendationStatusType } from './RecommendationStatusType';
+import RecommendationDocumentation from './RecommendationDocumentation.vue';
 
 export default defineComponent({
   components: {
     MenuOptionList,
     MenuOptionListItem,
     TooltipWrapper,
-    SelectionTypeDocumentation,
+    RecommendationDocumentation,
   },
   setup() {
     const {
@@ -111,22 +112,22 @@ export default defineComponent({
 
     const currentCollection = computed<ICategoryCollection>(() => currentState.value.collection);
 
-    const currentSelectionType = computed<SelectionType>({
-      get: () => getCurrentSelectionType({
+    const currentRecommendationStatusType = computed<RecommendationStatusType>({
+      get: () => getCurrentRecommendationStatus({
         selection: currentSelection.value.scripts,
         collection: currentCollection.value,
       }),
-      set: (type: SelectionType) => {
-        selectType(type);
+      set: (type: RecommendationStatusType) => {
+        selectRecommendationStatusType(type);
       },
     });
 
-    function selectType(type: SelectionType) {
-      if (currentSelectionType.value === type) {
+    function selectRecommendationStatusType(type: RecommendationStatusType) {
+      if (currentRecommendationStatusType.value === type) {
         return;
       }
       modifyCurrentSelection((mutableSelection) => {
-        setCurrentSelectionType(type, {
+        setCurrentRecommendationStatus(type, {
           selection: mutableSelection.scripts,
           collection: currentCollection.value,
         });
@@ -134,9 +135,9 @@ export default defineComponent({
     }
 
     return {
-      SelectionType,
-      currentSelection: currentSelectionType,
-      selectType,
+      RecommendationStatusType,
+      currentRecommendationStatusType,
+      selectRecommendationStatusType,
     };
   },
 });

src/presentation/components/Scripts/Menu/Revert/RevertStatusDocumentation.vue

@@ -0,0 +1,87 @@
+<template>
+  <div>
+    <div class="sections">
+      <section class="description">
+        <AppIcon :icon="icon" class="icon" />
+        <span class="text">{{ description }}</span>
+      </section>
+      <section
+        v-if="considerations.length > 0"
+        class="considerations"
+      >
+        <AppIcon icon="triangle-exclamation" class="icon" />
+        <span class="text">
+          Considerations:
+          <ul>
+            <li
+              v-for="considerationItem in considerations"
+              :key="considerationItem"
+            >
+              {{ considerationItem }}
+            </li>
+          </ul>
+        </span>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { PropType, defineComponent } from 'vue';
+import AppIcon from '@/presentation/components/Shared/Icon/AppIcon.vue';
+import { IconName } from '@/presentation/components/Shared/Icon/IconName';
+
+export default defineComponent({
+  components: {
+    AppIcon,
+  },
+  props: {
+    icon: {
+      type: String as PropType<IconName>,
+      required: true,
+    },
+    description: {
+      type: String,
+      required: true,
+    },
+    considerations: {
+      type: Array as PropType<ReadonlyArray<string>>,
+      required: true,
+    },
+  },
+});
+</script>
+
+<style scoped lang="scss">
+@use "@/presentation/assets/styles/main" as *;
+
+ul {
+  @include reset-ul;
+  padding-left: 0em;
+  margin-top: 0.25em;
+  list-style: disc;
+  li {
+    line-height: 1.2em;
+  }
+}
+.sections {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75em;
+  .considerations {
+    display: flex;
+    gap: 0.5em;
+    .icon {
+      color: $color-caution;
+    }
+  }
+  .description {
+    display: flex;
+    align-items: center;
+    gap: 0.5em;
+    .icon {
+      color: $color-success;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,79 @@
+import { SelectedScript } from '@/application/Context/State/Selection/Script/SelectedScript';
+import { ReadonlyScriptSelection, ScriptSelection } from '@/application/Context/State/Selection/Script/ScriptSelection';
+import { ScriptSelectionChange } from '@/application/Context/State/Selection/Script/ScriptSelectionChange';
+import { RevertStatusType } from './RevertStatusType';
+
+export function setCurrentRevertStatus(
+  desiredRevertStatus: boolean,
+  selection: ScriptSelection,
+) {
+  const scriptRevertStatusChanges = getScriptRevertStatusChanges(
+    selection.selectedScripts,
+    desiredRevertStatus,
+  );
+  if (scriptRevertStatusChanges.length === 0) {
+    return;
+  }
+  selection.processChanges({ changes: scriptRevertStatusChanges });
+}
+
+export function getCurrentRevertStatus(
+  selection: ReadonlyScriptSelection,
+): RevertStatusType {
+  const allScriptRevertStatuses = filterReversibleScripts(selection.selectedScripts)
+    .map((selectedScript) => selectedScript.revert);
+  if (!allScriptRevertStatuses.length) {
+    return RevertStatusType.NoReversibleScripts;
+  }
+  if (allScriptRevertStatuses.every((revertStatus) => revertStatus)) {
+    return RevertStatusType.AllScriptsReverted;
+  }
+  if (allScriptRevertStatuses.every((revertStatus) => !revertStatus)) {
+    return RevertStatusType.NoScriptsReverted;
+  }
+  return RevertStatusType.SomeScriptsReverted;
+}
+
+function getScriptRevertStatusChanges(
+  selectedScripts: readonly SelectedScript[],
+  desiredRevertStatus: boolean,
+): ScriptSelectionChange[] {
+  const reversibleSelectedScripts = filterReversibleScripts(selectedScripts);
+  const selectedScriptsRequiringChange = filterScriptsRequiringRevertStatusChange(
+    reversibleSelectedScripts,
+    desiredRevertStatus,
+  );
+  const revertStatusChanges = mapToScriptSelectionChanges(
+    selectedScriptsRequiringChange,
+    desiredRevertStatus,
+  );
+  return revertStatusChanges;
+}
+
+function filterReversibleScripts(selectedScripts: readonly SelectedScript[]) {
+  return selectedScripts.filter(
+    (selectedScript) => selectedScript.script.canRevert(),
+  );
+}
+
+function filterScriptsRequiringRevertStatusChange(
+  selectedScripts: readonly SelectedScript[],
+  desiredRevertStatus: boolean,
+) {
+  return selectedScripts.filter(
+    (selectedScript) => selectedScript.revert !== desiredRevertStatus,
+  );
+}
+
+function mapToScriptSelectionChanges(
+  scriptsNeedingChange: readonly SelectedScript[],
+  newRevertStatus: boolean,
+): ScriptSelectionChange[] {
+  return scriptsNeedingChange.map((script): ScriptSelectionChange => ({
+    scriptId: script.id,
+    newStatus: {
+      isSelected: true,
+      isReverted: newRevertStatus,
+    },
+  }));
+}

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

@@ -0,0 +1,6 @@
+export enum RevertStatusType {
+  NoReversibleScripts,
+  NoScriptsReverted,
+  SomeScriptsReverted,
+  AllScriptsReverted,
+}

src/presentation/components/Scripts/Menu/Revert/TheRevertSelector.vue

@@ -0,0 +1,145 @@
+<template>
+  <MenuOptionList
+    v-if="!RevertStatusType.NoReversibleScripts"
+    label="Revert"
+  >
+    <!--
+      "None" comes before "Selected" because:
+        - "None" is the default and least impactful state, placed first
+          for safety and user expectations.
+        - Aligns with common UI patterns of 'off' state before 'on'.
+        - Helps prevent accidental actions with potential unwanted effects.
+    -->
+    <!-- None -->
+    <TooltipWrapper>
+      <MenuOptionListItem
+        label="None"
+        :enabled="canSetStatus(RevertStatusType.NoScriptsReverted)"
+        @click="setRevertStatusType(false)"
+      />
+      <template #tooltip>
+        <RevertStatusDocumentation
+          icon="shield"
+          description="Applies all selected scripts to protect your privacy."
+          :considerations="createConsiderationsConditionally({
+            warnNonStandard: (nonStandardCount) =>
+              `${nonStandardCount} selected scripts exceed the 'Standard' recommendation level and can significantly change how your system works.`
+              + ' Review your selections carefully.',
+            warnIrreversibleScripts: (irreversibleCount) =>
+              `${irreversibleCount} selected scripts make irreversible changes (such as privacy cleanup) that cannot be undone.`,
+          })"
+        />
+      </template>
+    </TooltipWrapper>
+    <!-- Selected -->
+    <TooltipWrapper>
+      <MenuOptionListItem
+        label="Selected"
+        :enabled="canSetStatus(RevertStatusType.AllScriptsReverted)"
+        @click="setRevertStatusType(true)"
+      />
+      <template #tooltip>
+        <RevertStatusDocumentation
+          icon="rotate-left"
+          description="Revert selected scripts back to their default settings where possible, balancing system functionality with privacy."
+          :considerations="createConsiderationsConditionally({
+            warnAlways: ['Reverting changes may reduce the level of privacy protection.'],
+            warnIrreversibleScripts: (irreversibleCount) =>
+              `${irreversibleCount} selected scripts make irreversible changes (such as privacy cleanup) and will not be reverted.`,
+          })"
+        />
+      </template>
+    </TooltipWrapper>
+  </MenuOptionList>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent, computed,
+} from 'vue';
+import { injectKey } from '@/presentation/injectionSymbols';
+import TooltipWrapper from '@/presentation/components/Shared/TooltipWrapper.vue';
+import { RecommendationLevel } from '@/domain/RecommendationLevel';
+import { IScript } from '@/domain/IScript';
+import MenuOptionList from '../MenuOptionList.vue';
+import MenuOptionListItem from '../MenuOptionListItem.vue';
+import RevertStatusDocumentation from './RevertStatusDocumentation.vue';
+import { RevertStatusType } from './RevertStatusType';
+import { setCurrentRevertStatus, getCurrentRevertStatus } from './RevertStatusHandler';
+
+export default defineComponent({
+  components: {
+    MenuOptionList,
+    MenuOptionListItem,
+    TooltipWrapper,
+    RevertStatusDocumentation,
+  },
+  setup() {
+    const {
+      currentSelection, modifyCurrentSelection,
+    } = injectKey((keys) => keys.useUserSelectionState);
+
+    const currentRevertStatusType = computed<RevertStatusType>(
+      () => getCurrentRevertStatus(currentSelection.value.scripts),
+    );
+
+    const selectedScripts = computed<readonly IScript[]>(
+      () => currentSelection.value.scripts.selectedScripts.map((s) => s.script),
+    );
+
+    const totalIrreversibleScriptsInSelection = computed<number>(() => {
+      return selectedScripts.value.filter((s) => !s.canRevert()).length;
+    });
+
+    const totalNonStandardScriptsInSelection = computed<number>(() => {
+      return selectedScripts.value.filter((s) => s.level !== RecommendationLevel.Standard).length;
+    });
+
+    function canSetStatus(status: RevertStatusType): boolean {
+      if (currentRevertStatusType.value === RevertStatusType.NoReversibleScripts) {
+        return false;
+      }
+      if (currentRevertStatusType.value === RevertStatusType.SomeScriptsReverted) {
+        return true;
+      }
+      return currentRevertStatusType.value !== status;
+    }
+
+    function setRevertStatusType(revert: boolean) {
+      modifyCurrentSelection((mutableSelection) => {
+        setCurrentRevertStatus(revert, mutableSelection.scripts);
+      });
+    }
+
+    function createConsiderationsConditionally(messages: {
+      readonly warnIrreversibleScripts: (irreversibleCount: number) => string,
+      readonly warnNonStandard?: (nonStandard: number) => string,
+      readonly warnAlways?: string[];
+    }): string[] {
+      const considerations = new Array<string>();
+      if (messages.warnAlways) {
+        considerations.push(...messages.warnAlways);
+      }
+      const irreversibleCount = totalIrreversibleScriptsInSelection.value;
+      if (irreversibleCount !== 0) {
+        considerations.push(messages.warnIrreversibleScripts(irreversibleCount));
+      }
+      if (messages.warnNonStandard) {
+        const nonStandardCount = totalNonStandardScriptsInSelection.value;
+        if (nonStandardCount !== 0) {
+          considerations.push(messages.warnNonStandard(nonStandardCount));
+        }
+      }
+      return considerations;
+    }
+
+    return {
+      RevertStatusType,
+      currentRevertStatusType,
+      setRevertStatusType,
+      canSetStatus,
+      createConsiderationsConditionally,
+    };
+  },
+});
+</script>

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

@@ -1,6 +1,9 @@
 <template>
   <div id="container">
-    <TheSelector class="item" />
+    <div class="item rows">
+      <TheRecommendationSelector class="item" />
+      <TheRevertSelector class="item" />
+    </div>
     <TheOsChanger class="item" />
     <TheViewChanger
       v-if="!isSearching"
@@ -16,15 +19,17 @@ import { injectKey } from '@/presentation/injectionSymbols';
 import { IReadOnlyUserFilter } from '@/application/Context/State/Filter/IUserFilter';
 import { IEventSubscription } from '@/infrastructure/Events/IEventSource';
 import TheOsChanger from './TheOsChanger.vue';
-import TheSelector from './Selector/TheSelector.vue';
 import TheViewChanger from './View/TheViewChanger.vue';
 import { ViewType } from './View/ViewType';
+import TheRecommendationSelector from './Recommendation/TheRecommendationSelector.vue';
+import TheRevertSelector from './Revert/TheRevertSelector.vue';
 
 export default defineComponent({
   components: {
-    TheSelector,
+    TheRecommendationSelector,
     TheOsChanger,
     TheViewChanger,
+    TheRevertSelector,
   },
   emits: {
     /* eslint-disable @typescript-eslint/no-unused-vars */
@@ -81,5 +86,10 @@ $margin-between-lines: 7px;
       justify-content: flex-end;
     }
   }
+  .rows {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
 }
 </style>