fix: Replace profile image onError DOM manipulation with React state

[hessius]

Priority: 🟢 Low — Target: post-v2.0.0

Summary

Both ControlCenter.tsx and ControlCenterExpanded.tsx use direct DOM manipulation in their profile image onError handlers instead of React state. This is fragile and relies on DOM element ordering.

Current Implementation

Both files use identical patterns:

<img
  src={profileImageUrl}
  onError={e => {
    (e.target as HTMLImageElement).style.display = 'none';
    (e.target as HTMLImageElement).nextElementSibling?.classList.remove('hidden')
  }}
/>
<Coffee className="hidden" weight="fill" /> {/* Fallback icon */}

Problems

1. Relies on DOM sibling order — if the JSX structure changes, nextElementSibling may point to the wrong element
2. Direct DOM mutation — style.display = 'none' and classList.remove bypass React's reconciliation
3. Not testable — React Testing Library can't easily verify DOM mutations made outside React
4. Duplicated — Same pattern in both ControlCenter and ControlCenterExpanded

Proposed Solution

Use React state to control visibility:

const [imgError, setImgError] = useState(false)

// In render:
{!imgError && profileImageUrl ? (
  <img
    src={profileImageUrl}
    onError={() => setImgError(true)}
    alt={profileName}
  />
) : (
  <Coffee weight="fill" />
)}

If the useProfileImage hook from #184 is implemented, this state can be encapsulated there:

function useProfileImage(profileName: string | null) {
  const [url, setUrl] = useState<string | null>(null)
  const [error, setError] = useState(false)
  // ... fetch logic
  return { url, error, onError: () => setError(true) }
}

Files to Modify

• apps/web/src/components/ControlCenter.tsx — Replace DOM manipulation with state
• apps/web/src/components/ControlCenterExpanded.tsx — Same fix
• Optionally: apps/web/src/hooks/useProfileImage.ts (if created as part of refactor: Extract useMachineActions hook — eliminate Control Center duplication and fix canAbortWarmup bug #184)

Acceptance Criteria

• No direct DOM manipulation (style.display, classList) in image error handlers
• Fallback icon renders correctly when image fails to load
• Fallback works when profileImageUrl is null/empty
• No layout shift when switching from image to fallback
• TypeScript compiles cleanly

Related

• refactor: Extract useMachineActions hook — eliminate Control Center duplication and fix canAbortWarmup bug #184 (Extract useMachineActions hook — also extracts profile image logic)