Merge main into bugfixing_bumps - keep bugfixing_bumps versions (Prisma 7, tsx support)

Author: MickLesk

next.config.js

@@ -53,9 +53,9 @@ const config = {
     }
     return config;
   },
-  // Ignore TypeScript errors during build (they can be fixed separately)
+  // TypeScript errors will fail the build
   typescript: {
-    ignoreBuildErrors: true,
+    ignoreBuildErrors: false,
   },
 };
 

src/app/_components/LXCSettingsModal.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, startTransition } from 'react';
 import { api } from '~/trpc/react';
 import { Button } from './ui/button';
 import { Input } from './ui/input';
@@ -159,9 +159,13 @@ export function LXCSettingsModal({ isOpen, script, onClose, onSave: _onSave }: L
   useEffect(() => {
     if (configData?.success) {
       populateFormData(configData);
-      setHasChanges(false);
+      startTransition(() => {
+        setHasChanges(false);
+      });
     } else if (configData && !configData.success) {
-      setError(String(configData.error ?? 'Failed to load configuration'));
+      startTransition(() => {
+        setError(String(configData.error ?? 'Failed to load configuration'));
+      });
     }
   }, [configData]);
 

src/app/_components/ReleaseNotesModal.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, startTransition } from 'react';
 import { api } from '~/trpc/react';
 import { Button } from './ui/button';
 import { Badge } from './ui/badge';
@@ -47,7 +47,9 @@ export function ReleaseNotesModal({ isOpen, onClose, highlightVersion }: Release
   // Get current version when modal opens
   useEffect(() => {
     if (isOpen && versionData?.success && versionData.version) {
-      setCurrentVersion(versionData.version);
+      startTransition(() => {
+        setCurrentVersion(versionData.version);
+      });
     }
   }, [isOpen, versionData]);
 

src/app/_components/ResyncButton.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useRef } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import { api } from '~/trpc/react';
 import { Button } from './ui/button';
 import { ContextualHelpIcon } from './ContextualHelpIcon';
@@ -11,6 +11,8 @@ export function ResyncButton() {
   const [syncMessage, setSyncMessage] = useState<string | null>(null);
   const hasReloadedRef = useRef<boolean>(false);
   const isUserInitiatedRef = useRef<boolean>(false);
+  const reloadTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const messageTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
   const resyncMutation = api.scripts.resyncScripts.useMutation({
     onSuccess: (data) => {
@@ -21,7 +23,16 @@ export function ResyncButton() {
         // Only reload if this was triggered by user action
         if (isUserInitiatedRef.current && !hasReloadedRef.current) {
           hasReloadedRef.current = true;
-          setTimeout(() => {
+          
+          // Clear any existing reload timeout
+          if (reloadTimeoutRef.current) {
+            clearTimeout(reloadTimeoutRef.current);
+            reloadTimeoutRef.current = null;
+          }
+          
+          // Set new reload timeout
+          reloadTimeoutRef.current = setTimeout(() => {
+            reloadTimeoutRef.current = null;
             window.location.reload();
           }, 2000); // Wait 2 seconds to show the success message
         } else {
@@ -31,14 +42,26 @@ export function ResyncButton() {
       } else {
         setSyncMessage(data.error ?? 'Failed to sync scripts');
         // Clear message after 3 seconds for errors
-        setTimeout(() => setSyncMessage(null), 3000);
+        if (messageTimeoutRef.current) {
+          clearTimeout(messageTimeoutRef.current);
+        }
+        messageTimeoutRef.current = setTimeout(() => {
+          setSyncMessage(null);
+          messageTimeoutRef.current = null;
+        }, 3000);
         isUserInitiatedRef.current = false;
       }
     },
     onError: (error) => {
       setIsResyncing(false);
       setSyncMessage(`Error: ${error.message}`);
-      setTimeout(() => setSyncMessage(null), 3000);
+      if (messageTimeoutRef.current) {
+        clearTimeout(messageTimeoutRef.current);
+      }
+      messageTimeoutRef.current = setTimeout(() => {
+        setSyncMessage(null);
+        messageTimeoutRef.current = null;
+      }, 3000);
       isUserInitiatedRef.current = false;
     },
   });
@@ -47,6 +70,12 @@ export function ResyncButton() {
     // Prevent multiple simultaneous sync operations
     if (isResyncing) return;
 
+    // Clear any pending reload timeout
+    if (reloadTimeoutRef.current) {
+      clearTimeout(reloadTimeoutRef.current);
+      reloadTimeoutRef.current = null;
+    }
+    
     // Mark as user-initiated before starting
     isUserInitiatedRef.current = true;
     hasReloadedRef.current = false;
@@ -55,6 +84,23 @@ export function ResyncButton() {
     resyncMutation.mutate();
   };
 
+  // Cleanup on unmount - clear any pending timeouts
+  useEffect(() => {
+    return () => {
+      if (reloadTimeoutRef.current) {
+        clearTimeout(reloadTimeoutRef.current);
+        reloadTimeoutRef.current = null;
+      }
+      if (messageTimeoutRef.current) {
+        clearTimeout(messageTimeoutRef.current);
+        messageTimeoutRef.current = null;
+      }
+      // Reset refs on unmount
+      hasReloadedRef.current = false;
+      isUserInitiatedRef.current = false;
+    };
+  }, []);
+
   return (
     <div className="flex flex-col sm:flex-row sm:items-center gap-3">
       <div className="text-sm text-muted-foreground font-medium">

src/app/_components/ThemeProvider.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { createContext, useContext, useEffect, useState } from 'react';
+import { createContext, useContext, useEffect, useState, startTransition } from 'react';
 
 type Theme = 'light' | 'dark';
 
@@ -31,9 +31,13 @@ export function ThemeProvider({ children }: ThemeProviderProps) {
   useEffect(() => {
     const savedTheme = localStorage.getItem('theme') as Theme;
     if (savedTheme && (savedTheme === 'light' || savedTheme === 'dark')) {
-      setThemeState(savedTheme);
+      startTransition(() => {
+        setThemeState(savedTheme);
+      });
     }
-    setMounted(true);
+    startTransition(() => {
+      setMounted(true);
+    });
   }, []);
 
   // Apply theme to document element