From 23e88190d92eb73152780e7cafee60e9b59e13d1 Mon Sep 17 00:00:00 2001
From: Florian Sylvain <contact@floriansylvain.fr>
Date: Mon, 19 Oct 2026 04:06:34 +0200
Subject: [PATCH] fix: route every toggle switch in the SPA through one new
 component, for one correct geometry

---
 web/src/components/AppSwitch.vue              | 20 +++++++++++++++++++
 web/src/components/EditorHeader.vue           |  6 ++----
 web/src/components/LinkModal.vue              |  6 ++----
 web/src/components/MediaCleanupCard.vue       |  4 ++--
 web/src/components/SeoPanel.vue               |  6 +++---
 web/src/components/SiteFormPanel.vue          |  6 +++---
 .../components/variants/VariantFormFields.vue | 15 +++-----------
 .../variants/VariantStatusSwitch.vue          |  8 ++------
 8 files changed, 37 insertions(+), 34 deletions(-)
 create mode 100644 web/src/components/AppSwitch.vue

diff --git a/web/src/components/AppSwitch.vue b/web/src/components/AppSwitch.vue
new file mode 100644
index 0000000..89da7fd
--- /dev/null
+++ b/web/src/components/AppSwitch.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+type Slots = 'root' | 'container' | 'wrapper' | 'label' | 'description'
+
+const props = defineProps<{
+	ui?: Partial<Record<Slots, string>>
+}>()
+
+const ui = computed(() => ({
+	...props.ui,
+	container: ['h-4.5', props.ui?.container].filter(Boolean).join(' '),
+	base: 'relative h-4.5 w-8 before:absolute before:-inset-3.5 data-[disabled]:opacity-40 sm:before:hidden',
+	thumb: 'size-3.5 data-[state=checked]:translate-x-3.5',
+}))
+</script>
+
+<template>
+	<USwitch :ui="ui" />
+</template>
diff --git a/web/src/components/EditorHeader.vue b/web/src/components/EditorHeader.vue
index 4c62449..f9ba142 100644
--- a/web/src/components/EditorHeader.vue
+++ b/web/src/components/EditorHeader.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import AppSwitch from '@/components/AppSwitch.vue'
 import { t } from '@/i18n'
 
 import ArticleStatusBadge from '@/components/ArticleStatusBadge.vue'
@@ -55,14 +56,11 @@ const previewOn = defineModel<boolean>('preview', { required: true })
 		<SaveStatus :state="state" :saved-at="savedAt" @retry="emit('retry')" />
 		<span class="ml-auto font-mono text-xs text-muted lg:hidden">{{ countText }}</span>
 		<div class="hidden items-center gap-3 lg:flex">
-			<USwitch
+			<AppSwitch
 				v-model="previewOn"
 				:label="t('Preview')"
 				:ui="{
 					root: 'items-center gap-2',
-					container: 'h-auto',
-					base: 'h-4.5 w-8 p-0.5',
-					thumb: 'size-3.5 bg-default data-[state=checked]:translate-x-2.5',
 					wrapper: 'ms-0',
 					label: 'text-sm font-normal text-toned',
 				}"
diff --git a/web/src/components/LinkModal.vue b/web/src/components/LinkModal.vue
index ed65a2f..613ffef 100644
--- a/web/src/components/LinkModal.vue
+++ b/web/src/components/LinkModal.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import AppSwitch from '@/components/AppSwitch.vue'
 import { t } from '@/i18n'
 import type { MessageKey } from '@/i18n/messages'
 
@@ -226,14 +227,11 @@ function onCancel() {
 						class="w-full min-w-0"
 					/>
 				</UFormField>
-				<USwitch
+				<AppSwitch
 					v-model="newTabValue"
 					:label="t('Open in new tab')"
 					:ui="{
 						root: 'min-h-11 items-center gap-3 md:min-h-10',
-						container: 'h-auto',
-						base: 'h-4.5 w-8 p-0.5',
-						thumb: 'size-3.5 bg-default data-[state=checked]:translate-x-2.5',
 						wrapper: 'ms-0',
 						label: 'text-base font-medium text-highlighted',
 					}"
diff --git a/web/src/components/MediaCleanupCard.vue b/web/src/components/MediaCleanupCard.vue
index f44a1e5..625602c 100644
--- a/web/src/components/MediaCleanupCard.vue
+++ b/web/src/components/MediaCleanupCard.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import AppSwitch from '@/components/AppSwitch.vue'
 import { t } from '@/i18n'
 
 import { computed, nextTick, ref, watch } from 'vue'
