fix(catalog): make access controls visible and compact

src/components/admin/catalog-manager/inline-editor.tsx

@@ -49,6 +49,7 @@ import {
 	LAYOUT_DESCRIPTIONS,
 } from "@/lib/catalog-layouts";
 import { cn } from "@/lib/utils";
+import styles from "./catalog-access.module.css";
 import { ImagePreview } from "./image-preview";
 import { catalogTreeQs, useCatalogManager } from "./use-catalog-store";
 
@@ -572,26 +573,29 @@ function InlineEditorSession({
 						</div>
 
 						{/* Toggles */}
-						<div className="rounded-md border p-3 space-y-3">
+						<div className={styles.options}>
 							<ToggleRow
 								id="ie-enabled"
-								label="Enabled"
-								description="Active in the catalog"
+								disabled={!canEdit || saving}
+								label={t("access.enabled")}
+								description={t("access.enabledHint")}
 								checked={form.enabled === "1"}
 								onChange={(v) => update("enabled", v ? "1" : "0")}
 							/>
 							<ToggleRow
 								id="ie-visible"
-								label="Visible"
-								description="Shown in navigation"
+								disabled={!canEdit || saving}
+								label={t("access.visible")}
+								description={t("access.visibleHint")}
 								checked={form.visible === "1"}
 								onChange={(v) => update("visible", v ? "1" : "0")}
 							/>
 							{catalogType === "normal" && (
 								<ToggleRow
 									id="ie-club"
-									label="Club Only"
-									description="Requires HC subscription"
+									disabled={!canEdit || saving}
+									label={t("access.club")}
+									description={t("access.clubHint")}
 									checked={form.clubOnly === "1"}
 									onChange={(v) => update("clubOnly", v ? "1" : "0")}
 								/>
@@ -832,24 +836,41 @@ function ToggleRow({
 	id,
 	label,
 	description,
+	disabled,
 	checked,
 	onChange,
 }: {
 	id: string;
 	label: string;
 	description: string;
+	disabled: boolean;
 	checked: boolean;
 	onChange: (v: boolean) => void;
 }) {
+	const t = useTranslations("pages.admin.catalog.workspace.access");
 	return (
-		<div className="flex items-start justify-between gap-3">
-			<div className="min-w-0 flex-1">
-				<Label htmlFor={id} className="text-xs font-medium cursor-pointer">
+		<div className={styles.option} data-disabled={disabled || undefined}>
+			<div className={styles.optionHeader}>
+				<Label htmlFor={id} className={styles.label}>
 					{label}
 				</Label>
-				<p className="text-[10px] text-muted-foreground">{description}</p>
+				<div className={styles.control}>
+					<span className={styles.state} aria-hidden="true">
+						{t(checked ? "yes" : "no")}
+					</span>
+					<Switch
+						id={id}
+						checked={checked}
+						onCheckedChange={onChange}
+						disabled={disabled}
+						aria-describedby={`${id}-description`}
+						className={styles.toggle}
+					/>
+				</div>
 			</div>
-			<Switch id={id} checked={checked} onCheckedChange={onChange} size="sm" />
+			<p id={`${id}-description`} className={styles.description}>
+				{description}
+			</p>
 		</div>
 	);
 }