feat: implemented auto-scroll when change category on statement

Author: AlexVOiceover

src/components/ui/simple-dropdown.tsx

@@ -84,20 +84,32 @@ const SimpleDropdownMenuTrigger: React.FC<SimpleDropdownMenuTriggerProps> = ({
   ...props 
 }) => {
   if (asChild && React.isValidElement(children)) {
-    // If asChild is true, clone the child element and add the onClick handler
-    return React.cloneElement(children, {
-      ...props,
-      onClick: (e: React.MouseEvent) => {
-        // Preserve original onClick if it exists
-        if (children.props.onClick) {
-          children.props.onClick(e);
-        }
-        // Call our onClick handler
-        if (onClick) {
-          onClick(e);
-        }
+    // Create a merged handler that combines the existing handler and our new one
+    const mergedClickHandler = (e: React.MouseEvent) => {
+      // Call the child's original onClick if it exists
+      if (children.props.onClick) {
+        children.props.onClick(e);
+      }
+      // Call our onClick handler
+      if (onClick) {
+        onClick(e);
       }
-    });
+    };
+    
+    // Create a new props object with our merged handler
+    const mergedProps = {
+      ...props,
+    };
+    
+    // Create a clone with a properly typed handler
+    return React.cloneElement(
+      children,
+      {
+        ...mergedProps,
+        // Just use the child's props directly
+        onClick: mergedClickHandler,
+      } as React.HTMLAttributes<HTMLElement>
+    );
   }
 
   // Otherwise, wrap the children in a div with the onClick handler

src/features/statements/components/StatementItem.tsx

@@ -112,6 +112,12 @@ const StatementItem: React.FC<StatementItemProps> = ({
   originalCategory: externalOriginalCategory, // Get original category from parent
 }) => {
   const [isActionsExpanded, setIsActionsExpanded] = React.useState(false);
+  
+  // Create a ref for the component root element
+  const itemRef = React.useRef<HTMLDivElement>(null);
+  
+  // Create refs to track category changes for animations
+  const prevCategoryRef = React.useRef<string | null>(null);
 
   // Use simple primitive values to store original state
   // This way we avoid object reference issues
@@ -169,6 +175,34 @@ const StatementItem: React.FC<StatementItemProps> = ({
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [statement, isEditing]);
+  
+  // Dedicated effect for scrolling when needed
+  useEffect(() => {
+    // Check if this statement was updated with a category change (flagged by EditStatementModal)
+    if (isEditing && (statement as any)._needsScroll) {
+      console.log('Statement flagged for scrolling:', statement.id);
+      
+      // Use a longer delay to ensure the DOM has fully updated
+      const timer = setTimeout(() => {
+        if (itemRef.current) {
+          console.log('Executing scroll to element');
+          // Force scroll to this element
+          itemRef.current.scrollIntoView({ 
+            behavior: 'smooth', 
+            block: 'center' 
+          });
+          console.log('Scroll instruction sent');
+        }
+      }, 500);
+      
+      return () => clearTimeout(timer);
+    }
+    
+    // Keep reference updated for category change tracking
+    prevCategoryRef.current = statement.category;
+  // Check this effect whenever the statement reference changes
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [statement, isEditing]);
 
   // Helper function to normalize category values for comparison
   const normalizeCategoryForComparison = (
@@ -226,7 +260,10 @@ const StatementItem: React.FC<StatementItemProps> = ({
 
   if (isEditing) {
     return (
-      <div className='bg-gray-100 p-3 rounded-lg shadow'>
+      <div 
+        ref={itemRef} 
+        id={`statement-${statement.id}`}
+        className='bg-gray-100 p-3 rounded-lg shadow'>
         {/* Desktop layout - horizontal row */}
         <div className='hidden md:flex md:items-center md:space-x-2'>
           {/* Privacy toggle button */}
@@ -614,6 +651,8 @@ const StatementItem: React.FC<StatementItemProps> = ({
   // Static view when not in editing mode.
   return (
     <div
+      ref={itemRef}
+      id={`statement-${statement.id}`}
       className={`border rounded-md p-3 space-y-2 relative ${
         statement.isResolved
           ? 'bg-gray-100 border-gray-300 opacity-80'

src/features/statements/context/EntriesProvider.tsx

@@ -24,7 +24,8 @@ const EntriesReducer = (
       console.log("[ENTRIES REDUCER] Processing UPDATE_ENTRY action:", {
         updatedId: action.payload.id,
         updatedCategory: action.payload.category,
-        updatedTimestamp: action.payload._updateTimestamp
+        // Use optional chaining to safely access a property that might not exist
+        updatedTimestamp: (action.payload as any)._updateTimestamp
       });
 
       const oldEntry = data.entries.find(entry => entry.id === action.payload.id);

src/features/wizard/components/EditStatementModal.tsx

@@ -83,6 +83,7 @@ export const EditStatementModal: React.FC<EditStatementModalProps> = ({
         ...statement,
         // Add a timestamp to force detection of changes
         _lastModified: Date.now(),
+        _needsScroll: true, // Flag to indicate this needs scrolling
         category: categoryValue,
       };