refactor(ui): move Toggle component to Composition API + TS (#3281)

* refactor(frontend): move Toggle component to Composition API + TS

**Toggle.vue**:
- Enable composition API and TS
- Added `disabled` to props
- Remove redundant `checked`
- Replace `modelValue` and `emits` with `defineModel` compiler macro

**Others**:
- Replace emit handling and `model-value` with `v-model` where simple logic was used
  - Not `FeatureFlagSettings.vue` (contained custom code on receiving emit)
  - Not `Mods.vue` (contained custom code on receiving emit)
- Remove redundant `checked` attribute

* fix(app): toggles not updating value

apps/app-frontend/src/components/ui/settings/PrivacySettings.vue

@@ -30,16 +30,7 @@ watch(
         option, you opt out and ads will no longer be shown based on your interests.
       </p>
     </div>
-    <Toggle
-      id="personalized-ads"
-      :model-value="settings.personalized_ads"
-      :checked="settings.personalized_ads"
-      @update:model-value="
-        (e) => {
-          settings.personalized_ads = e
-        }
-      "
-    />
+    <Toggle id="personalized-ads" v-model="settings.personalized_ads" />
   </div>
 
   <div class="mt-4 flex items-center justify-between gap-4">
@@ -51,16 +42,7 @@ watch(
         longer be collected.
       </p>
     </div>
-    <Toggle
-      id="opt-out-analytics"
-      :model-value="settings.telemetry"
-      :checked="settings.telemetry"
-      @update:model-value="
-        (e) => {
-          settings.telemetry = e
-        }
-      "
-    />
+    <Toggle id="opt-out-analytics" v-model="settings.telemetry" />
   </div>
 
   <div class="mt-4 flex items-center justify-between gap-4">
@@ -75,10 +57,6 @@ watch(
         as those added by mods. (app restart required to take effect)
       </p>
     </div>
-    <Toggle
-      id="disable-discord-rpc"
-      v-model="settings.discord_rpc"
-      :checked="settings.discord_rpc"
-    />
+    <Toggle id="disable-discord-rpc" v-model="settings.discord_rpc" />
   </div>
 </template>