Ai Branch List code

@props([
    'branches' => [],
    'selectedBranch' => null,
    'title' => 'Branches',
    'navigate' => false,
    'embedded' => false,
])

@php
    /*
    | Branch list for a repository with ahead/behind and protection state.
    |
    | Usage:
    |   <x-ui.ai-branch-list navigate :branches="[
    |       ['name' => 'main', 'isDefault' => true, 'protected' => true, 'updatedAt' => '2h ago'],
    |   ]" selected-branch="main" />
    */
    $itemClass = fn (bool $isSelected): string => \Illuminate\Support\Arr::toCssClasses([
        'flex flex-col gap-2 px-4 py-3 transition sm:flex-row sm:items-center sm:justify-between sm:px-5',
        'bg-brand-50/70 dark:bg-brand-950/20' => $isSelected,
        'hover:bg-gray-50 dark:hover:bg-gray-950/60' => $navigate && ! $isSelected,
    ]);

    $normalizedBranches = collect($branches)
        ->map(function ($branch) {
            return [
                'name' => $branch['name'] ?? '',
                'isDefault' => (bool) ($branch['isDefault'] ?? false),
                'protected' => (bool) ($branch['protected'] ?? false),
                'updatedAt' => $branch['updatedAt'] ?? null,
                'ahead' => (int) ($branch['ahead'] ?? 0),
                'behind' => (int) ($branch['behind'] ?? 0),
                'author' => $branch['author'] ?? null,
                'summary' => $branch['summary'] ?? null,
                'href' => $branch['href'] ?? null,
            ];
        })
        ->filter(fn (array $branch) => $branch['name'] !== '')
        ->values()
        ->all();
@endphp

<div {{ $attributes->merge(['class' => $embedded ? 'min-w-0' : 'min-w-0 overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-sm dark:border-gray-800 dark:bg-gray-900']) }}>
    @unless ($embedded)
        <div class="border-b border-gray-200 px-4 py-4 dark:border-gray-800 sm:px-5">
            <p class="text-sm font-semibold text-gray-900 dark:text-white">{{ $title }}</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">{{ count($normalizedBranches) }} branches</p>
        </div>
    @endunless

    <ul @class(['divide-y divide-gray-200 dark:divide-gray-800', 'border-t border-gray-200 dark:border-gray-800' => $embedded]) role="list">
        @forelse ($normalizedBranches as $branch)
            @php
                $isSelected = $selectedBranch === $branch['name'];
            @endphp
            <li>
                @if ($navigate && $branch['href'])
                    <a href="{{ $branch['href'] }}" @class([$itemClass($isSelected), 'block'])>
                        <div class="min-w-0 flex-1">
                            <p class="truncate font-mono text-sm font-medium text-gray-900 dark:text-white">{{ $branch['name'] }}</p>
                            @if ($branch['summary'])
                                <p class="mt-0.5 line-clamp-1 text-xs text-gray-500 dark:text-gray-400">{{ $branch['summary'] }}</p>
                            @endif
                            <div class="mt-1 flex flex-wrap items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
                                @if ($branch['author'])
                                    <span>{{ $branch['author'] }}</span>
                                @endif
                                @if ($branch['updatedAt'])
                                    <span class="hidden text-gray-300 sm:inline dark:text-gray-600">·</span>
                                    <span>{{ $branch['updatedAt'] }}</span>
                                @endif
                            </div>
                        </div>

                        <div class="flex shrink-0 flex-wrap items-center gap-2">
                            @if ($branch['isDefault'])
                                <x-ui.badge variant="brand" size="sm">Default</x-ui.badge>
                            @endif
                            @if ($branch['protected'])
                                <x-ui.badge variant="amber" size="sm">Protected</x-ui.badge>
                            @endif
                            @if ($branch['ahead'] > 0 || $branch['behind'] > 0)
                                <span class="text-xs tabular-nums text-gray-500 dark:text-gray-400">
                                    @if ($branch['ahead'] > 0)
                                        <span class="text-green-600 dark:text-green-400">{{ $branch['ahead'] }} ahead</span>
                                    @endif
                                    @if ($branch['behind'] > 0)
                                        <span class="ms-1 text-red-600 dark:text-red-400">{{ $branch['behind'] }} behind</span>
                                    @endif
                                </span>
                            @endif
                        </div>
                    </a>
                @else
                    <div @class($itemClass($isSelected))>
                        <p class="min-w-0 truncate font-mono text-sm font-medium text-gray-900 dark:text-white">{{ $branch['name'] }}</p>

                        <div class="flex shrink-0 flex-wrap items-center gap-2">
                            @if ($branch['isDefault'])
                                <x-ui.badge variant="brand" size="sm">Default</x-ui.badge>
                            @endif
                            @if ($branch['protected'])
                                <x-ui.badge variant="amber" size="sm">Protected</x-ui.badge>
                            @endif
                        </div>
                    </div>
                @endif
            </li>
        @empty
            <li class="px-4 py-6 text-sm text-gray-500 dark:text-gray-400 sm:px-5">No branches found.</li>
        @endforelse
    </ul>
</div>