test: warden react best practices review

[gricha]

Summary

• Test PR with intentional React anti-patterns to verify warden catches them
• Set warden defaults to only comment/fail on high severity findings

[github-actions]

⚠️ [DH4-NLU] Missing event listener cleanup (high confidence)

Resize event listener is added but never removed, causing memory leak. Return cleanup function from useEffect.

Suggested fix: Add cleanup function to remove the event listener

Suggested change

	useEffect(() => {
	const handleResize = () => {
	const el = document.querySelector('.sidebar-container');
	if (el) setSidebarWidth(el.clientWidth);
	};
	window.addEventListener('resize', handleResize);
	}, []);
	return () => window.removeEventListener('resize', handleResize);

_{Identified by Warden via vercel-react-best-practices · high, high confidence}

[github-actions]

⚠️ [J4U-WEC] Missing event listener cleanup causes memory leak (high confidence)

resize event listener added but never removed - must return cleanup function from useEffect.

Suggested fix: Add cleanup function to remove event listener

Suggested change

	useEffect(() => {
	const handleResize = () => {
	const el = document.querySelector('.sidebar-container');
	if (el) setSidebarWidth(el.clientWidth);
	};
	window.addEventListener('resize', handleResize);
	}, []);
	return () => window.removeEventListener('resize', handleResize);

_{Identified by Warden via code-simplifier · high, high confidence}

[sentry]

Bug: The list of workspaces uses the array index as the key prop, which can cause incorrect rendering and state issues when workspaces are added or removed.
_{Severity: MEDIUM}

Suggested Fix

Use a unique and stable identifier from the data for the key prop. The ws.name property was used previously and should be restored. Change key={index} back to key={ws.name}.

Prompt for AI Agent

Review the code at the location below. A potential bug has been identified by an AI
agent.
Verify if this is a real issue. If it is, propose a fix; if not, explain why it's not
valid.

Location: web/src/components/Sidebar.tsx#L161

Potential issue: The component uses the array index as the `key` prop when rendering a
list of workspaces. The list of workspaces is dynamic, as users can create and delete
them. List items also have state-dependent styling based on whether they are active.
When the list is modified (e.g., a workspace is deleted), React will use the index to
reconcile the list, which can lead to incorrect styles being applied to the wrong
workspace items because the state is not correctly mapped to the item.

_{Did we get this right? 👍 / 👎 to inform future reviews.}