Migrate CSE machine side content to functional component

[RichDom2185]

Description

Supersedes #3305. Not ready as there are bugs where for some steps that only involve changes to control/stash and not the environment, animations seem to be missing.

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update
• Code quality improvements

How to test

Checklist

• I have tested this code
• I have updated the documentation

[gemini-code-assist]

Code Review

This pull request refactors the SideContentCseMachine component from a class-based implementation to a functional component using React hooks. The migration includes replacing Redux connect with useTypedSelector and useDispatch, and transitioning lifecycle methods to useEffect. Review feedback identifies a potential issue with the isInitializedRef guard which may lead to stale closures by preventing re-initialization when dependencies change. Additionally, it is recommended to derive width and height directly from props rather than using static state to ensure they remain synchronized with layout changes.

[gemini-code-assist]

The isInitializedRef guard prevents the useEffect from re-running its initialization logic when dependencies change. This is problematic because if isJava or workspaceLocation changes, the component will not re-initialize correctly, leading to stale closures. You should remove this guard and let the useEffect manage the lifecycle based on its dependency array. This aligns with the repository's preference to avoid unnecessary state tracking mechanisms like useRef for lifecycle control when it interferes with expected React behavior.

References

1. When refactoring components, avoid introducing state tracking mechanisms (such as useRef for previous values) if the current behavior is an intentional design choice.

[gemini-code-assist]

The width and height state variables are initialized once on mount and never updated via a setter. This means if the editorWidth or sideContentHeight props change, the width and height used in the useEffect (for CseMachine.init) will be stale. Since these values are derived from props and window dimensions, they should be calculated directly in the render body or wrapped in useMemo to ensure they stay in sync with prop changes.

Suggested change

	const [width] = useState(() => calculateWidth(editorWidth));
	const [height] = useState(() => calculateHeight(sideContentHeight));
	const width = calculateWidth(editorWidth);
	const height = calculateHeight(sideContentHeight);