mirror of
https://github.com/kikootwo/ReadMeABook.git
synced 2026-06-03 21:00:09 +00:00
Add custom search terms & retry download (admin)
Add support for per-request custom search terms and an admin retry-download flow. - DB/schema: add custom_search_terms column via Prisma migration and schema update. - Admin UI: new AdjustSearchTermsModal component and UI badges to show custom search status; RequestActionsDropdown and RecentRequestsTable updated to surface adjust/retry actions. - API: new PATCH /api/admin/requests/[id]/search-terms to set/clear custom terms (optionally trigger a new search) and new POST /api/admin/requests/[id]/retry-download to resume monitoring or re-add downloads using DownloadHistory metadata. - Behavior: interactive search now prefers customSearchTerms when present; manual import exposes cleanupSource option to organize job; admin requests listing returns downloadAttempts and customSearchTerms. - UX: add SectionToolbar, LoadMoreBar and HideAvailableToggle components and wire hide-available preference across home, search, author and series pages; authors/series endpoints/page handlers gain pagination metadata. - Misc: add connection-errors util and update related processors/services and tests to cover the new flows. These changes enable admins to override search terms per request, trigger searches from the admin UI, and retry failed downloads more robustly.
This commit is contained in:
kikootwo
@@ -59,6 +59,9 @@ export function ManualImportBrowser({
|
||||
const [isImporting, setIsImporting] = useState(false);
|
||||
const [importError, setImportError] = useState<string | null>(null);
|
||||
|
||||
// Cleanup source toggle
|
||||
const [cleanupSource, setCleanupSource] = useState(false);
|
||||
|
||||
// Hover state for folder icon swap
|
||||
const [hoveredFolder, setHoveredFolder] = useState<string | null>(null);
|
||||
|
||||
@@ -188,6 +191,7 @@ export function ManualImportBrowser({
|
||||
body: JSON.stringify({
|
||||
asin: audiobook.asin,
|
||||
folderPath: selectedPath,
|
||||
cleanupSource,
|
||||
}),
|
||||
});
|
||||
const data = await res.json();
|
||||
@@ -288,6 +292,8 @@ export function ManualImportBrowser({
|
||||
isImporting={isImporting}
|
||||
importError={importError}
|
||||
slideClass={slideClass}
|
||||
cleanupSource={cleanupSource}
|
||||
onCleanupSourceChange={setCleanupSource}
|
||||
onBack={handleBackToBrowse}
|
||||
onStartImport={handleStartImport}
|
||||
/>
|
||||
|
||||
@@ -22,6 +22,8 @@ interface ConfirmPhaseProps {
|
||||
isImporting: boolean;
|
||||
importError: string | null;
|
||||
slideClass: string;
|
||||
cleanupSource: boolean;
|
||||
onCleanupSourceChange: (value: boolean) => void;
|
||||
onBack: () => void;
|
||||
onStartImport: () => void;
|
||||
}
|
||||
@@ -35,6 +37,8 @@ export function ConfirmPhase({
|
||||
isImporting,
|
||||
importError,
|
||||
slideClass,
|
||||
cleanupSource,
|
||||
onCleanupSourceChange,
|
||||
onBack,
|
||||
onStartImport,
|
||||
}: ConfirmPhaseProps) {
|
||||
@@ -99,6 +103,30 @@ export function ConfirmPhase({
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Cleanup source toggle */}
|
||||
<div className="p-4 rounded-xl bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-gray-700">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-900 dark:text-gray-100">
|
||||
Cleanup source files
|
||||
</p>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
|
||||
Delete original files after successful import
|
||||
</p>
|
||||
</div>
|
||||
<label className="relative inline-flex items-center cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={cleanupSource}
|
||||
onChange={(e) => onCleanupSourceChange(e.target.checked)}
|
||||
disabled={isImporting}
|
||||
className="sr-only peer"
|
||||
/>
|
||||
<div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Error display */}
|
||||
|
||||
@@ -34,6 +34,7 @@ interface InteractiveTorrentSearchModalProps {
|
||||
title: string;
|
||||
author: string;
|
||||
};
|
||||
customSearchTerms?: string | null; // Optional - admin-set custom search terms override
|
||||
fullAudiobook?: Audiobook; // Optional - only provided when called from details modal
|
||||
onSuccess?: () => void;
|
||||
searchMode?: 'audiobook' | 'ebook'; // Search mode - defaults to audiobook
|
||||
@@ -87,6 +88,7 @@ export function InteractiveTorrentSearchModal({
|
||||
requestId,
|
||||
asin,
|
||||
audiobook,
|
||||
customSearchTerms,
|
||||
fullAudiobook,
|
||||
onSuccess,
|
||||
searchMode = 'audiobook',
|
||||
@@ -114,7 +116,7 @@ export function InteractiveTorrentSearchModal({
|
||||
|
||||
const [results, setResults] = useState<(RankedTorrent & { qualityScore?: number; source?: string; ebookFormat?: string })[]>([]);
|
||||
const [confirmTorrent, setConfirmTorrent] = useState<TorrentResult | null>(null);
|
||||
const [searchTitle, setSearchTitle] = useState(audiobook.title);
|
||||
const [searchTitle, setSearchTitle] = useState(customSearchTerms || audiobook.title);
|
||||
const [isCustomConfirming, setIsCustomConfirming] = useState(false);
|
||||
const [mounted, setMounted] = useState(false);
|
||||
|
||||
@@ -153,9 +155,9 @@ export function InteractiveTorrentSearchModal({
|
||||
|
||||
// Reset search title when modal opens/closes or audiobook changes
|
||||
useEffect(() => {
|
||||
setSearchTitle(audiobook.title);
|
||||
setSearchTitle(customSearchTerms || audiobook.title);
|
||||
setResults([]);
|
||||
}, [isOpen, audiobook.title]);
|
||||
}, [isOpen, audiobook.title, customSearchTerms]);
|
||||
|
||||
// Perform search when modal opens
|
||||
useEffect(() => {
|
||||
|
||||
@@ -0,0 +1,81 @@
|
||||
/**
|
||||
* Component: Hide Available Toggle
|
||||
* Documentation: UI toggle for hiding titles already in the user's library
|
||||
*/
|
||||
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
|
||||
interface HideAvailableToggleProps {
|
||||
enabled: boolean;
|
||||
onToggle: (enabled: boolean) => void;
|
||||
}
|
||||
|
||||
export function HideAvailableToggle({ enabled, onToggle }: HideAvailableToggleProps) {
|
||||
return (
|
||||
<button
|
||||
onClick={() => onToggle(!enabled)}
|
||||
aria-label={enabled ? 'Show available titles' : 'Hide available titles'}
|
||||
aria-pressed={enabled}
|
||||
title={enabled ? 'Hide available (on)' : 'Hide available (off)'}
|
||||
className={`
|
||||
p-1.5 rounded-md transition-all duration-200
|
||||
${enabled
|
||||
? 'bg-blue-500/20 dark:bg-blue-400/20 text-blue-600 dark:text-blue-400 ring-1 ring-blue-500/30 dark:ring-blue-400/30 shadow-inner'
|
||||
: 'text-gray-600 dark:text-gray-400 hover:bg-white/20 dark:hover:bg-gray-700/50'
|
||||
}
|
||||
`}
|
||||
>
|
||||
<svg
|
||||
className="w-5 h-5"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
{enabled ? (
|
||||
<>
|
||||
{/* Eye with slash — hidden state */}
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M3 3l18 18"
|
||||
/>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M10.5 10.677a2 2 0 002.823 2.823"
|
||||
/>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M7.362 7.561C5.68 8.74 4.279 10.42 3 12c1.889 2.991 5.282 6 9 6 1.55 0 3.043-.523 4.395-1.35M12 6c3.718 0 7.111 3.009 9 6-.947 1.498-2.057 2.876-3.362 3.939"
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{/* Open eye — visible state */}
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M12 6c3.718 0 7.111 3.009 9 6-1.889 2.991-5.282 6-9 6s-7.111-3.009-9-6c1.889-2.991 5.282-6 9-6z"
|
||||
/>
|
||||
<circle
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="2"
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</svg>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,82 @@
|
||||
/**
|
||||
* Component: LoadMoreBar
|
||||
* Documentation: documentation/frontend/components.md
|
||||
*/
|
||||
|
||||
'use client';
|
||||
|
||||
import { CheckCircleIcon } from '@heroicons/react/24/outline';
|
||||
|
||||
interface LoadMoreBarProps {
|
||||
loadedCount: number;
|
||||
totalCount?: number;
|
||||
hasMore: boolean;
|
||||
isLoading: boolean;
|
||||
onLoadMore: () => void;
|
||||
itemLabel?: string;
|
||||
}
|
||||
|
||||
export function LoadMoreBar({
|
||||
loadedCount,
|
||||
totalCount,
|
||||
hasMore,
|
||||
isLoading,
|
||||
onLoadMore,
|
||||
itemLabel = 'books',
|
||||
}: LoadMoreBarProps) {
|
||||
if (loadedCount === 0) return null;
|
||||
|
||||
const allLoaded = !hasMore && !isLoading;
|
||||
|
||||
// Count text
|
||||
let countText: string;
|
||||
if (allLoaded) {
|
||||
countText = `All ${loadedCount.toLocaleString()} ${itemLabel} loaded`;
|
||||
} else if (totalCount && totalCount > loadedCount) {
|
||||
countText = `Showing ${loadedCount.toLocaleString()} of ${totalCount.toLocaleString()} ${itemLabel}`;
|
||||
} else {
|
||||
countText = `${loadedCount.toLocaleString()} ${itemLabel} loaded`;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-white/90 dark:bg-gray-800/90 backdrop-blur-md rounded-2xl px-4 sm:px-6 py-3 border border-gray-200/50 dark:border-gray-700/50 shadow-sm">
|
||||
<div className="flex items-center justify-between">
|
||||
{/* Left: Count */}
|
||||
<span className="text-sm text-gray-600 dark:text-gray-400">
|
||||
{countText}
|
||||
</span>
|
||||
|
||||
{/* Right: Action */}
|
||||
{allLoaded ? (
|
||||
<span className="inline-flex items-center gap-1.5 text-sm text-green-600 dark:text-green-400">
|
||||
<CheckCircleIcon className="w-4 h-4" />
|
||||
Complete
|
||||
</span>
|
||||
) : (
|
||||
<button
|
||||
onClick={onLoadMore}
|
||||
disabled={isLoading}
|
||||
className="inline-flex items-center gap-2 px-4 py-1.5 text-sm font-medium
|
||||
text-gray-700 dark:text-gray-300
|
||||
border border-gray-300 dark:border-gray-600 rounded-lg
|
||||
hover:bg-gray-100 dark:hover:bg-gray-700
|
||||
disabled:opacity-50 disabled:cursor-not-allowed
|
||||
transition-colors"
|
||||
>
|
||||
{isLoading ? (
|
||||
<>
|
||||
<svg className="animate-spin h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||
<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 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
|
||||
</svg>
|
||||
Loading...
|
||||
</>
|
||||
) : (
|
||||
'Load more'
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,175 @@
|
||||
/**
|
||||
* Component: Section Toolbar
|
||||
* Documentation: Responsive toolbar that shows inline controls on sm+ and collapses to popover on mobile
|
||||
*/
|
||||
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
import { useSmartDropdownPosition } from '@/hooks/useSmartDropdownPosition';
|
||||
import { HideAvailableToggle } from '@/components/ui/HideAvailableToggle';
|
||||
import { SquareCoversToggle } from '@/components/ui/SquareCoversToggle';
|
||||
import { CardSizeControls } from '@/components/ui/CardSizeControls';
|
||||
|
||||
interface SectionToolbarProps {
|
||||
hideAvailable: boolean;
|
||||
onToggleHideAvailable: (v: boolean) => void;
|
||||
squareCovers: boolean;
|
||||
onToggleSquareCovers: (v: boolean) => void;
|
||||
cardSize: number;
|
||||
onCardSizeChange: (v: number) => void;
|
||||
}
|
||||
|
||||
export function SectionToolbar({
|
||||
hideAvailable,
|
||||
onToggleHideAvailable,
|
||||
squareCovers,
|
||||
onToggleSquareCovers,
|
||||
cardSize,
|
||||
onCardSizeChange,
|
||||
}: SectionToolbarProps) {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const { containerRef, dropdownRef, style } = useSmartDropdownPosition(isOpen);
|
||||
|
||||
// Close on Escape
|
||||
useEffect(() => {
|
||||
if (!isOpen) return;
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') setIsOpen(false);
|
||||
};
|
||||
document.addEventListener('keydown', handleKeyDown);
|
||||
return () => document.removeEventListener('keydown', handleKeyDown);
|
||||
}, [isOpen]);
|
||||
|
||||
// Close on click outside
|
||||
useEffect(() => {
|
||||
if (!isOpen) return;
|
||||
const handleMouseDown = (e: MouseEvent) => {
|
||||
const target = e.target as Node;
|
||||
if (
|
||||
containerRef.current && !containerRef.current.contains(target) &&
|
||||
dropdownRef.current && !dropdownRef.current.contains(target)
|
||||
) {
|
||||
setIsOpen(false);
|
||||
}
|
||||
};
|
||||
document.addEventListener('mousedown', handleMouseDown);
|
||||
return () => document.removeEventListener('mousedown', handleMouseDown);
|
||||
}, [isOpen, containerRef, dropdownRef]);
|
||||
|
||||
return (
|
||||
<div className="ml-auto flex items-center gap-1">
|
||||
{/* Inline controls — visible at sm and above */}
|
||||
<div className="hidden sm:flex items-center gap-1">
|
||||
<HideAvailableToggle enabled={hideAvailable} onToggle={onToggleHideAvailable} />
|
||||
<SquareCoversToggle enabled={squareCovers} onToggle={onToggleSquareCovers} />
|
||||
<CardSizeControls size={cardSize} onSizeChange={onCardSizeChange} />
|
||||
</div>
|
||||
|
||||
{/* Collapsed ellipsis trigger — visible below sm */}
|
||||
<div className="sm:hidden" ref={containerRef}>
|
||||
<button
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
aria-label="View options"
|
||||
aria-expanded={isOpen}
|
||||
className={`
|
||||
p-1.5 rounded-md transition-all duration-200
|
||||
${isOpen
|
||||
? 'bg-blue-500/20 dark:bg-blue-400/20 text-blue-600 dark:text-blue-400 ring-1 ring-blue-500/30 dark:ring-blue-400/30'
|
||||
: 'text-gray-600 dark:text-gray-400 hover:bg-white/20 dark:hover:bg-gray-700/50'
|
||||
}
|
||||
`}
|
||||
>
|
||||
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<circle cx="5" cy="12" r="2" />
|
||||
<circle cx="12" cy="12" r="2" />
|
||||
<circle cx="19" cy="12" r="2" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
{/* Portal dropdown */}
|
||||
{isOpen && typeof document !== 'undefined' && style && createPortal(
|
||||
<div
|
||||
ref={dropdownRef}
|
||||
style={style}
|
||||
className="bg-white dark:bg-gray-800 rounded-lg shadow-lg ring-1 ring-black/5 dark:ring-white/10 z-50 py-1 min-w-[220px] animate-in fade-in duration-150"
|
||||
>
|
||||
{/* Hide Available */}
|
||||
<button
|
||||
onClick={() => onToggleHideAvailable(!hideAvailable)}
|
||||
className="w-full flex items-center gap-3 px-3 py-2.5 text-sm hover:bg-gray-100 dark:hover:bg-gray-700/50 transition-colors"
|
||||
>
|
||||
<span className={`
|
||||
p-1 rounded-md transition-all duration-200
|
||||
${hideAvailable
|
||||
? 'bg-blue-500/20 dark:bg-blue-400/20 text-blue-600 dark:text-blue-400 ring-1 ring-blue-500/30 dark:ring-blue-400/30 shadow-inner'
|
||||
: 'text-gray-500 dark:text-gray-400'
|
||||
}
|
||||
`}>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
{hideAvailable ? (
|
||||
<>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 3l18 18" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.5 10.677a2 2 0 002.823 2.823" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7.362 7.561C5.68 8.74 4.279 10.42 3 12c1.889 2.991 5.282 6 9 6 1.55 0 3.043-.523 4.395-1.35M12 6c3.718 0 7.111 3.009 9 6-.947 1.498-2.057 2.876-3.362 3.939" />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6c3.718 0 7.111 3.009 9 6-1.889 2.991-5.282 6-9 6s-7.111-3.009-9-6c1.889-2.991 5.282-6 9-6z" />
|
||||
<circle cx="12" cy="12" r="2" strokeWidth={2} />
|
||||
</>
|
||||
)}
|
||||
</svg>
|
||||
</span>
|
||||
<span className="text-gray-700 dark:text-gray-300">Hide Available</span>
|
||||
{hideAvailable && (
|
||||
<span className="ml-auto text-xs text-blue-600 dark:text-blue-400 font-medium">On</span>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* Square Covers */}
|
||||
<button
|
||||
onClick={() => onToggleSquareCovers(!squareCovers)}
|
||||
className="w-full flex items-center gap-3 px-3 py-2.5 text-sm hover:bg-gray-100 dark:hover:bg-gray-700/50 transition-colors"
|
||||
>
|
||||
<span className={`
|
||||
p-1 rounded-md transition-all duration-200
|
||||
${squareCovers
|
||||
? 'bg-blue-500/20 dark:bg-blue-400/20 text-blue-600 dark:text-blue-400 ring-1 ring-blue-500/30 dark:ring-blue-400/30 shadow-inner'
|
||||
: 'text-gray-500 dark:text-gray-400'
|
||||
}
|
||||
`}>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<rect x="3" y="3" width="18" height="18" rx="2" strokeWidth={2} />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 9h4M3 15h4M21 9h-4M21 15h-4" opacity={squareCovers ? 1 : 0.4} />
|
||||
</svg>
|
||||
</span>
|
||||
<span className="text-gray-700 dark:text-gray-300">Square Covers</span>
|
||||
{squareCovers && (
|
||||
<span className="ml-auto text-xs text-blue-600 dark:text-blue-400 font-medium">On</span>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* Divider */}
|
||||
<div className="border-t border-gray-200 dark:border-gray-700 my-1" />
|
||||
|
||||
{/* Card Size */}
|
||||
<div className="flex items-center gap-3 px-3 py-2.5 text-sm">
|
||||
<span className="p-1 text-gray-500 dark:text-gray-400">
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
</span>
|
||||
<span className="text-gray-700 dark:text-gray-300">Card Size</span>
|
||||
<div className="ml-auto">
|
||||
<CardSizeControls size={cardSize} onSizeChange={onCardSizeChange} />
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
document.body
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user