fix(dashboard): Resolve drag-and-drop and hooks type errors

Address TypeScript type errors in `Dashboard.tsx` related to event handler props. This also resolves a "Rules of Hooks" violation in `CategoryColorModal.tsx` by ensuring hooks are called unconditionally, preventing crashes when opening the color customization modal.

Author: beNative

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 All notable changes to this project will be documented in this file.
 
+## [0.8.1]
+
+### Fixed
+- **CRITICAL:** Fixed a crash (React error #310) that occurred when opening the "Customize Color" modal for a category. This was caused by a violation of the Rules of Hooks.
+- Fixed several TypeScript type errors related to event handlers in the Dashboard component, improving code stability.
+
 ## [0.8.0]
 
 ### Fixed
@@ -176,4 +182,4 @@ All notable changes to this project will be documented in this file.
 -   Global settings for package manager and build commands.
 -   **Electron Packaging:** Application is fully packaged for Windows, macOS, and Linux using Electron and esbuild.
 -   **Automatic Updates:** Integrated `electron-updater` to automatically check for and install new versions from GitHub Releases.
--   **In-App Documentation Viewer:** Added an "Info Hub" to view the README, functional manual, technical manual, and this changelog directly within the application.
+-   **In-App Documentation Viewer:** Added an "Info Hub" to view the README, functional manual, technical manual, and this changelog directly within the application.

components/Dashboard.tsx

@@ -148,7 +148,6 @@ const Dashboard: React.FC<DashboardProps> = (props) => {
             const isBeingDragged = draggedRepo?.repoId === repo.id;
             const indicator = dropIndicator?.repoId === repo.id && dropIndicator?.categoryId === categoryId ? dropIndicator : null;
             return (
-// FIX START: Remove wrapper div and pass props explicitly to RepositoryCard to fix type errors.
                 <RepositoryCard
                     key={repo.id}
                     repository={repo}
@@ -157,8 +156,8 @@ const Dashboard: React.FC<DashboardProps> = (props) => {
                     detailedStatus={props.detailedStatuses[repo.id] || null}
                     branchInfo={props.branchLists[repo.id] || null}
                     detectedExecutables={props.detectedExecutables[repo.id] || []}
-                    onDragStart={() => handleDragStart(repo.id, categoryId)}
-                    onDragEnd={() => { setDraggedRepo(null); setDropIndicator(null); }}
+                    onDragStart={(e) => handleDragStart(repo.id, categoryId)}
+                    onDragEnd={(e) => { setDraggedRepo(null); setDropIndicator(null); }}
                     isBeingDragged={isBeingDragged}
                     dropIndicatorPosition={indicator ? indicator.position : null}
                     onDragOver={(e) => handleDragOver(e, categoryId, repo.id)}
@@ -183,7 +182,6 @@ const Dashboard: React.FC<DashboardProps> = (props) => {
                     setToast={props.setToast}
                     onRefreshRepoState={props.onRefreshRepoState}
                 />
-// FIX END
             );
         })}
     </div>
@@ -285,4 +283,4 @@ const Dashboard: React.FC<DashboardProps> = (props) => {
   );
 };
 
-export default Dashboard;
+export default Dashboard;

components/modals/CategoryColorModal.tsx

@@ -33,6 +33,10 @@ const PREDEFINED_THEMES = [
 const CategoryColorModal: React.FC<CategoryColorModalProps> = ({ isOpen, onClose, onSave, currentBgColor, currentTextColor }) => {
   const [bgColor, setBgColor] = useState(currentBgColor || '');
   const [textColor, setTextColor] = useState(currentTextColor || '');
+  
+  // FIX: Hooks must be called unconditionally at the top level of the component.
+  const customBgTooltip = useTooltip('Custom background color');
+  const customTextTooltip = useTooltip('Custom text color');
 
   if (!isOpen) {
     return null;
@@ -50,9 +54,6 @@ const CategoryColorModal: React.FC<CategoryColorModalProps> = ({ isOpen, onClose
       setBgColor(theme.bg);
       setTextColor(theme.text);
   };
-  
-  const customBgTooltip = useTooltip('Custom background color');
-  const customTextTooltip = useTooltip('Custom text color');
 
 
   return (

package.json

@@ -1,6 +1,6 @@
 {
   "name": "git-automation-dashboard",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "description": "A dashboard to manage and automate the workflow for a set of Git repositories.",
   "main": "dist/main.js",
   "author": "AI Assistant",
@@ -73,4 +73,4 @@
       }
     ]
   }
-}
+}