fix comments

Author: Naseem77

app/src/components/chat/ChatMessage.tsx

@@ -227,7 +227,7 @@ const ChatMessage = ({ type, content, steps, queryData, analysisInfo, confirmati
                       </thead>
                       <tbody>
                         {queryData.map((row, index) => (
-                          <tr key={index} className="border-b border-border/50 hover:bg-muted/30">
+                          <tr key={index} className="border-b border-border hover:bg-muted">
                             {Object.values(row).map((value: any, cellIndex) => (
                               <td key={cellIndex} className="px-3 py-2 text-foreground whitespace-nowrap">
                                 {String(value)}

app/src/components/modals/DatabaseModal.tsx

@@ -107,18 +107,26 @@ const DatabaseModal = ({ open, onOpenChange }: DatabaseModalProps) => {
       });
 
       if (!response.ok) {
+        // Try to parse error message from server for all error responses
+        try {
+          const errorData = await response.json();
+          if (errorData.error) {
+            throw new Error(errorData.error);
+          }
+        } catch (jsonError) {
+          // If JSON parsing fails, fall back to status-based messages
+        }
+
+        // Fallback error messages by status code
         const errorMessages: Record<number, string> = {
+          400: 'Invalid database connection URL.',
           401: 'Not authenticated. Please sign in to connect databases.',
           403: 'Access denied. You do not have permission to connect databases.',
+          409: 'Conflict with existing database connection.',
+          422: 'Invalid database connection parameters.',
           500: 'Server error. Please try again later.',
         };
 
-        // For 400, try to get server error message first
-        if (response.status === 400) {
-          const errorData = await response.json().catch(() => ({}));
-          throw new Error(errorData.error || 'Invalid database connection URL.');
-        }
-
         throw new Error(errorMessages[response.status] || `Failed to connect to database (${response.status})`);
       }
 

app/src/components/ui/theme-toggle.tsx

@@ -12,8 +12,9 @@ type Theme = "light" | "dark";
 const ThemeToggle = () => {
   const [theme, setTheme] = useState<Theme>(() => {
     try {
-      const savedTheme = localStorage.getItem("theme") as Theme;
-      return savedTheme || "dark";
+      const savedTheme = localStorage.getItem("theme");
+      // Normalize: only accept "light" or "dark", default to "dark"
+      return (savedTheme === "light" || savedTheme === "dark") ? savedTheme : "dark";
     } catch {
       return "dark";
     }

app/src/index.css

@@ -228,55 +228,7 @@ Based on shadcn/ui Clean Slate theme with OKLch color space for perceptual unifo
   }
 }
 
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-  --font-sans: var(--font-sans);
-  --font-mono: var(--font-mono);
-  --font-serif: var(--font-serif);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --shadow-2xs: var(--shadow-2xs);
-  --shadow-xs: var(--shadow-xs);
-  --shadow-sm: var(--shadow-sm);
-  --shadow: var(--shadow);
-  --shadow-md: var(--shadow-md);
-  --shadow-lg: var(--shadow-lg);
-  --shadow-xl: var(--shadow-xl);
-  --shadow-2xl: var(--shadow-2xl);
-}
+/* Removed @theme inline block - incompatible with Tailwind v3 */
 
 @layer base {
   * {

app/src/main.tsx

@@ -4,8 +4,14 @@ import "./index.css";
 
 // Initialize theme on page load
 try {
-  const savedTheme = localStorage.getItem("theme") || "dark";
-  document.documentElement.setAttribute("data-theme", savedTheme);
+  const savedTheme = localStorage.getItem("theme");
+  // Normalize: only accept "light" or "dark", default to "dark"
+  const theme = (savedTheme === "light" || savedTheme === "dark") ? savedTheme : "dark";
+  document.documentElement.setAttribute("data-theme", theme);
+  // Update localStorage if we normalized the value
+  if (savedTheme !== theme) {
+    localStorage.setItem("theme", theme);
+  }
 } catch {
   document.documentElement.setAttribute("data-theme", "dark");
 }

app/tailwind.config.ts

@@ -1,7 +1,7 @@
 import type { Config } from "tailwindcss";
 
 export default {
-  darkMode: ["class"],
+  darkMode: ["selector", "[data-theme='dark']"],
   content: [
     "./index.html",
     "./src/**/*.{ts,tsx,js,jsx}",