feat: Add theme normalization and API integration for theme settings

docker-compose.dev.yml

@@ -0,0 +1,50 @@
+services:
+  api:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    command: uvicorn main:app --host 0.0.0.0 --port 8000 --reload
+    ports:
+      - "8000:8000"
+    environment:
+      - DATABASE_HOST=db
+      - DATABASE_PORT=5432
+      - DATABASE_USER=calminer
+      - DATABASE_PASSWORD=calminer
+      - DATABASE_NAME=calminer_dev
+    volumes:
+      - .:/app
+    depends_on:
+      db:
+        condition: service_healthy
+    networks:
+      - calminer_backend
+
+  db:
+    image: postgres:16
+    restart: unless-stopped
+    environment:
+      - POSTGRES_DB=calminer_dev
+      - POSTGRES_USER=calminer
+      - POSTGRES_PASSWORD=calminer
+      - LANG=en_US.UTF-8
+      - LC_ALL=en_US.UTF-8
+      - POSTGRES_INITDB_ARGS=--encoding=UTF8 --locale=en_US.UTF-8
+    ports:
+      - "5432:5432"
+    volumes:
+      - pg_data_dev:/var/lib/postgresql/data
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U calminer -d calminer_dev"]
+      interval: 10s
+      timeout: 5s
+      retries: 5
+    networks:
+      - calminer_backend
+
+networks:
+  calminer_backend:
+    driver: bridge
+
+volumes:
+  pg_data_dev:

static/js/theme.js

@@ -41,6 +41,30 @@ document.addEventListener('DOMContentLoaded', () => {
     });
   });
 
+  const THEME_API_URL = '/api/settings/theme';
+
+  const normalizeTheme = (theme) => {
+    if (!theme || typeof theme !== 'object') {
+      return {};
+    }
+    const {
+      theme_name,
+      primary_color,
+      secondary_color,
+      accent_color,
+      background_color,
+      text_color,
+    } = theme;
+    return {
+      theme_name,
+      primary_color,
+      secondary_color,
+      accent_color,
+      background_color,
+      text_color,
+    };
+  };
+
   if (themeSettingsForm) {
     themeSettingsForm.addEventListener('submit', async (event) => {
       event.preventDefault();
@@ -49,7 +73,7 @@ document.addEventListener('DOMContentLoaded', () => {
       const themeData = Object.fromEntries(formData.entries());
 
       try {
-        const response = await fetch('/api/theme-settings', {
+        const response = await fetch(THEME_API_URL, {
           method: 'POST',
           headers: {
             'Content-Type': 'application/json',
@@ -58,9 +82,11 @@ document.addEventListener('DOMContentLoaded', () => {
         });
 
         if (response.ok) {
+          const payload = await response.json();
+          const savedTheme = normalizeTheme(payload?.theme ?? themeData);
           alert('Theme settings saved successfully!');
-          applyTheme(themeData);
+          applyTheme(savedTheme);
-          saveTheme(themeData);
+          saveTheme(savedTheme);
         } else {
           const errorData = await response.json();
           alert(`Error saving theme settings: ${errorData.detail}`);
@@ -91,9 +117,9 @@ document.addEventListener('DOMContentLoaded', () => {
     // If no saved theme, load from backend (if available)
     async function loadAndApplyThemeFromServer() {
       try {
-        const response = await fetch('/api/theme-settings'); // Assuming a GET endpoint for theme settings
+        const response = await fetch(THEME_API_URL);
         if (response.ok) {
-          const theme = await response.json();
+          const theme = normalizeTheme(await response.json());
           applyTheme(theme);
           saveTheme(theme); // Save to local storage for future use
         } else {