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

<div class="p-6">
    <x-page-header title="Channels" subtitle="Manage your platform channels and linked accounts">
        <button
            wire:click="openCreateModal"
            class="inline-flex items-center px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-md shadow-xs hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
        >
            <svg class="h-4 w-4 mr-1.5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
            </svg>
            Add Channel
        </button>
    </x-page-header>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        @forelse ($channels as $channel)
            <div class="bg-white rounded-lg shadow-sm p-6" wire:key="channel-{{ $channel->id }}">
                <div class="flex items-start justify-between">
                    <div class="flex items-center">
                        <div class="shrink-0">
                            <svg class="h-8 w-8 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5-3.9 19.5m-2.1-19.5-3.9 19.5" />
                            </svg>
                        </div>
                        <div class="ml-4 flex-1 min-w-0">
                            <h3 class="text-lg font-medium text-gray-900 truncate">
                                {{ $channel->display_name ?? $channel->name }}
                            </h3>
                            @if ($channel->platformInstance)
                                <a href="{{ $channel->platformInstance->url }}/c/{{ $channel->name }}"
                                   target="_blank"
                                   rel="noopener noreferrer"
                                   class="text-sm text-blue-500 hover:underline">
                                    {{ $channel->platformInstance->name }}
                                </a>
                            @endif
                        </div>
                    </div>
                    <button
                        wire:click="toggle({{ $channel->id }})"
                        class="p-1 rounded-full {{ $channel->is_active ? 'bg-green-100 text-green-600' : 'bg-gray-100 text-gray-400' }}"
                        title="{{ $channel->is_active ? 'Active - Click to disable' : 'Inactive - Click to enable' }}"
                    >
                        <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
                        </svg>
                    </button>
                </div>

                @if ($channel->description)
                    <p class="mt-3 text-sm text-gray-500 line-clamp-2">
                        {{ $channel->description }}
                    </p>
                @endif

                <div class="mt-4">
                    <div class="flex items-center justify-between mb-2">
                        <span class="text-sm font-medium text-gray-700">
                            Linked Accounts ({{ $channel->platformAccounts->count() }})
                        </span>
                        <button
                            wire:click="openAccountModal({{ $channel->id }})"
                            class="text-sm text-blue-600 hover:text-blue-800"
                        >
                            Manage
                        </button>
                    </div>

                    @if ($channel->platformAccounts->isNotEmpty())
                        <div class="space-y-1">
                            @foreach ($channel->platformAccounts->take(3) as $account)
                                <div class="flex items-center justify-between text-sm">
                                    <span class="text-gray-600">{{ $account->username }}</span>
                                    <button
                                        wire:click="detachAccount({{ $channel->id }}, {{ $account->id }})"
                                        class="text-red-500 hover:text-red-700"
                                        title="Remove account"
                                    >
                                        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
                                        </svg>
                                    </button>
                                </div>
                            @endforeach
                            @if ($channel->platformAccounts->count() > 3)
                                <span class="text-xs text-gray-400">+{{ $channel->platformAccounts->count() - 3 }} more</span>
                            @endif
                        </div>
                    @else
                        <p class="text-sm text-gray-400">No accounts linked</p>
                    @endif
                </div>

                <div class="mt-4 flex items-center justify-between">
                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ $channel->is_active ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800' }}">
                        {{ $channel->is_active ? 'Active' : 'Inactive' }}
                    </span>
                    <span class="text-xs text-gray-500">
                        {{ $channel->created_at->format('M d, Y') }}
                    </span>
                </div>
            </div>
        @empty
            <div class="col-span-full 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="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5-3.9 19.5m-2.1-19.5-3.9 19.5" />
                </svg>
                <h3 class="mt-2 text-sm font-medium text-gray-900">No channels</h3>
                <p class="mt-1 text-sm text-gray-500">
                    No platform channels have been configured yet.
                </p>
                <div class="mt-6">
                    <button
                        wire:click="openCreateModal"
                        class="inline-flex items-center px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-md shadow-xs hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
                    >
                        <svg class="h-4 w-4 mr-1.5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                        </svg>
                        Add Channel
                    </button>
                </div>
            </div>
        @endforelse
    </div>

    <!-- Account Management Modal -->
    @if ($managingChannel)
        <x-form-modal :title="'Manage Accounts for ' . ($managingChannel->display_name ?? $managingChannel->name)" close="closeAccountModal">
                    @if ($availableAccounts->isNotEmpty())
                        <div class="mb-4">
                            <h4 class="text-sm font-medium text-gray-700 mb-2">Available Accounts</h4>
                            <div class="space-y-2">
                                @foreach ($availableAccounts as $account)
                                    <div class="flex items-center justify-between p-2 border rounded-sm">
                                        <span class="text-sm text-gray-900">{{ $account->username }}</span>
                                        <button
                                            wire:click="attachAccount({{ $account->id }})"
                                            class="text-sm text-blue-600 hover:text-blue-800"
                                        >
                                            Add
                                        </button>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @else
                        <p class="text-sm text-gray-500 mb-4">No available accounts to link.</p>
                    @endif

                    <div class="mt-4">
                        <button
                            wire:click="closeAccountModal"
                            class="w-full inline-flex justify-center rounded-md border border-gray-300 shadow-xs px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
                        >
                            Close
                        </button>
                    </div>
        </x-form-modal>
    @endif

    <!-- Create Channel Modal -->
    @if ($showCreateModal)
        <x-form-modal title="Add Channel" close="closeCreateModal">
                    <form wire:submit="createChannel" class="space-y-4">
                        <div>
                            <label for="new-channel-instance" class="block text-sm font-medium text-gray-700">Platform Instance</label>
                            <select
                                id="new-channel-instance"
                                wire:model.live="newPlatformInstanceId"
                                class="mt-1 block w-full rounded-md border border-gray-300 shadow-xs focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
                            >
                                <option value="">Select an instance</option>
                                @foreach ($platformInstances as $instance)
                                    <option value="{{ $instance->id }}">{{ $instance->name }}</option>
                                @endforeach
                            </select>
                            @error('newPlatformInstanceId') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                            @if ($communityLoadError)
                                <p class="mt-1 text-sm text-red-600">{{ $communityLoadError }}</p>
                            @endif
                        </div>

                        @if ($availableCommunities)
                            <div>
                                <div class="flex items-center justify-between">
                                    <label for="new-channel-community" class="block text-sm font-medium text-gray-700">Community</label>
                                    <button
                                        type="button"
                                        wire:click="refreshCommunities"
                                        class="text-xs text-blue-600 hover:text-blue-800"
                                    >
                                        Refresh
                                    </button>
                                </div>
                                <select
                                    id="new-channel-community"
                                    wire:model="newCommunityId"
                                    class="mt-1 block w-full rounded-md border border-gray-300 shadow-xs focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
                                >
                                    <option value="">Select a community</option>
                                    @foreach ($availableCommunities as $community)
                                        <option value="{{ $community['id'] }}">{{ $community['title'] }} ({{ $community['name'] }})</option>
                                    @endforeach
                                </select>
                                @error('newCommunityId') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                            </div>
                        @endif

                        <div>
                            <label for="new-channel-language" class="block text-sm font-medium text-gray-700">Language <span class="text-gray-400">(optional)</span></label>
                            <select
                                id="new-channel-language"
                                wire:model="newLanguageId"
                                class="mt-1 block w-full rounded-md border border-gray-300 shadow-xs focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
                            >
                                <option value="">Select a language</option>
                                @foreach ($languages as $language)
                                    <option value="{{ $language->id }}">{{ $language->name }}</option>
                                @endforeach
                            </select>
                            @error('newLanguageId') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                        </div>

                        <div>
                            <label for="new-channel-description" class="block text-sm font-medium text-gray-700">Description <span class="text-gray-400">(optional)</span></label>
                            <textarea
                                id="new-channel-description"
                                wire:model="newDescription"
                                rows="2"
                                class="mt-1 block w-full rounded-md border border-gray-300 shadow-xs focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
                            ></textarea>
                            @error('newDescription') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                        </div>

                        <div class="mt-6 flex justify-end space-x-3">
                            <button
                                type="button"
                                wire:click="closeCreateModal"
                                class="inline-flex justify-center rounded-md border border-gray-300 shadow-xs px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
                            >
                                Cancel
                            </button>
                            <button
                                type="submit"
                                wire:loading.attr="disabled"
                                wire:target="createChannel"
                                class="inline-flex justify-center rounded-md border border-transparent shadow-xs px-4 py-2 bg-blue-600 text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
                            >
                                Create
                            </button>
                        </div>
                    </form>
        </x-form-modal>
    @endif
</div>