refactor(frontend): clean up code by consolidating multi-line JSX into single lines where feasible

- Refactored JSX elements to improve readability by collapsing multi-line props and attributes into single lines if their length permits.
- Improved consistency in component imports by grouping and consolidating them.
- No functional changes, purely restructuring for clarity and maintainability.

frontend/tests/lib/hooks/useDebounce.test.ts

@@ -16,10 +16,9 @@ describe('useDebounce', () => {
   });
 
   it('updates the debounced value after the delay', () => {
-    const { result, rerender } = renderHook(
-      ({ value, delay }) => useDebounce(value, delay),
-      { initialProps: { value: 'initial', delay: 500 } }
-    );
+    const { result, rerender } = renderHook(({ value, delay }) => useDebounce(value, delay), {
+      initialProps: { value: 'initial', delay: 500 },
+    });
 
     // Change the value
     rerender({ value: 'updated', delay: 500 });
@@ -37,10 +36,9 @@ describe('useDebounce', () => {
   });
 
   it('does not update the value before the delay', () => {
-    const { result, rerender } = renderHook(
-      ({ value, delay }) => useDebounce(value, delay),
-      { initialProps: { value: 'initial', delay: 500 } }
-    );
+    const { result, rerender } = renderHook(({ value, delay }) => useDebounce(value, delay), {
+      initialProps: { value: 'initial', delay: 500 },
+    });
 
     rerender({ value: 'updated', delay: 500 });
 
@@ -53,10 +51,9 @@ describe('useDebounce', () => {
   });
 
   it('resets the timer when value changes rapidly', () => {
-    const { result, rerender } = renderHook(
-      ({ value, delay }) => useDebounce(value, delay),
-      { initialProps: { value: 'initial', delay: 500 } }
-    );
+    const { result, rerender } = renderHook(({ value, delay }) => useDebounce(value, delay), {
+      initialProps: { value: 'initial', delay: 500 },
+    });
 
     // First change
     rerender({ value: 'first', delay: 500 });
@@ -89,10 +86,9 @@ describe('useDebounce', () => {
   it('cleans up timeout on unmount', () => {
     const clearTimeoutSpy = jest.spyOn(global, 'clearTimeout');
 
-    const { unmount, rerender } = renderHook(
-      ({ value, delay }) => useDebounce(value, delay),
-      { initialProps: { value: 'initial', delay: 500 } }
-    );
+    const { unmount, rerender } = renderHook(({ value, delay }) => useDebounce(value, delay), {
+      initialProps: { value: 'initial', delay: 500 },
+    });
 
     rerender({ value: 'updated', delay: 500 });
     unmount();
@@ -102,10 +98,9 @@ describe('useDebounce', () => {
   });
 
   it('works with different delay values', () => {
-    const { result, rerender } = renderHook(
-      ({ value, delay }) => useDebounce(value, delay),
-      { initialProps: { value: 'initial', delay: 1000 } }
-    );
+    const { result, rerender } = renderHook(({ value, delay }) => useDebounce(value, delay), {
+      initialProps: { value: 'initial', delay: 1000 },
+    });
 
     rerender({ value: 'updated', delay: 1000 });
 
@@ -138,10 +133,9 @@ describe('useDebounce', () => {
   });
 
   it('handles zero delay', () => {
-    const { result, rerender } = renderHook(
-      ({ value, delay }) => useDebounce(value, delay),
-      { initialProps: { value: 'initial', delay: 0 } }
-    );
+    const { result, rerender } = renderHook(({ value, delay }) => useDebounce(value, delay), {
+      initialProps: { value: 'initial', delay: 0 },
+    });
 
     rerender({ value: 'updated', delay: 0 });
 

frontend/tests/lib/hooks/useProjectEvents.test.ts

@@ -119,9 +119,7 @@ describe('useProjectEvents', () => {
 
   describe('initialization', () => {
     it('should start disconnected', () => {
-      const { result } = renderHook(() =>
-        useProjectEvents('project-123', { autoConnect: false })
-      );
+      const { result } = renderHook(() => useProjectEvents('project-123', { autoConnect: false }));
 
       expect(result.current.connectionState).toBe('disconnected');
       expect(result.current.isConnected).toBe(false);

frontend/tests/lib/stores/eventStore.test.ts

@@ -189,10 +189,9 @@ describe('Event Store', () => {
 
       useEventStore.getState().addEvents([agentEvent, issueEvent, sprintEvent]);
 
-      const filtered = useEventStore.getState().getFilteredEvents('project-123', [
-        EventType.AGENT_MESSAGE,
-        EventType.ISSUE_CREATED,
-      ]);
+      const filtered = useEventStore
+        .getState()
+        .getFilteredEvents('project-123', [EventType.AGENT_MESSAGE, EventType.ISSUE_CREATED]);
 
       expect(filtered).toHaveLength(2);
       expect(filtered.map((e) => e.type)).toContain(EventType.AGENT_MESSAGE);
@@ -210,9 +209,9 @@ describe('Event Store', () => {
     });
 
     it('should return empty array for non-existent project', () => {
-      const filtered = useEventStore.getState().getFilteredEvents('non-existent', [
-        EventType.AGENT_MESSAGE,
-      ]);
+      const filtered = useEventStore
+        .getState()
+        .getFilteredEvents('non-existent', [EventType.AGENT_MESSAGE]);
       expect(filtered).toEqual([]);
     });
   });