From b0f9f5cd04cb10e86eff381a08108cf4b36509b3 Mon Sep 17 00:00:00 2001
From: Chris Wilkinson <chris@prereview.org>
Date: Fri, 25 Oct 2024 11:20:30 +0100
Subject: [PATCH] Create a stub web component for the locale picker

Refs #2044
---
 assets/locale-picker.ts |  5 +++++
 src/page.ts             | 11 ++++++++---
 webpack.config.cjs      |  1 +
 3 files changed, 14 insertions(+), 3 deletions(-)
 create mode 100644 assets/locale-picker.ts

diff --git a/assets/locale-picker.ts b/assets/locale-picker.ts
new file mode 100644
index 000000000..004e54a9b
--- /dev/null
+++ b/assets/locale-picker.ts
@@ -0,0 +1,5 @@
+export class LocalePicker extends HTMLElement {
+  static element = 'locale-picker' as const
+}
+
+window.customElements.define(LocalePicker.element, LocalePicker)
diff --git a/src/page.ts b/src/page.ts
index 542caf36b..660fbf6bc 100644
--- a/src/page.ts
+++ b/src/page.ts
@@ -117,6 +117,9 @@ export function page({
             ),
           )}
           ${scripts.map(file => html` <script src="${assets[file].path}" type="module"></script>`)}
+          ${canChooseLocale === true
+            ? html`<script src="${assets['locale-picker.js'].path}" type="module"></script>`
+            : ''}}
           ${typeof fathomId === 'string'
             ? html` <script src="https://cdn.usefathom.com/script.js" data-site="${fathomId}" defer></script>`
             : ''}
@@ -313,9 +316,11 @@ export function page({
                         <div>
                           <p>Choose your language:</p>
 
-                          <ul>
-                            <li><a href="#">English</a></li>
-                          </ul>
+                          <locale-picker>
+                            <ul>
+                              <li><a href="#">English</a></li>
+                            </ul>
+                          </locale-picker>
                         </div>
                       `
                     : ''}
diff --git a/webpack.config.cjs b/webpack.config.cjs
index e1cb6a09e..3344b1d22 100644
--- a/webpack.config.cjs
+++ b/webpack.config.cjs
@@ -23,6 +23,7 @@ module.exports = (env, argv) => ({
     'favicon.ico': path.resolve('assets', 'favicon.ico'),
     'favicon.svg': path.resolve('assets', 'favicon.svg'),
     'html-editor': path.resolve('assets', 'html-editor.ts'),
+    'locale-picker': path.resolve('assets', 'locale-picker.ts'),
     'notification-banner': path.resolve('assets', 'notification-banner.ts'),
     'poll-redirect': path.resolve('assets', 'poll-redirect.ts'),
     'single-use-form': path.resolve('assets', 'single-use-form.ts'),