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/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>