remco/Epicnabbo-Catalogus-Updated-Daily
1
0 Fork 1
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Simo committed 2026-09-06 21:30:13 +02:00
1 parent 35d0f3ee01
commit 7033d65846
8 files changed
+131 -61
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/admin/banners/banners-manager.tsx
+2 -1
View File
@@ -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
+6 -2
View File
@@ -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
+8 -2
View File
@@ -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
+6 -2
View File
@@ -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>
src/components/admin/catalog-manager/catalog-access.module.css
-26
View File
@@ -39,32 +39,6 @@
line-height: 1.5;
color: var(--admin-text-muted);
}
.toggle[data-slot="switch"] {
width: 44px;
height: 24px;
border: 1px solid var(--admin-text-muted);
background: var(--admin-border);
cursor: pointer;
}
.toggle[data-checked] {
background: var(--admin-accent);
border-color: var(--admin-accent);
}
.toggle [data-slot="switch-thumb"] {
width: 18px;
height: 18px;
left: 2px;
background: var(--admin-text);
color: var(--admin-canvas);
}
.toggle[data-checked] [data-slot="switch-thumb"] {
left: 22px;
}
.toggle:focus-visible {
outline: 2px solid var(--admin-accent);
outline-offset: 3px;
}
.option[data-disabled] .toggle,
.option[data-disabled] .label {
cursor: not-allowed;
}
src/components/admin/catalog-manager/inline-editor.tsx
-1
View File
@@ -864,7 +864,6 @@ function ToggleRow({
onCheckedChange={onChange}
disabled={disabled}
aria-describedby={`${id}-description`}
className={styles.toggle}
/>
</div>
</div>
src/components/ui/switch.module.css
+105
View File
@@ -0,0 +1,105 @@
.root {
--switch-off: var(--color-input);
--switch-on: var(--color-primary);
--switch-border: var(--color-muted-foreground);
--switch-thumb: var(--color-foreground);
--switch-mark: var(--color-background);
position: relative;
display: inline-flex;
flex-shrink: 0;
width: 44px;
height: 24px;
border: 1px solid var(--switch-border);
border-radius: 999px;
background: var(--switch-off);
cursor: pointer;
outline: none;
transition:
background-color 150ms,
border-color 150ms;
}
body:has([data-admin]) .root {
--switch-off: var(--admin-border);
--switch-on: var(--admin-accent);
--switch-border: var(--admin-text-muted);
--switch-thumb: var(--admin-text);
--switch-mark: var(--admin-canvas);
}
.root[data-checked] {
background: var(--switch-on);
border-color: var(--switch-on);
}
.root:focus-visible {
outline: 2px solid var(--switch-on);
outline-offset: 3px;
}
.root[data-disabled] {
cursor: not-allowed;
opacity: 0.5;
}
.thumb {
pointer-events: none;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
top: 50%;
left: 2px;
transform: translateY(-50%);
border-radius: 999px;
background: var(--switch-thumb);
color: var(--switch-mark);
transition: left 150ms;
}
.root[data-checked] .thumb {
left: 22px;
}
.check {
width: 10px;
height: 10px;
stroke-width: 3;
opacity: 0;
}
.root[data-checked] .check {
opacity: 1;
}
.root[data-size="sm"] {
width: 32px;
height: 20px;
}
.root[data-size="sm"] .thumb {
width: 14px;
height: 14px;
}
.root[data-size="sm"][data-checked] .thumb {
left: 14px;
}
.root[data-size="sm"] .check {
width: 8px;
height: 8px;
}
@media (prefers-reduced-motion: reduce) {
.root,
.thumb {
transition: none;
}
}
@media (forced-colors: active) {
.root {
border-color: ButtonText;
background: Canvas;
}
.root[data-checked] {
background: Highlight;
border-color: Highlight;
}
.thumb {
background: ButtonText;
color: Canvas;
}
.root:focus-visible {
outline-color: Highlight;
}
}
src/components/ui/switch.tsx
+4 -27
View File
@@ -4,6 +4,7 @@ import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
import { CheckIcon } from "lucide-react";
import { cn } from "@/lib/utils";
import styles from "./switch.module.css";
function Switch({
className,
@@ -16,35 +17,11 @@ function Switch({
<SwitchPrimitive.Root
data-slot="switch"
data-size={size}
className={cn(
"peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs outline-none transition-colors",
"bg-input hover:bg-input/80",
"data-checked:bg-primary data-checked:hover:bg-primary/90",
"focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/40",
"disabled:cursor-not-allowed disabled:opacity-50",
"data-[size=default]:h-5 data-[size=default]:w-9",
"data-[size=sm]:h-4 data-[size=sm]:w-7",
className,
)}
className={cn(styles.root, className)}
{...props}
>
<SwitchPrimitive.Thumb
data-slot="switch-thumb"
className={cn(
"pointer-events-none absolute top-1/2 flex -translate-y-1/2 items-center justify-center rounded-full bg-background text-primary shadow-sm ring-0 transition-[left,colors]",
"left-0.5 data-checked:left-[calc(100%-1.125rem)]",
"group-data-[size=default]/switch:size-4",
"group-data-[size=sm]/switch:size-3 group-data-[size=sm]/switch:data-checked:left-[calc(100%-0.875rem)]",
)}
>
<CheckIcon
aria-hidden
className={cn(
"size-2.5 stroke-[3] opacity-0 transition-opacity",
"group-data-checked/switch:opacity-100",
"group-data-[size=sm]/switch:size-2",
)}
/>
<SwitchPrimitive.Thumb data-slot="switch-thumb" className={styles.thumb}>
<CheckIcon aria-hidden className={styles.check} />
</SwitchPrimitive.Thumb>
</SwitchPrimitive.Root>
);