Add editable system configuration flow

src/App.test.tsx

@@ -88,4 +88,27 @@ describe('App login gate', () => {
     expect(screen.queryByText(/night-shift/i)).not.toBeInTheDocument();
     expect(screen.queryByRole('dialog', { name: /delete user/i })).not.toBeInTheDocument();
   });
+
+  it('saves system settings from the system tab and applies them to the local fallback state', async () => {
+    const user = userEvent.setup();
+    render(<App />);
+
+    await loginIntoPanel(user);
+    await user.click(screen.getByRole('button', { name: /system/i }));
+
+    await user.clear(screen.getByLabelText(/public host/i));
+    await user.type(screen.getByLabelText(/public host/i), 'ops-gateway.example.net');
+
+    const firstPortInput = screen.getAllByLabelText(/port/i)[0];
+    await user.clear(firstPortInput);
+    await user.type(firstPortInput, '1180');
+
+    await user.click(screen.getByRole('button', { name: /save system/i }));
+
+    expect(screen.getByText(/ops-gateway\.example\.net/i)).toBeInTheDocument();
+
+    await user.click(screen.getByRole('button', { name: /users/i }));
+
+    expect(screen.getAllByText(/ops-gateway\.example\.net:1180/i).length).toBeGreaterThan(0);
+  });
 });