chore: remove toggle markup copy for reverse-order

Author: alexdln

app/components/Settings/Toggle.client.vue

@@ -35,62 +35,32 @@ const id = useId()
         : 'grid-template-areas: \'label-text . toggle\''
     "
   >
-    <template v-if="props.reverseOrder">
-      <input
-        role="switch"
-        type="checkbox"
-        :id="id"
-        v-model="checked"
-        class="toggle appearance-none h-6 w-11 rounded-full border border-fg relative shrink-0 bg-fg/50 transition-colors duration-200 ease-in-out checked:bg-fg [@media(hover:hover)]:hover:bg-fg/60 [@media(hover:hover)]:checked:hover:(bg-fg/80 after:opacity-50) focus-visible:(outline-2 outline-accent outline-offset-2) before:(content-[''] absolute h-5 w-5 top-px start-px rounded-full bg-bg transition-transform duration-200 ease-in-out) checked:before:translate-x-[20px] rtl:checked:before:-translate-x-[20px] after:(content-[''] absolute h-3.5 w-3.5 top-[4px] start-[4px] i-lucide:check bg-fg opacity-0 transition-all duration-200 ease-in-out) checked:after:opacity-100 checked:after:translate-x-[20px] rtl:checked:after:-translate-x-[20px]"
-        style="grid-area: toggle"
-      />
-      <TooltipApp
-        v-if="tooltip && label"
-        :text="tooltip"
-        :position="tooltipPosition ?? 'top'"
-        :to="tooltipTo"
-        :offset="tooltipOffset"
-      >
-        <span class="text-sm text-fg font-medium text-start" style="grid-area: label-text">
-          {{ label }}
-        </span>
-      </TooltipApp>
-      <span
-        v-else-if="label"
-        class="text-sm text-fg font-medium text-start"
-        style="grid-area: label-text"
-      >
+    <TooltipApp
+      v-if="tooltip && label"
+      :text="tooltip"
+      :position="tooltipPosition ?? 'top'"
+      :to="tooltipTo"
+      :offset="tooltipOffset"
+    >
+      <span class="text-sm text-fg font-medium text-start" style="grid-area: label-text">
         {{ label }}
       </span>
-    </template>
-    <template v-else>
-      <TooltipApp
-        v-if="tooltip && label"
-        :text="tooltip"
-        :position="tooltipPosition ?? 'top'"
-        :to="tooltipTo"
-        :offset="tooltipOffset"
-      >
-        <span class="text-sm text-fg font-medium text-start" style="grid-area: label-text">
-          {{ label }}
-        </span>
-      </TooltipApp>
-      <span
-        v-else-if="label"
-        class="text-sm text-fg font-medium text-start"
-        style="grid-area: label-text"
-      >
-        {{ label }}
-      </span>
-      <input
-        role="switch"
-        type="checkbox"
-        :id="id"
-        v-model="checked"
-        class="toggle appearance-none h-6 w-11 rounded-full border border-fg relative shrink-0 bg-fg/50 transition-colors duration-200 ease-in-out checked:bg-fg [@media(hover:hover)]:hover:bg-fg/60 [@media(hover:hover)]:checked:hover:(bg-fg/80 after:opacity-50) focus-visible:(outline-2 outline-accent outline-offset-2) before:(content-[''] absolute h-5 w-5 top-px start-px rounded-full bg-bg transition-transform duration-200 ease-in-out) checked:before:translate-x-[20px] rtl:checked:before:-translate-x-[20px] after:(content-[''] absolute h-3.5 w-3.5 top-[4px] start-[4px] i-lucide:check bg-fg opacity-0 transition-all duration-200 ease-in-out) checked:after:opacity-100 checked:after:translate-x-[20px] rtl:checked:after:-translate-x-[20px]"
-        style="grid-area: toggle; justify-self: end"
-      />
-    </template>
+    </TooltipApp>
+    <span
+      v-else-if="label"
+      class="text-sm text-fg font-medium text-start"
+      style="grid-area: label-text"
+    >
+      {{ label }}
+    </span>
+    <input
+      role="switch"
+      type="checkbox"
+      :id="id"
+      v-model="checked"
+      class="toggle appearance-none h-6 w-11 rounded-full border border-fg relative shrink-0 bg-fg/50 transition-colors duration-200 ease-in-out checked:bg-fg [@media(hover:hover)]:hover:bg-fg/60 [@media(hover:hover)]:checked:hover:(bg-fg/80 after:opacity-50) focus-visible:(outline-2 outline-accent outline-offset-2) before:(content-[''] absolute h-5 w-5 top-px start-px rounded-full bg-bg transition-transform duration-200 ease-in-out) checked:before:translate-x-[20px] rtl:checked:before:-translate-x-[20px] after:(content-[''] absolute h-3.5 w-3.5 top-[4px] start-[4px] i-lucide:check bg-fg opacity-0 transition-all duration-200 ease-in-out) checked:after:opacity-100 checked:after:translate-x-[20px] rtl:checked:after:-translate-x-[20px]"
+      style="grid-area: toggle; justify-self: end"
+    />
   </label>
   <p v-if="description" class="text-sm text-fg-muted mt-2">
     {{ description }}

app/components/Settings/Toggle.server.vue

@@ -27,29 +27,13 @@ const props = withDefaults(
         : 'grid-template-areas: \'label-text . toggle\''
     "
   >
-    <template v-if="props.reverseOrder">
-      <SkeletonBlock class="h-6 w-11 shrink-0 rounded-full" style="grid-area: toggle" />
-      <span
-        v-if="label"
-        class="text-sm text-fg font-medium text-start"
-        style="grid-area: label-text"
-      >
-        {{ label }}
-      </span>
-    </template>
-    <template v-else>
-      <span
-        v-if="label"
-        class="text-sm text-fg font-medium text-start"
-        style="grid-area: label-text"
-      >
-        {{ label }}
-      </span>
-      <SkeletonBlock
-        class="h-6 w-11 shrink-0 rounded-full"
-        style="grid-area: toggle; justify-self: end"
-      />
-    </template>
+    <span v-if="label" class="text-sm text-fg font-medium text-start" style="grid-area: label-text">
+      {{ label }}
+    </span>
+    <SkeletonBlock
+      class="h-6 w-11 shrink-0 rounded-full"
+      style="grid-area: toggle; justify-self: end"
+    />
   </div>
   <p v-if="description" class="text-sm text-fg-muted mt-2">
     {{ description }}