add: contacts module & actions to private list

src/components/CustomSwitch.vue

@@ -0,0 +1,93 @@
+<script setup>
+defineProps({
+    modelValue: {
+        type: Boolean,
+        default: false
+    },
+    label: {
+        type: String,
+        required: false
+    },
+    name: {
+        type: String,
+        required: true
+    },
+    value: {
+        type: Boolean,
+        default: true
+    }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const toggle = (event) => {
+    emit('update:modelValue', event.target.checked)
+}
+</script>
+
+<template>
+    <label class="switch-container">
+        <span v-if="label" class="custom-label label-text">{{ label }}</span>
+
+        <input 
+            type="checkbox"
+            :name="name"
+            :checked="modelValue"
+            @change="toggle"
+        >
+
+        <span class="slider"></span>
+    </label>
+</template>
+
+<style scoped>
+.switch-container {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    cursor: pointer;
+    font-size: 16px;
+}
+
+/* ocultar input */
+.switch-container input {
+    display: none;
+}
+
+/* fondo del switch */
+.slider {
+    position: relative;
+    width: 45px;
+    height: 25px;
+    background-color: #ccc;
+    border-radius: 25px;
+    transition: 0.3s;
+}
+
+/* circulo */
+.slider::before {
+    content: "";
+    position: absolute;
+    width: 18px;
+    height: 18px;
+    left: 4px;
+    top: 3.5px;
+    background-color: white;
+    border-radius: 50%;
+    transition: 0.3s;
+}
+
+/* estado activo */
+input:checked + .slider {
+    background-color: #5A67DD; /* tu color */
+}
+
+input:checked + .slider::before {
+    transform: translateX(20px);
+}
+
+/* hover */
+.switch-container:hover .slider {
+    opacity: 0.8;
+}
+</style>