feat: data saving mode (#1638)

components/settings/SettingsToggleItem.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-defineProps<{
+const { disabled = false } = defineProps<{
   icon?: string
   text?: string
   checked: boolean
+  disabled?: boolean
 }>()
 </script>
 
@@ -10,10 +11,13 @@ defineProps<{
   <button
     exact-active-class="text-primary"
     block w-full group focus:outline-none text-start
+    :disabled="disabled"
+    :class="disabled ? 'opacity-50 cursor-not-allowed' : ''"
   >
     <div
       w-full flex w-fit px5 py3 md:gap2 gap4 items-center
-      transition-250 group-hover:bg-active
+      transition-250
+      :class="disabled ? '' : 'group-hover:bg-active'"
       group-focus-visible:ring="2 current"
     >
       <div flex-1 flex items-center md:gap2 gap4>