lvl0/fedi-feed-router
1
0
Fork 0
Code Issues 27 Pull requests Projects Releases 13 Packages Wiki Activity Actions

108 - Fix modal rendering and extract shared form modal component
All checks were successful
CI / ci (push) Successful in 31m55s
Details
CI / ci (pull_request) Successful in 19m52s
Details
Build and Push Docker Image / build (push) Successful in 5m2s
Details

Browse source
This commit is contained in:
myrmidex 2026-08-01 00:11:06 +02:00
parent 7ec5283b4c
commit 00366ffeaa
9 changed files with 58 additions and 101 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -6,6 +6,7 @@
"build": "vite build" "build": "vite build"
}, },
"devDependencies": { "devDependencies": {
"@tailwindcss/forms": "^0.5.11",
"@tailwindcss/postcss": "^4.1.18", "@tailwindcss/postcss": "^4.1.18",
"autoprefixer": "^10.4.20", "autoprefixer": "^10.4.20",
"laravel-vite-plugin": "^1.2.0", "laravel-vite-plugin": "^1.2.0",

1
resources/css/app.css
View file

@ -1 +1,2 @@
@import 'tailwindcss'; @import 'tailwindcss';
@plugin '@tailwindcss/forms';

34
resources/views/components/form-modal.blade.php Normal file
View file

@ -0,0 +1,34 @@
@props([
'title',
'close',
'maxWidth' => 'lg',
])
@php
$maxWidthClass = [
'sm' => 'max-w-sm',
'md' => 'max-w-md',
'lg' => 'max-w-lg',
'xl' => 'max-w-xl',
'2xl' => 'max-w-2xl',
][$maxWidth];
@endphp
<div class="fixed inset-0 z-50 overflow-y-auto" role="dialog" aria-modal="true" aria-labelledby="modal-title">
<div class="flex min-h-full items-center justify-center p-4">
<div class="fixed inset-0 bg-gray-900/50 backdrop-blur-sm transition-opacity" wire:click="{{ $close }}"></div>
<div class="relative z-10 w-full {{ $maxWidthClass }} max-h-[90vh] overflow-y-auto rounded-lg bg-white p-6 text-left shadow-xl">
<div class="flex items-center justify-between mb-4">
<h3 id="modal-title" class="text-lg font-medium text-gray-900">{{ $title }}</h3>
<button type="button" wire:click="{{ $close }}" class="text-gray-400 hover:text-gray-600">
<svg class="h-6 w-6" 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>
{{ $slot }}
</div>
</div>
</div>

2
resources/views/components/modal.blade.php
View file

@ -60,7 +60,7 @@ class="fixed inset-0 transform transition-all"
x-transition:leave-start="opacity-100" x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0" x-transition:leave-end="opacity-0"
> >
<div class="absolute inset-0 bg-gray-500 opacity-75"></div> <div class="absolute inset-0 bg-gray-900/50 backdrop-blur-sm"></div>
</div> </div>
<div <div

52
resources/views/livewire/channels.blade.php
View file

@ -125,24 +125,7 @@ class="inline-flex items-center px-4 py-2 bg-blue-600 text-white text-sm font-me
<!-- Account Management Modal --> <!-- Account Management Modal -->
@if ($managingChannel) @if ($managingChannel)
<div class="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true"> <x-form-modal :title="'Manage Accounts for ' . ($managingChannel->display_name ?? $managingChannel->name)" close="closeAccountModal">
<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<div class="fixed inset-0 bg-gray-500/75 transition-opacity" wire:click="closeAccountModal"></div>
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
<div class="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-medium text-gray-900">
Manage Accounts for {{ $managingChannel->display_name ?? $managingChannel->name }}
</h3>
<button wire:click="closeAccountModal" class="text-gray-400 hover:text-gray-600">
<svg class="h-6 w-6" 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>
@if ($availableAccounts->isNotEmpty()) @if ($availableAccounts->isNotEmpty())
<div class="mb-4"> <div class="mb-4">
<h4 class="text-sm font-medium text-gray-700 mb-2">Available Accounts</h4> <h4 class="text-sm font-medium text-gray-700 mb-2">Available Accounts</h4>
@ -172,29 +155,12 @@ class="w-full inline-flex justify-center rounded-md border border-gray-300 shado
Close Close
</button> </button>
</div> </div>
</div> </x-form-modal>
</div>
</div>
@endif @endif
<!-- Create Channel Modal --> <!-- Create Channel Modal -->
@if ($showCreateModal) @if ($showCreateModal)
<div class="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true"> <x-form-modal title="Add Channel" close="closeCreateModal">
<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<div class="fixed inset-0 bg-gray-500/75 transition-opacity" wire:click="closeCreateModal"></div>
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
<div class="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-medium text-gray-900">Add Channel</h3>
<button wire:click="closeCreateModal" class="text-gray-400 hover:text-gray-600">
<svg class="h-6 w-6" 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>
<form wire:submit="createChannel" class="space-y-4"> <form wire:submit="createChannel" class="space-y-4">
<div> <div>
<label for="new-channel-name" class="block text-sm font-medium text-gray-700">Name</label> <label for="new-channel-name" class="block text-sm font-medium text-gray-700">Name</label>
@ -202,7 +168,7 @@ class="w-full inline-flex justify-center rounded-md border border-gray-300 shado
type="text" type="text"
id="new-channel-name" id="new-channel-name"
wire:model="newName" wire:model="newName"
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" class="mt-1 block w-full rounded-md border border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
/> />
@error('newName') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror @error('newName') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
</div> </div>
@ -212,7 +178,7 @@ class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-
<select <select
id="new-channel-instance" id="new-channel-instance"
wire:model="newPlatformInstanceId" wire:model="newPlatformInstanceId"
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" class="mt-1 block w-full rounded-md border border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
> >
<option value="">Select an instance</option> <option value="">Select an instance</option>
@foreach ($platformInstances as $instance) @foreach ($platformInstances as $instance)
@ -227,7 +193,7 @@ class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-
<select <select
id="new-channel-language" id="new-channel-language"
wire:model="newLanguageId" wire:model="newLanguageId"
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" class="mt-1 block w-full rounded-md border border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
> >
<option value="">Select a language</option> <option value="">Select a language</option>
@foreach ($languages as $language) @foreach ($languages as $language)
@ -243,7 +209,7 @@ class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-
id="new-channel-description" id="new-channel-description"
wire:model="newDescription" wire:model="newDescription"
rows="2" rows="2"
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" class="mt-1 block w-full rounded-md border border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
></textarea> ></textarea>
@error('newDescription') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror @error('newDescription') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
</div> </div>
@ -266,8 +232,6 @@ class="inline-flex justify-center rounded-md border border-transparent shadow-sm
</button> </button>
</div> </div>
</form> </form>
</div> </x-form-modal>
</div>
</div>
@endif @endif
</div> </div>

2
resources/views/livewire/dashboard.blade.php
View file

@ -85,7 +85,7 @@
<h2 class="text-lg font-semibold text-gray-900">Article Statistics</h2> <h2 class="text-lg font-semibold text-gray-900">Article Statistics</h2>
<select <select
wire:model.live="period" wire:model.live="period"
class="rounded-md border-gray-300 text-sm focus:border-blue-500 focus:ring-blue-500" class="rounded-md border border-gray-300 text-sm focus:border-blue-500 focus:ring-blue-500"
> >
@foreach ($availablePeriods as $value => $label) @foreach ($availablePeriods as $value => $label)
<option value="{{ $value }}">{{ $label }}</option> <option value="{{ $value }}">{{ $label }}</option>

29
resources/views/livewire/feeds.blade.php
View file

@ -103,22 +103,7 @@ class="inline-flex items-center px-4 py-2 bg-blue-600 text-white text-sm font-me
<!-- Create Feed Modal --> <!-- Create Feed Modal -->
@if ($showCreateModal) @if ($showCreateModal)
<div class="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true"> <x-form-modal title="Add Feed" close="closeCreateModal">
<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<div class="fixed inset-0 bg-gray-500/75 transition-opacity" wire:click="closeCreateModal"></div>
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
<div class="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-medium text-gray-900">Add Feed</h3>
<button wire:click="closeCreateModal" class="text-gray-400 hover:text-gray-600">
<svg class="h-6 w-6" 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>
<form wire:submit="createFeed" class="space-y-4"> <form wire:submit="createFeed" class="space-y-4">
<div> <div>
<label for="new-feed-name" class="block text-sm font-medium text-gray-700">Name</label> <label for="new-feed-name" class="block text-sm font-medium text-gray-700">Name</label>
@ -126,7 +111,7 @@ class="inline-flex items-center px-4 py-2 bg-blue-600 text-white text-sm font-me
type="text" type="text"
id="new-feed-name" id="new-feed-name"
wire:model="newName" wire:model="newName"
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" class="mt-1 block w-full rounded-md border border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
/> />
@error('newName') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror @error('newName') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
</div> </div>
@ -136,7 +121,7 @@ class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-
<select <select
id="new-feed-provider" id="new-feed-provider"
wire:model="newProvider" wire:model="newProvider"
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" class="mt-1 block w-full rounded-md border border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
> >
<option value="">Select a provider</option> <option value="">Select a provider</option>
@foreach ($providers as $code => $provider) @foreach ($providers as $code => $provider)
@ -151,7 +136,7 @@ class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-
<select <select
id="new-feed-language" id="new-feed-language"
wire:model="newLanguageId" wire:model="newLanguageId"
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" class="mt-1 block w-full rounded-md border border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
> >
<option value="">Select a language</option> <option value="">Select a language</option>
@foreach ($languages as $language) @foreach ($languages as $language)
@ -167,7 +152,7 @@ class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-
id="new-feed-description" id="new-feed-description"
wire:model="newDescription" wire:model="newDescription"
rows="2" rows="2"
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" class="mt-1 block w-full rounded-md border border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
></textarea> ></textarea>
@error('newDescription') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror @error('newDescription') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
</div> </div>
@ -190,8 +175,6 @@ class="inline-flex justify-center rounded-md border border-transparent shadow-sm
</button> </button>
</div> </div>
</form> </form>
</div> </x-form-modal>
</div>
</div>
@endif @endif
</div> </div>

34
resources/views/livewire/routes.blade.php
View file

@ -144,14 +144,7 @@ class="inline-flex items-center px-4 py-2 border border-transparent text-sm font
<!-- Create Route Modal --> <!-- Create Route Modal -->
@if ($showCreateModal) @if ($showCreateModal)
<div class="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true"> <x-form-modal title="Create New Route" close="closeCreateModal">
<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<div class="fixed inset-0 bg-gray-500/75 transition-opacity" wire:click="closeCreateModal"></div>
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
<div class="relative z-10 inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
<h3 class="text-lg font-medium text-gray-900 mb-4">Create New Route</h3>
<form wire:submit="createRoute" class="space-y-4"> <form wire:submit="createRoute" class="space-y-4">
<div> <div>
<label for="newFeedId" class="block text-sm font-medium text-gray-700 mb-1"> <label for="newFeedId" class="block text-sm font-medium text-gray-700 mb-1">
@ -219,29 +212,12 @@ class="px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transp
</button> </button>
</div> </div>
</form> </form>
</div> </x-form-modal>
</div>
</div>
@endif @endif
<!-- Edit Route Modal --> <!-- Edit Route Modal -->
@if ($editingRoute) @if ($editingRoute)
<div class="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true"> <x-form-modal title="Edit Route" close="closeEditModal">
<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<div class="fixed inset-0 bg-gray-500/75 transition-opacity" wire:click="closeEditModal"></div>
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
<div class="relative z-10 inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-medium text-gray-900">Edit Route</h3>
<button wire:click="closeEditModal" class="text-gray-400 hover:text-gray-600">
<svg class="h-6 w-6" 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>
<div class="mb-4 p-3 bg-gray-50 rounded-md"> <div class="mb-4 p-3 bg-gray-50 rounded-md">
<p class="text-sm text-gray-600"> <p class="text-sm text-gray-600">
<strong>Feed:</strong> {{ $editingRoute->feed?->name }} <strong>Feed:</strong> {{ $editingRoute->feed?->name }}
@ -394,8 +370,6 @@ class="px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transp
</button> </button>
</div> </div>
</form> </form>
</div> </x-form-modal>
</div>
</div>
@endif @endif
</div> </div>

4
resources/views/livewire/settings.blade.php
View file

@ -58,7 +58,7 @@ class="flex-shrink-0"
min="0" min="0"
max="1440" max="1440"
step="1" step="1"
class="w-24 rounded-md border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm" class="w-24 rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm"
/> />
<button <button
wire:click="updateArticlePublishingInterval" wire:click="updateArticlePublishingInterval"
@ -128,7 +128,7 @@ class="flex-shrink-0"
wire:model="feedStalenessThreshold" wire:model="feedStalenessThreshold"
min="0" min="0"
step="1" step="1"
class="w-24 rounded-md border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm" class="w-24 rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm"
/> />
<button <button
wire:click="updateFeedStalenessThreshold" wire:click="updateFeedStalenessThreshold"