fedi-feed-router/resources/views/livewire/articles.blade.php

<div class="p-6">
    <x-page-header title="Articles" subtitle="Review and manage article routing">
        <button
            wire:click="refresh"
            wire:loading.attr="disabled"
            @disabled($isRefreshing)
            x-on:refresh-started.window="setTimeout(() => window.location.reload(), 10000)"
            class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
        >
            <svg class="h-4 w-4 mr-2 {{ $isRefreshing ? 'animate-spin' : '' }}" wire:loading.class="animate-spin" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
            </svg>
            <span wire:loading.remove wire:target="refresh">{{ $isRefreshing ? 'Refreshing...' : 'Refresh' }}</span>
            <span wire:loading wire:target="refresh">Refreshing...</span>
        </button>
    </x-page-header>

    {{-- Tab bar --}}
    <div class="mb-6 border-b border-gray-200">
        <nav class="-mb-px flex space-x-8">
            <button
                wire:click="setTab('pending')"
                class="whitespace-nowrap pb-3 px-1 border-b-2 font-medium text-sm {{ $tab === 'pending' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300' }}"
            >
                Pending
                @if ($pendingCount > 0)
                    <span class="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
                        {{ $pendingCount }}
                    </span>
                @endif
            </button>
            <button
                wire:click="setTab('all')"
                class="whitespace-nowrap pb-3 px-1 border-b-2 font-medium text-sm {{ $tab === 'all' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300' }}"
            >
                All
            </button>
        </nav>
    </div>

    {{-- Tab actions --}}
    <div class="mb-4 flex items-center justify-between gap-x-3">
        <div class="flex items-center gap-x-3 flex-1">
            <select
                wire:model.live="feedId"
                aria-label="Filter by feed"
                class="w-56 shrink-0 pl-3 pr-10 py-2 border border-gray-300 rounded-md text-sm focus:outline-hidden focus:ring-2 focus:ring-blue-500"
            >
                <option value="">All feeds</option>
                @foreach ($feedOptions as $feedOption)
                    <option value="{{ $feedOption->id }}">{{ $feedOption->name }}</option>
                @endforeach
            </select>
            @if ($tab === 'all')
                <div class="flex-1 max-w-sm">
                    <input
                        type="text"
                        wire:model.live.debounce.300ms="search"
                        placeholder="Search articles..."
                        class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-hidden focus:ring-2 focus:ring-blue-500"
                    >
                </div>
            @endif
        </div>
        @if ($tab === 'pending' && $clearableCount > 0)
            <button
                wire:click="clear"
                wire:confirm="Reject {{ $clearableCount }} pending route article{{ $clearableCount === 1 ? '' : 's' }}{{ $feedId !== null ? ' from the selected feed' : '' }}?"
                class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
            >
                <svg class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                </svg>
                {{ $feedId !== null ? 'Clear Feed' : 'Clear All' }}
            </button>
        @endif
    </div>

    {{-- Route articles list --}}
    <div class="space-y-4">
        @if ($pendingFeeds !== null && $pendingFeeds->isNotEmpty())
            @foreach ($pendingFeeds as $group)
                @php($isExpanded = $group->isExpanded())
                <div class="bg-white rounded-lg shadow-sm overflow-hidden" wire:key="feed-group-{{ $group->feed->id }}">
                    <button
                        wire:click="toggleFeed({{ $group->feed->id }})"
                        type="button"
                        class="w-full flex items-center gap-x-3 px-5 py-4 text-left hover:bg-gray-50 focus:outline-hidden focus:ring-2 focus:ring-inset focus:ring-blue-500"
                        id="feed-toggle-{{ $group->feed->id }}"
                        aria-expanded="{{ $isExpanded ? 'true' : 'false' }}"
                        aria-controls="feed-panel-{{ $group->feed->id }}"
                    >
                        <svg
                            class="h-4 w-4 shrink-0 text-gray-400 transition-transform {{ $isExpanded ? 'rotate-90' : '' }}"
                            fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"
                        >
                            <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
                        </svg>
                        <span class="h-2.5 w-2.5 rounded-full shrink-0 {{ $group->feed->displayColor()->dotClass() }}" aria-hidden="true"></span>
                        <span class="text-sm font-semibold text-gray-900">{{ $group->feed->name }}</span>
                        <span class="ml-auto inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
                            {{ $group->count }}
                        </span>
                    </button>
                    @if ($isExpanded)
                        <div
                            class="border-t border-gray-100 bg-gray-50 p-4 space-y-4"
                            id="feed-panel-{{ $group->feed->id }}"
                            role="region"
                            aria-labelledby="feed-toggle-{{ $group->feed->id }}"
                        >
                            @foreach ($group->routeArticles as $routeArticle)
                                <x-route-article-card :route-article="$routeArticle" :tab="$tab" />
                            @endforeach
                        </div>
                    @endif
                </div>
            @endforeach
        @elseif ($routeArticles !== null && $routeArticles->isNotEmpty())
            @foreach ($routeArticles as $routeArticle)
                <x-route-article-card :route-article="$routeArticle" :tab="$tab" />
            @endforeach
        @else
            <div class="text-center py-12">
                <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
                </svg>
                <h3 class="mt-2 text-sm font-medium text-gray-900">
                    @if ($tab === 'pending')
                        No pending articles
                    @else
                        No articles found
                    @endif
                </h3>
                <p class="mt-1 text-sm text-gray-500">
                    @if ($tab === 'pending' && $feedId !== null)
                        No pending articles for the selected feed.
                    @elseif ($tab === 'pending')
                        All route articles have been reviewed.
                    @elseif ($search !== '')
                        No results for "{{ $search }}".
                    @elseif ($feedId !== null)
                        No articles for the selected feed.
                    @else
                        No route articles have been created yet.
                    @endif
                </p>
            </div>
        @endif

        @if ($routeArticles !== null && $routeArticles->hasPages())
            <div class="mt-6">
                {{ $routeArticles->links() }}
            </div>
        @endif
    </div>
</div>