@@ -286,11 +287,10 @@ function reviewDuplicates() {
 						</span>
 					</div>
 					<div class="flex h-11 w-11 shrink-0 items-center justify-center md:h-6 md:w-9">
-						<USwitch
+						<AppSwitch
 							:model-value="switchChecked"
 							:disabled="controlsDisabled"
 							aria-labelledby="auto-purge-label"
-							:ui="{ base: 'data-[disabled]:opacity-40' }"
 							@update:model-value="toggle"
 						/>
 					</div>
diff --git a/web/src/components/SeoPanel.vue b/web/src/components/SeoPanel.vue
index f7a4c1b..961b4e4 100644
--- a/web/src/components/SeoPanel.vue
+++ b/web/src/components/SeoPanel.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import AppSwitch from '@/components/AppSwitch.vue'
 import { t } from '@/i18n'
 
 import { computed, nextTick, ref } from 'vue'
@@ -439,7 +440,7 @@ function submit() {
 				@leave="canonicalBlocked"
 			/>
 
-			<USwitch
+			<AppSwitch
 				:model-value="seo.noindex"
 				:label="t('Hide from search engines')"
 				:description="
@@ -447,8 +448,7 @@ function submit() {
 				"
 				:ui="{
 					root: 'items-start gap-3',
-					base: 'mt-0.5 h-4.5 w-8',
-					thumb: 'size-3.5',
+					container: 'mt-0.5',
 					label: 'font-medium text-highlighted',
 					description: 'text-xs/4.5 text-pretty text-muted',
 				}"
diff --git a/web/src/components/SiteFormPanel.vue b/web/src/components/SiteFormPanel.vue
index 42a7299..1cf8f3f 100644
--- a/web/src/components/SiteFormPanel.vue
+++ b/web/src/components/SiteFormPanel.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import AppSwitch from '@/components/AppSwitch.vue'
 import { t } from '@/i18n'
 
 import { computed, reactive, ref } from 'vue'
@@ -544,15 +545,14 @@ async function submit() {
 			/>
 		</DirectoryField>
 
-		<USwitch
+		<AppSwitch
 			v-model="values.makeDefault"
 			:disabled="isCurrentDefault"
 			:label="switchLabel"
 			:description="switchHelp"
 			:ui="{
 				root: 'items-start gap-3',
-				base: 'mt-0.5 h-4.5 w-8',
-				thumb: 'size-3.5',
+				container: 'mt-0.5',
 				label: 'font-medium text-highlighted',
 				description: 'text-xs/4.5 text-pretty text-muted',
 			}"
diff --git a/web/src/components/variants/VariantFormFields.vue b/web/src/components/variants/VariantFormFields.vue
index 6c638ea..a414b2a 100644
--- a/web/src/components/variants/VariantFormFields.vue
+++ b/web/src/components/variants/VariantFormFields.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import AppSwitch from '@/components/AppSwitch.vue'
 import { t } from '@/i18n'
 
 import { computed } from 'vue'
@@ -360,15 +361,10 @@ function setFormat(value: unknown) {
 						}}</span>
 					</div>
 					<div class="pt-0.5">
-						<USwitch
+						<AppSwitch
 							v-model="values.generateOnUpload"
 							:disabled="disabled"
 							aria-labelledby="generate-on-upload-label"
-							:ui="{
-								container: 'h-4.5',
-								base: 'relative h-4.5 w-8 before:absolute before:-inset-3.5 disabled:opacity-40 sm:before:hidden',
-								thumb: 'size-3.5 data-[state=checked]:translate-x-3.5',
-							}"
 						/>
 					</div>
 				</div>
@@ -382,15 +378,10 @@ function setFormat(value: unknown) {
 						}}</span>
 					</div>
 					<div class="pt-0.5">
-						<USwitch
+						<AppSwitch
 							v-model="values.enabled"
 							:disabled="disabled"
 							aria-labelledby="variant-enabled-label"
-							:ui="{
-								container: 'h-4.5',
-								base: 'relative h-4.5 w-8 before:absolute before:-inset-3.5 disabled:opacity-40 sm:before:hidden',
-								thumb: 'size-3.5 data-[state=checked]:translate-x-3.5',
-							}"
 						/>
 					</div>
 				</div>
diff --git a/web/src/components/variants/VariantStatusSwitch.vue b/web/src/components/variants/VariantStatusSwitch.vue
index 7341ff3..a6f5b1a 100644
--- a/web/src/components/variants/VariantStatusSwitch.vue
+++ b/web/src/components/variants/VariantStatusSwitch.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import AppSwitch from '@/components/AppSwitch.vue'
 import { t } from '@/i18n'
 
 import { computed } from 'vue'
@@ -36,15 +37,10 @@ const tone = computed(() => {
 
 <template>
 	<div class="flex items-center gap-2 whitespace-nowrap" :class="tone">
-		<USwitch
+		<AppSwitch
 			:model-value="enabled"
 			:disabled="locked"
 			:aria-label="t('Enable variant {0}', [name])"
-			:ui="{
-				container: 'h-4.5',
-				base: 'relative h-4.5 w-8 before:absolute before:-inset-3.5 data-[disabled]:opacity-40 sm:before:hidden',
-				thumb: 'size-3.5 data-[state=checked]:translate-x-3.5',
-			}"
 			@update:model-value="emit('toggle', $event)"
 		/>
 		<span class="flex items-center gap-1">