feat(frontend): simplify checkbox value update handling in settings

Author: Lasim

services/frontend/src/components/ui/checkbox/Checkbox.vue

@@ -1,30 +1,34 @@
 <script setup lang="ts">
-import type { CheckboxRootEmits, CheckboxRootProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { Check } from "lucide-vue-next"
-import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from "reka-ui"
-import { cn } from "@/lib/utils"
+interface Props {
+  checked?: boolean
+  disabled?: boolean
+  id?: string
+  name?: string
+}
 
-const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes["class"] }>()
-const emits = defineEmits<CheckboxRootEmits>()
+const props = withDefaults(defineProps<Props>(), {
+  checked: false,
+  disabled: false,
+})
 
-const delegatedProps = reactiveOmit(props, "class")
+const emit = defineEmits<{
+  'update:checked': [value: boolean]
+}>()
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+function handleChange(event: Event) {
+  const target = event.target as HTMLInputElement
+  emit('update:checked', target.checked)
+}
 </script>
 
 <template>
-  <CheckboxRoot
-    v-bind="forwarded"
-    :class="
-      cn('grid place-content-center peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
-         props.class)"
-  >
-    <CheckboxIndicator class="grid place-content-center text-current">
-      <slot>
-        <Check class="h-4 w-4" />
-      </slot>
-    </CheckboxIndicator>
-  </CheckboxRoot>
+  <input
+    type="checkbox"
+    :id="props.id"
+    :name="props.name"
+    :checked="props.checked"
+    :disabled="props.disabled"
+    @change="handleChange"
+    class="size-4 cursor-pointer accent-primary"
+  />
 </template>

services/frontend/src/views/admin/settings/[type].vue

@@ -146,6 +146,11 @@ function handleConnectionTested(result: { success: boolean; message: string }) {
 // Reactive form values
 const formValues = ref<Record<string, string | number | boolean>>({})
 
+// Update boolean setting value
+function updateBooleanValue(key: string, value: boolean) {
+  formValues.value[key] = value
+}
+
 // Create initial form values from settings
 function createInitialValues(settings: Setting[]) {
   const values: Record<string, string | number | boolean> = {}
@@ -370,14 +375,12 @@ async function handleSubmit(event: Event) {
                         <Checkbox
                           :id="`setting-${setting.key}`"
                           :checked="formValues[setting.key] as boolean"
-                          @update:checked="(value: boolean) => {
-                            formValues[setting.key] = value
-                          }"
+                          @update:checked="(value: boolean) => updateBooleanValue(setting.key, value)"
                         />
                         <div class="grid gap-1">
                           <label
                             :for="`setting-${setting.key}`"
-                            class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                            class="cursor-pointer text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                           >
                             {{ setting.name || setting.key }}
                           </label>
@@ -451,14 +454,12 @@ async function handleSubmit(event: Event) {
                           <Checkbox
                             :id="`setting-${setting.key}-desktop`"
                             :checked="formValues[setting.key] as boolean"
-                            @update:checked="(value: boolean) => {
-                              formValues[setting.key] = value
-                            }"
+                            @update:checked="(value: boolean) => updateBooleanValue(setting.key, value)"
                           />
                           <div class="grid gap-1">
                             <label
                               :for="`setting-${setting.key}-desktop`"
-                              class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                              class="cursor-pointer text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                             >
                               {{ setting.name || setting.key }}
                             </label>