Fix workers editing

src/common/assets/content-editable.module.css

@@ -15,4 +15,5 @@
     color: var(--text-muted);
     font-style: italic;
     pointer-events: none;
+    position: absolute;
 }

src/games/hordeseer/assets/manage-workers-modal.module.css

@@ -154,8 +154,10 @@
 }
 
 .footer {
+    width: 100%;
     display: flex;
     justify-content: space-between;
+    flex-direction: row;
     align-items: center;
 }
 

src/games/hordeseer/components/modals/manage-workers-modal.tsx

@@ -7,19 +7,13 @@ import clsx from "clsx";
 import styles from "../../assets/manage-workers-modal.module.css";
 import ui from "@common/assets/ui.module.css";
 import { useHordeState } from "../../contexts/state";
-import { deleteWorker, fetchWorker, updateWorker, type WorkerData } from "../../utils/api";
+import { deleteWorker, fetchWorker, updateWorker, type WorkerData, type WorkerEdit } from "../../utils/api";
 
 interface Props {
     open: boolean;
     onClose: () => void;
 }
 
-interface WorkerEdit {
-    name: string;
-    info: string;
-    maintenance_mode: boolean;
-}
-
 interface WorkerCard {
     data: WorkerData;
     edit: WorkerEdit;
@@ -52,7 +46,7 @@ export const ManageWorkersModal = ({ open, onClose }: Props) => {
                 });
                 setWorkers(sorted.map(w => ({
                     data: w,
-                    edit: { name: w.name, info: w.info ?? '', maintenance_mode: w.maintenance_mode },
+                    edit: { name: w.name, info: w.info ?? '', maintenance: w.maintenance_mode },
                     saving: false,
                     saved: false,
                     deleting: false,
@@ -81,7 +75,13 @@ export const ManageWorkersModal = ({ open, onClose }: Props) => {
             const updated = await updateWorker(id, apiKey, worker.edit);
             setWorkers(prev => prev.map(w =>
                 w.data.id === id
-                    ? { ...w, data: updated, saving: false, saved: true }
+                    ? {
+                        ...w, data: {
+                            ...w.data,
+                            ...updated,
+                            maintenance_mode: Boolean(updated.maintenance),
+                        }, saving: false, saved: true
+                    }
                     : w
             ));
             setTimeout(() => {
@@ -129,7 +129,7 @@ export const ManageWorkersModal = ({ open, onClose }: Props) => {
     const hasChanges = workers.some(w =>
         w.edit.name !== w.data.name ||
         w.edit.info !== (w.data.info ?? '') ||
-        w.edit.maintenance_mode !== w.data.maintenance_mode
+        w.edit.maintenance !== w.data.maintenance_mode
     );
 
     const footer = (
@@ -151,7 +151,7 @@ export const ManageWorkersModal = ({ open, onClose }: Props) => {
     const hasChangesForWorker = (w: WorkerCard) =>
         w.edit.name !== w.data.name ||
         w.edit.info !== (w.data.info ?? '') ||
-        w.edit.maintenance_mode !== w.data.maintenance_mode;
+        w.edit.maintenance !== w.data.maintenance_mode;
 
     return (
         <Modal open={open && Boolean(user)} onClose={onClose} title="Manage Workers" class={styles.modal} footer={footer}>
@@ -206,8 +206,8 @@ export const ManageWorkersModal = ({ open, onClose }: Props) => {
                                 <label class={styles.checkboxLabel}>
                                     <input
                                         type="checkbox"
-                                        checked={w.edit.maintenance_mode}
-                                        onChange={e => setEdit(w.data.id, { maintenance_mode: (e.target as HTMLInputElement).checked })}
+                                        checked={w.edit.maintenance}
+                                        onChange={e => setEdit(w.data.id, { maintenance: (e.target as HTMLInputElement).checked })}
                                     />
                                     Maint.
                                 </label>

src/games/hordeseer/utils/api.ts

@@ -21,6 +21,12 @@ export interface WorkerData {
     info: string | null;
 }
 
+export interface WorkerEdit {
+    name: string;
+    info: string;
+    maintenance: boolean;
+}
+
 export interface UserData {
     username: string;
     kudos: number;
@@ -98,7 +104,7 @@ export const updateWorker = async (
     id: string,
     apiKey: string,
     patch: { name?: string; info?: string; maintenance_mode?: boolean }
-): Promise<WorkerData> => {
+): Promise<WorkerEdit> => {
     const res = await fetch(`${BASE}/workers/${id}`, {
         method: 'PUT',
         headers: headers(apiKey),