Adjust maintenance status card

app/root/maintenance/page.tsx

@@ -22,7 +22,7 @@ const copy = {
   maintenanceText: "Wenn aktiv, werden alle Seiten auf die Coming Soon Seite weitergeleitet.",
   maintenanceOn: "Aktiv",
   maintenanceOff: "Inaktiv",
-  selectHint: "Aenderung erfolgt jetzt direkt ueber den Schalter in der Sidebar und wird mit dem Save Button oben gespeichert.",
+  selectHint: "Aenderung erfolgt jetzt direkt ueber den Schalter in der Sidebar.",
   logout: "Ausloggen",
   backToSite: "Zur Website",
 };

components/root/root-dashboard-shell.tsx

@@ -119,9 +119,7 @@ export async function RootDashboardShell({
           <SidebarMaintenanceControl
             action={updateMaintenanceModeAction}
             initialEnabled={maintenanceEnabled}
-            label={copy.maintenance}
+            label="Mohs Status"
-            onLabel="Besucher gesperrt"
-            offLabel="Website offen"
           />
           <Button
             asChild

components/root/sidebar-maintenance-control.tsx

@@ -2,7 +2,8 @@
 
 import { ShieldAlert } from "lucide-react";
 import { usePathname } from "next/navigation";
-import { useState } from "react";
+import { useRef, useState } from "react";
+import { useFormStatus } from "react-dom";
 
 import { Badge } from "@/components/ui/badge";
 import { Checkbox } from "@/components/ui/checkbox";
@@ -12,31 +13,35 @@ type SidebarMaintenanceControlProps = {
   action: (formData: FormData) => Promise<void>;
   initialEnabled: boolean;
   label: string;
-  onLabel: string;
-  offLabel: string;
 };
 
-export function SidebarMaintenanceControl({
+type SidebarMaintenanceFieldProps = Omit<
-  action,
+  SidebarMaintenanceControlProps,
-  initialEnabled,
+  "action" | "initialEnabled"
+> & {
+  enabled: boolean;
+  onToggle: (checked: boolean) => void;
+};
+
+function SidebarMaintenanceField({
+  enabled,
   label,
-  onLabel,
+  onToggle,
-  offLabel,
+}: SidebarMaintenanceFieldProps) {
-}: SidebarMaintenanceControlProps) {
+  const { pending } = useFormStatus();
-  const pathname = usePathname();
-  const [enabled, setEnabled] = useState(initialEnabled);
 
   return (
-    <form id="sidebar-maintenance-form" action={action} className="space-y-2">
+    <>
-      <input type="hidden" name="redirectPath" value={pathname} />
-
       <label
         htmlFor="sidebar-maintenance-enabled"
+        aria-disabled={pending}
         className={cn(
-          "flex cursor-pointer items-center justify-between gap-3 rounded-nested border px-3 py-2 transition-colors",
+          "flex items-center justify-between gap-3 rounded-nested border px-3 py-2 transition-colors",
+          pending && "cursor-wait opacity-70",
+          !pending && "cursor-pointer",
           enabled
             ? "border-status-warning/40 bg-status-warning-soft/80"
-            : "border-input bg-card hover:bg-accent/20",
+            : "border-status-success/30 bg-status-success-soft/80 hover:bg-status-success-soft",
         )}
       >
         <span className="flex min-w-0 items-center gap-3">
@@ -45,33 +50,67 @@ export function SidebarMaintenanceControl({
               "flex h-9 w-9 items-center justify-center rounded-pill border",
               enabled
                 ? "border-status-warning/40 bg-status-warning-soft text-status-warning"
-                : "border-border bg-background text-muted-foreground",
+                : "border-status-success/30 bg-status-success-soft text-status-success",
             )}
           >
             <ShieldAlert className="h-4 w-4" />
           </span>
-          <span className="min-w-0">
+          <span className="min-w-0 text-sm font-medium text-foreground">{label}</span>
-            <span className="block text-sm font-medium text-foreground">{label}</span>
-            <span className="block text-xs text-muted-foreground">
-              {enabled ? onLabel : offLabel}
-            </span>
-          </span>
         </span>
 
         <Badge variant={enabled ? "warning" : "success"}>
-          {enabled ? "ON" : "OFF"}
+          {enabled ? "OFFLINE" : "LIVE"}
         </Badge>
       </label>
 
       <Checkbox
         id="sidebar-maintenance-enabled"
-        name="enabled"
         checked={enabled}
         checkedValue="true"
         uncheckedValue="false"
-        onCheckedChange={(checked) => setEnabled(checked === true)}
+        disabled={pending}
+        onCheckedChange={(checked) => onToggle(checked === true)}
         className="sr-only"
       />
+    </>
+  );
+}
+
+export function SidebarMaintenanceControl({
+  action,
+  initialEnabled,
+  label,
+}: SidebarMaintenanceControlProps) {
+  const formRef = useRef<HTMLFormElement>(null);
+  const enabledInputRef = useRef<HTMLInputElement>(null);
+  const pathname = usePathname();
+  const [enabled, setEnabled] = useState(initialEnabled);
+
+  return (
+    <form
+      id="sidebar-maintenance-form"
+      ref={formRef}
+      action={action}
+      className="space-y-2"
+    >
+      <input type="hidden" name="redirectPath" value={pathname} />
+      <input
+        ref={enabledInputRef}
+        type="hidden"
+        name="enabled"
+        value={enabled ? "true" : "false"}
+      />
+      <SidebarMaintenanceField
+        enabled={enabled}
+        label={label}
+        onToggle={(checked) => {
+          setEnabled(checked);
+          if (enabledInputRef.current) {
+            enabledInputRef.current.value = checked ? "true" : "false";
+          }
+          formRef.current?.requestSubmit();
+        }}
+      />
     </form>
   );
 }