diff --git a/apps/readest-app/src/app/library/components/Bookshelf.tsx b/apps/readest-app/src/app/library/components/Bookshelf.tsx index 269686fc..c497a849 100644 --- a/apps/readest-app/src/app/library/components/Bookshelf.tsx +++ b/apps/readest-app/src/app/library/components/Bookshelf.tsx @@ -138,7 +138,7 @@ const Bookshelf: React.FC = ({ return (
-
+
{currentBookshelfItems.map((item, index) => ( = ({
)} -
+
{isSelectMode && showSelectModeActions && (
= ({ {showDeleteAlert && (
diff --git a/apps/readest-app/src/app/library/components/BookshelfItem.tsx b/apps/readest-app/src/app/library/components/BookshelfItem.tsx index a33a1a62..c54d776b 100644 --- a/apps/readest-app/src/app/library/components/BookshelfItem.tsx +++ b/apps/readest-app/src/app/library/components/BookshelfItem.tsx @@ -133,7 +133,7 @@ const BookshelfItem: React.FC = ({ if (isSelectMode) { toggleSelection(group.id); } else { - navigateToLibrary(router, `group=${group.id}`, { scroll: false }); + navigateToLibrary(router, `group=${group.id}`); } }; @@ -219,7 +219,6 @@ const BookshelfItem: React.FC = ({ )} style={{ transition: 'transform 0.2s', - touchAction: 'none', }} {...handlers} onContextMenu={(event) => handleItemContextMenu(item, event)} diff --git a/apps/readest-app/src/app/library/components/LibraryHeader.tsx b/apps/readest-app/src/app/library/components/LibraryHeader.tsx index 32c8db71..b6791f5f 100644 --- a/apps/readest-app/src/app/library/components/LibraryHeader.tsx +++ b/apps/readest-app/src/app/library/components/LibraryHeader.tsx @@ -35,7 +35,7 @@ const LibraryHeader: React.FC = ({ const { isTrafficLightVisible } = useTrafficLight(); const headerRef = useRef(null); const iconSize16 = useResponsiveSize(16); - const iconSize22 = useResponsiveSize(22); + const iconSize20 = useResponsiveSize(20); useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { @@ -68,10 +68,10 @@ const LibraryHeader: React.FC = ({ onClick={() => { navigateToLibrary(router); }} - className='btn btn-ghost mr-4 h-7 min-h-7 w-7 p-0' + className='ml-[-6px] mr-4 flex h-7 min-h-7 w-7 items-center p-0' >
- +
)} diff --git a/apps/readest-app/src/hooks/useLongPress.ts b/apps/readest-app/src/hooks/useLongPress.ts index cb29dc43..4968de71 100644 --- a/apps/readest-app/src/hooks/useLongPress.ts +++ b/apps/readest-app/src/hooks/useLongPress.ts @@ -43,27 +43,21 @@ export const useLongPress = ({ const handlePointerDown = useCallback( (e: React.PointerEvent) => { - if (e.pointerType === 'touch') { - const target = e.target as HTMLElement; - if (target instanceof Element) { - target.setPointerCapture(e.pointerId); - } - } - if (e.pointerType === 'mouse' && e.button !== 0) { return; } - e.preventDefault(); pointerId.current = e.pointerId; startPosRef.current = { x: e.clientX, y: e.clientY }; isLongPressTriggered.current = false; setPressing(true); timerRef.current = setTimeout(() => { - isLongPressTriggered.current = true; - onLongPress?.(); - setPressing(false); + if (startPosRef.current) { + isLongPressTriggered.current = true; + onLongPress?.(); + setPressing(false); + } }, threshold); }, [onLongPress, threshold], @@ -71,17 +65,14 @@ export const useLongPress = ({ const handlePointerMove = useCallback( (e: React.PointerEvent) => { - // Only handle moves for the same pointer that started the press - if (e.pointerId !== pointerId.current) return; + if (e.pointerId !== pointerId.current || !startPosRef.current) return; - if (startPosRef.current) { - const deltaX = Math.abs(e.clientX - startPosRef.current.x); - const deltaY = Math.abs(e.clientY - startPosRef.current.y); + const deltaX = Math.abs(e.clientX - startPosRef.current.x); + const deltaY = Math.abs(e.clientY - startPosRef.current.y); - if (deltaX > moveThreshold || deltaY > moveThreshold) { - onCancel?.(); - reset(); - } + if (deltaX > moveThreshold || deltaY > moveThreshold) { + onCancel?.(); + reset(); } }, [moveThreshold, onCancel, reset], @@ -92,18 +83,22 @@ export const useLongPress = ({ if (e.pointerId !== pointerId.current) return; if (!isLongPressTriggered.current && startPosRef.current) { - onTap?.(); + const deltaX = Math.abs(e.clientX - startPosRef.current.x); + const deltaY = Math.abs(e.clientY - startPosRef.current.y); + + if (deltaX <= moveThreshold && deltaY <= moveThreshold) { + onTap?.(); + } } reset(); }, - [onTap, reset], + [onTap, moveThreshold, reset], ); const handleCancel = useCallback( (e: React.PointerEvent) => { if (e.pointerId !== pointerId.current) return; - onCancel?.(); reset(); }, @@ -111,7 +106,9 @@ export const useLongPress = ({ ); const handleContextMenu = useCallback((e: React.MouseEvent) => { - e.preventDefault(); + if (isLongPressTriggered.current) { + e.preventDefault(); + } }, []); useEffect(() => { diff --git a/apps/readest-app/src/hooks/usePullToRefresh.ts b/apps/readest-app/src/hooks/usePullToRefresh.ts index ef6581d8..eecb9d62 100644 --- a/apps/readest-app/src/hooks/usePullToRefresh.ts +++ b/apps/readest-app/src/hooks/usePullToRefresh.ts @@ -44,7 +44,10 @@ export const usePullToRefresh = (ref: React.RefObject, onTrigger removePullIndicator(parentEl); } - el.style.transform = `translateY(${appr(dy)}px)`; + const wrapper = el.querySelector('.transform-wrapper') as HTMLElement; + if (wrapper) { + wrapper.style.transform = `translate3d(0, ${appr(dy)}px, 0)`; + } } function addPullIndicator(el: HTMLDivElement) { @@ -84,7 +87,10 @@ export const usePullToRefresh = (ref: React.RefObject, onTrigger const el = ref.current; if (!el) return; - el.style.transform = 'translateY(0)'; + const wrapper = el.querySelector('.transform-wrapper') as HTMLElement; + if (wrapper) { + wrapper.style.transform = 'translateY(0)'; + } removePullIndicator(el.parentNode as HTMLDivElement); el.style.transition = 'transform 0.2s'; diff --git a/apps/readest-app/src/styles/globals.css b/apps/readest-app/src/styles/globals.css index a76937a0..edf3f5bd 100644 --- a/apps/readest-app/src/styles/globals.css +++ b/apps/readest-app/src/styles/globals.css @@ -230,10 +230,3 @@ foliate-view { .pull-indicator.flip svg { transform: rotate(180deg); } - -.action-bar-bottom { - position: fixed; - bottom: 0; - left: 0; - right: 0; -}