feat: Group pack stack view by type, enhance pack display grid responsiveness, and adjust long-press preview to single-finger with a 500ms delay.
All checks were successful
Build and Deploy / build (push) Successful in 1m26s

This commit is contained in:
2025-12-18 03:47:55 +01:00
parent 6b054ad8fc
commit 87e38bd0a3
3 changed files with 10 additions and 7 deletions

View File

@@ -136,7 +136,7 @@ export const PackCard: React.FC<PackCardProps> = ({ pack, viewMode, cardWidth =
</div> </div>
)} )}
{viewMode === 'stack' && <StackView cards={pack.cards} cardWidth={cardWidth} />} {viewMode === 'stack' && <StackView cards={pack.cards} cardWidth={cardWidth} groupBy="type" />}
</div> </div>
</div> </div>
); );

View File

@@ -883,9 +883,12 @@ export const CubeManager: React.FC<CubeManagerProps> = ({ packs, setPacks, avail
<div <div
className="grid gap-6 pb-20" className="grid gap-6 pb-20"
style={{ style={{
gridTemplateColumns: cardWidth <= 150 gridTemplateColumns: `repeat(auto-fill, minmax(min(100%, ${localCardWidth > 165
? `repeat(auto-fill, minmax(var(--card-width, ${viewMode === 'list' ? '320px' : '550px'}), 1fr))` ? (viewMode === 'list' ? '500px' : '750px')
: '1fr' : localCardWidth <= 95
? (viewMode === 'list' ? '300px' : '450px')
: (viewMode === 'list' ? '400px' : '600px')
}), 1fr))`
}} }}
> >
{packs.map((pack) => ( {packs.map((pack) => (

View File

@@ -19,12 +19,12 @@ export function useCardTouch(
touchStartCount.current = e.touches.length; touchStartCount.current = e.touches.length;
isLongPress.current = false; isLongPress.current = false;
// Only Start "Preview" Timer if 2 fingers // Start Preview Timer (1 finger is standard mobile long-press)
if (e.touches.length === 2) { if (e.touches.length === 1) {
timerRef.current = setTimeout(() => { timerRef.current = setTimeout(() => {
isLongPress.current = true; isLongPress.current = true;
onHover(cardPayload); onHover(cardPayload);
}, 400); // 400ms threshold }, 500); // 500ms threshold (standard long press)
} }
}, [onHover, cardPayload]); }, [onHover, cardPayload]);