Merge pull request #359 from community-scripts/fix/352

fix: align toggle switches in repository settings

Author: michelroegl-brunner

src/app/_components/GeneralSettingsModal.tsx

@@ -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>
                         ),

src/app/_components/ui/toggle.tsx

@@ -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>