bugfixes, and logging cleanup

frontend/src/lib/debug.ts

@@ -0,0 +1,90 @@
+/**
+ * Debug logging utility
+ * Allows conditional logging based on environment or debug flags
+ */
+
+// Check if we're in development mode or debug is explicitly enabled
+const isDebugEnabled = (): boolean => {
+  if (typeof window === 'undefined') {
+    // Server-side: check NODE_ENV
+    return process.env.NODE_ENV === 'development' || process.env.DEBUG === 'true';
+  }
+
+  // Client-side: check localStorage flag or development mode
+  try {
+    return (
+      process.env.NODE_ENV === 'development' ||
+      localStorage.getItem('debug') === 'true' ||
+      window.location.search.includes('debug=true')
+    );
+  } catch {
+    return process.env.NODE_ENV === 'development';
+  }
+};
+
+/**
+ * Debug logger that only outputs in development or when debug is enabled
+ */
+export const debug = {
+  log: (...args: any[]) => {
+    if (isDebugEnabled()) {
+      console.log('[DEBUG]', ...args);
+    }
+  },
+
+  warn: (...args: any[]) => {
+    if (isDebugEnabled()) {
+      console.warn('[DEBUG]', ...args);
+    }
+  },
+
+  error: (...args: any[]) => {
+    if (isDebugEnabled()) {
+      console.error('[DEBUG]', ...args);
+    }
+  },
+
+  group: (label: string) => {
+    if (isDebugEnabled()) {
+      console.group(`[DEBUG] ${label}`);
+    }
+  },
+
+  groupEnd: () => {
+    if (isDebugEnabled()) {
+      console.groupEnd();
+    }
+  },
+
+  time: (label: string) => {
+    if (isDebugEnabled()) {
+      console.time(`[DEBUG] ${label}`);
+    }
+  },
+
+  timeEnd: (label: string) => {
+    if (isDebugEnabled()) {
+      console.timeEnd(`[DEBUG] ${label}`);
+    }
+  }
+};
+
+/**
+ * Enable debug mode (persists in localStorage)
+ */
+export const enableDebug = () => {
+  if (typeof window !== 'undefined') {
+    localStorage.setItem('debug', 'true');
+    console.log('Debug mode enabled. Reload page to see debug output.');
+  }
+};
+
+/**
+ * Disable debug mode
+ */
+export const disableDebug = () => {
+  if (typeof window !== 'undefined') {
+    localStorage.removeItem('debug');
+    console.log('Debug mode disabled. Reload page to hide debug output.');
+  }
+};

frontend/src/lib/sanitization.ts

@@ -1,5 +1,6 @@
 import DOMPurify from 'dompurify';
 import { configApi } from './api';
+import { debug } from './debug';
 
 interface SanitizationConfig {
   allowedTags: string[];
@@ -28,7 +29,7 @@ function filterCssProperties(styleValue: string, allowedProperties: string[]): s
     const isAllowed = allowedProperties.includes(property);
     
     if (!isAllowed) {
-      console.log(`CSS property "${property}" was filtered out (not in allowed list)`);
+      debug.log(`CSS property "${property}" was filtered out (not in allowed list)`);
     }
     
     return isAllowed;
@@ -37,9 +38,9 @@ function filterCssProperties(styleValue: string, allowedProperties: string[]): s
   const result = filteredDeclarations.join('; ');
   
   if (declarations.length !== filteredDeclarations.length) {
-    console.log(`CSS filtering: ${declarations.length} -> ${filteredDeclarations.length} properties`);
-    console.log('Original:', styleValue);
-    console.log('Filtered:', result);
+    debug.log(`CSS filtering: ${declarations.length} -> ${filteredDeclarations.length} properties`);
+    debug.log('Original:', styleValue);
+    debug.log('Filtered:', result);
   }
   
   return result;
@@ -219,7 +220,7 @@ export function sanitizeHtmlSync(html: string): string {
 
   // If we don't have cached config but there's an ongoing request, wait for it
   if (configPromise) {
-    console.log('Sanitization config loading in progress, using fallback for now');
+    debug.log('Sanitization config loading in progress, using fallback for now');
   } else {
     // No config and no ongoing request - try to load it for next time
     console.warn('No cached sanitization config available, triggering load for future use');
@@ -229,7 +230,7 @@ export function sanitizeHtmlSync(html: string): string {
   }
 
   // Use comprehensive fallback configuration that preserves formatting
-  console.log('Using fallback sanitization configuration with formatting support');
+  debug.log('Using fallback sanitization configuration with formatting support');
   const fallbackAllowedCssProperties = [
     'color', 'font-size', 'font-weight', 
     'font-style', 'text-align', 'text-decoration', 'margin',