fix(ui): make shared switches visible across CMS themes

src/app/admin/banners/banners-manager.tsx

@@ -192,12 +192,13 @@ export function BannersManager({ banners }: Props) {
 							<div className="flex gap-6">
 								<div className="flex items-center gap-2">
 									<Switch
+										id="banner-active"
 										checked={form.isActive === 1}
 										onCheckedChange={(v) =>
 											setForm({ ...form, isActive: v ? 1 : 0 })
 										}
 									/>
-									<Label>Active</Label>
+									<Label htmlFor="banner-active">Active</Label>
 								</div>
 								<div className="space-y-2 flex items-center gap-2">
 									<Label>Order</Label>

src/app/admin/catalog/[id]/catalog-items-table/field-helpers.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { Check, ChevronsUpDown, Star } from "lucide-react";
-import { useMemo, useState } from "react";
+import { useId, useMemo, useState } from "react";
 import { Button } from "@/components/ui/button";
 import {
 	Command,
@@ -37,11 +37,15 @@ export function ToggleField({
 	onChange: (v: boolean) => void;
 	disabled?: boolean;
 }) {
+	const id = useId();
 	const isChecked = checked ?? (value === 1 || value === "1");
 	return (
 		<div className="flex items-center justify-between gap-2">
-			<Label className="text-xs">{label}</Label>
+			<Label htmlFor={id} className="text-xs">
+				{label}
+			</Label>
 			<Switch
+				id={id}
 				checked={isChecked}
 				onCheckedChange={onChange}
 				disabled={disabled}

src/app/admin/permissions/[id]/rank-edit-client.tsx

@@ -347,12 +347,15 @@ export function RankEditClient({
 							<div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mt-4">
 								<div className="flex items-center justify-between rounded-lg border p-3">
 									<div>
-										<Label className="text-sm">Hidden Rank</Label>
+										<Label htmlFor="rank-hidden_rank" className="text-sm">
+											Hidden Rank
+										</Label>
 										<p className="text-xs text-muted-foreground">
 											Hide from public
 										</p>
 									</div>
 									<Switch
+										id="rank-hidden_rank"
 										checked={general.hidden_rank === "1"}
 										onCheckedChange={(v) =>
 											setGeneral({ ...general, hidden_rank: v ? "1" : "0" })
@@ -361,12 +364,15 @@ export function RankEditClient({
 								</div>
 								<div className="flex items-center justify-between rounded-lg border p-3">
 									<div>
-										<Label className="text-sm">Log Commands</Label>
+										<Label htmlFor="rank-log_commands" className="text-sm">
+											Log Commands
+										</Label>
 										<p className="text-xs text-muted-foreground">
 											Record to audit log
 										</p>
 									</div>
 									<Switch
+										id="rank-log_commands"
 										checked={general.log_commands === "1"}
 										onCheckedChange={(v) =>
 											setGeneral({ ...general, log_commands: v ? "1" : "0" })

src/app/admin/polls/poll-form.tsx

@@ -146,19 +146,23 @@ export function PollForm({ defaultValues }: PollFormProps) {
 					<div className="flex gap-6">
 						<div className="flex items-center gap-2">
 							<Switch
+								id="poll-show-results"
 								checked={form.watch("showResults") === 1}
 								onCheckedChange={(v) => form.setValue("showResults", v ? 1 : 0)}
 							/>
-							<Label>{t("formShowResults")}</Label>
+							<Label htmlFor="poll-show-results">{t("formShowResults")}</Label>
 						</div>
 						<div className="flex items-center gap-2">
 							<Switch
+								id="poll-multiple-choice"
 								checked={form.watch("multipleChoice") === 1}
 								onCheckedChange={(v) =>
 									form.setValue("multipleChoice", v ? 1 : 0)
 								}
 							/>
-							<Label>{t("formAllowMultiple")}</Label>
+							<Label htmlFor="poll-multiple-choice">
+								{t("formAllowMultiple")}
+							</Label>
 						</div>
 					</div>