feat: Revamp notification and audio preferences (#9312)

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

app/javascript/v3/components/Form/CheckBox.vue

@@ -0,0 +1,31 @@
+<template>
+  <input
+    :id="value"
+    v-model="checked"
+    type="checkbox"
+    :value="value"
+    class="flex-shrink-0 mt-0.5 border-ash-200 border checked:border-none checked:bg-primary-600 dark:checked:bg-primary-600 shadow appearance-none rounded-[4px] w-4 h-4 focus:ring-1 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center after:text-center after:text-xs after:font-bold after:relative"
+  />
+</template>
+
+<script setup>
+import { defineProps, defineEmits, computed } from 'vue';
+
+const props = defineProps({
+  isChecked: {
+    type: Boolean,
+    default: false,
+  },
+  value: {
+    type: String,
+    default: null,
+  },
+});
+
+const emit = defineEmits(['input']);
+
+const checked = computed({
+  get: () => props.isChecked,
+  set: value => emit('update', props.value, value),
+});
+</script>