Merge pull request #359 from community-scripts/fix/352
fix: align toggle switches in repository settings
This commit is contained in:
Michel Roegl-Brunner
@@ -1630,7 +1630,7 @@ export function GeneralSettingsModal({
|
||||
https://github.com/owner/repo)
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="border-border flex items-center justify-between gap-3 rounded-lg border p-3">
|
||||
<div>
|
||||
<p className="text-foreground text-sm font-medium">
|
||||
Enable after adding
|
||||
@@ -1644,6 +1644,7 @@ export function GeneralSettingsModal({
|
||||
onCheckedChange={setNewRepoEnabled}
|
||||
disabled={isAddingRepo}
|
||||
label="Enable repository"
|
||||
labelPosition="left"
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
@@ -1739,44 +1740,7 @@ export function GeneralSettingsModal({
|
||||
{repo.enabled ? "• Enabled" : "• Disabled"}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Toggle
|
||||
checked={repo.enabled}
|
||||
onCheckedChange={async (enabled) => {
|
||||
setMessage(null);
|
||||
try {
|
||||
const result =
|
||||
await updateRepoMutation.mutateAsync({
|
||||
id: repo.id,
|
||||
enabled,
|
||||
});
|
||||
if (result.success) {
|
||||
setMessage({
|
||||
type: "success",
|
||||
text: `Repository ${enabled ? "enabled" : "disabled"} successfully!`,
|
||||
});
|
||||
await refetchRepositories();
|
||||
} else {
|
||||
setMessage({
|
||||
type: "error",
|
||||
text:
|
||||
result.error ??
|
||||
"Failed to update repository",
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
setMessage({
|
||||
type: "error",
|
||||
text:
|
||||
error instanceof Error
|
||||
? error.message
|
||||
: "Failed to update repository",
|
||||
});
|
||||
}
|
||||
}}
|
||||
disabled={updateRepoMutation.isPending}
|
||||
label={repo.enabled ? "Disable" : "Enable"}
|
||||
/>
|
||||
<div className="flex items-center gap-2 flex-shrink-0">
|
||||
<Button
|
||||
onClick={async () => {
|
||||
if (!repo.is_removable) {
|
||||
@@ -1837,6 +1801,44 @@ export function GeneralSettingsModal({
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
<Toggle
|
||||
checked={repo.enabled}
|
||||
onCheckedChange={async (enabled) => {
|
||||
setMessage(null);
|
||||
try {
|
||||
const result =
|
||||
await updateRepoMutation.mutateAsync({
|
||||
id: repo.id,
|
||||
enabled,
|
||||
});
|
||||
if (result.success) {
|
||||
setMessage({
|
||||
type: "success",
|
||||
text: `Repository ${enabled ? "enabled" : "disabled"} successfully!`,
|
||||
});
|
||||
await refetchRepositories();
|
||||
} else {
|
||||
setMessage({
|
||||
type: "error",
|
||||
text:
|
||||
result.error ??
|
||||
"Failed to update repository",
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
setMessage({
|
||||
type: "error",
|
||||
text:
|
||||
error instanceof Error
|
||||
? error.message
|
||||
: "Failed to update repository",
|
||||
});
|
||||
}
|
||||
}}
|
||||
disabled={updateRepoMutation.isPending}
|
||||
label={repo.enabled ? "Disable" : "Enable"}
|
||||
labelPosition="left"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
|
||||
@@ -6,30 +6,40 @@ export interface ToggleProps
|
||||
checked?: boolean;
|
||||
onCheckedChange?: (checked: boolean) => void;
|
||||
label?: string;
|
||||
labelPosition?: 'left' | 'right';
|
||||
}
|
||||
|
||||
const Toggle = React.forwardRef<HTMLInputElement, ToggleProps>(
|
||||
({ className, checked, onCheckedChange, label, ...props }, ref) => {
|
||||
({ className, checked, onCheckedChange, label, labelPosition = 'right', ...props }, ref) => {
|
||||
const toggleSwitch = (
|
||||
<label className="relative inline-flex items-center cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="sr-only"
|
||||
checked={checked}
|
||||
onChange={(e) => onCheckedChange?.(e.target.checked)}
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>
|
||||
<div className={cn(
|
||||
"w-11 h-6 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary/20 rounded-full peer after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 dark:after:border-gray-500 after:border after:rounded-full after:h-5 after:w-5 after:transition-transform after:duration-300 after:ease-in-out after:shadow-md transition-colors duration-300 ease-in-out border-2 border-gray-300 dark:border-gray-600",
|
||||
checked
|
||||
? "bg-blue-500 dark:bg-blue-600 after:translate-x-full"
|
||||
: "bg-gray-300 dark:bg-gray-700",
|
||||
className
|
||||
)} />
|
||||
</label>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="flex items-center space-x-3">
|
||||
<label className="relative inline-flex items-center cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="sr-only"
|
||||
checked={checked}
|
||||
onChange={(e) => onCheckedChange?.(e.target.checked)}
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>
|
||||
<div className={cn(
|
||||
"w-11 h-6 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary/20 rounded-full peer after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 dark:after:border-gray-500 after:border after:rounded-full after:h-5 after:w-5 after:transition-transform after:duration-300 after:ease-in-out after:shadow-md transition-colors duration-300 ease-in-out border-2 border-gray-300 dark:border-gray-600",
|
||||
checked
|
||||
? "bg-blue-500 dark:bg-blue-600 after:translate-x-full"
|
||||
: "bg-gray-300 dark:bg-gray-700",
|
||||
className
|
||||
)} />
|
||||
</label>
|
||||
{label && (
|
||||
{label && labelPosition === 'left' && (
|
||||
<span className="text-sm font-medium text-foreground">
|
||||
{label}
|
||||
</span>
|
||||
)}
|
||||
{toggleSwitch}
|
||||
{label && labelPosition === 'right' && (
|
||||
<span className="text-sm font-medium text-foreground">
|
||||
{label}
|
||||
</span>
|
||||
|
||||
Reference in New Issue
Block a user