Unify switch controls

src/components/PropertiesPanel.vue

@@ -23,6 +23,7 @@ import type { Action, AnimatableProps, CameraProps, Layer } from '@/types/scene'
 import RangeSlider from './RangeSlider.vue'
 import ActionEditor from './ActionEditor.vue'
 import FontPicker from './FontPicker.vue'
+import { ToggleSwitch } from '@/components/ui'
 import { t } from '@/i18n'
 import { useTimeFormat } from '@/composables/useTimeFormat'
 import { useEyeDropper } from '@/composables/useEyeDropper'
@@ -685,33 +686,24 @@ function deleteSelection() {
         <div v-if="sectionOpen.transform" class="group-body">
           <div class="toggle-row">
             <span class="toggle-label">{{ t('properties.camera.enabled') }}</span>
-            <button
-              class="toggle-btn"
-              :class="{ active: cameraEnabled }"
-              @click="cameraEnabled = !cameraEnabled"
-            >
-              {{ cameraEnabled ? 'On' : 'Off' }}
-            </button>
+            <ToggleSwitch
+              v-model="cameraEnabled"
+              :aria-label="t('properties.camera.enabled')"
+            />
           </div>
           <div class="toggle-row">
             <span class="toggle-label">{{ t('properties.camera.overlay') }}</span>
-            <button
-              class="toggle-btn"
-              :class="{ active: cameraOverlayVisible }"
-              @click="cameraOverlayVisible = !cameraOverlayVisible"
-            >
-              {{ cameraOverlayVisible ? 'On' : 'Off' }}
-            </button>
+            <ToggleSwitch
+              v-model="cameraOverlayVisible"
+              :aria-label="t('properties.camera.overlay')"
+            />
           </div>
           <div class="toggle-row">
             <span class="toggle-label">{{ t('properties.camera.locked') }}</span>
-            <button
-              class="toggle-btn"
-              :class="{ active: cameraLocked }"
-              @click="cameraLocked = !cameraLocked"
-            >
-              {{ cameraLocked ? 'On' : 'Off' }}
-            </button>
+            <ToggleSwitch
+              v-model="cameraLocked"
+              :aria-label="t('properties.camera.locked')"
+            />
           </div>
           <div class="row">
             <label>X<input type="number" v-model.number="cameraX" :disabled="cameraLocked" /></label>