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/components/layout/AppHeader.test.tsx

@@ -123,12 +123,7 @@ describe('AppHeader', () => {
     });
 
     it('displays current project name', () => {
-      render(
-        <AppHeader
-          projects={mockProjects}
-          currentProject={mockProjects[0]}
-        />
-      );
+      render(<AppHeader projects={mockProjects} currentProject={mockProjects[0]} />);
 
       // Multiple instances may show the project name
       expect(screen.getAllByText('Project One').length).toBeGreaterThan(0);
@@ -137,12 +132,7 @@ describe('AppHeader', () => {
     it('calls onProjectChange when project is changed', async () => {
       const mockOnChange = jest.fn();
 
-      render(
-        <AppHeader
-          projects={mockProjects}
-          onProjectChange={mockOnChange}
-        />
-      );
+      render(<AppHeader projects={mockProjects} onProjectChange={mockOnChange} />);
 
       // The actual test of project switching is in ProjectSwitcher.test.tsx
       // Here we just verify the prop is passed by checking switcher exists