Improve selection type documentation

- Refine tooltip documentation with clearer information.
- Introduce privacy ranking indicator for intuitive user guidance.
- Adopt a consistent format throughout documentation.
- Switch from emojis to icons to maintain visual uniformity.

src/presentation/assets/styles/_colors.scss

@@ -30,6 +30,10 @@ $color-on-surface           : #4d5156;
 // Background | Appears behind scrollable content.
 $color-background           : #e6ecf4;
 
+$color-success  : #4CAF50;
+$color-danger   : #F44336;
+$color-caution  : #FFC107;
+
 /*
     Application-specific colors:
     These are tailored to the specific needs of the application and derived from the above theme colors.

src/presentation/components/Scripts/Menu/Selector/Rating/CircleRating.vue

@@ -0,0 +1,44 @@
+<template>
+  <span class="circle-rating">
+    <RatingCircle
+      v-for="i in maxRating"
+      :key="i"
+      :filled="i <= rating"
+    />
+  </span>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import RatingCircle from './RatingCircle.vue';
+
+const minRating = 0;
+const maxRating = 4;
+
+export default defineComponent({
+  components: {
+    RatingCircle,
+  },
+  props: {
+    rating: {
+      type: Number,
+      required: true,
+      validator: (value: number) => {
+        return value >= minRating && value <= maxRating;
+      },
+    },
+  },
+  setup() {
+    return {
+      maxRating,
+    };
+  },
+});
+</script>
+
+<style scoped lang="scss">
+.circle-rating {
+  display: inline-flex;
+  gap: 0.2em;
+}
+</style>

src/presentation/components/Scripts/Menu/Selector/Rating/RatingCircle.vue

@@ -0,0 +1,72 @@
+<template>
+  <svg
+    :style="{
+      '--circle-stroke-width': `${circleStrokeWidthInPx}px`,
+    }"
+    :viewBox="viewBox"
+  >
+    <circle
+      :cx="circleRadiusInPx"
+      :cy="circleRadiusInPx"
+      :r="circleRadiusWithoutStrokeInPx"
+      :class="{
+        filled,
+      }"
+    />
+  </svg>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed } from 'vue';
+
+const circleDiameterInPx = 20;
+const circleStrokeWidthInPx = 2;
+
+export default defineComponent({
+  props: {
+    filled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup() {
+    const circleRadiusInPx = computed(() => {
+      return circleDiameterInPx / 2;
+    });
+    const circleRadiusWithoutStrokeInPx = computed(() => {
+      return circleRadiusInPx.value - (circleStrokeWidthInPx / 2);
+    });
+    const viewBox = computed(() => {
+      const minX = -circleStrokeWidthInPx / 2;
+      const minY = -circleStrokeWidthInPx / 2;
+      const width = circleDiameterInPx + circleStrokeWidthInPx;
+      const height = circleDiameterInPx + circleStrokeWidthInPx;
+      return `${minX} ${minY} ${width} ${height}`;
+    });
+    return {
+      circleRadiusInPx,
+      circleDiameterInPx,
+      circleStrokeWidthInPx,
+      circleRadiusWithoutStrokeInPx,
+      viewBox,
+    };
+  },
+});
+</script>
+
+<style scoped lang="scss">
+$circleColor: currentColor;
+$circleHeight: 0.8em;
+$circleStrokeWidth: var(--circle-stroke-width);
+
+svg {
+  height: $circleHeight;
+  circle {
+    stroke: $circleColor;
+    stroke-width: $circleStrokeWidth;
+    &.filled {
+      fill: $circleColor;
+    }
+  }
+}
+</style>

src/presentation/components/Scripts/Menu/Selector/SelectionTypeDocumentation.vue

@@ -0,0 +1,141 @@
+<template>
+  <div>
+    <p class="privacy-rating">
+      Privacy: <CircleRating :rating="privacyRating" />
+    </p>
+    <hr />
+    <div class="sections">
+      <section>
+        {{ description }}
+      </section>
+      <section class="recommendation">
+        <AppIcon icon="lightbulb" class="icon" />
+        <span class="text">{{ recommendation }}</span>
+      </section>
+      <section
+        v-if="includes?.length > 0"
+        class="includes"
+      >
+        <AppIcon icon="square-check" class="icon" />
+        <span class="text">
+          Includes:
+          <ul>
+            <li
+              v-for="inclusionItem in includes"
+              :key="inclusionItem"
+            >
+              {{ inclusionItem }}
+            </li>
+          </ul>
+        </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 CircleRating from './Rating/CircleRating.vue';
+
+export default defineComponent({
+  components: {
+    CircleRating,
+    AppIcon,
+  },
+  props: {
+    privacyRating: {
+      type: Number,
+      required: true,
+    },
+    description: {
+      type: String,
+      required: true,
+    },
+    recommendation: {
+      type: String,
+      required: true,
+    },
+    includes: {
+      type: Array as PropType<ReadonlyArray<string>>,
+      default: () => [],
+    },
+    considerations: {
+      type: Array as PropType<ReadonlyArray<string>>,
+      default: () => [],
+    },
+  },
+});
+</script>
+
+<style scoped lang="scss">
+@use "@/presentation/assets/styles/main" as *;
+
+.privacy-rating {
+  margin: 0.5em;
+  text-align: center;
+}
+hr {
+  margin: 1em 0;
+  opacity: 0.6;
+}
+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;
+  margin-bottom: 0.75em;
+  .includes {
+    display: flex;
+    gap: 0.5em;
+    font-weight: 500;
+    .icon {
+      color: $color-success;
+    }
+  }
+
+  .considerations {
+    display: flex;
+    gap: 0.5em;
+    .text {
+      font-weight: 500;
+    }
+    .icon {
+      color: $color-danger;
+    }
+  }
+  .recommendation {
+    display: flex;
+    align-items: center;
+    gap: 0.5em;
+    .icon {
+      color: $color-caution;
+    }
+  }
+}
+</style>

src/presentation/components/Scripts/Menu/Selector/TheSelector.vue

@@ -8,9 +8,11 @@
         @click="selectType(SelectionType.None)"
       />
       <template #tooltip>
-        Deselect all selected scripts.
-        <br />
-        💡 Good start to dive deeper into tweaks and select only what you want.
+        <SelectionTypeDocumentation
+          :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."
+        />
       </template>
     </TooltipWrapper>
 
@@ -22,11 +24,16 @@
         @click="selectType(SelectionType.Standard)"
       />
       <template #tooltip>
-        🛡️ Balanced for privacy and functionality.
-        <br />
-        OS and applications will function normally.
-        <br />
-        💡 Recommended for everyone
+        <SelectionTypeDocumentation
+          :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."
+          :includes="[
+            'Retains functionality of all apps and system services.',
+            'Clears non-essential OS and app telemetry data and caches.',
+            'Keeps essential security services enabled.',
+          ]"
+        />
       </template>
     </TooltipWrapper>
 
@@ -38,11 +45,20 @@
         @click="selectType(SelectionType.Strict)"
       />
       <template #tooltip>
-        🚫 Stronger privacy, disables risky functions that may leak your data.
-        <br />
-        ⚠️ Double check to remove scripts where you would trade functionality for privacy
-        <br />
-        💡 Recommended for daily users that prefers more privacy over non-essential functions
+        <SelectionTypeDocumentation
+          :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."
+          :includes="[
+            'Disables optional OS and app services that could leak data.',
+            'Clears non-essential caches, histories, temporary files while retaining browser bookmarks.',
+            'Keeps vital security services and critical application functionality.',
+          ]"
+          :considerations="[
+            'Review each script to make sure you are comfortable with the disabled functionality.',
+            'Some non-critical applications or features may no longer function as expected.',
+          ]"
+        />
       </template>
     </TooltipWrapper>
 
@@ -54,11 +70,15 @@
         @click="selectType(SelectionType.All)"
       />
       <template #tooltip>
-        🔒 Strongest privacy, disabling any functionality that may leak your data.
-        <br />
-        🛑 Not designed for daily users, it will break important functionalities.
-        <br />
-        💡 Only recommended for extreme use-cases like crime labs where no leak is acceptable
+        <SelectionTypeDocumentation
+          :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."
+          :considerations="[
+            'Not recommended for daily use as it breaks important functionality.',
+            'Do not run it without having backups and system snapshots, unless you\'re on a disposable system.',
+          ]"
+        />
       </template>
     </TooltipWrapper>
   </MenuOptionList>
@@ -74,12 +94,14 @@ 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';
 
 export default defineComponent({
   components: {
     MenuOptionList,
     MenuOptionListItem,
     TooltipWrapper,
+    SelectionTypeDocumentation,
   },
   setup() {
     const {

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

@@ -17,6 +17,9 @@ export const IconNames = [
   'file-arrow-down',
   'floppy-disk',
   'play',
+  'lightbulb',
+  'square-check',
+  'triangle-exclamation',
 ] as const;
 
 export type IconName = typeof IconNames[number];