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/application/Context/State/Selection/Script/DebouncedScriptSelection.ts

@@ -81,9 +81,7 @@ export class DebouncedScriptSelection implements ScriptSelection {
   }
 
   public selectOnly(scripts: readonly IScript[]): void {
-    if (scripts.length === 0) {
+    assertNonEmptyScriptSelection(scripts);
-      throw new Error('Provided script array is empty. To deselect all scripts, please use the deselectAll() method instead.');
-    }
     this.processChanges({
       changes: [
         ...getScriptIdsToBeDeselected(this.scripts, scripts)
@@ -147,6 +145,12 @@ export class DebouncedScriptSelection implements ScriptSelection {
   }
 }
 
+function assertNonEmptyScriptSelection(selectedItems: readonly IScript[]) {
+  if (selectedItems.length === 0) {
+    throw new Error('Provided script array is empty. To deselect all scripts, please use the deselectAll() method instead.');
+  }
+}
+
 function getScriptIdsToBeSelected(
   existingItems: ReadonlyRepository<string, SelectedScript>,
   desiredScripts: readonly IScript[],

src/application/Context/State/Selection/Script/ScriptSelectionChange.ts

@@ -3,6 +3,7 @@ export type ScriptSelectionStatus = {
   readonly isReverted: boolean;
 } | {
   readonly isSelected: false;
+  readonly isReverted?: undefined;
 };
 
 export interface ScriptSelectionChange {

src/presentation/assets/icons/rotate-left.svg

@@ -0,0 +1 @@
+<!-- Source: Font Awesome 6 --><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M48.5 224H40c-13.3 0-24-10.7-24-24V72c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2L98.6 96.6c87.6-86.5 228.7-86.2 315.8 1c87.5 87.5 87.5 229.3 0 316.8s-229.3 87.5-316.8 0c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0c62.5 62.5 163.8 62.5 226.3 0s62.5-163.8 0-226.3c-62.2-62.2-162.7-62.5-225.3-1L185 183c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8H48.5z"/></svg>

src/presentation/assets/icons/shield.svg

@@ -0,0 +1 @@
+<!-- Source: Font Awesome 6 --><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 0c4.6 0 9.2 1 13.4 2.9L457.7 82.8c22 9.3 38.4 31 38.3 57.2c-.5 99.2-41.3 280.7-213.6 363.2c-16.7 8-36.1 8-52.8 0C57.3 420.7 16.5 239.2 16 140c-.1-26.2 16.3-47.9 38.3-57.2L242.7 2.9C246.8 1 251.4 0 256 0z"/></svg>

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 {
+export function setCurrentRecommendationStatus(
-  Standard,
+  type: RecommendationStatusType,
-  Strict,
+  context: SelectionMutationContext,
-  All,
+) {
-  None,
+  if (type === RecommendationStatusType.Custom) {
-  Custom,
-}
-
-export function setCurrentSelectionType(type: SelectionType, context: SelectionMutationContext) {
-  if (type === SelectionType.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>([
+const selectors = new Map<RecommendationStatusType, RecommendationStatusTypeHandler>([
-  [SelectionType.None, {
+  [RecommendationStatusType.None, {
     select: ({ selection }) => selection.deselectAll(),
     isSelected: ({ selection }) => selection.selectedScripts.length === 0,
   }],
-  [SelectionType.Standard, getRecommendationLevelSelector(RecommendationLevel.Standard)],
+  [RecommendationStatusType.Standard, getRecommendationLevelSelector(RecommendationLevel.Standard)],
-  [SelectionType.Strict, getRecommendationLevelSelector(RecommendationLevel.Strict)],
+  [RecommendationStatusType.Strict, getRecommendationLevelSelector(RecommendationLevel.Strict)],
-  [SelectionType.All, {
+  [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"
+        :enabled="currentRecommendationStatusType !== RecommendationStatusType.None"
-        @click="selectType(SelectionType.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"
+        :enabled="currentRecommendationStatusType !== RecommendationStatusType.Standard"
-        @click="selectType(SelectionType.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"
+        :enabled="currentRecommendationStatusType !== RecommendationStatusType.Strict"
-        @click="selectType(SelectionType.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"
+        :enabled="currentRecommendationStatusType !== RecommendationStatusType.All"
-        @click="selectType(SelectionType.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 { setCurrentRecommendationStatus, getCurrentRecommendationStatus } from './RecommendationStatusHandler';
-import SelectionTypeDocumentation from './SelectionTypeDocumentation.vue';
+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>({
+    const currentRecommendationStatusType = computed<RecommendationStatusType>({
-      get: () => getCurrentSelectionType({
+      get: () => getCurrentRecommendationStatus({
         selection: currentSelection.value.scripts,
         collection: currentCollection.value,
       }),
-      set: (type: SelectionType) => {
+      set: (type: RecommendationStatusType) => {
-        selectType(type);
+        selectRecommendationStatusType(type);
       },
     });
 
-    function selectType(type: SelectionType) {
+    function selectRecommendationStatusType(type: RecommendationStatusType) {
-      if (currentSelectionType.value === type) {
+      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,
+      RecommendationStatusType,
-      currentSelection: currentSelectionType,
+      currentRecommendationStatusType,
-      selectType,
+      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>

src/presentation/components/Scripts/TheScriptArea.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="scripts">
+  <div class="script-area">
     <TheScriptsMenu @view-changed="currentView = $event" />
     <HorizontalResizeSlider
       class="row"
@@ -42,9 +42,9 @@ export default defineComponent({
 </script>
 
 <style scoped lang="scss">
-.scripts {
+.script-area {
-  > * + * {
+  display: flex;
-    margin-top: 15px;
+  flex-direction: column;
-  }
+  gap: 6px;
 }
 </style>

src/presentation/components/Scripts/View/TheScriptsView.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="scripts">
+  <div class="scripts-view">
     <template v-if="!isSearching">
       <template v-if="currentView === ViewType.Cards">
         <CardList />
@@ -130,7 +130,7 @@ export default defineComponent({
 
 $margin-inner: 4px;
 
-.scripts {
+.scripts-view {
   margin-top: $margin-inner;
   @media screen and (min-width: $media-vertical-view-breakpoint) {
     // so the current code is always visible

src/presentation/components/Scripts/View/Tree/NodeContent/RevertToggle.vue

@@ -13,9 +13,9 @@ import {
 import { injectKey } from '@/presentation/injectionSymbols';
 import { NodeMetadata } from '@/presentation/components/Scripts/View/Tree/NodeContent/NodeMetadata';
 import { ICategoryCollection } from '@/domain/ICategoryCollection';
-import { IReverter } from './Reverter/IReverter';
 import { getReverter } from './Reverter/ReverterFactory';
 import ToggleSwitch from './ToggleSwitch.vue';
+import type { Reverter } from './Reverter/Reverter';
 
 export default defineComponent({
   components: {
@@ -35,7 +35,7 @@ export default defineComponent({
 
     const currentCollection = computed<ICategoryCollection>(() => currentState.value.collection);
 
-    const revertHandler = computed<IReverter>(
+    const revertHandler = computed<Reverter>(
       () => getReverter(props.node, currentCollection.value),
     );
 
@@ -64,3 +64,4 @@ export default defineComponent({
   },
 });
 </script>
+./Reverter/Reverter

src/presentation/components/Scripts/View/Tree/NodeContent/Reverter/CategoryReverter.ts

@@ -2,20 +2,24 @@ import { UserSelection } from '@/application/Context/State/Selection/UserSelecti
 import { ICategoryCollection } from '@/domain/ICategoryCollection';
 import { SelectedScript } from '@/application/Context/State/Selection/Script/SelectedScript';
 import { getCategoryId } from '../../TreeViewAdapter/CategoryNodeMetadataConverter';
-import { IReverter } from './IReverter';
+import { Reverter } from './Reverter';
 import { ScriptReverter } from './ScriptReverter';
 
-export class CategoryReverter implements IReverter {
+export class CategoryReverter implements Reverter {
   private readonly categoryId: number;
 
   private readonly scriptReverters: ReadonlyArray<ScriptReverter>;
 
   constructor(nodeId: string, collection: ICategoryCollection) {
     this.categoryId = getCategoryId(nodeId);
-    this.scriptReverters = getAllSubScriptReverters(this.categoryId, collection);
+    this.scriptReverters = createScriptReverters(this.categoryId, collection);
   }
 
   public getState(selectedScripts: ReadonlyArray<SelectedScript>): boolean {
+    if (!this.scriptReverters.length) {
+      // An empty array indicates there are no reversible scripts in this category
+      return false;
+    }
     return this.scriptReverters.every((script) => script.getState(selectedScripts));
   }
 
@@ -32,8 +36,13 @@ export class CategoryReverter implements IReverter {
   }
 }
 
-function getAllSubScriptReverters(categoryId: number, collection: ICategoryCollection) {
+function createScriptReverters(
+  categoryId: number,
+  collection: ICategoryCollection,
+): ScriptReverter[] {
   const category = collection.getCategory(categoryId);
-  const scripts = category.getAllScriptsRecursively();
+  const scripts = category
+    .getAllScriptsRecursively()
+    .filter((script) => script.canRevert());
   return scripts.map((script) => new ScriptReverter(script.id));
 }

src/presentation/components/Scripts/View/Tree/NodeContent/Reverter/Reverter.ts

@@ -1,7 +1,7 @@
 import { UserSelection } from '@/application/Context/State/Selection/UserSelection';
 import { SelectedScript } from '@/application/Context/State/Selection/Script/SelectedScript';
 
-export interface IReverter {
+export interface Reverter {
   getState(selectedScripts: ReadonlyArray<SelectedScript>): boolean;
   selectWithRevertState(newState: boolean, selection: UserSelection): void;
 }

src/presentation/components/Scripts/View/Tree/NodeContent/Reverter/ReverterFactory.ts

@@ -1,10 +1,10 @@
 import { ICategoryCollection } from '@/domain/ICategoryCollection';
 import { NodeMetadata, NodeType } from '../NodeMetadata';
-import { IReverter } from './IReverter';
+import { Reverter } from './Reverter';
 import { ScriptReverter } from './ScriptReverter';
 import { CategoryReverter } from './CategoryReverter';
 
-export function getReverter(node: NodeMetadata, collection: ICategoryCollection): IReverter {
+export function getReverter(node: NodeMetadata, collection: ICategoryCollection): Reverter {
   switch (node.type) {
     case NodeType.Category:
       return new CategoryReverter(node.id, collection);

src/presentation/components/Scripts/View/Tree/NodeContent/Reverter/ScriptReverter.ts

@@ -1,9 +1,9 @@
 import { UserSelection } from '@/application/Context/State/Selection/UserSelection';
 import { SelectedScript } from '@/application/Context/State/Selection/Script/SelectedScript';
 import { getScriptId } from '../../TreeViewAdapter/CategoryNodeMetadataConverter';
-import { IReverter } from './IReverter';
+import { Reverter } from './Reverter';
 
-export class ScriptReverter implements IReverter {
+export class ScriptReverter implements Reverter {
   private readonly scriptId: string;
 
   constructor(nodeId: string) {

src/presentation/components/Shared/Icon/IconName.ts

@@ -20,6 +20,8 @@ export const IconNames = [
   'lightbulb',
   'square-check',
   'triangle-exclamation',
+  'rotate-left',
+  'shield',
 ] as const;
 
 export type IconName = typeof IconNames[number];

tests/unit/presentation/components/Scripts/Menu/MenuOptionList.spec.ts

@@ -0,0 +1,54 @@
+import { describe, it, expect } from 'vitest';
+import { shallowMount } from '@vue/test-utils';
+import MenuOptionList from '@/presentation/components/Scripts/Menu/MenuOptionList.vue';
+
+const DOM_SELECTOR_LABEL = '.list div:first-child:not(.items)';
+const DOM_SELECTOR_SLOT = '.list .items';
+
+describe('MenuOptionList', () => {
+  it('renders the label when provided', () => {
+    // arrange
+    const label = 'Test label';
+    const expectedLabel = `${label}:`;
+    // act
+    const wrapper = mountComponent({ label });
+    // assert
+    const labelElement = wrapper.find(DOM_SELECTOR_LABEL);
+    const actualLabel = labelElement.text();
+    expect(actualLabel).to.equal(expectedLabel);
+  });
+
+  it('does not render the label when not provided', () => {
+    // arrange
+    const label = undefined;
+    // act
+    const wrapper = mountComponent({ label });
+    // assert
+    const labelElement = wrapper.find(DOM_SELECTOR_LABEL);
+    expect(labelElement.exists()).toBe(false);
+  });
+
+  it('renders default slot content', () => {
+    // arrange
+    const expectedSlotContent = 'Slot Content';
+    // act
+    const wrapper = mountComponent({ slotContent: expectedSlotContent });
+    // assert
+    const slotText = wrapper.find(DOM_SELECTOR_SLOT);
+    expect(slotText.text()).to.equal(expectedSlotContent);
+  });
+});
+
+function mountComponent(options?: {
+  readonly label?: string;
+  readonly slotContent?: string;
+}) {
+  return shallowMount(MenuOptionList, {
+    props: {
+      label: options?.label,
+    },
+    slots: {
+      default: options?.slotContent ?? 'Stubbed slot content',
+    },
+  });
+}

tests/unit/presentation/components/Scripts/Menu/Recommendation/Rating/CircleRating.spec.ts

@@ -1,7 +1,7 @@
 import { describe, it, expect } from 'vitest';
 import { shallowMount } from '@vue/test-utils';
-import CircleRating from '@/presentation/components/Scripts/Menu/Selector/Rating/CircleRating.vue';
+import RatingCircle from '@/presentation/components/Scripts/Menu/Recommendation/Rating/RatingCircle.vue';
-import RatingCircle from '@/presentation/components/Scripts/Menu/Selector/Rating/RatingCircle.vue';
+import CircleRating from '@/presentation/components/Scripts/Menu/Recommendation/Rating/CircleRating.vue';
 
 const MAX_RATING = 4;
 

tests/unit/presentation/components/Scripts/Menu/Recommendation/Rating/RatingCircle.spec.ts

@@ -1,6 +1,6 @@
 import { describe, it, expect } from 'vitest';
 import { shallowMount } from '@vue/test-utils';
-import RatingCircle from '@/presentation/components/Scripts/Menu/Selector/Rating/RatingCircle.vue';
+import RatingCircle from '@/presentation/components/Scripts/Menu/Recommendation/Rating/RatingCircle.vue';
 
 const DOM_SVG_SELECTOR = 'svg';
 const DOM_CIRCLE_SELECTOR = `${DOM_SVG_SELECTOR} > circle`;

tests/unit/presentation/components/Scripts/Menu/Recommendation/RecommendationDocumentation.spec.ts

@@ -1,12 +1,12 @@
 import { describe, it, expect } from 'vitest';
 import { shallowMount } from '@vue/test-utils';
-import SelectionTypeDocumentation from '@/presentation/components/Scripts/Menu/Selector/SelectionTypeDocumentation.vue';
+import RecommendationDocumentation from '@/presentation/components/Scripts/Menu/Recommendation/RecommendationDocumentation.vue';
-import CircleRating from '@/presentation/components/Scripts/Menu/Selector/Rating/CircleRating.vue';
+import CircleRating from '@/presentation/components/Scripts/Menu/Recommendation/Rating/CircleRating.vue';
 
 const DOM_SELECTOR_INCLUDES_SECTION = '.includes';
 const DOM_SELECTOR_CONSIDERATIONS_SECTION = '.considerations';
 
-describe('SelectionTypeDocumentation.vue', () => {
+describe('RecommendationDocumentation', () => {
   it('renders privacy rating using CircleRating component', () => {
     // arrange
     const expectedPrivacyRating = 3;
@@ -136,7 +136,7 @@ function mountComponent(options: {
   readonly includes?: string[],
   readonly considerations?: string[],
 }) {
-  return shallowMount(SelectionTypeDocumentation, {
+  return shallowMount(RecommendationDocumentation, {
     propsData: {
       privacyRating: options.privacyRating ?? 0,
       description: options.description ?? 'test-description',

tests/unit/presentation/components/Scripts/Menu/Recommendation/RecommendationStatusHandler.spec.ts

@@ -1,8 +1,8 @@
 import { describe, it, expect } from 'vitest';
 import {
-  SelectionCheckContext, SelectionMutationContext, SelectionType,
+  SelectionCheckContext, SelectionMutationContext,
-  getCurrentSelectionType, setCurrentSelectionType,
+  getCurrentRecommendationStatus, setCurrentRecommendationStatus,
-} from '@/presentation/components/Scripts/Menu/Selector/SelectionTypeHandler';
+} from '@/presentation/components/Scripts/Menu/Recommendation/RecommendationStatusHandler';
 import { RecommendationLevel } from '@/domain/RecommendationLevel';
 import { ICategoryCollectionState } from '@/application/Context/State/ICategoryCollectionState';
 import { EnumRangeTestRunner } from '@tests/unit/application/Common/EnumRangeTestRunner';
@@ -11,40 +11,41 @@ import { MethodCall } from '@tests/unit/shared/Stubs/StubWithObservableMethodCal
 import { expectExists } from '@tests/shared/Assertions/ExpectExists';
 import { scrambledEqual } from '@/application/Common/Array';
 import { IScript } from '@/domain/IScript';
-import { SelectionStateTestScenario } from './SelectionStateTestScenario';
+import { RecommendationStatusType } from '@/presentation/components/Scripts/Menu/Recommendation/RecommendationStatusType';
+import { RecommendationStatusTestScenario } from './RecommendationStatusTestScenario';
 
-describe('SelectionTypeHandler', () => {
+describe('RecommendationStatusHandler', () => {
-  describe('setCurrentSelectionType', () => {
+  describe('setCurrentRecommendationStatus', () => {
     describe('throws with invalid type', () => {
       // arrange
-      const scenario = new SelectionStateTestScenario();
+      const scenario = new RecommendationStatusTestScenario();
       const { stateStub } = scenario.generateState([]);
       // act
-      const act = (type: SelectionType) => setCurrentSelectionType(
+      const act = (type: RecommendationStatusType) => setCurrentRecommendationStatus(
         type,
         createMutationContext(stateStub),
       );
       // assert
       new EnumRangeTestRunner(act)
-        .testInvalidValueThrows(SelectionType.Custom, 'Cannot select custom type.')
+        .testInvalidValueThrows(RecommendationStatusType.Custom, 'Cannot select custom type.')
-        .testOutOfRangeThrows((value) => `Cannot handle the type: ${SelectionType[value]}`);
+        .testOutOfRangeThrows((value) => `Cannot handle the type: ${RecommendationStatusType[value]}`);
     });
     describe('select types as expected', () => {
       // arrange
-      const scenario = new SelectionStateTestScenario();
+      const scenario = new RecommendationStatusTestScenario();
       const testScenarios: ReadonlyArray<{
-        readonly givenType: SelectionType;
+        readonly givenType: RecommendationStatusType;
         readonly expectedCall: MethodCall<ScriptSelection>;
       }> = [
         {
-          givenType: SelectionType.None,
+          givenType: RecommendationStatusType.None,
           expectedCall: {
             methodName: 'deselectAll',
             args: [],
           },
         },
         {
-          givenType: SelectionType.Standard,
+          givenType: RecommendationStatusType.Standard,
           expectedCall: {
             methodName: 'selectOnly',
             args: [
@@ -53,7 +54,7 @@ describe('SelectionTypeHandler', () => {
           },
         },
         {
-          givenType: SelectionType.Strict,
+          givenType: RecommendationStatusType.Strict,
           expectedCall: {
             methodName: 'selectOnly',
             args: [[
@@ -63,7 +64,7 @@ describe('SelectionTypeHandler', () => {
           },
         },
         {
-          givenType: SelectionType.All,
+          givenType: RecommendationStatusType.All,
           expectedCall: {
             methodName: 'selectAll',
             args: [],
@@ -73,10 +74,10 @@ describe('SelectionTypeHandler', () => {
       testScenarios.forEach(({
         givenType, expectedCall,
       }) => {
-        it(`${SelectionType[givenType]} modifies as expected`, () => {
+        it(`${RecommendationStatusType[givenType]} modifies as expected`, () => {
           const { stateStub, scriptsStub } = scenario.generateState();
           // act
-          setCurrentSelectionType(givenType, createMutationContext(stateStub));
+          setCurrentRecommendationStatus(givenType, createMutationContext(stateStub));
           // assert
           const call = scriptsStub.callHistory.find(
             (c) => c.methodName === expectedCall.methodName,
@@ -92,51 +93,51 @@ describe('SelectionTypeHandler', () => {
       });
     });
   });
-  describe('getCurrentSelectionType', () => {
+  describe('getCurrentRecommendationStatus', () => {
     // arrange
-    const scenario = new SelectionStateTestScenario();
+    const scenario = new RecommendationStatusTestScenario();
     const testCases = [{
       name: 'when nothing is selected',
       selection: [],
-      expected: SelectionType.None,
+      expected: RecommendationStatusType.None,
     }, {
       name: 'when some standard scripts are selected',
       selection: scenario.someStandard,
-      expected: SelectionType.Custom,
+      expected: RecommendationStatusType.Custom,
     }, {
       name: 'when all standard scripts are selected',
       selection: scenario.allStandard,
-      expected: SelectionType.Standard,
+      expected: RecommendationStatusType.Standard,
     }, {
       name: 'when all standard and some strict scripts are selected',
       selection: [...scenario.allStandard, ...scenario.someStrict],
-      expected: SelectionType.Custom,
+      expected: RecommendationStatusType.Custom,
     }, {
       name: 'when all standard and strict scripts are selected',
       selection: [...scenario.allStandard, ...scenario.allStrict],
-      expected: SelectionType.Strict,
+      expected: RecommendationStatusType.Strict,
     }, {
       name: 'when strict scripts are selected but not standard',
       selection: scenario.allStrict,
-      expected: SelectionType.Custom,
+      expected: RecommendationStatusType.Custom,
     }, {
       name: 'when all standard and strict, and some unrecommended are selected',
       selection: [...scenario.allStandard, ...scenario.allStrict, ...scenario.someUnrecommended],
-      expected: SelectionType.Custom,
+      expected: RecommendationStatusType.Custom,
     }, {
       name: 'when all scripts are selected',
       selection: scenario.all,
-      expected: SelectionType.All,
+      expected: RecommendationStatusType.All,
     }];
     for (const testCase of testCases) {
       it(testCase.name, () => {
         const { stateStub } = scenario.generateState(testCase.selection);
         // act
-        const actual = getCurrentSelectionType(createCheckContext(stateStub));
+        const actual = getCurrentRecommendationStatus(createCheckContext(stateStub));
         // assert
         expect(actual).to.deep.equal(
           testCase.expected,
-          `Actual: "${SelectionType[actual]}", expected: "${SelectionType[testCase.expected]}"`
+          `Actual: "${RecommendationStatusType[actual]}", expected: "${RecommendationStatusType[testCase.expected]}"`
             + `\nSelection: ${printSelection()}`,
         );
         function printSelection() {

tests/unit/presentation/components/Scripts/Menu/Recommendation/RecommendationStatusTestScenario.ts

@@ -6,7 +6,7 @@ import { ScriptStub } from '@tests/unit/shared/Stubs/ScriptStub';
 import { SelectedScriptStub } from '@tests/unit/shared/Stubs/SelectedScriptStub';
 import { UserSelectionStub } from '@tests/unit/shared/Stubs/UserSelectionStub';
 
-export class SelectionStateTestScenario {
+export class RecommendationStatusTestScenario {
   public readonly all: readonly SelectedScript[];
 
   public readonly allStandard: readonly SelectedScript[];

tests/unit/presentation/components/Scripts/Menu/Revert/RevertStatusHandler.spec.ts

@@ -0,0 +1,201 @@
+import { describe, it, expect } from 'vitest';
+import { RevertStatusType } from '@/presentation/components/Scripts/Menu/Revert/RevertStatusType';
+import { SelectedScript } from '@/application/Context/State/Selection/Script/SelectedScript';
+import { SelectedScriptStub } from '@tests/unit/shared/Stubs/SelectedScriptStub';
+import { ScriptStub } from '@tests/unit/shared/Stubs/ScriptStub';
+import { getCurrentRevertStatus, setCurrentRevertStatus } from '@/presentation/components/Scripts/Menu/Revert/RevertStatusHandler';
+import { ScriptSelectionStub } from '@tests/unit/shared/Stubs/ScriptSelectionStub';
+import { ScriptSelectionChange } from '@/application/Context/State/Selection/Script/ScriptSelectionChange';
+
+describe('RevertStatusHandler', () => {
+  describe('getCurrentRevertStatus', () => {
+    const testScenarios: ReadonlyArray<{
+      readonly description: string;
+      readonly selectedScripts: readonly SelectedScript[];
+      readonly expectedRevertStatus: RevertStatusType;
+    }> = [
+      {
+        description: 'no selection',
+        selectedScripts: [],
+        expectedRevertStatus: RevertStatusType.NoReversibleScripts,
+      },
+      {
+        description: 'selected scripts are not reversible',
+        selectedScripts: [
+          createSelectedScript({ isReversible: false, isReverted: false }),
+          createSelectedScript({ isReversible: false, isReverted: false }),
+        ],
+        expectedRevertStatus: RevertStatusType.NoReversibleScripts,
+      },
+      {
+        description: 'all selected scripts are reversible and reverted',
+        selectedScripts: [
+          createSelectedScript({ isReversible: true, isReverted: true }),
+          createSelectedScript({ isReversible: true, isReverted: true }),
+        ],
+        expectedRevertStatus: RevertStatusType.AllScriptsReverted,
+      },
+      {
+        description: 'mixed selection with irreversible and reverted scripts',
+        selectedScripts: [
+          createSelectedScript({ isReversible: false, isReverted: false }),
+          createSelectedScript({ isReversible: true, isReverted: true }),
+        ],
+        expectedRevertStatus: RevertStatusType.AllScriptsReverted,
+      },
+      {
+        description: 'mixed revert state among reversible scripts',
+        selectedScripts: [
+          createSelectedScript({ isReversible: true, isReverted: true }),
+          createSelectedScript({ isReversible: true, isReverted: false }),
+        ],
+        expectedRevertStatus: RevertStatusType.SomeScriptsReverted,
+      },
+      {
+        description: 'mixed selection with irreversible and reversible scripts in mixed revert state',
+        selectedScripts: [
+          createSelectedScript({ isReversible: false, isReverted: false }),
+          createSelectedScript({ isReversible: true, isReverted: true }),
+          createSelectedScript({ isReversible: true, isReverted: false }),
+        ],
+        expectedRevertStatus: RevertStatusType.SomeScriptsReverted,
+      },
+    ];
+    testScenarios.forEach((
+      { description, selectedScripts, expectedRevertStatus },
+    ) => {
+      it(`${description} returns ${RevertStatusType[expectedRevertStatus]}`, () => {
+        // arrange
+        const selection = new ScriptSelectionStub()
+          .withSelectedScripts(selectedScripts);
+        // act
+        const actualRevertStatus = getCurrentRevertStatus(selection);
+        // assert
+        expect(actualRevertStatus).to.equal(expectedRevertStatus);
+      });
+    });
+  });
+  describe('setCurrentRevertStatus', () => {
+    const selectionTestScenarios: ReadonlyArray<{
+      readonly description: string;
+      readonly createSelectedScripts: (
+        desiredRevertStatus: boolean,
+      ) => readonly SelectedScript[];
+      readonly expectChanges: (
+        allScripts: readonly SelectedScript[],
+        desiredRevertStatus: boolean,
+      ) => readonly ScriptSelectionChange[];
+    }> = [
+      {
+        description: 'single reversible script',
+        createSelectedScripts: (desiredRevertStatus) => [
+          createSelectedScript({ isReversible: true, isReverted: !desiredRevertStatus }),
+        ],
+        expectChanges: (allScripts, desiredRevertStatus) => [
+          createScriptSelectionChange(allScripts[0], desiredRevertStatus),
+        ],
+      },
+      {
+        description: 'multiple reversible scripts',
+        createSelectedScripts: (desiredRevertStatus) => [
+          createSelectedScript({ isReversible: true, isReverted: !desiredRevertStatus }),
+          createSelectedScript({ isReversible: true, isReverted: !desiredRevertStatus }),
+        ],
+        expectChanges: (allScripts, desiredRevertStatus) => [
+          createScriptSelectionChange(allScripts[0], desiredRevertStatus),
+          createScriptSelectionChange(allScripts[1], desiredRevertStatus),
+        ],
+      },
+      {
+        description: 'no selected scripts',
+        createSelectedScripts: () => [],
+        expectChanges: () => [],
+      },
+      {
+        description: 'no reversible scripts',
+        createSelectedScripts: (desiredRevertStatus) => [
+          createSelectedScript({ isReversible: false, isReverted: !desiredRevertStatus }),
+          createSelectedScript({ isReversible: false, isReverted: !desiredRevertStatus }),
+        ],
+        expectChanges: () => [],
+      },
+      {
+        description: 'reversible and irreversible scripts',
+        createSelectedScripts: (desiredRevertStatus) => [
+          createSelectedScript({ isReversible: true, isReverted: !desiredRevertStatus }),
+          createSelectedScript({ isReversible: false, isReverted: !desiredRevertStatus }),
+          createSelectedScript({ isReversible: true, isReverted: !desiredRevertStatus }),
+          createSelectedScript({ isReversible: false, isReverted: !desiredRevertStatus }),
+        ],
+        expectChanges: (allScripts, desiredRevertStatus) => [
+          createScriptSelectionChange(allScripts[0], desiredRevertStatus),
+          createScriptSelectionChange(allScripts[2], desiredRevertStatus),
+        ],
+      },
+      {
+        description: 'reversible scripts already in the desired revert status',
+        createSelectedScripts: (desiredRevertStatus) => [
+          createSelectedScript({ isReversible: true, isReverted: desiredRevertStatus }),
+          createSelectedScript({ isReversible: true, isReverted: desiredRevertStatus }),
+        ],
+        expectChanges: () => [],
+      },
+    ];
+    selectionTestScenarios.forEach(({
+      description: selectionDescription, createSelectedScripts, expectChanges,
+    }) => {
+      const revertStatusTestScenarios: ReadonlyArray<{
+        readonly description: string;
+        readonly desiredRevertStatus: boolean;
+      }> = [
+        {
+          description: 'enforcing revert state',
+          desiredRevertStatus: true,
+        },
+        {
+          description: 'enforcing non-revert state',
+          desiredRevertStatus: false,
+        },
+      ];
+      revertStatusTestScenarios.forEach(({
+        description: revertStatusDescription, desiredRevertStatus,
+      }) => {
+        it(`${revertStatusDescription} - ${selectionDescription}`, () => {
+          // arrange
+          const selectedScripts = createSelectedScripts(desiredRevertStatus);
+          const selection = new ScriptSelectionStub()
+            .withSelectedScripts(selectedScripts);
+          // act
+          setCurrentRevertStatus(desiredRevertStatus, selection);
+          // assert
+          const expectedChanges = expectChanges(selectedScripts, desiredRevertStatus);
+          selection.assertSelectionChanges(expectedChanges);
+        });
+      });
+    });
+  });
+});
+
+function createSelectedScript(options: {
+  readonly isReversible: boolean;
+  readonly isReverted: boolean;
+}): SelectedScript {
+  const id = (Math.random() + 1).toString(36).substring(7);
+  const script = new ScriptStub(id)
+    .withReversibility(options.isReversible);
+  return new SelectedScriptStub(script)
+    .withRevert(options.isReverted);
+}
+
+function createScriptSelectionChange(
+  script: SelectedScript,
+  isReverted: boolean,
+): ScriptSelectionChange {
+  return {
+    scriptId: script.id,
+    newStatus: {
+      isSelected: true,
+      isReverted,
+    },
+  };
+}

tests/unit/presentation/components/Scripts/View/Tree/NodeContent/Reverter/CategoryReverter.spec.ts

@@ -8,93 +8,172 @@ import { UserSelectionStub } from '@tests/unit/shared/Stubs/UserSelectionStub';
 import { SelectedScriptStub } from '@tests/unit/shared/Stubs/SelectedScriptStub';
 import { SelectedScript } from '@/application/Context/State/Selection/Script/SelectedScript';
 import { CategorySelectionStub } from '@tests/unit/shared/Stubs/CategorySelectionStub';
+import { IScript } from '@/domain/IScript';
 
 describe('CategoryReverter', () => {
   describe('getState', () => {
     // arrange
-    const scripts = [
-      new ScriptStub('reversible').withRevertCode('REM revert me'),
-      new ScriptStub('reversible2').withRevertCode('REM revert me 2'),
-    ];
-    const category = new CategoryStub(1).withScripts(...scripts);
-    const nodeId = getCategoryNodeId(category);
-    const collection = new CategoryCollectionStub().withAction(category);
-    const sut = new CategoryReverter(nodeId, collection);
     const testScenarios: ReadonlyArray<{
       readonly description: string;
-      readonly selectedScripts: readonly SelectedScript[];
+      readonly allScripts: readonly IScript[];
+      readonly selectScripts: (allScripts: readonly IScript[]) => readonly SelectedScript[];
       readonly expectedState: boolean;
     }> = [
       {
-        description: 'returns `false` for non-reverted subscripts',
+        description: 'returns true when all scripts are reverted',
-        selectedScripts: scripts.map(
+        allScripts: [
-          (script) => new SelectedScriptStub(script).withRevert(false),
+          new ScriptStub('0').withReversibility(true),
-        ),
+          new ScriptStub('1').withReversibility(true),
-        expectedState: false,
+        ],
+        selectScripts: (allScripts) => [
+          new SelectedScriptStub(allScripts[0]).withRevert(true),
+          new SelectedScriptStub(allScripts[1]).withRevert(true),
+        ],
+        expectedState: true,
       },
       {
-        description: 'returns `false` when only some subscripts are reverted',
+        description: 'returns true when only reversible scripts are reverted',
-        selectedScripts: [
+        allScripts: [
-          new SelectedScriptStub(scripts[0]).withRevert(false),
+          new ScriptStub('0').withReversibility(false),
-          new SelectedScriptStub(scripts[0]).withRevert(true),
+          new ScriptStub('1').withReversibility(true),
+          new ScriptStub('2').withReversibility(true),
+        ],
+        selectScripts: (allScripts) => [
+          new SelectedScriptStub(allScripts[1]).withRevert(true),
+          new SelectedScriptStub(allScripts[2]).withRevert(true),
+        ],
+        expectedState: true,
+      },
+      {
+        description: 'returns false when no scripts are reverted',
+        allScripts: [
+          new ScriptStub('0').withReversibility(true),
+          new ScriptStub('1').withReversibility(true),
+        ],
+        selectScripts: (allScripts) => [
+          new SelectedScriptStub(allScripts[0]).withRevert(false),
+          new SelectedScriptStub(allScripts[1]).withRevert(false),
         ],
         expectedState: false,
       },
       {
-        description: 'returns `true` when all subscripts are reverted',
+        description: 'returns false when some reversible scripts are not reverted',
-        selectedScripts: scripts.map(
+        allScripts: [
-          (script) => new SelectedScriptStub(script).withRevert(true),
+          new ScriptStub('0').withReversibility(true),
-        ),
+          new ScriptStub('1').withReversibility(true),
-        expectedState: true,
+        ],
+        selectScripts: (allScripts) => [
+          new SelectedScriptStub(allScripts[0]).withRevert(false),
+          new SelectedScriptStub(allScripts[1]).withRevert(true),
+        ],
+        expectedState: false,
+      },
+      {
+        description: 'returns false when any reversible script is not reverted',
+        allScripts: [
+          new ScriptStub('0').withReversibility(false),
+          new ScriptStub('1').withReversibility(true),
+          new ScriptStub('2').withReversibility(true),
+        ],
+        selectScripts: (allScripts) => [
+          new SelectedScriptStub(allScripts[1]).withRevert(true),
+          new SelectedScriptStub(allScripts[2]).withRevert(false),
+        ],
+        expectedState: false,
+      },
+      {
+        description: 'returns false when no reversible scripts are reverted',
+        allScripts: [
+          new ScriptStub('0').withReversibility(true),
+          new ScriptStub('1').withReversibility(true),
+        ],
+        selectScripts: (allScripts) => [
+          new SelectedScriptStub(allScripts[0]).withRevert(false),
+          new SelectedScriptStub(allScripts[1]).withRevert(false),
+        ],
+        expectedState: false,
+      },
+      {
+        description: 'returns false when all reversible scripts are not reverted',
+        allScripts: [
+          new ScriptStub('0').withReversibility(false),
+          new ScriptStub('1').withReversibility(true),
+          new ScriptStub('2').withReversibility(true),
+        ],
+        selectScripts: (allScripts) => [
+          new SelectedScriptStub(allScripts[1]).withRevert(false),
+          new SelectedScriptStub(allScripts[2]).withRevert(false),
+        ],
+        expectedState: false,
+      },
+      {
+        description: 'returns false when no scripts are reversible',
+        allScripts: [
+          new ScriptStub('0').withReversibility(false),
+          new ScriptStub('1').withReversibility(false),
+          new ScriptStub('2').withReversibility(false),
+        ],
+        selectScripts: () => [],
+        expectedState: false,
       },
     ];
-    testScenarios.forEach((
+    testScenarios.forEach(({
-      { description, selectedScripts, expectedState },
+      description, allScripts, selectScripts, expectedState,
-    ) => {
+    }) => {
       it(description, () => {
+        // arrange
+        const category = new CategoryStub(1).withScripts(...allScripts);
+        const categoryNodeId = getCategoryNodeId(category);
+        const collection = new CategoryCollectionStub().withAction(category);
+        const categoryReverter = new CategoryReverter(categoryNodeId, collection);
+        const selectedScripts = selectScripts(allScripts);
         // act
-        const actual = sut.getState(selectedScripts);
+        const actual = categoryReverter.getState(selectedScripts);
         // assert
         expect(actual).to.equal(expectedState);
       });
     });
   });
   describe('selectWithRevertState', () => {
-    // arrange
-    const allScripts = [
-      new ScriptStub('reversible').withRevertCode('REM revert me'),
-      new ScriptStub('reversible2').withRevertCode('REM revert me 2'),
-    ];
-    const category = new CategoryStub(1).withScripts(...allScripts);
-    const collection = new CategoryCollectionStub().withAction(category);
     const testScenarios: ReadonlyArray<{
       readonly description: string;
-      readonly expectedRevert: boolean;
+      readonly expectedRevertState: boolean;
     }> = [
       {
         description: 'selects with revert',
-        expectedRevert: true,
+        expectedRevertState: true,
       },
       {
         description: 'selects without revert',
-        expectedRevert: false,
+        expectedRevertState: false,
       },
     ];
-    const nodeId = getCategoryNodeId(category);
     testScenarios.forEach((
-      { description, expectedRevert },
+      { description, expectedRevertState },
     ) => {
       it(description, () => {
+        // arrange
+        const allScripts = [
+          new ScriptStub('reversible').withReversibility(true),
+          new ScriptStub('reversible2').withReversibility(true),
+        ];
+        const category = new CategoryStub(1).withScripts(...allScripts);
+        const nodeId = getCategoryNodeId(category);
+        const collection = new CategoryCollectionStub().withAction(category);
         const categorySelection = new CategorySelectionStub();
-        const sut = new CategoryReverter(nodeId, collection);
+        const categoryReverter = new CategoryReverter(nodeId, collection);
-        const revertState = expectedRevert;
+        const revertState = expectedRevertState;
         // act
-        sut.selectWithRevertState(
+        categoryReverter.selectWithRevertState(
           revertState,
           new UserSelectionStub().withCategories(categorySelection),
         );
         // assert
-        expect(categorySelection.isCategorySelected(category.id, expectedRevert)).to.equal(true);
+        const actualRevertState = categorySelection.isCategorySelected(
+          category.id,
+          expectedRevertState,
+        );
+        expect(actualRevertState).to.equal(true);
       });
     });
   });

tests/unit/shared/Stubs/ScriptSelectionStub.ts

@@ -1,7 +1,9 @@
+import { expect } from 'vitest';
 import { ScriptSelection } from '@/application/Context/State/Selection/Script/ScriptSelection';
 import { SelectedScript } from '@/application/Context/State/Selection/Script/SelectedScript';
 import { IScript } from '@/domain/IScript';
-import { ScriptSelectionChangeCommand } from '@/application/Context/State/Selection/Script/ScriptSelectionChange';
+import { ScriptSelectionChange, ScriptSelectionChangeCommand } from '@/application/Context/State/Selection/Script/ScriptSelectionChange';
+import { formatAssertionMessage } from '@tests/shared/FormatAssertionMessage';
 import { StubWithObservableMethodCalls } from './StubWithObservableMethodCalls';
 import { EventSourceStub } from './EventSourceStub';
 import { SelectedScriptStub } from './SelectedScriptStub';
@@ -31,24 +33,22 @@ export class ScriptSelectionStub
   }
 
   public isScriptSelected(scriptId: string, revert: boolean): boolean {
-    const call = this.callHistory.find(
+    return this.isScriptChanged({
-      (c) => c.methodName === 'processChanges'
+      scriptId,
-      && c.args[0].changes.some((change) => (
+      newStatus: {
-        change.newStatus.isSelected === true
+        isSelected: true,
-        && change.newStatus.isReverted === revert
+        isReverted: revert,
-        && change.scriptId === scriptId)),
+      },
-    );
+    });
-    return call !== undefined;
   }
 
   public isScriptDeselected(scriptId: string): boolean {
-    const call = this.callHistory.find(
+    return this.isScriptChanged({
-      (c) => c.methodName === 'processChanges'
+      scriptId,
-      && c.args[0].changes.some((change) => (
+      newStatus: {
-        change.newStatus.isSelected === false
+        isSelected: false,
-        && change.scriptId === scriptId)),
+      },
-    );
+    });
-    return call !== undefined;
   }
 
   public processChanges(action: ScriptSelectionChangeCommand): void {
@@ -86,4 +86,45 @@ export class ScriptSelectionStub
     }
     return this.isSelectedResult;
   }
+
+  public assertSelectionChanges(expectedChanges: readonly ScriptSelectionChange[]): void {
+    const actualChanges = this.getAllChanges();
+    expect(actualChanges).to.have.lengthOf(expectedChanges.length, formatAssertionMessage([
+      `Expected number of changes to be ${expectedChanges.length}, but found ${actualChanges.length}`,
+      `Expected changes (${expectedChanges.length}):`, toNumberedPrettyJson(expectedChanges),
+      `Actual changes (${actualChanges.length}):`, toNumberedPrettyJson(actualChanges),
+    ]));
+    const unexpectedChanges = actualChanges.filter(
+      (actual) => !expectedChanges.some((expected) => isSameChange(actual, expected)),
+    );
+    expect(unexpectedChanges).to.have.lengthOf(0, formatAssertionMessage([
+      `Found ${unexpectedChanges.length} unexpected changes.`,
+      'Unexpected changes:', toNumberedPrettyJson(unexpectedChanges),
+      'Expected changes:', toNumberedPrettyJson(expectedChanges),
+      'Actual changes:', toNumberedPrettyJson(actualChanges),
+    ]));
+  }
+
+  private isScriptChanged(expectedChange: ScriptSelectionChange): boolean {
+    return this.getAllChanges().some((change) => isSameChange(change, expectedChange));
+  }
+
+  private getAllChanges(): ScriptSelectionChange[] {
+    const processChangesCalls = this.callHistory.filter((c) => c.methodName === 'processChanges');
+    const changeCommands = processChangesCalls.map(
+      (call) => call.args[0] as ScriptSelectionChangeCommand,
+    );
+    const changes = changeCommands.flatMap((command) => command.changes);
+    return changes;
+  }
+}
+
+function isSameChange(change: ScriptSelectionChange, otherChange: ScriptSelectionChange): boolean {
+  return change.newStatus.isSelected === otherChange.newStatus.isSelected
+    && change.newStatus.isReverted === otherChange.newStatus.isReverted
+    && change.scriptId === otherChange.scriptId;
+}
+
+function toNumberedPrettyJson<T>(array: readonly T[]): string {
+  return array.map((item, index) => `${index + 1}: ${JSON.stringify(item, undefined, 2)}`).join('\n');
 }

tests/unit/shared/Stubs/ScriptStub.ts

@@ -16,13 +16,18 @@ export class ScriptStub extends BaseEntity<string> implements IScript {
 
   public level? = RecommendationLevel.Standard;
 
+  private isReversible: boolean | undefined = undefined;
+
   constructor(public readonly id: string) {
     super(id);
   }
 
   public canRevert(): boolean {
+    if (this.isReversible === undefined) {
       return Boolean(this.code.revert);
     }
+    return this.isReversible;
+  }
 
   public withLevel(value: RecommendationLevel | undefined): this {
     this.level = value;
@@ -42,6 +47,11 @@ export class ScriptStub extends BaseEntity<string> implements IScript {
     return this;
   }
 
+  public withReversibility(isReversible: boolean): this {
+    this.isReversible = isReversible;
+    return this;
+  }
+
   public withRevertCode(revertCode?: string): this {
     this.code = {
       execute: this.code.execute,