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

frontend/tests/components/layout/AppLayout.test.tsx

@@ -145,9 +145,7 @@ describe('AppLayout', () => {
     });
 
     it('passes custom breadcrumbs to AppBreadcrumbs', () => {
-      const customBreadcrumbs = [
-        { label: 'Custom', href: '/custom', current: true },
-      ];
+      const customBreadcrumbs = [{ label: 'Custom', href: '/custom', current: true }];
 
       render(
         <AppLayout breadcrumbs={customBreadcrumbs}>
@@ -344,10 +342,7 @@ describe('PageHeader', () => {
 
     it('renders actions when provided', () => {
       render(
-        <PageHeader
-          title="Title"
-          actions={<button data-testid="action-button">Action</button>}
-        />
+        <PageHeader title="Title" actions={<button data-testid="action-button">Action</button>} />
       );
 
       expect(screen.getByTestId('action-button')).toBeInTheDocument();

frontend/tests/components/layout/ProjectSwitcher.test.tsx

@@ -45,12 +45,7 @@ describe('ProjectSwitcher', () => {
     });
 
     it('displays current project name', () => {
-      render(
-        <ProjectSwitcher
-          projects={mockProjects}
-          currentProject={mockProjects[0]}
-        />
-      );
+      render(<ProjectSwitcher projects={mockProjects} currentProject={mockProjects[0]} />);
 
       expect(screen.getByText('Project One')).toBeInTheDocument();
     });
@@ -94,12 +89,7 @@ describe('ProjectSwitcher', () => {
     it('shows current indicator on selected project', async () => {
       const user = userEvent.setup();
 
-      render(
-        <ProjectSwitcher
-          projects={mockProjects}
-          currentProject={mockProjects[0]}
-        />
-      );
+      render(<ProjectSwitcher projects={mockProjects} currentProject={mockProjects[0]} />);
 
       const trigger = screen.getByTestId('project-switcher-trigger');
       await user.click(trigger);
@@ -144,12 +134,7 @@ describe('ProjectSwitcher', () => {
       const user = userEvent.setup();
       const mockOnChange = jest.fn();
 
-      render(
-        <ProjectSwitcher
-          projects={mockProjects}
-          onProjectChange={mockOnChange}
-        />
-      );
+      render(<ProjectSwitcher projects={mockProjects} onProjectChange={mockOnChange} />);
 
       const trigger = screen.getByTestId('project-switcher-trigger');
       await user.click(trigger);
@@ -189,18 +174,10 @@ describe('ProjectSwitcher', () => {
 
   describe('Accessibility', () => {
     it('has accessible label on trigger', () => {
-      render(
-        <ProjectSwitcher
-          projects={mockProjects}
-          currentProject={mockProjects[0]}
-        />
-      );
+      render(<ProjectSwitcher projects={mockProjects} currentProject={mockProjects[0]} />);
 
       const trigger = screen.getByTestId('project-switcher-trigger');
-      expect(trigger).toHaveAttribute(
-        'aria-label',
-        'Switch project, current: Project One'
-      );
+      expect(trigger).toHaveAttribute('aria-label', 'Switch project, current: Project One');
     });
 
     it('has accessible label when no current project', () => {
@@ -220,12 +197,7 @@ describe('ProjectSelect', () => {
 
   describe('Rendering', () => {
     it('renders select component', () => {
-      render(
-        <ProjectSelect
-          projects={mockProjects}
-          onValueChange={jest.fn()}
-        />
-      );
+      render(<ProjectSelect projects={mockProjects} onValueChange={jest.fn()} />);
 
       expect(screen.getByTestId('project-select')).toBeInTheDocument();
     });
@@ -243,23 +215,14 @@ describe('ProjectSelect', () => {
     });
 
     it('has combobox role', () => {
-      render(
-        <ProjectSelect
-          projects={mockProjects}
-          onValueChange={jest.fn()}
-        />
-      );
+      render(<ProjectSelect projects={mockProjects} onValueChange={jest.fn()} />);
 
       expect(screen.getByRole('combobox')).toBeInTheDocument();
     });
 
     it('applies custom className', () => {
       render(
-        <ProjectSelect
-          projects={mockProjects}
-          onValueChange={jest.fn()}
-          className="custom-class"
-        />
+        <ProjectSelect projects={mockProjects} onValueChange={jest.fn()} className="custom-class" />
       );
 
       const select = screen.getByTestId('project-select');