feature: the package installs the Router Manager, which is no longer a package of its own.

web/src/SettingsButton.tsx

@@ -0,0 +1,60 @@
+import SettingsIcon from '@mui/icons-material/Settings'
+import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, IconButton, MenuItem, Stack, TextField, Tooltip } from '@mui/material'
+import { useState } from 'react'
+import { DEFAULT_SETTINGS, REFRESH_CHOICES, refreshLabel, saveBrowserSettings, useBrowserSettings } from './settings.ts'
+
+/**
+ * An icon button that opens the settings of this browser: how often the Overview and the Metrics tab read the router on
+ * their own, or manual, when they read only when opened and on Refresh. A change applies at once and is kept in the
+ * browser; Defaults sets every setting back.
+ */
+export default function SettingsButton() {
+  const [open, setOpen] = useState(false)
+  const settings = useBrowserSettings()
+
+  return (
+    <>
+      <Tooltip title="Settings of this browser">
+        <IconButton aria-label="settings" onClick={() => setOpen(true)}>
+          <SettingsIcon />
+        </IconButton>
+      </Tooltip>
+      <Dialog open={open} onClose={() => setOpen(false)} maxWidth="xs" fullWidth>
+        <DialogTitle>Settings</DialogTitle>
+        <DialogContent>
+          <DialogContentText variant="body2" sx={{ mb: 2 }}>
+            Kept in this browser; other browsers keep their own.
+          </DialogContentText>
+          <Stack sx={{ gap: 2 }}>
+            <TextField
+              select
+              label="Overview tab refresh"
+              value={settings.routerRefresh}
+              helperText="Manual: read when the tab opens and on Refresh."
+              onChange={(event) => saveBrowserSettings({ ...settings, routerRefresh: Number(event.target.value) })}
+            >
+              {REFRESH_CHOICES.map((seconds) => <MenuItem key={seconds} value={seconds}>{refreshLabel(seconds)}</MenuItem>)}
+            </TextField>
+            <TextField
+              select
+              label="Metrics tab refresh"
+              value={settings.metricsRefresh}
+              helperText="The router takes a sample every minute."
+              onChange={(event) => saveBrowserSettings({ ...settings, metricsRefresh: Number(event.target.value) })}
+            >
+              {REFRESH_CHOICES.map((seconds) => <MenuItem key={seconds} value={seconds}>{refreshLabel(seconds)}</MenuItem>)}
+            </TextField>
+          </Stack>
+        </DialogContent>
+        <DialogActions>
+          <Button
+            onClick={() => saveBrowserSettings({ ...settings, routerRefresh: DEFAULT_SETTINGS.routerRefresh, metricsRefresh: DEFAULT_SETTINGS.metricsRefresh })}
+          >
+            Defaults
+          </Button>
+          <Button variant="contained" onClick={() => setOpen(false)}>Close</Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  )
+}