Fix revert toggle partial rendering

This commits fixes an issue where the `REVERT` label on revert toggle
might render as `REVER` or in a similarly clipped manner due to its
fixed width. The problem is visible when certain fonts fail to load or
browser engines render content non-standardly.

Changes:
- Refactor UI component to have its own separate Vue component with unit
  tests.
- Rework component design to utilize flexbox, enhancing its adaptability
  and simplifying the structure.
- Remove obselete `webkit` directives.
- Refactor SCSS for clearer structure and better SCSS best-practices.
- Use `em` when possible instead of `px` for improved responsiveness.

src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/RevertToggle.vue

@@ -1,29 +1,27 @@
 <template>
-  <div class="checkbox-switch">
-    <input
-      type="checkbox"
-      class="input-checkbox"
-      v-model="isReverted"
-      @change="toggleRevert()"
-      v-on:click.stop>
-    <div class="checkbox-animate">
-      <span class="checkbox-off">revert</span>
-      <span class="checkbox-on">revert</span>
-    </div>
-  </div>
+  <ToggleSwitch
+    v-model="isChecked"
+    :stopClickPropagation="true"
+    :label="'revert'"
+  />
 </template>
 
 <script lang="ts">
 import {
   PropType, defineComponent, ref, watch,
+  computed,
 } from 'vue';
 import { useCollectionState } from '@/presentation/components/Shared/Hooks/UseCollectionState';
 import { SelectedScript } from '@/application/Context/State/Selection/SelectedScript';
 import { IReverter } from './Reverter/IReverter';
 import { INodeContent } from './INodeContent';
 import { getReverter } from './Reverter/ReverterFactory';
+import ToggleSwitch from './ToggleSwitch.vue';
 
 export default defineComponent({
+  components: {
+    ToggleSwitch,
+  },
   props: {
     node: {
       type: Object as PropType<INodeContent>,
@@ -46,138 +44,43 @@ export default defineComponent({
     );
 
     onStateChange((newState) => {
-      updateStatus(newState.selection.selectedScripts);
+      updateRevertStatusFromState(newState.selection.selectedScripts);
       events.unsubscribeAll();
-      events.register(newState.selection.changed.on((scripts) => updateStatus(scripts)));
+      events.register(
+        newState.selection.changed.on((scripts) => updateRevertStatusFromState(scripts)),
+      );
     }, { immediate: true });
 
     async function onNodeChanged(node: INodeContent) {
       handler = getReverter(node, currentState.value.collection);
-      updateStatus(currentState.value.selection.selectedScripts);
+      updateRevertStatusFromState(currentState.value.selection.selectedScripts);
     }
 
-    function toggleRevert() {
-      modifyCurrentState((state) => {
-        handler.selectWithRevertState(isReverted.value, state.selection);
-      });
-    }
-
-    async function updateStatus(scripts: ReadonlyArray<SelectedScript>) {
+    async function updateRevertStatusFromState(scripts: ReadonlyArray<SelectedScript>) {
       isReverted.value = handler?.getState(scripts) ?? false;
     }
 
+    function syncReversionStatusWithState(value: boolean) {
+      if (value === isReverted.value) {
+        return;
+      }
+      modifyCurrentState((state) => {
+        handler.selectWithRevertState(value, state.selection);
+      });
+    }
+
+    const isChecked = computed({
+      get() {
+        return isReverted.value;
+      },
+      set: (value: boolean) => {
+        syncReversionStatusWithState(value);
+      },
+    });
+
     return {
-      isReverted,
-      toggleRevert,
+      isChecked,
     };
   },
 });
 </script>
-
-<style scoped lang="scss">
-@use 'sass:math';
-@use "@/presentation/assets/styles/main" as *;
-
-$color-bullet-unchecked : $color-primary-darker;
-$color-bullet-checked   : $color-on-secondary;
-$color-text-unchecked   : $color-on-primary;
-$color-text-checked     : $color-on-secondary;
-$color-bg-unchecked     : $color-primary;
-$color-bg-checked       : $color-secondary;
-$size-width             : 85px;
-$size-height            : 30px;
-
-// https://www.designlabthemes.com/css-toggle-switch/
-.checkbox-switch {
-  display: inline-block;
-  overflow: hidden;
-  position: relative;
-  width: $size-width;
-  height: $size-height;
-  -webkit-border-radius: $size-height;
-  border-radius: $size-height;
-  line-height: $size-height;
-  font-size: math.div($size-height, 2);
-
-  input.input-checkbox {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: $size-width;
-    height: $size-height;
-    padding: 0;
-    margin: 0;
-    opacity: 0;
-    z-index: 2;
-    @include clickable;
-  }
-
-  .checkbox-animate {
-    position: relative;
-    width: $size-width;
-    height: $size-height;
-    background-color: $color-bg-unchecked;
-    -webkit-transition: background-color 0.25s ease-out 0s;
-    transition: background-color 0.25s ease-out 0s;
-
-    // Circle
-    &:before {
-      $circle-size: $size-height * 0.66;
-
-      content: "";
-      display: block;
-      position: absolute;
-      width: $circle-size;
-      height: $circle-size;
-      border-radius: $circle-size * 2;
-      -webkit-border-radius: $circle-size * 2;
-      background-color: $color-bullet-unchecked;
-      top: $size-height * 0.16;
-      left: $size-width * 0.05;
-      -webkit-transition: left 0.3s ease-out 0s;
-      transition: left 0.3s ease-out 0s;
-      z-index: 10;
-    }
-  }
-
-  input.input-checkbox:checked {
-    + .checkbox-animate {
-        background-color: $color-bg-checked;
-    }
-    + .checkbox-animate:before {
-        left: ($size-width - math.div($size-width, 3.5));
-        background-color: $color-bullet-checked;
-    }
-    + .checkbox-animate .checkbox-off {
-        display: none;
-        opacity: 0;
-    }
-    + .checkbox-animate .checkbox-on {
-        display: block;
-        opacity: 1;
-    }
-  }
-
-  .checkbox-off, .checkbox-on {
-    text-transform: uppercase;
-    float: left;
-    font-weight: 700;
-    -webkit-transition: all 0.3s ease-out 0s;
-    transition: all 0.3s ease-out 0s;
-  }
-
-  .checkbox-off {
-    margin-left: math.div($size-width, 3);
-    opacity: 1;
-    color: $color-text-unchecked;
-  }
-
-  .checkbox-on {
-    display: none;
-    float: right;
-    margin-right: math.div($size-width, 3);
-    opacity: 0;
-    color: $color-text-checked;
-  }
-}
-</style>