From 1b8a53ef8444aaac841de378c9b45c5db5d55bb0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A9lix=20Lavi=C3=A9ville?= <lavieville.felix@gmail.com>
Date: Mon, 27 Jul 2026 09:48:16 +0200
Subject: [PATCH] fix: correcting toggle display

---
 .../components/profile/ProfileSettingsForm.vue   |  5 ++---
 webapp/src/stores/adsStore.ts                    | 16 +++++++---------
 2 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/webapp/src/components/profile/ProfileSettingsForm.vue b/webapp/src/components/profile/ProfileSettingsForm.vue
index 8276187..3b0d580 100644
--- a/webapp/src/components/profile/ProfileSettingsForm.vue
+++ b/webapp/src/components/profile/ProfileSettingsForm.vue
@@ -9,7 +9,7 @@ import BaseButton from "../ui/BaseButton.vue";
 import FormField from "../ui/FormField.vue";
 import BaseInput from "../ui/BaseInput.vue";
 import { useToast } from "../../composables/useToast";
-import { useAdsStore } from "../../stores/adsStore.ts";
+import { useAdsStore } from "../../stores/adsStore";
 
 const router = useRouter();
 const authStore = useAuthStore();
@@ -174,9 +174,8 @@ onMounted(() => {
       <label class="toggle-switch">
         <input
           type="checkbox"
-          :checked="adsStore.isEnabled"
+          v-model="adsStore.isEnabled"
           aria-label="Afficher les publicités"
-          @change="adsStore.toggle"
         />
         <span class="toggle-track">
           <span class="toggle-thumb"></span>
diff --git a/webapp/src/stores/adsStore.ts b/webapp/src/stores/adsStore.ts
index f79d90d..87d7e57 100644
--- a/webapp/src/stores/adsStore.ts
+++ b/webapp/src/stores/adsStore.ts
@@ -1,27 +1,25 @@
 import { defineStore } from "pinia";
-import { ref } from "vue";
+import { ref, watch } from "vue";
 
 const STORAGE_KEY = "display-ads";
 
 export const useAdsStore = defineStore("ads", () => {
-  const isEnabled = ref(localStorage.getItem(STORAGE_KEY) !== "false");
+  const isEnabled = ref(localStorage.getItem(STORAGE_KEY) === "true");
+
+  watch(isEnabled, (value) => {
+    localStorage.setItem(STORAGE_KEY, String(value));
+  });
 
   const enable = () => {
     isEnabled.value = true;
-    localStorage.setItem(STORAGE_KEY, "true");
   };
 
   const disable = () => {
     isEnabled.value = false;
-    localStorage.setItem(STORAGE_KEY, "false");
   };
 
   const toggle = () => {
-    if (isEnabled.value) {
-      disable();
-    } else {
-      enable();
-    }
+    isEnabled.value = !isEnabled.value;
   };
 
   return {