Space settings for custom space colors and favicon

Hello there,

Disclaimer: I have no prior knowledge about Atlassian Forge apps.

So I am trying to create a Confluence Cloud Forge app that offers a SpaceSettings panel where an admin can set colors and possibly a favicon per space. So far I have this index.jsx:

import ForgeUI, {render, Form, SpaceSettings, TextField} from '@forge/ui';

const App = () => {
    
    const onSubmit = (formData) => {
        console.log(formData);
      }
    
    return (
        <Form onSubmit={onSubmit}>
            <TextField name="header-background-color" label="Header Background Color" />
        </Form>
    );
};

export const run = render(
    <SpaceSettings>
        <App/>
    </SpaceSettings>
);

It displays the form, but I have no idea what to do next. How do I use the data to actually set space colors? How do I persist the settings?

Thanks so much,
Ingmar

Ok I cobbled together something, but it doesn’t seem to do anything:

import ForgeUI, {render, Form, SpaceSettings, TextField, useProductContext} from '@forge/ui';

import api from '@forge/api';
import { route } from '@forge/api';

const App = () => {

    const { extensionContext } = useProductContext();

    const onSubmit = async (formData) => {
        const spaceKey = extensionContext.spaceKey;
        const headerBackgroundColor = formData['header-background-color'];

        const response = await api.asUser().requestConfluence(route`/wiki/rest/api/space/${spaceKey}`, {
            method: 'PUT',
            body: JSON.stringify({
                metadata: {
                    properties: {
                        'header-bg-color': headerBackgroundColor,
                    },
                },
            })
        });
        console.log(response);
        
    };

    return (
        <Form onSubmit={onSubmit}>
            <TextField name="header-background-color" label="Header Background Color" />
        </Form>
    );
};

export const run = render(
    <SpaceSettings>
        <App/>
    </SpaceSettings>
);