From 25ef4685c1b19f8331a3095475f45a8bec9fc583 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Fri, 5 Dec 2025 17:51:09 +0100
Subject: [PATCH] feat: implement functional lock/unlock inheritance button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Toggle between locked/unlocked states
- Dynamic text: "Déverrouiller l'héritage" / "Verrouiller l'héritage"
- Show appropriate lock/unlock icon based on state
- Style as simple text button with icon (matching design)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/components/PagePopup.vue | 41 ++++++++++++++++++++++++------------
 1 file changed, 27 insertions(+), 14 deletions(-)

diff --git a/src/components/PagePopup.vue b/src/components/PagePopup.vue
index af73cd8..ffbb152 100644
--- a/src/components/PagePopup.vue
+++ b/src/components/PagePopup.vue
@@ -186,10 +186,16 @@
           </div>
         </div>
 
-        <!-- Unlock Inheritance Button -->
+        <!-- Lock/Unlock Inheritance Button -->
         <div class="settings-subsection">
-          <button class="unlock-btn" @click="toggleInheritance">
-            Déverrouiller l'héritage
+          <button class="inheritance-btn" @click="toggleInheritance">
+            <svg v-if="inheritanceLocked" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M19 10H20C20.5523 10 21 10.4477 21 11V21C21 21.5523 20.5523 22 20 22H4C3.44772 22 3 21.5523 3 21V11C3 10.4477 3.44772 10 4 10H5V9C5 5.13401 8.13401 2 12 2C15.866 2 19 5.13401 19 9V10ZM5 12V20H19V12H5ZM11 14H13V18H11V14ZM17 10V9C17 6.23858 14.7614 4 12 4C9.23858 4 7 6.23858 7 9V10H17Z"></path>
+            </svg>
+            <svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M7 10H20C20.5523 10 21 10.4477 21 11V21C21 21.5523 20.5523 22 20 22H4C3.44772 22 3 21.5523 3 21V11C3 10.4477 3.44772 10 4 10H5V9C5 5.13401 8.13401 2 12 2C14.7405 2 17.1131 3.5748 18.2624 5.86882L16.4731 6.76344C15.6522 5.12486 13.9575 4 12 4C9.23858 4 7 6.23858 7 9V10ZM5 12V20H19V12H5ZM10 15H14V17H10V15Z"></path>
+            </svg>
+            <span>{{ inheritanceLocked ? 'Déverrouiller l\'héritage' : 'Verrouiller l\'héritage' }}</span>
           </button>
         </div>
       </div>
@@ -237,7 +243,7 @@ const visible = ref(false);
 const position = ref({ x: 0, y: 0 });
 const selectedPageElement = ref(null);
 const isEditable = ref(false);
-const inheritanceUnlocked = ref(false);
+const inheritanceLocked = ref(true);
 const backgroundColorInput = ref(null);
 
 let isUpdatingFromStore = false;
@@ -408,8 +414,8 @@ const close = () => {
 };
 
 const toggleInheritance = () => {
-  inheritanceUnlocked.value = !inheritanceUnlocked.value;
-  // TODO: Implement inheritance unlock logic
+  inheritanceLocked.value = !inheritanceLocked.value;
+  // TODO: Implement CSS priority logic when unlocked
 };
 
 const pageCss = computed(() => {
@@ -538,19 +544,26 @@ defineExpose({ open, close, visible });
 
 /* Unit toggle styles are inherited from global styles */
 
-.unlock-btn {
-  width: 100%;
-  padding: 0.5rem;
+.inheritance-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0;
   background: transparent;
-  border: 1px solid #ddd;
-  border-radius: 4px;
+  border: none;
   cursor: pointer;
   font-size: 0.875rem;
-  transition: background 0.2s;
+  color: #666;
+  transition: color 0.2s;
 }
 
-.unlock-btn:hover {
-  background: #f5f5f5;
+.inheritance-btn:hover {
+  color: #333;
+}
+
+.inheritance-btn svg {
+  width: 1.25rem;
+  height: 1.25rem;
 }
 
 .popup-css {