From 0837b24a4bd05950ac6e215dc73e67cce1a12ad8 Mon Sep 17 00:00:00 2001
From: Dorian <dorian@Dorians-MacBook-Air.local>
Date: Fri, 6 Mar 2026 01:11:06 +0000
Subject: [PATCH] fix: replace Enable All text buttons with toggle card in AI
 Data Access

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 neode-ui/src/views/Settings.vue | 44 ++++++++++++++++++++-------------
 1 file changed, 27 insertions(+), 17 deletions(-)

diff --git a/neode-ui/src/views/Settings.vue b/neode-ui/src/views/Settings.vue
index 6009e182..b6ce7b58 100644
--- a/neode-ui/src/views/Settings.vue
+++ b/neode-ui/src/views/Settings.vue
@@ -278,27 +278,37 @@
 
     <!-- AI Data Access Section -->
     <div class="path-option-card cursor-default px-6 py-6 mb-6">
-      <div class="flex items-center justify-between mb-2">
+      <div class="mb-2">
         <h2 class="text-xl font-semibold text-white/96">AI Data Access</h2>
-        <div class="flex items-center gap-2">
-          <button
-            v-if="!aiPermissions.allEnabled"
-            @click="aiPermissions.enableAll()"
-            class="text-xs text-white/50 hover:text-white/80 transition-colors"
-          >
-            Enable All
-          </button>
-          <button
-            v-if="!aiPermissions.noneEnabled"
-            @click="aiPermissions.disableAll()"
-            class="text-xs text-white/50 hover:text-white/80 transition-colors"
-          >
-            Disable All
-          </button>
-        </div>
       </div>
       <p class="text-sm text-white/60 mb-6">Control what data the AI assistant can see. All categories are off by default.</p>
 
+      <!-- Enable All toggle -->
+      <button
+        @click="aiPermissions.allEnabled ? aiPermissions.disableAll() : aiPermissions.enableAll()"
+        class="w-full flex items-center gap-4 p-4 rounded-xl border transition-all text-left mb-6"
+        :class="aiPermissions.allEnabled
+          ? 'bg-white/10 border-orange-500/40'
+          : 'bg-black/20 border-white/10 hover:border-white/20'"
+      >
+        <svg class="w-5 h-5 shrink-0" :class="aiPermissions.allEnabled ? 'text-orange-400' : 'text-white/40'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+        </svg>
+        <div class="flex-1 min-w-0">
+          <p class="text-sm font-medium" :class="aiPermissions.allEnabled ? 'text-white/95' : 'text-white/70'">Enable All</p>
+          <p class="text-xs text-white/50 mt-0.5">Grant access to all data categories at once</p>
+        </div>
+        <div
+          class="w-10 h-6 rounded-full shrink-0 transition-colors relative"
+          :class="aiPermissions.allEnabled ? 'bg-orange-500' : 'bg-white/15'"
+        >
+          <div
+            class="absolute top-1 w-4 h-4 rounded-full bg-white shadow transition-transform"
+            :class="aiPermissions.allEnabled ? 'translate-x-5' : 'translate-x-1'"
+          />
+        </div>
+      </button>
+
       <div class="space-y-5">
         <div v-for="group in aiCategoryGroups" :key="group.label">
           <p class="text-xs font-medium text-white/40 uppercase tracking-wider mb-2 px-1">{{ group.label }}</p>