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/src/components/layout/AppBreadcrumbs.tsx

@@ -74,11 +74,7 @@ function generateBreadcrumbs(pathname: string): BreadcrumbItem[] {
   return breadcrumbs;
 }
 
-export function AppBreadcrumbs({
-  items,
-  showHome = true,
-  className,
-}: AppBreadcrumbsProps) {
+export function AppBreadcrumbs({ items, showHome = true, className }: AppBreadcrumbsProps) {
   const pathname = usePathname();
 
   // Use provided items or generate from pathname

frontend/src/components/layout/AppHeader.tsx

@@ -49,11 +49,7 @@ export function AppHeader({
         {/* Left side - Logo and Project Switcher */}
         <div className="flex items-center gap-4">
           {/* Logo - visible on mobile, hidden on desktop when sidebar is visible */}
-          <Link
-            href="/"
-            className="flex items-center gap-2 lg:hidden"
-            aria-label="Syndarix home"
-          >
+          <Link href="/" className="flex items-center gap-2 lg:hidden" aria-label="Syndarix home">
             <Image
               src="/logo-icon.svg"
               alt=""

frontend/src/components/layout/AppLayout.tsx

@@ -73,11 +73,7 @@ export function AppLayout({
           {!hideBreadcrumbs && <AppBreadcrumbs items={breadcrumbs} />}
 
           {/* Main content */}
-          <main
-            className={cn('flex-1', className)}
-            id="main-content"
-            tabIndex={-1}
-          >
+          <main className={cn('flex-1', className)} id="main-content" tabIndex={-1}>
             {children}
           </main>
         </div>
@@ -110,11 +106,7 @@ const maxWidthClasses: Record<string, string> = {
   full: 'max-w-full',
 };
 
-export function PageContainer({
-  children,
-  maxWidth = '6xl',
-  className,
-}: PageContainerProps) {
+export function PageContainer({ children, maxWidth = '6xl', className }: PageContainerProps) {
   return (
     <div
       className={cn(
@@ -144,12 +136,7 @@ interface PageHeaderProps {
   className?: string;
 }
 
-export function PageHeader({
-  title,
-  description,
-  actions,
-  className,
-}: PageHeaderProps) {
+export function PageHeader({ title, description, actions, className }: PageHeaderProps) {
   return (
     <div
       className={cn(
@@ -160,9 +147,7 @@ export function PageHeader({
     >
       <div className="space-y-1">
         <h1 className="text-2xl font-bold tracking-tight sm:text-3xl">{title}</h1>
-        {description && (
-          <p className="text-muted-foreground">{description}</p>
-        )}
+        {description && <p className="text-muted-foreground">{description}</p>}
       </div>
       {actions && <div className="flex items-center gap-2">{actions}</div>}
     </div>

frontend/src/components/layout/ProjectSwitcher.tsx

@@ -98,9 +98,7 @@ export function ProjectSwitcher({
           className={cn('gap-2 min-w-[160px] justify-between', className)}
           data-testid="project-switcher-trigger"
           aria-label={
-            currentProject
-              ? `Switch project, current: ${currentProject.name}`
-              : 'Select project'
+            currentProject ? `Switch project, current: ${currentProject.name}` : 'Select project'
           }
         >
           <div className="flex items-center gap-2">
@@ -112,11 +110,7 @@ export function ProjectSwitcher({
           <ChevronDown className="h-4 w-4 opacity-50" aria-hidden="true" />
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent
-        align="start"
-        className="w-[200px]"
-        data-testid="project-switcher-menu"
-      >
+      <DropdownMenuContent align="start" className="w-[200px]" data-testid="project-switcher-menu">
         <DropdownMenuLabel>Projects</DropdownMenuLabel>
         <DropdownMenuSeparator />
         {projects.map((project) => (

frontend/src/components/layout/Sidebar.tsx

@@ -11,13 +11,7 @@ import { Link } from '@/lib/i18n/routing';
 import { usePathname } from '@/lib/i18n/routing';
 import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/button';
-import {
-  Sheet,
-  SheetContent,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger,
-} from '@/components/ui/sheet';
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
 import {
   FolderKanban,
   Bot,
@@ -113,9 +107,7 @@ function NavLink({ item, collapsed, basePath = '' }: NavLinkProps) {
   const pathname = usePathname();
   const href = basePath ? `${basePath}${item.href}` : item.href;
 
-  const isActive = item.exact
-    ? pathname === href
-    : pathname.startsWith(href);
+  const isActive = item.exact ? pathname === href : pathname.startsWith(href);
 
   const Icon = item.icon;
 
@@ -155,9 +147,7 @@ function SidebarContent({
     <div className="flex h-full flex-col">
       {/* Sidebar Header */}
       <div className="flex h-14 items-center justify-between border-b px-4">
-        {!collapsed && (
-          <span className="text-lg font-semibold text-foreground">Navigation</span>
-        )}
+        {!collapsed && <span className="text-lg font-semibold text-foreground">Navigation</span>}
         <Button
           variant="ghost"
           size="icon"
@@ -308,11 +298,7 @@ export function Sidebar({ projectSlug, className }: SidebarProps) {
         data-testid="sidebar"
         aria-label="Main navigation"
       >
-        <SidebarContent
-          collapsed={collapsed}
-          projectSlug={projectSlug}
-          onToggle={handleToggle}
-        />
+        <SidebarContent collapsed={collapsed} projectSlug={projectSlug} onToggle={handleToggle} />
       </aside>
     </>
   );

frontend/src/components/layout/UserMenu.tsx

@@ -20,14 +20,7 @@ import {
 } from '@/components/ui/dropdown-menu';
 import { Button } from '@/components/ui/button';
 import { Avatar, AvatarFallback } from '@/components/ui/avatar';
-import {
-  User,
-  LogOut,
-  Shield,
-  Lock,
-  Monitor,
-  UserCog,
-} from 'lucide-react';
+import { User, LogOut, Shield, Lock, Monitor, UserCog } from 'lucide-react';
 import { cn } from '@/lib/utils';
 
 interface UserMenuProps {
@@ -76,20 +69,14 @@ export function UserMenu({ className }: UserMenuProps) {
           </Avatar>
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent
-        className="w-56"
-        align="end"
-        data-testid="user-menu-content"
-      >
+      <DropdownMenuContent className="w-56" align="end" data-testid="user-menu-content">
         {/* User info header */}
         <DropdownMenuLabel className="font-normal">
           <div className="flex flex-col space-y-1">
             <p className="text-sm font-medium leading-none">
               {user.first_name} {user.last_name}
             </p>
-            <p className="text-xs leading-none text-muted-foreground">
-              {user.email}
-            </p>
+            <p className="text-xs leading-none text-muted-foreground">{user.email}</p>
           </div>
         </DropdownMenuLabel>
         <DropdownMenuSeparator />
@@ -143,11 +130,7 @@ export function UserMenu({ className }: UserMenuProps) {
           <>
             <DropdownMenuSeparator />
             <DropdownMenuItem asChild>
-              <Link
-                href="/admin"
-                className="cursor-pointer"
-                data-testid="user-menu-admin"
-              >
+              <Link href="/admin" className="cursor-pointer" data-testid="user-menu-admin">
                 <Shield className="mr-2 h-4 w-4" aria-hidden="true" />
                 {t('adminPanel')}
               </Link>