refactor(settings): one card per section

The name field takes its value from the page's own load, not from the user context: the context can still be empty when the form mounts.

src/pages/SettingsPage.test.jsx

@@ -265,3 +265,28 @@ describe('SettingsPage session', () => {
         expect(screen.queryByText('INFO.ERROR.LOAD_PROFILE')).toBeNull();
     });
 });
+
+describe('SettingsPage load order', () => {
+    beforeEach(() => localStorage.setItem('tbp_session', '1'));
+
+    afterEach(() => {
+        cleanup();
+        localStorage.clear();
+    });
+
+    it('shows the display name from its own load when the two /me answers arrive one after the other', async () => {
+        const open = [];
+        fetchRoutes({
+            ...authRoutes(() => profile()),
+            'GET /api/users/me': () => new Promise((resolve) => open.push(() => resolve(json(200, profile())))),
+        });
+        renderWithProviders(<SettingsPage/>);
+
+        await waitFor(() => expect(open).toHaveLength(2));
+        await act(async () => open.shift()());
+        await act(async () => open.shift()());
+
+        expect(await screen.findByText('a@b.de')).toBeTruthy();
+        expect(screen.getByLabelText('SETTINGS.DISPLAY_NAME').value).toBe('Lobo');
+    });
+});