fixes and improvements

frontend/src/pages/Settings.tsx

@@ -182,13 +182,33 @@ function MachineEditor({
 							/>
 						</Grid>
 						<Grid size={{ xs: 12, md: 3 }}>
-							<TextField
-								fullWidth
-								size="small"
-								label="Mode"
-								value={draft.mode}
-								disabled
-							/>
+							{editingMachine ? (
+								<TextField
+									fullWidth
+									size="small"
+									label="Mode"
+									value={draft.mode}
+									disabled
+								/>
+							) : (
+								<TextField
+									select
+									fullWidth
+									size="small"
+									label="Mode"
+									value={draft.mode}
+									onChange={(e) => {
+										const newMode = e.target.value as MonitoringMachineInput["mode"];
+										setDraft((current) => ({
+											...emptyMachine(newMode),
+											id: current.id,
+										}));
+									}}
+								>
+									<MenuItem value="local">Local</MenuItem>
+									<MenuItem value="ssh">SSH</MenuItem>
+								</TextField>
+							)}
 						</Grid>
 						<Grid size={{ xs: 12, md: 3 }}>
 							<FormControlLabel
@@ -1073,29 +1093,11 @@ export function Settings() {
 			null,
 		[orderedMachines, selectedMachineId],
 	);
-	const localMachines = orderedMachines.filter(
-		(machine) => machine.mode === "local",
-	);
-	const sshMachines = orderedMachines.filter(
-		(machine) => machine.mode === "ssh",
-	);
 	const clearSSHValidation = () => {
 		setSSHValidationMessage("");
 		setSSHValidationError("");
 		setSSHValidationStatus("");
 	};
-	const beginLocal = () => {
-		clearSSHValidation();
-		setMachineDraft(emptyMachine("local"));
-		setEditingMachine(null);
-		setMachineDialogOpen(true);
-	};
-	const beginRemote = () => {
-		clearSSHValidation();
-		setMachineDraft(emptyMachine("ssh"));
-		setEditingMachine(null);
-		setMachineDialogOpen(true);
-	};
 	const openEditMachine = (input: MonitoringMachineInput, original?: MonitoringMachine | null) => {
 		clearSSHValidation();
 		setMachineDraft(input);
@@ -1178,66 +1180,6 @@ export function Settings() {
 			>
 				{tab === "machines" && (
 					<Stack spacing={2}>
-						<Card variant="outlined">
-							<CardContent sx={{ p: 1.5 }}>
-								<Stack spacing={1.25}>
-									<Stack
-										direction="row"
-										spacing={1}
-										sx={{
-											alignItems: "center",
-											justifyContent: "space-between",
-											flexWrap: "wrap",
-										}}
-									>
-										<Box>
-											<Typography
-												variant="overline"
-												sx={{
-													display: "block",
-													lineHeight: 1.1,
-													color: "text.secondary",
-												}}
-											>
-												Quick actions
-											</Typography>
-											<Typography variant="body2" color="text.secondary">
-												Create a local profile or remote SSH target.
-											</Typography>
-										</Box>
-										<Stack
-											direction="row"
-											spacing={1}
-											sx={{ flexWrap: "wrap" }}
-										>
-											<Chip
-												label={`${orderedMachines.length} total`}
-												size="small"
-												variant="outlined"
-											/>
-											<Chip
-												label={`${localMachines.length} local`}
-												size="small"
-												variant="outlined"
-											/>
-											<Chip
-												label={`${sshMachines.length} ssh`}
-												size="small"
-												variant="outlined"
-											/>
-										</Stack>
-									</Stack>
-									<Stack direction="row" spacing={1} sx={{ flexWrap: "wrap" }}>
-										<Button variant="outlined" onClick={beginLocal}>
-											New local machine
-										</Button>
-										<Button variant="outlined" onClick={beginRemote}>
-											New SSH machine
-										</Button>
-									</Stack>
-								</Stack>
-							</CardContent>
-						</Card>
 						{orderedMachines.length > 0 ? (
 							<Box
 								sx={{
@@ -1253,6 +1195,21 @@ export function Settings() {
 									title="Machines"
 									description="Select a machine to see its settings."
 									minHeight={420}
+									footer={
+										<Button
+											variant="outlined"
+											size="small"
+											fullWidth
+											onClick={() => {
+												clearSSHValidation();
+												setMachineDraft(emptyMachine("local"));
+												setEditingMachine(null);
+												setMachineDialogOpen(true);
+											}}
+										>
+											Add machine
+										</Button>
+									}
 								>
 									<Box sx={{ flex: 1, overflowY: "auto" }}>
 										{orderedMachines.map((machine) => {