Added a theme selector

frontend/static/admin.js

@@ -11,6 +11,9 @@ const adminAuthNotice = document.querySelector('#admin-auth-notice');
 const smtpForm = document.querySelector('#smtp-form');
 const smtpTestButton = document.querySelector('#smtp-test-button');
 const smtpStatus = document.querySelector('#smtp-status');
+const themesForm = document.querySelector('#themes-form');
+const themeOptions = document.querySelector('#theme-options');
+const themeStatus = document.querySelector('#theme-status');
 let smtpNextAllowedAt = null;
 let smtpTimerHandle = null;
 const accessToken = localStorage.getItem('linklogAccessToken');
@@ -113,6 +116,22 @@ async function loadSmtpSettings() {
   }
 }
 
+async function loadThemes() {
+  const response = await fetch('/api/admin/themes', {headers: authHeaders()});
+  if (!response.ok) throw new Error('Could not load themes');
+  const result = await response.json();
+  themeOptions.replaceChildren(...Object.entries(result.themes).map(([id, theme]) => {
+    const label = document.createElement('label');
+    const checkbox = document.createElement('input');
+    checkbox.type = 'checkbox';
+    checkbox.name = 'theme';
+    checkbox.value = id;
+    checkbox.checked = result.enabled.includes(id);
+    label.append(checkbox, document.createTextNode(` ${theme.label}`));
+    return label;
+  }));
+}
+
 function renderUsers(users) {
   userList.replaceChildren(...users.map((user) => {
     const row = document.createElement('div');
@@ -185,7 +204,7 @@ async function loadAdminState() {
     return;
   }
 
-  await Promise.all([loadUsers(), loadPlugins(), loadLabels(), loadSmtpSettings()]);
+  await Promise.all([loadUsers(), loadPlugins(), loadLabels(), loadSmtpSettings(), loadThemes()]);
   showAdminState(true);
 }
 
@@ -312,6 +331,19 @@ smtpTestButton.addEventListener('click', async () => {
   updateSmtpTimer();
 });
 
+themesForm.addEventListener('submit', async (event) => {
+  event.preventDefault();
+  const themes = [...themesForm.querySelectorAll('input[name="theme"]:checked')].map((input) => input.value);
+  const response = await fetch('/api/admin/themes', {
+    method: 'PUT',
+    headers: authHeaders(true),
+    body: JSON.stringify({themes}),
+  });
+  const result = await response.json();
+  themeStatus.textContent = response.ok ? 'Themes saved.' : (result.detail || 'Could not save themes.');
+  themeStatus.style.color = response.ok ? '#94e2d5' : '#f38ba8';
+});
+
 loadAdminState().catch((error) => {
   showAdminState(false);
   adminAuthNotice.textContent = accessToken
@@ -322,5 +354,6 @@ loadAdminState().catch((error) => {
   pluginList.textContent = '';
   adminLabelList.textContent = '';
   smtpForm.reset();
+  themesForm.reset();
 });
 })();