chore: more code cleanups

app/javascript/dashboard/routes/dashboard/settings/personal/AudioAlertCondition.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <label
-      class="flex justify-between pb-1 text-sm font-medium leading-6 text-ash-900 d"
+      class="flex justify-between pb-1 text-sm font-medium leading-6 text-ash-900"
     >
       {{ label }}
     </label>
@@ -16,7 +16,7 @@
           v-model="item.model"
           type="checkbox"
           :value="item.value"
-          class="flex-shrink-0 mt-1 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"
+          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"
           @input="onChange"
         />
         <label class="text-sm font-normal text-ash-900">

app/javascript/dashboard/routes/dashboard/settings/personal/AudioAlertEvent.vue

@@ -6,7 +6,7 @@
       {{ label }}
     </label>
     <div
-      class="flex flex-row justify-between h-10 max-w-xl p-2 border border-solid rounded-md border-ash-200"
+      class="flex flex-row justify-between h-10 max-w-xl p-2 border border-solid rounded-xl border-ash-200"
     >
       <div
         v-for="option in options"
@@ -22,7 +22,6 @@
           class="shadow cursor-pointer grid place-items-center border-2 border-ash-200 appearance-none rounded-full w-4 h-4 checked:bg-primary-600 before:content-[''] before:bg-primary-600 before:border-4 before:rounded-full before:border-ash-25 checked:before:w-[14px] checked:before:h-[14px] checked:border checked:border-primary-600"
           type="radio"
           :value="option.value"
-          @change="emitChange"
         />
         <label
           :for="`radio-${option.value}`"
@@ -37,7 +36,7 @@
 </template>
 
 <script setup>
-import { ref, watch } from 'vue';
+import { computed } from 'vue';
 
 const props = defineProps({
   label: {
@@ -56,17 +55,12 @@ const options = [
   { value: 'all', label: 'All' },
 ];
 
-const selectedValue = ref(props.value);
-
-watch(
-  () => props.value,
-  newValue => {
-    selectedValue.value = newValue;
-  }
-);
-
 const emit = defineEmits(['update']);
-const emitChange = e => {
-  emit('update', e);
-};
+
+const selectedValue = computed({
+  get: () => props.value,
+  set: value => {
+    emit('update', value);
+  },
+});
 </script>

app/javascript/dashboard/routes/dashboard/settings/personal/AudioAlertTone.vue

@@ -7,7 +7,6 @@
     :options="alertTones"
     :label="label"
     class="max-w-xl"
-    @input="onChange"
   >
     <option
       v-for="tone in alertTones"
@@ -20,7 +19,7 @@
   </form-select>
 </template>
 <script setup>
-import { computed, ref, watch } from 'vue';
+import { computed } from 'vue';
 import FormSelect from 'v3/components/Form/Select.vue';
 
 const props = defineProps({
@@ -34,19 +33,6 @@ const props = defineProps({
   },
 });
 
-const selectedValue = ref(props.value);
-
-watch(
-  () => props.value,
-  newValue => {
-    selectedValue.value = newValue;
-  }
-);
-
-const emit = defineEmits(['change']);
-const onChange = () => {
-  emit('change', selectedValue.value);
-};
 const alertTones = computed(() => [
   {
     value: 'ding',
@@ -57,4 +43,13 @@ const alertTones = computed(() => [
     label: 'Bell',
   },
 ]);
+
+const emit = defineEmits(['change']);
+
+const selectedValue = computed({
+  get: () => props.value,
+  set: value => {
+    emit('change', value);
+  },
+});
 </script>

app/javascript/dashboard/routes/dashboard/settings/personal/NotificationCheckBox.vue

@@ -5,7 +5,7 @@
   >
     <input
       v-model="localFlags"
-      class="mt-1 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"
+      class="mt-1 flex-shrink-0 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"
       type="checkbox"
       :value="localValue"
       @input="handleInput"

app/javascript/dashboard/routes/dashboard/settings/personal/NotificationPreferences.vue

@@ -21,7 +21,10 @@
             >
               {{ $t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.PUSH') }}
             </span>
-            <form-switch :value="true" @input="onRequestPermissions()" />
+            <form-switch
+              :value="hasEnabledPushPermissions"
+              @input="onRequestPermissions"
+            />
           </div>
         </table-header-cell>
       </div>
@@ -75,7 +78,10 @@
         <span class="text-sm font-medium uppercase text-ash-900">
           {{ $t('PROFILE_SETTINGS.FORM.PUSH_NOTIFICATIONS_SECTION.TITLE') }}
         </span>
-        <form-switch :value="true" @input="onRequestPermissions()" />
+        <form-switch
+          :value="hasEnabledPushPermissions"
+          @input="onRequestPermissions"
+        />
       </div>
 
       <div class="flex flex-col gap-4">