Enhance ShowMetadataCard UI: update button labels for gallery selection, improve metadata search input with a dedicated label, and streamline provider selection functionality. Update translations for new UI elements to improve user experience.

This commit is contained in:
Leonid Pershin
2026-07-25 12:11:29 +03:00
parent afe6cc24aa
commit 671bbb78bd
2 changed files with 38 additions and 31 deletions
@@ -85,7 +85,6 @@ export function ShowMetadataCard({ show, onChanged }: { show: ShowDto; onChanged
},
onSuccess: () => {
toast.success(t('settings.saved'))
setQuery(originalName.trim() || show.name)
changed()
},
onError,
@@ -131,7 +130,7 @@ export function ShowMetadataCard({ show, onChanged }: { show: ShowDto; onChanged
)}
</div>
<Button size="sm" variant="outline" onClick={() => setGalleryOpen(true)}>
{t('admin.metadata.pickFromGallery')}
{t('admin.metadata.pickPoster')}
</Button>
<ImageGallery
open={galleryOpen}
@@ -156,35 +155,15 @@ export function ShowMetadataCard({ show, onChanged }: { show: ShowDto; onChanged
{providers && providers.length > 0 && (
<div className="flex flex-col gap-2">
<div className="flex flex-wrap items-end gap-2">
<div className="flex flex-col gap-1.5">
<Label>{t('admin.metadata.source')}</Label>
<Select value={effectiveProvider} onValueChange={setProvider}>
<SelectTrigger className="w-28">
<SelectValue />
</SelectTrigger>
<SelectContent>
{providers.map((p) => (
<SelectItem key={p} value={p}>
{p.toUpperCase()}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<Input
className="min-w-40 flex-1"
value={query}
onChange={(e) => {
setQuery(e.target.value)
setSearched(false)
}}
placeholder={t('admin.metadata.searchPlaceholder')}
/>
<Button size="sm" disabled={search.isPending || !query.trim()} onClick={() => search.mutate()}>
{t('admin.metadata.searchBtn')}
</Button>
</div>
<Label>{t('admin.metadata.searchLabel')}</Label>
<Input
value={query}
onChange={(e) => {
setQuery(e.target.value)
setSearched(false)
}}
placeholder={t('admin.metadata.searchPlaceholder')}
/>
{searched && results.length === 0 && (
<p className="text-xs text-muted-foreground">{t('admin.metadata.nothingFound')}</p>
@@ -245,6 +224,30 @@ export function ShowMetadataCard({ show, onChanged }: { show: ShowDto; onChanged
</div>
</div>
<div className="flex flex-wrap items-center gap-2">
{providers && providers.length > 0 && (
<>
<Select value={effectiveProvider} onValueChange={setProvider}>
<SelectTrigger className="h-9 w-24">
<SelectValue />
</SelectTrigger>
<SelectContent>
{providers.map((p) => (
<SelectItem key={p} value={p}>
{p.toUpperCase()}
</SelectItem>
))}
</SelectContent>
</Select>
<Button
size="sm"
variant="outline"
disabled={search.isPending || !query.trim()}
onClick={() => search.mutate()}
>
{t('admin.metadata.searchBtn')}
</Button>
</>
)}
<Button size="sm" disabled={save.isPending} onClick={() => save.mutate()}>
{t('common.save')}
</Button>