mirror of
https://github.com/kikootwo/ReadMeABook.git
synced 2026-06-03 12:50:09 +00:00
Add release blocklist feature
Introduce a per-request release blocklist to auto-block permanently failing releases and provide admin management. Changes include: - Database: add BlockedRelease model (blocked_releases) to Prisma schema with unique (requestId, releaseKey) and indexes; documented in backend database docs. - Service & utils: new blocklist.service, release-key and filter helpers for normalization and matching; processors updated to emit auto-blocks (monitor-download, organize-files, search processors, RSS). - HTTP API: add admin endpoints GET/DELETE /api/admin/blocklist, DELETE /api/admin/blocklist/[id], and GET /api/admin/blocklist/by-request/[requestId]. - Admin UI: new /admin/blocklist page and numerous React components (toolbar, filters, table, rows, pagination, skeleton, chips, date picker) with URL-driven state hook and per-row unblock UX. - Tests: add unit/integration tests for service, routes, utils, and updated processor tests. The blocklist is idempotent (upsert), filters search results before ranking (interactive search shows badges only), and admin-only APIs require auth. This commit wires docs, API, DB, frontend and tests for the new feature.
This commit is contained in:
kikootwo
@@ -0,0 +1,284 @@
|
||||
/**
|
||||
* Component: Blocklist Row (desktop + mobile)
|
||||
* Documentation: documentation/admin-features/release-blocklist.md
|
||||
*
|
||||
* Per-row Unblock is a real <button> with intentional treatment (per zach.md).
|
||||
* Expand chevron explicitly discloses the long reason detail when present.
|
||||
* No accidental tap targets, no surprise expansions.
|
||||
*
|
||||
* Release name is rendered VERBATIM from the source — chips/badges add context,
|
||||
* they don't replace (per zach.md "displayed source data stays true to source").
|
||||
*/
|
||||
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useToast } from '@/components/ui/Toast';
|
||||
import { fetchWithAuth } from '@/lib/utils/api';
|
||||
import { BlockedReleaseRow, SOURCE_BADGE_LABEL } from '../types';
|
||||
|
||||
interface BlocklistRowProps {
|
||||
entry: BlockedReleaseRow;
|
||||
/** Optimistic removal — called immediately on click so the row disappears. */
|
||||
onUnblocked: (id: string) => void;
|
||||
/** Called when the API call fails so the row can be reinserted. */
|
||||
onUnblockFailed: (entry: BlockedReleaseRow, error: string) => void;
|
||||
}
|
||||
|
||||
function formatTimestamp(iso: string): { absolute: string; relative: string } {
|
||||
const d = new Date(iso);
|
||||
if (Number.isNaN(d.getTime())) {
|
||||
return { absolute: '—', relative: '—' };
|
||||
}
|
||||
const absolute = d.toLocaleString([], {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
});
|
||||
const diffMs = Date.now() - d.getTime();
|
||||
const diffMin = Math.floor(diffMs / 60000);
|
||||
let relative: string;
|
||||
if (diffMin < 1) relative = 'just now';
|
||||
else if (diffMin < 60) relative = `${diffMin}m ago`;
|
||||
else if (diffMin < 60 * 24) relative = `${Math.floor(diffMin / 60)}h ago`;
|
||||
else relative = `${Math.floor(diffMin / (60 * 24))}d ago`;
|
||||
return { absolute, relative };
|
||||
}
|
||||
|
||||
function SourceBadge({ source }: { source: string }) {
|
||||
const label = SOURCE_BADGE_LABEL[source] ?? source;
|
||||
const styles: Record<string, string> = {
|
||||
organize_fail: 'bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300',
|
||||
download_fail: 'bg-rose-100 text-rose-800 dark:bg-rose-900/30 dark:text-rose-300',
|
||||
manual: 'bg-slate-100 text-slate-800 dark:bg-slate-700 dark:text-slate-200',
|
||||
};
|
||||
const cls = styles[source] ?? 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200';
|
||||
return (
|
||||
<span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${cls}`}>
|
||||
{label}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
function useUnblock(
|
||||
entry: BlockedReleaseRow,
|
||||
onUnblocked: (id: string) => void,
|
||||
onUnblockFailed: (entry: BlockedReleaseRow, error: string) => void
|
||||
) {
|
||||
const toast = useToast();
|
||||
const [isUnblocking, setIsUnblocking] = useState(false);
|
||||
|
||||
const unblock = async () => {
|
||||
if (isUnblocking) return;
|
||||
setIsUnblocking(true);
|
||||
onUnblocked(entry.id);
|
||||
try {
|
||||
const response = await fetchWithAuth(`/api/admin/blocklist/${entry.id}`, {
|
||||
method: 'DELETE',
|
||||
});
|
||||
if (!response.ok) {
|
||||
const body = await response.json().catch(() => ({}));
|
||||
throw new Error(body.error || body.message || 'Failed to unblock');
|
||||
}
|
||||
toast.success(`Unblocked: ${entry.releaseName}`);
|
||||
} catch (error) {
|
||||
const message = error instanceof Error ? error.message : 'Failed to unblock';
|
||||
onUnblockFailed(entry, message);
|
||||
toast.error(message);
|
||||
} finally {
|
||||
setIsUnblocking(false);
|
||||
}
|
||||
};
|
||||
|
||||
return { isUnblocking, unblock };
|
||||
}
|
||||
|
||||
function RequestRelation({ entry }: { entry: BlockedReleaseRow }) {
|
||||
const r = entry.request;
|
||||
if (!r || !r.audiobook) {
|
||||
return <span className="text-gray-400 dark:text-gray-500">—</span>;
|
||||
}
|
||||
return (
|
||||
<div className="min-w-0">
|
||||
<div className="flex items-center gap-1.5 min-w-0">
|
||||
<span className="text-sm font-medium text-gray-900 dark:text-gray-100 truncate" title={r.audiobook.title}>
|
||||
{r.audiobook.title}
|
||||
</span>
|
||||
{r.deletedAt && (
|
||||
<span
|
||||
className="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-semibold uppercase tracking-wide bg-gray-200 text-gray-700 dark:bg-gray-700 dark:text-gray-300 flex-shrink-0"
|
||||
title={`Request deleted at ${new Date(r.deletedAt).toLocaleString()}`}
|
||||
>
|
||||
Deleted
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400 truncate" title={r.audiobook.author}>
|
||||
{r.audiobook.author}
|
||||
{r.user && <span> · {r.user.plexUsername}</span>}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ReasonCell({
|
||||
entry,
|
||||
isExpanded,
|
||||
onToggle,
|
||||
}: {
|
||||
entry: BlockedReleaseRow;
|
||||
isExpanded: boolean;
|
||||
onToggle: () => void;
|
||||
}) {
|
||||
const hasDetail = !!entry.reasonDetail && entry.reasonDetail.trim().length > 0;
|
||||
return (
|
||||
<div className="min-w-0">
|
||||
<div className="flex items-start gap-1.5">
|
||||
<p className={`text-sm text-gray-700 dark:text-gray-300 ${isExpanded ? 'whitespace-pre-wrap break-words' : 'truncate'}`}>
|
||||
{entry.reason}
|
||||
</p>
|
||||
{hasDetail && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onToggle}
|
||||
aria-expanded={isExpanded}
|
||||
aria-label={isExpanded ? 'Hide reason detail' : 'Show reason detail'}
|
||||
className="flex-shrink-0 p-1.5 -my-1 rounded-md text-gray-400 hover:text-gray-700 hover:bg-gray-100 dark:text-gray-500 dark:hover:text-gray-300 dark:hover:bg-gray-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/40 transition-colors"
|
||||
>
|
||||
<svg
|
||||
className={`w-3 h-3 transition-transform duration-200 ease-out ${isExpanded ? 'rotate-90' : ''}`}
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{isExpanded && hasDetail && (
|
||||
<pre className="mt-1.5 text-xs text-gray-600 dark:text-gray-400 whitespace-pre-wrap break-words font-mono bg-gray-50 dark:bg-gray-900/40 rounded px-2 py-1.5 border border-gray-100 dark:border-gray-700/50">
|
||||
{entry.reasonDetail}
|
||||
</pre>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function UnblockButton({ isUnblocking, onClick }: { isUnblocking: boolean; onClick: () => void }) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClick}
|
||||
disabled={isUnblocking}
|
||||
aria-label="Unblock release"
|
||||
className="inline-flex items-center gap-1.5 min-h-[36px] px-3 py-1.5 text-sm font-medium text-blue-700 dark:text-blue-300 bg-blue-50 dark:bg-blue-900/30 hover:bg-blue-100 dark:hover:bg-blue-900/50 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{isUnblocking ? (
|
||||
<svg className="w-3.5 h-3.5 animate-spin" fill="none" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
|
||||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
|
||||
</svg>
|
||||
) : (
|
||||
<svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
)}
|
||||
<span>Unblock</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Desktop row — <tr>
|
||||
// ---------------------------------------------------------------------------
|
||||
function DesktopRow({ entry, onUnblocked, onUnblockFailed }: BlocklistRowProps) {
|
||||
const { isUnblocking, unblock } = useUnblock(entry, onUnblocked, onUnblockFailed);
|
||||
const [reasonExpanded, setReasonExpanded] = useState(false);
|
||||
const { absolute, relative } = formatTimestamp(entry.createdAt);
|
||||
|
||||
return (
|
||||
<tr className="hover:bg-gray-50 dark:hover:bg-gray-900/40 transition-colors">
|
||||
<td className="px-6 py-4 align-top">
|
||||
<p
|
||||
className="text-sm font-medium text-gray-900 dark:text-gray-100 break-words"
|
||||
title={entry.releaseName}
|
||||
>
|
||||
{entry.releaseName}
|
||||
</p>
|
||||
</td>
|
||||
<td className="px-6 py-4 align-top">
|
||||
<ReasonCell entry={entry} isExpanded={reasonExpanded} onToggle={() => setReasonExpanded((v) => !v)} />
|
||||
</td>
|
||||
<td className="px-6 py-4 align-top">
|
||||
<SourceBadge source={entry.source} />
|
||||
</td>
|
||||
<td className="px-6 py-4 align-top">
|
||||
<RequestRelation entry={entry} />
|
||||
</td>
|
||||
<td className="px-6 py-4 align-top text-sm text-gray-700 dark:text-gray-300">
|
||||
{entry.indexerName ?? <span className="text-gray-400 dark:text-gray-500">—</span>}
|
||||
</td>
|
||||
<td className="px-6 py-4 align-top text-sm text-gray-500 dark:text-gray-400" title={absolute}>
|
||||
{relative}
|
||||
</td>
|
||||
<td className="px-6 py-4 align-top text-right">
|
||||
<UnblockButton isUnblocking={isUnblocking} onClick={unblock} />
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Mobile card
|
||||
// ---------------------------------------------------------------------------
|
||||
function MobileRow({ entry, onUnblocked, onUnblockFailed }: BlocklistRowProps) {
|
||||
const { isUnblocking, unblock } = useUnblock(entry, onUnblocked, onUnblockFailed);
|
||||
const [reasonExpanded, setReasonExpanded] = useState(false);
|
||||
const { absolute, relative } = formatTimestamp(entry.createdAt);
|
||||
|
||||
return (
|
||||
<div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4 space-y-3">
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<SourceBadge source={entry.source} />
|
||||
<span className="text-xs text-gray-500 dark:text-gray-400" title={absolute}>
|
||||
{relative}
|
||||
</span>
|
||||
</div>
|
||||
<UnblockButton isUnblocking={isUnblocking} onClick={unblock} />
|
||||
</div>
|
||||
|
||||
<p
|
||||
className="text-sm font-medium text-gray-900 dark:text-gray-100 break-words"
|
||||
title={entry.releaseName}
|
||||
>
|
||||
{entry.releaseName}
|
||||
</p>
|
||||
|
||||
<ReasonCell entry={entry} isExpanded={reasonExpanded} onToggle={() => setReasonExpanded((v) => !v)} />
|
||||
|
||||
{entry.request?.audiobook && (
|
||||
<div className="pt-2 border-t border-gray-100 dark:border-gray-700/60">
|
||||
<p className="text-[10px] uppercase tracking-wide font-semibold text-gray-400 dark:text-gray-500 mb-0.5">
|
||||
Associated request
|
||||
</p>
|
||||
<RequestRelation entry={entry} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{entry.indexerName && (
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">
|
||||
Indexer: <span className="font-medium text-gray-700 dark:text-gray-300">{entry.indexerName}</span>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export const BlocklistRow = {
|
||||
Desktop: DesktopRow,
|
||||
Mobile: MobileRow,
|
||||
};
|
||||
Reference in New Issue
Block a user