Fix Preact app CSS in shadow DOM

Since the Preact app has now been moved into a shadow DOM the app's CSS
was no longer working: the `<link>` elements for the app's stylesheets
were outside of the shadow DOM where they don't affect the content
inside the shadow DOM.

The `<link>`'s to the app's stylesheets need to be moved into the shadow
DOM. The problem is that the Preact app renders the contents of the
shadow DOM, but the stylesheet URLs are only available to the Jinja
templates and not available to the Preact app, but the Jinja templates
only render the outer page not the contents of the shadow DOM.

Get around this by having the Jinja templates pass the stylesheet URLs
into the Preact app so that the Preact app can render the `<link>`'s in
the shadow DOM: change the `create.html.jinja2` template to render the
app's stylesheet URLs in a `"js-config"` object instead of actually
rendering them as stylesheet `<link>`'s, then change the Preact app to
read the stylesheet URLs from the `"js-config"` object and to render
`<link>`'s for the stylesheet URLs into the shadow DOM.

This `"js-config"` object can be used more in future when we need the
Python code/Jinja templates to pass more configuration into the Preact
app.

h/static/scripts/group-forms/config.ts

@@ -0,0 +1,9 @@
+export type ConfigObject = {
+  /** The URLs of the app's CSS stylesheets. */
+  styles: string[];
+};
+
+/** Return the frontend config from the page's <script class="js-config">. */
+export default function readConfig(): ConfigObject {
+  return JSON.parse(document.querySelector('.js-config')!.textContent!);
+}

h/static/scripts/group-forms/index.tsx

@@ -1,11 +1,22 @@
 import { render } from 'preact';
 
 import CreateGroupForm from './components/CreateGroupForm';
+import readConfig from './config';
 
 function init() {
   const shadowHost = document.querySelector('#create-group-form')!;
   const shadowRoot = shadowHost.attachShadow({ mode: 'open' });
-  render(<CreateGroupForm />, shadowRoot);
+  const config = readConfig();
+  const stylesheetLinks = config.styles.map(stylesheetURL => (
+    <link rel="stylesheet" href={stylesheetURL} />
+  ));
+  render(
+    <>
+      {stylesheetLinks}
+      <CreateGroupForm />
+    </>,
+    shadowRoot,
+  );
 }
 
 init();

h/templates/groups/create.html.jinja2

@@ -2,16 +2,13 @@
 
 {% set page_title = 'Create a new private group' %}
 
-{% block styles %}
-  {{ super() }}
-
-  {% for url in asset_urls('group_forms_css') %}
-    <link rel="stylesheet" href="{{ url }}">
-  {% endfor %}
-{% endblock %}
-
 {% block page_content %}
   <div id="create-group-form"></div>
+  <script type="application/json" class="js-config">
+    {
+      "styles": {{ asset_urls("group_forms_css")|tojson }}
+    }
+  </script>
 {% endblock %}
 
 {% block scripts %}