barbercollie/ReadMeABook
1
0
Fork 1
mirror of https://github.com/kikootwo/ReadMeABook.git synced 2026-06-03 21:00:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'toggleable-shelves'

Browse Source
This commit is contained in:
kikootwo
2026-03-11 10:02:57 -04:00
parent 8aac63715a 98c89db0a7
commit da7ad7cac1
15 changed files with 167 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/profile/ShelvesSection.tsx
+62 -4
View File
@@ -11,8 +11,8 @@ import {
GenericShelf,
useSyncShelves,
} from '@/lib/hooks/useShelves';
import { useDeleteGoodreadsShelf } from '@/lib/hooks/useGoodreadsShelves';
import { useDeleteHardcoverShelf } from '@/lib/hooks/useHardcoverShelves';
import { useDeleteGoodreadsShelf, useUpdateGoodreadsShelf } from '@/lib/hooks/useGoodreadsShelves';
import { useDeleteHardcoverShelf, useUpdateHardcoverShelf } from '@/lib/hooks/useHardcoverShelves';
import { AddShelfModal } from '@/components/ui/AddShelfModal';
import { AudiobookDetailsModal } from '@/components/audiobooks/AudiobookDetailsModal';
import { usePreferences } from '@/contexts/PreferencesContext';
@@ -42,6 +42,8 @@ export function ShelvesSection() {
const { deleteShelf: deleteHardcover, isLoading: isDeletingHardcover } =
useDeleteHardcoverShelf();
const { syncShelves, isSyncing: isSyncingAll } = useSyncShelves();
const { updateShelf: updateGoodreads } = useUpdateGoodreadsShelf();
const { updateShelf: updateHardcover } = useUpdateHardcoverShelf();
const { squareCovers } = usePreferences();
const [confirmDeleteId, setConfirmDeleteId] = useState<string | null>(null);
@@ -62,6 +64,18 @@ export function ShelvesSection() {
}
};
const handleToggleAutoRequest = async (shelf: GenericShelf) => {
try {
if (shelf.type === 'goodreads') {
await updateGoodreads(shelf.id, { autoRequest: !shelf.autoRequest });
} else {
await updateHardcover(shelf.id, { autoRequest: !shelf.autoRequest });
}
} catch {
// Error handled by hook
}
};
const isDeleting = isDeletingGoodreads || isDeletingHardcover;
return (
@@ -159,6 +173,7 @@ export function ShelvesSection() {
onConfirmDelete={() => setConfirmDeleteId(shelf.id)}
onCancelDelete={() => setConfirmDeleteId(null)}
onManage={() => setManageShelf(shelf)}
onToggleAutoRequest={() => handleToggleAutoRequest(shelf)}
onBookClick={(asin) => setSelectedAsin(asin)}
/>
))}
@@ -282,6 +297,7 @@ interface ShelfCardProps {
onConfirmDelete: () => void;
onCancelDelete: () => void;
onManage: () => void;
onToggleAutoRequest: () => void;
onBookClick: (asin: string) => void;
}
@@ -294,6 +310,7 @@ function ShelfCard({
onConfirmDelete,
onCancelDelete,
onManage,
onToggleAutoRequest,
onBookClick,
}: ShelfCardProps) {
const { syncShelves, isSyncing: isManualSyncing } = useSyncShelves();
@@ -321,7 +338,12 @@ function ShelfCard({
);
return (
<div className="group rounded-2xl bg-white dark:bg-gray-800 border border-gray-100 dark:border-gray-700/30 p-6 sm:p-7 transition-all duration-300 hover:shadow-lg hover:shadow-black/[0.04] dark:hover:shadow-black/20 hover:border-gray-200 dark:hover:border-gray-600/40">
<div className={cn(
'group rounded-2xl bg-white dark:bg-gray-800 border p-6 sm:p-7 transition-all duration-300',
shelf.autoRequest
? 'border-gray-100 dark:border-gray-700/30 hover:shadow-lg hover:shadow-black/[0.04] dark:hover:shadow-black/20 hover:border-gray-200 dark:hover:border-gray-600/40'
: 'border-gray-200/60 dark:border-gray-700/20 bg-gray-50/50 dark:bg-gray-800/60',
)}>
{/* Top: Shelf info + actions */}
<div
className={cn(
@@ -330,7 +352,12 @@ function ShelfCard({
)}
>
<div className="min-w-0 flex-1">
<h3 className="font-semibold text-[15px] text-gray-900 dark:text-white truncate leading-snug flex items-center">
<h3 className={cn(
'font-semibold text-[15px] truncate leading-snug flex items-center',
shelf.autoRequest
? 'text-gray-900 dark:text-white'
: 'text-gray-400 dark:text-gray-500',
)}>
{shelf.name} {providerIcon}
</h3>
<div className="flex items-center gap-2 mt-2">
@@ -339,6 +366,14 @@ function ShelfCard({
{shelf.bookCount} {shelf.bookCount === 1 ? 'book' : 'books'}
</span>
)}
{!shelf.autoRequest && (
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-xs font-medium bg-amber-50 dark:bg-amber-500/10 text-amber-600 dark:text-amber-400 ring-1 ring-amber-200/50 dark:ring-amber-500/20">
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M15.75 5.25v13.5m-7.5-13.5v13.5" />
</svg>
Paused
</span>
)}
<span className="inline-flex items-center gap-1.5 text-xs text-gray-400 dark:text-gray-500">
{isSyncing ? (
<>
@@ -381,6 +416,27 @@ function ShelfCard({
</div>
) : (
<div className="flex items-center gap-1">
<button
onClick={onToggleAutoRequest}
className={cn(
'p-2 transition-all duration-200 rounded-xl outline-none',
shelf.autoRequest
? 'text-gray-400 hover:text-amber-500 dark:text-gray-500 dark:hover:text-amber-400 hover:bg-amber-50 dark:hover:bg-amber-500/10 opacity-40 hover:opacity-100 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-amber-500/40'
: 'text-amber-500 dark:text-amber-400 bg-amber-50 dark:bg-amber-500/10 opacity-100',
)}
title={shelf.autoRequest ? 'Pause auto-requesting' : 'Resume auto-requesting'}
aria-label={shelf.autoRequest ? 'Pause auto-requesting' : 'Resume auto-requesting'}
>
{shelf.autoRequest ? (
<svg className="w-[18px] h-[18px]" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={1.5}>
<path strokeLinecap="round" strokeLinejoin="round" d="M15.75 5.25v13.5m-7.5-13.5v13.5" />
</svg>
) : (
<svg className="w-[18px] h-[18px]" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={1.5}>
<path strokeLinecap="round" strokeLinejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 0 010 1.971l-11.54 6.347a1.125 1.125 0 01-1.667-.985V5.653z" />
</svg>
)}
</button>
<button
onClick={onManage}
className="p-2 text-gray-400 hover:text-blue-500 dark:text-gray-500 dark:hover:text-blue-400 transition-all duration-200 rounded-xl hover:bg-blue-50 dark:hover:bg-blue-500/10 opacity-40 hover:opacity-100 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-blue-500/40 outline-none"
@@ -451,6 +507,7 @@ function ShelfCard({
</div>
{/* Bottom: Stacked book covers */}
<div className={cn(!shelf.autoRequest && 'opacity-50 grayscale-[30%]')}>
{hasCovers ? (
<CoverStack
books={displayBooks}
@@ -472,6 +529,7 @@ function ShelfCard({
))}
</div>
) : null}
</div>
</div>
);
}
src/components/ui/AddShelfModal.tsx
+31 -2
View File
@@ -32,6 +32,8 @@ export function AddShelfModal({ isOpen, onClose }: AddShelfModalProps) {
const [statusId, setStatusId] = useState('1');
const [customListId, setCustomListId] = useState('');
// Shared State
const [autoRequest, setAutoRequest] = useState(true);
const [validationError, setValidationError] = useState('');
const [success, setSuccess] = useState(false);
const [successMessage, setSuccessMessage] = useState('');
@@ -72,12 +74,12 @@ export function AddShelfModal({ isOpen, onClose }: AddShelfModalProps) {
try {
if (provider === 'goodreads') {
const shelf = await addGoodreads(rssUrl);
const shelf = await addGoodreads(rssUrl, autoRequest);
setSuccessMessage(`Added shelf "${shelf.name}" successfully!`);
setRssUrl('');
} else {
const finalId = listType === 'status' ? `status-${statusId}` : customListId.trim();
const shelf = await addHardcover(apiToken.trim(), finalId);
const shelf = await addHardcover(apiToken.trim(), finalId, autoRequest);
setSuccessMessage(`Added list "${shelf.name}" successfully!`);
setApiToken('');
setCustomListId('');
@@ -98,6 +100,7 @@ export function AddShelfModal({ isOpen, onClose }: AddShelfModalProps) {
setRssUrl('');
setApiToken('');
setCustomListId('');
setAutoRequest(true);
setValidationError('');
setSuccess(false);
setSuccessMessage('');
@@ -215,6 +218,32 @@ export function AddShelfModal({ isOpen, onClose }: AddShelfModalProps) {
/>
)}
{/* Auto-Request Toggle */}
<label className="flex items-center justify-between gap-3 p-3 rounded-xl bg-gray-50 dark:bg-gray-800/50 border border-gray-100 dark:border-gray-700/30 cursor-pointer select-none">
<div>
<span className="text-sm font-medium text-gray-700 dark:text-gray-300">Auto-request books</span>
<p className="text-xs text-gray-400 dark:text-gray-500 mt-0.5">
Automatically request audiobooks from this shelf
</p>
</div>
<button
type="button"
role="switch"
aria-checked={autoRequest}
onClick={() => setAutoRequest(!autoRequest)}
disabled={isLoading || success}
className={`relative inline-flex h-5 w-9 flex-shrink-0 rounded-full transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/40 ${
autoRequest ? 'bg-blue-600' : 'bg-gray-300 dark:bg-gray-600'
} ${(isLoading || success) ? 'opacity-50 cursor-not-allowed' : ''}`}
>
<span
className={`pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white shadow-sm ring-0 transition duration-200 ease-in-out ${
autoRequest ? 'translate-x-4' : 'translate-x-0.5'
} mt-0.5`}
/>
</button>
</label>
<div className="flex justify-end gap-3 pt-2">
<Button type="button" variant="ghost" size="sm" onClick={handleClose} disabled={isLoading || success}>
Cancel
src/components/ui/ManageShelfModal.tsx
+1 -1
View File
@@ -45,7 +45,7 @@ export function ManageShelfModal({ shelf, isOpen, onClose }: ManageShelfModalPro
try {
if (shelf.type === 'goodreads') {
if (!rssUrl.trim()) return;
await updateGoodreads(shelf.id, rssUrl.trim());
await updateGoodreads(shelf.id, { rssUrl: rssUrl.trim() });
} else {
if (!listId.trim()) return;
await updateHardcover(shelf.id, {