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/features/issues/components/ActivityTimeline.tsx

@@ -20,11 +20,7 @@ interface ActivityTimelineProps {
   className?: string;
 }
 
-export function ActivityTimeline({
-  activities,
-  onAddComment,
-  className,
-}: ActivityTimelineProps) {
+export function ActivityTimeline({ activities, onAddComment, className }: ActivityTimelineProps) {
   return (
     <Card className={className}>
       <CardHeader>
@@ -43,11 +39,7 @@ export function ActivityTimeline({
       <CardContent>
         <div className="space-y-6" role="list" aria-label="Issue activity">
           {activities.map((item, index) => (
-            <div
-              key={item.id}
-              className="flex gap-4"
-              role="listitem"
-            >
+            <div key={item.id} className="flex gap-4" role="listitem">
               <div className="relative flex flex-col items-center">
                 <div className="flex h-8 w-8 items-center justify-center rounded-full bg-muted">
                   {item.actor.type === 'agent' ? (
@@ -74,9 +66,7 @@ export function ActivityTimeline({
         </div>
 
         {activities.length === 0 && (
-          <div className="py-8 text-center text-muted-foreground">
-            No activity yet
-          </div>
+          <div className="py-8 text-center text-muted-foreground">No activity yet</div>
         )}
       </CardContent>
     </Card>

frontend/src/features/issues/components/BulkActions.tsx

@@ -34,16 +34,11 @@ export function BulkActions({
 
   return (
     <div
-      className={cn(
-        'flex items-center gap-4 rounded-lg border bg-muted/50 p-3',
-        className
-      )}
+      className={cn('flex items-center gap-4 rounded-lg border bg-muted/50 p-3', className)}
       role="toolbar"
       aria-label="Bulk actions for selected issues"
     >
-      <span className="text-sm font-medium">
-        {selectedCount} selected
-      </span>
+      <span className="text-sm font-medium">{selectedCount} selected</span>
       <Separator orientation="vertical" className="h-6" />
       <div className="flex gap-2">
         <Button variant="outline" size="sm" onClick={onChangeStatus}>

frontend/src/features/issues/components/IssueDetailPanel.tsx

@@ -44,9 +44,7 @@ export function IssueDetailPanel({ issue, className }: IssueDetailPanelProps) {
                 </div>
                 <div>
                   <p className="font-medium">{issue.assignee.name}</p>
-                  <p className="text-xs text-muted-foreground capitalize">
-                    {issue.assignee.type}
-                  </p>
+                  <p className="text-xs text-muted-foreground capitalize">{issue.assignee.type}</p>
                 </div>
               </div>
             ) : (
@@ -92,9 +90,7 @@ export function IssueDetailPanel({ issue, className }: IssueDetailPanelProps) {
           {issue.due_date && (
             <div>
               <p className="text-sm text-muted-foreground">Due Date</p>
-              <p className="font-medium">
-                {new Date(issue.due_date).toLocaleDateString()}
-              </p>
+              <p className="font-medium">{new Date(issue.due_date).toLocaleDateString()}</p>
             </div>
           )}
 
@@ -136,19 +132,13 @@ export function IssueDetailPanel({ issue, className }: IssueDetailPanelProps) {
           <CardContent className="space-y-4">
             {issue.branch && (
               <div className="flex items-center gap-2">
-                <GitBranch
-                  className="h-4 w-4 text-muted-foreground"
-                  aria-hidden="true"
-                />
+                <GitBranch className="h-4 w-4 text-muted-foreground" aria-hidden="true" />
                 <span className="font-mono text-sm">{issue.branch}</span>
               </div>
             )}
             {issue.pull_request && (
               <div className="flex items-center gap-2">
-                <GitPullRequest
-                  className="h-4 w-4 text-muted-foreground"
-                  aria-hidden="true"
-                />
+                <GitPullRequest className="h-4 w-4 text-muted-foreground" aria-hidden="true" />
                 <span className="text-sm">{issue.pull_request}</span>
                 <Badge variant="outline" className="text-xs">
                   Open

frontend/src/features/issues/components/IssueFilters.tsx

@@ -136,10 +136,7 @@ export function IssueFilters({ filters, onFiltersChange, className }: IssueFilte
           <div className="grid gap-4 sm:grid-cols-4">
             <div className="space-y-2">
               <Label htmlFor="priority-filter">Priority</Label>
-              <Select
-                value={filters.priority || 'all'}
-                onValueChange={handlePriorityChange}
-              >
+              <Select value={filters.priority || 'all'} onValueChange={handlePriorityChange}>
                 <SelectTrigger id="priority-filter">
                   <SelectValue placeholder="All" />
                 </SelectTrigger>
@@ -172,10 +169,7 @@ export function IssueFilters({ filters, onFiltersChange, className }: IssueFilte
             </div>
             <div className="space-y-2">
               <Label htmlFor="assignee-filter">Assignee</Label>
-              <Select
-                value={filters.assignee || 'all'}
-                onValueChange={handleAssigneeChange}
-              >
+              <Select value={filters.assignee || 'all'} onValueChange={handleAssigneeChange}>
                 <SelectTrigger id="assignee-filter">
                   <SelectValue placeholder="All" />
                 </SelectTrigger>

frontend/src/features/issues/components/StatusBadge.tsx

@@ -8,14 +8,7 @@
  * @module features/issues/components/StatusBadge
  */
 
-import {
-  CircleDot,
-  PlayCircle,
-  Clock,
-  AlertCircle,
-  CheckCircle2,
-  XCircle,
-} from 'lucide-react';
+import { CircleDot, PlayCircle, Clock, AlertCircle, CheckCircle2, XCircle } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import type { IssueStatus } from '../types';
 import { STATUS_CONFIG } from '../constants';
@@ -42,9 +35,7 @@ export function StatusBadge({ status, className, showLabel = true }: StatusBadge
   return (
     <div className={cn('flex items-center gap-1.5', config.color, className)}>
       <Icon className="h-4 w-4" aria-hidden="true" />
-      {showLabel && (
-        <span className="text-sm font-medium">{config.label}</span>
-      )}
+      {showLabel && <span className="text-sm font-medium">{config.label}</span>}
       <span className="sr-only">{config.label}</span>
     </div>
   );

frontend/src/features/issues/components/StatusWorkflow.tsx

@@ -8,14 +8,7 @@
  * @module features/issues/components/StatusWorkflow
  */
 
-import {
-  CircleDot,
-  PlayCircle,
-  Clock,
-  AlertCircle,
-  CheckCircle2,
-  XCircle,
-} from 'lucide-react';
+import { CircleDot, PlayCircle, Clock, AlertCircle, CheckCircle2, XCircle } from 'lucide-react';
 import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
 import { cn } from '@/lib/utils';
 import type { IssueStatus } from '../types';
@@ -63,18 +56,14 @@ export function StatusWorkflow({
                 disabled={disabled}
                 className={cn(
                   'flex w-full items-center gap-2 rounded-lg p-2 text-left transition-colors',
-                  isActive
-                    ? 'bg-primary/10 text-primary'
-                    : 'hover:bg-muted',
+                  isActive ? 'bg-primary/10 text-primary' : 'hover:bg-muted',
                   disabled && 'cursor-not-allowed opacity-50'
                 )}
                 onClick={() => !disabled && onStatusChange(status)}
               >
                 <Icon className={cn('h-4 w-4', config.color)} aria-hidden="true" />
                 <span className="text-sm">{config.label}</span>
-                {isActive && (
-                  <CheckCircle2 className="ml-auto h-4 w-4" aria-hidden="true" />
-                )}
+                {isActive && <CheckCircle2 className="ml-auto h-4 w-4" aria-hidden="true" />}
               </button>
             );
           })}

frontend/src/features/issues/mocks.ts

@@ -18,8 +18,7 @@ export const mockIssues: IssueSummary[] = [
     number: 42,
     type: 'story',
     title: 'Implement user authentication flow',
-    description:
-      'Create complete authentication flow with login, register, and password reset.',
+    description: 'Create complete authentication flow with login, register, and password reset.',
     status: 'in_progress',
     priority: 'high',
     labels: ['feature', 'auth', 'backend'],