fix(events): move connection badge inline and restore followers sort (#379)

- Move ConnectionBadge from absolute overlay to inline next to speaker
badge inside IdentityCard, fixing overlap with name/pronouns
- Add connectionType prop to IdentityCard
- Restore "Most followed" sort option that was lost during filter cleanup
- Update test mocks for new Phosphor icon imports

src/app/(main)/events/[slug]/event-card-grid.tsx

···
 
 import Link from 'next/link';
 import { IdentityCard } from '@/components/identity-card';
-import { ConnectionBadge } from '@/components/events/connection-badge';
 import type { ConnectionMap } from '@/hooks/use-attendee-connections';
 import type {
   ActiveApp,
···
             aria-label={`View profile of ${profile.displayName ?? profile.handle}`}
             className="relative h-full transition-transform hover:scale-[1.02] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
           >
-            {connectionType && (
-              <div className="absolute right-3 top-3 z-10">
-                <ConnectionBadge type={connectionType} handle={profile.handle} />
-              </div>
-            )}
             <IdentityCard
               className="h-full"
               did={profile.did}
···
               claimed={profile.claimed}
               variant="embed"
               badge={badge}
+              connectionType={connectionType}
               hideFooter
             />
           </Link>

src/app/(main)/events/[slug]/event-page-client.tsx

···
           return getName(a).localeCompare(getName(b));
         });
         break;
+      case 'followers':
+        copy.sort((a, b) => {
+          const aCount = (a.profile.followersCount ?? 0) + (a.profile.atprotoFollowersCount ?? 0);
+          const bCount = (b.profile.followersCount ?? 0) + (b.profile.atprotoFollowersCount ?? 0);
+          if (bCount !== aCount) return bCount - aCount;
+          return getName(a).localeCompare(getName(b));
+        });
+        break;
       case 'alphabetical':
         copy.sort((a, b) => getName(a).localeCompare(getName(b)));
         break;

src/app/(main)/events/__tests__/event-card-enrichment.test.tsx

···
   ),
   Briefcase: (props: Record<string, unknown>) => <span data-testid="icon-briefcase" {...props} />,
   Buildings: (props: Record<string, unknown>) => <span data-testid="icon-buildings" {...props} />,
+  ArrowsLeftRight: (props: Record<string, unknown>) => (
+    <span data-testid="icon-arrows" {...props} />
+  ),
+  UserCheck: (props: Record<string, unknown>) => <span data-testid="icon-user-check" {...props} />,
+  UserPlus: (props: Record<string, unknown>) => <span data-testid="icon-user-plus" {...props} />,
 }));
 
 // Mock sonner

src/components/events/attendee-filters.tsx

···
 
 export type RoleFilter = 'all' | 'speakers' | 'attendees';
 export type ConnectionFilter = 'all' | 'mutual' | 'following' | 'followedBy' | 'new';
-export type SortOption = 'connections' | 'alphabetical' | 'speakers';
+export type SortOption = 'connections' | 'alphabetical' | 'speakers' | 'followers';
 
 interface AttendeeFiltersProps {
   onSearchChange: (query: string) => void;
···
           >
             {isLoggedIn && <option value="connections">Connections first</option>}
             <option value="speakers">Speakers first</option>
+            <option value="followers">Most followed</option>
             <option value="alphabetical">Alphabetical</option>
           </select>
         </label>

src/components/identity-card.tsx

···
   Buildings,
 } from '@phosphor-icons/react';
 import { useProfileEdit } from '@/components/profile-edit-provider';
+import { ConnectionBadge } from '@/components/events/connection-badge';
 import { Badge } from '@/components/ui/badge';
 import { Button, buttonVariants } from '@/components/ui/button';
 import { FollowButton } from '@/components/follow-button';
···
   isFollowing?: boolean;
   variant?: 'page' | 'embed';
   badge?: string;
+  connectionType?: 'mutual' | 'following' | 'followedBy';
   hideFooter?: boolean;
   className?: string;
   hasDisplayNameOverride?: boolean;
···
   isFollowing,
   variant = 'page',
   badge,
+  connectionType,
   hideFooter,
   className,
   hasDisplayNameOverride,
···
                 </a>
               </div>
 
-              {badge && (
-                <Badge
-                  variant="secondary"
-                  className="mt-0.5 w-fit px-1.5 py-0 text-[10px] font-medium"
-                >
-                  {badge}
-                </Badge>
+              {(badge || connectionType) && (
+                <div className="mt-0.5 flex flex-wrap items-center gap-1">
+                  {badge && (
+                    <Badge
+                      variant="secondary"
+                      className="w-fit px-1.5 py-0 text-[10px] font-medium"
+                    >
+                      {badge}
+                    </Badge>
+                  )}
+                  {connectionType && <ConnectionBadge type={connectionType} handle={handle} />}
+                </div>
               )}
 
               {/* Role at company */}

tests/components/identity-card.test.tsx

···
   ),
   Briefcase: (props: Record<string, unknown>) => <span data-testid="icon-briefcase" {...props} />,
   Buildings: (props: Record<string, unknown>) => <span data-testid="icon-buildings" {...props} />,
+  ArrowsLeftRight: (props: Record<string, unknown>) => (
+    <span data-testid="icon-arrows" {...props} />
+  ),
+  UserCheck: (props: Record<string, unknown>) => <span data-testid="icon-user-check" {...props} />,
+  UserPlus: (props: Record<string, unknown>) => <span data-testid="icon-user-plus" {...props} />,
 }));
 
 // Mock sonner