fix: move useCallback before early return to fix hooks ordering

The jumpToMessage useCallback was placed after a conditional return,
violating React's Rules of Hooks and crashing the app on render.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
David Kaya
2026-03-24 00:23:30 +01:00
co-authored by Copilot
parent 0d3f1cbd50
commit 9964a7fd1a
+9 -9
View File
@@ -173,6 +173,15 @@ export default function App() {
[workspace?.projects],
);
const jumpToMessage = useCallback((messageId: string) => {
const element = document.querySelector(`[data-message-id="${CSS.escape(messageId)}"]`);
if (element) {
element.scrollIntoView({ behavior: 'smooth', block: 'center' });
element.classList.add('ring-1', 'ring-indigo-500/40', 'rounded-lg');
setTimeout(() => element.classList.remove('ring-1', 'ring-indigo-500/40', 'rounded-lg'), 1500);
}
}, []);
// Loading state
if (!workspace) {
return (
@@ -192,15 +201,6 @@ export default function App() {
}
};
const jumpToMessage = useCallback((messageId: string) => {
const element = document.querySelector(`[data-message-id="${CSS.escape(messageId)}"]`);
if (element) {
element.scrollIntoView({ behavior: 'smooth', block: 'center' });
element.classList.add('ring-1', 'ring-indigo-500/40', 'rounded-lg');
setTimeout(() => element.classList.remove('ring-1', 'ring-indigo-500/40', 'rounded-lg'), 1500);
}
}, []);
// Determine main content
let content: React.ReactNode;
let detailPanel: React.ReactNode | undefined;