fix: Ensure color theme syncs correctly by updating useEffect dependencies, refactor email base URL assignment, and add baseline-browser-mapping dependency.

bun.lock

@@ -69,6 +69,7 @@
         "@types/raf": "^3.4.3",
         "@types/react": "^19.2.7",
         "@types/react-dom": "^19.2.3",
+        "baseline-browser-mapping": "^2.8.32",
         "dotenv": "^17.2.3",
         "drizzle-kit": "^0.30.6",
         "eslint": "^9.39.1",

package.json

@@ -88,6 +88,7 @@
     "@types/raf": "^3.4.3",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
+    "baseline-browser-mapping": "^2.8.32",
     "dotenv": "^17.2.3",
     "drizzle-kit": "^0.30.6",
     "eslint": "^9.39.1",

postcss.config.js

@@ -1,5 +1,7 @@
-export default {
+const config = {
   plugins: {
     "@tailwindcss/postcss": {},
   },
 };
+
+export default config;

prettier.config.js

@@ -1,4 +1,6 @@
 /** @type {import('prettier').Config & import('prettier-plugin-tailwindcss').PluginOptions} */
-export default {
+const config = {
   plugins: ["prettier-plugin-tailwindcss"],
 };
+
+export default config;

src/components/providers/color-theme-provider.tsx

@@ -49,12 +49,7 @@ export function ColorThemeProvider({
 
   const updateThemeMutation = api.settings.updateTheme.useMutation();
 
-  // Sync from DB when available
+
-  React.useEffect(() => {
-    if (dbTheme) {
-      setColorTheme(dbTheme.colorTheme, dbTheme.customColor);
-    }
-  }, [dbTheme]);
 
   const setColorTheme = React.useCallback(
     (theme: ColorTheme, customColor?: string) => {
@@ -131,6 +126,13 @@ export function ColorThemeProvider({
     [modeTheme, defaultColorTheme],
   );
 
+  // Sync from DB when available
+  React.useEffect(() => {
+    if (dbTheme) {
+      setColorTheme(dbTheme.colorTheme, dbTheme.customColor);
+    }
+  }, [dbTheme, setColorTheme]);
+
   // Effect to trigger DB update when state changes (debounced or direct)
   // We do this separately to avoid putting mutation in the setColorTheme callback dependencies if possible
   // But actually, calling it in setColorTheme is better for direct user action.

src/server/api/routers/email.ts

@@ -108,9 +108,7 @@ export const emailRouter = createTRPCRouter({
         customMessage: input.customMessage,
         userName,
         userEmail,
-        baseUrl: process.env.NEXT_PUBLIC_APP_URL
+        baseUrl: process.env.NEXT_PUBLIC_APP_URL ?? "http://localhost:3000",
-          ? process.env.NEXT_PUBLIC_APP_URL
-          : "http://localhost:3000",
       });
 
       // Determine Resend instance and email configuration to use