TT-6959 Refactor AppHead component and introduce HeadStatus for improved status management

[gtryus]

This update refactors the AppHead component by removing unused imports and state variables, enhancing code clarity and maintainability. A new HeadStatus component is introduced to manage online/offline status and version updates, consolidating related functionality for better organization.

Key Changes:

• Removed unused imports and state variables from AppHead.
• Created HeadStatus component to handle online/offline actions and version checks.
• Improved user experience by ensuring relevant status indicators are displayed.

These changes streamline the codebase and enhance the overall user experience by providing clearer status management.

[Copilot]

Pull request overview

This PR refactors the AppHead component by extracting status-related functionality into a new HeadStatus component. The goal is to improve code organization and maintainability by consolidating online/offline status management and version update checking into a dedicated component.

Key Changes:

• Created new HeadStatus component to manage cloud/offline status and version update notifications
• Removed unused imports and state management from AppHead
• Cleaned up unnecessary eslint-disable comment in OrgHead

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 6 comments.

File	Description
src/renderer/src/components/App/OrgHead.tsx	Removed unnecessary eslint-disable comment from useMemo with correct dependencies
src/renderer/src/components/App/HeadStatus.tsx	New component extracted from AppHead to handle online/offline status and version checking
src/renderer/src/components/App/AppHead.tsx	Refactored to use new HeadStatus component, removed duplicate code and unused imports

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

This useEffect with an empty dependency array initializes hasOfflineProjects on mount, but this is redundant because the useEffect on lines 103-107 already handles this logic whenever offlineProjects changes (including on initial render). The initialization on mount is unnecessary and creates code duplication. Consider removing this useEffect and relying solely on the one below.

Suggested change

	useEffect(() => {
	setHasOfflineProjects(
	offlineProjects.some((p) => p?.attributes?.offlineAvailable)
	);
	/* eslint-disable-next-line react-hooks/exhaustive-deps */
	}, []);

[Copilot]

The prop name OnLatestVersion uses PascalCase (capital O) while onVersion uses camelCase. This is inconsistent. Both should use camelCase convention for React prop names. Consider renaming to onLatestVersion.

Suggested change

	OnLatestVersion: (version: string) => void;
	}
	export const HeadStatus = (props: IProps) => {
	const { handleMenu, onVersion, OnLatestVersion } = props;
	onLatestVersion: (version: string) => void;
	}
	export const HeadStatus = (props: IProps) => {
	const { handleMenu, onVersion, onLatestVersion } = props;

[Copilot]

The useEffect has an eslint-disable for exhaustive-deps, but it's missing hasOfflineProjects in the dependency array. While the code works because it checks the value before updating, this creates a dependency on stale closure. Consider adding hasOfflineProjects to the dependencies or restructuring to avoid the eslint-disable.

Suggested change

	// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [offlineProjects]);
	}, [offlineProjects, hasOfflineProjects]);

[Copilot]

This useEffect logs pathname changes using logError(Severity.info, errorReporter, pathname), but the same logic still exists in AppHead.tsx (line 313). Since HeadStatus is a child component of AppHead, both useEffects will fire on pathname changes, causing duplicate logging of the same information. Consider removing this logging from one of the components to avoid duplication.

Suggested change

logError(Severity.info, errorReporter, pathname);

[Copilot]

The HelpMenu is using updateTipOpen state, but the logic to update this state (based on pathname changes) has been moved to HeadStatus component. The useEffect that previously set updateTipOpen when pathname changed (formerly on line 314) was removed, so updateTipOpen will remain false. This breaks the dynamic positioning behavior of HelpMenu. Consider either removing the conditional styling here or propagating the updateTipOpen state from HeadStatus back to AppHead.

Suggested change

sx={updateTipOpen && isElectron ? { top: '40px' } : {}}

[Copilot]

Same issue as above: HelpMenu is using updateTipOpen state that is no longer being updated in AppHead. The logic was moved to HeadStatus but the state is not shared, breaking the dynamic positioning behavior.