e6e778080a
Sub-convoy #3 from .convoys/redesign-v2-from-mockups.md (umbrella § 7.3 — locked: sweep to ALL authenticated pages this convoy). What ships: - components/ui/TopSearchBar.js — the top horizontal chrome strip from the mockup. Layout: prominent search input on left (with magnifier icon + Cmd+K/Ctrl+K hint pill that adapts to platform) + notification bell with red badge (hidden when count=0) + mail icon + compact user-menu chip (gradient-tile avatar + display name + chevron). Avatar reads user.username with a fallback initial. Renders null for unauthenticated visitors (public marketing pages use their own header). - components/ui/CommandPaletteModal.js — the surface that opens on ⌘K / Ctrl+K. Single search input, auto-focused. Enter submits to /cards?q=<query>. 3 quick-action buttons (Dashboard / Cards / Scanner) below the input. Eschews live-result preview, recent- search storage, and federated-search ranking; those are deferred to a follow-up convoy per umbrella § 7.2. - components/Layout.js: TopSearchBar mounted in the main-content column ABOVE <main> for authenticated users (drops the legacy showSearch prop dependency — the prop stays for back-compat but no longer drives the header's visibility). Global keydown listener attached at Layout scope, toggles the CommandPaletteModal on ⌘K/Ctrl+K (preventDefault on the shortcut so the browser's native bookmark/search shortcut doesn't fire). The legacy <header> block that rendered an inline search input is removed; that surface is replaced by TopSearchBar + CommandPaletteModal. - page-header-glass call-site sweep (umbrella § 7.3 contract: "no call site references it after this convoy"): - pages/dashboard.js - pages/my-cards.js - pages/community/collections.js - components/CollectionsPageView.js - components/CollectionPageView.js - components/CardsPageView.js Each `page-header-glass p-4 sm:p-6` is replaced with plain content padding (`px-4 sm:px-6 pt-6 pb-2`). Page titles + actions stay exactly where they were inside the content area; the glass chrome that previously framed them is now provided by TopSearchBar above. The .page-header-glass utility class stays in styles/globals.css (a downstream sweep convoy can remove it once the unused-CSS lint catches it). - components/ui/index.js: barrel export updated with TopSearchBar + CommandPaletteModal. Lint fix: - CommandPaletteModal initially used useEffect(setQuery(''), [open]) to reset the input on open; that hits the react-hooks/set-state- in-effect rule (we added the rule in fix-auth-bypass Brief 5). Use the "during render with previous-state tracking" pattern that NavigationContent uses (lines 168-178 of components/Layout.js) for the same purpose. No useEffect required. Tests: - npm run test:run: 113/113 (was 110; +3 new — implicit Layout tree-render coverage of the new TopSearchBar mount paths). - npm run lint: clean (1 pre-existing unused-disable warning). - npm run build: green. Next: sub-convoy #6 (card-grid outer-glow), #7 (dashboard layout rebuild), #8 (right-rail Card Spotlight). Co-authored-by: Cursor <cursoragent@cursor.com>
403 lines
15 KiB
JavaScript
403 lines
15 KiB
JavaScript
import CardItem from './CardItem';
|
||
import BulkSelectionToolbar from './BulkSelectionToolbar';
|
||
import CollectionSelectionModal from './CollectionSelectionModal';
|
||
|
||
export default function CardsPageView(props) {
|
||
const {
|
||
cards,
|
||
loadingMore,
|
||
searchQuery,
|
||
selectedTCG,
|
||
setSelectedTCG,
|
||
selectedRarity,
|
||
setSelectedRarity,
|
||
selectedSet,
|
||
setSelectedSet,
|
||
selectedValueRange,
|
||
setSelectedValueRange,
|
||
viewMode,
|
||
setViewMode,
|
||
hasMore,
|
||
selectedCards,
|
||
favoritedCards,
|
||
showCollectionModal,
|
||
setShowCollectionModal,
|
||
cardsToAdd,
|
||
handleSearchChange,
|
||
fetchCards,
|
||
loadMoreCards,
|
||
hasMoreRef,
|
||
setPagination,
|
||
setCards,
|
||
setHasMore,
|
||
tcgOptions,
|
||
rarityOptions,
|
||
setOptions,
|
||
valueRangeOptions,
|
||
handleToggleSelect,
|
||
handleClearSelection,
|
||
handleToggleFavorite,
|
||
handleBulkAddToCollection,
|
||
handleBulkAddToDeck,
|
||
handleBulkMarkAsOwned,
|
||
handleBulkRemoveFromOwned,
|
||
handleBulkFavorite,
|
||
handleBulkDelete,
|
||
handleAddToCollections,
|
||
} = props;
|
||
|
||
return (
|
||
<>
|
||
{/* Header */}
|
||
<div className="px-4 sm:px-6 pt-6 pb-2">
|
||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
||
<div>
|
||
<h1 className="text-2xl sm:text-3xl font-bold mb-2" style={{ color: 'var(--text-primary)' }}>
|
||
Cards
|
||
</h1>
|
||
<p className="text-base sm:text-lg" style={{ color: 'var(--text-secondary)' }}>
|
||
Browse and manage your card collection
|
||
</p>
|
||
</div>
|
||
<div className="flex space-x-2 sm:space-x-4">
|
||
<button
|
||
onClick={() => setViewMode('grid')}
|
||
className={`p-2 rounded-xl transition-all duration-200 ${
|
||
viewMode === 'grid'
|
||
? 'shadow-lg'
|
||
: 'hover:shadow-md'
|
||
}`}
|
||
style={{
|
||
backgroundColor: viewMode === 'grid' ? 'var(--bg-tertiary)' : 'transparent',
|
||
color: viewMode === 'grid' ? 'var(--text-primary)' : 'var(--text-secondary)'
|
||
}}
|
||
>
|
||
<svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
|
||
</svg>
|
||
</button>
|
||
<button
|
||
onClick={() => setViewMode('list')}
|
||
className={`p-2 rounded-xl transition-all duration-200 ${
|
||
viewMode === 'list'
|
||
? 'shadow-lg'
|
||
: 'hover:shadow-md'
|
||
}`}
|
||
style={{
|
||
backgroundColor: viewMode === 'list' ? 'var(--bg-tertiary)' : 'transparent',
|
||
color: viewMode === 'list' ? 'var(--text-primary)' : 'var(--text-secondary)'
|
||
}}
|
||
>
|
||
<svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 10h16M4 14h16M4 18h16" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Quick Filters */}
|
||
<div className="glass-panel p-4 sm:p-6">
|
||
<div className="mb-4">
|
||
<h3 className="text-base sm:text-lg font-semibold mb-3" style={{ color: 'var(--text-primary)' }}>
|
||
Quick Filters
|
||
</h3>
|
||
<div className="flex flex-wrap gap-2 sm:gap-3">
|
||
<button
|
||
onClick={() => setSelectedTCG('all')}
|
||
className={`px-4 py-2 rounded-xl font-medium transition-all duration-200 ${
|
||
selectedTCG === 'all'
|
||
? 'shadow-lg'
|
||
: 'hover:shadow-md'
|
||
}`}
|
||
style={{
|
||
backgroundColor: selectedTCG === 'all' ? 'var(--bg-tertiary)' : 'transparent',
|
||
color: selectedTCG === 'all' ? 'var(--text-primary)' : 'var(--text-secondary)',
|
||
border: '1px solid var(--border)'
|
||
}}
|
||
>
|
||
All Games
|
||
</button>
|
||
{tcgOptions.map(option => (
|
||
<button
|
||
key={option.value}
|
||
onClick={() => setSelectedTCG(option.value)}
|
||
className={`px-4 py-2 rounded-xl font-medium transition-all duration-200 flex items-center gap-2 ${
|
||
selectedTCG === option.value
|
||
? 'shadow-lg'
|
||
: 'hover:shadow-md'
|
||
}`}
|
||
style={{
|
||
backgroundColor: selectedTCG === option.value ? 'var(--bg-tertiary)' : 'transparent',
|
||
color: selectedTCG === option.value ? 'var(--text-primary)' : 'var(--text-secondary)',
|
||
border: '1px solid var(--border)'
|
||
}}
|
||
>
|
||
<span>{option.icon}</span>
|
||
{option.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Advanced Filters */}
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||
<div>
|
||
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
||
Search
|
||
</label>
|
||
<div className="relative">
|
||
<input
|
||
type="text"
|
||
placeholder="Search cards..."
|
||
className="search-bar w-full pr-12"
|
||
value={searchQuery}
|
||
onChange={(e) => handleSearchChange(e.target.value)}
|
||
onKeyPress={(e) => {
|
||
if (e.key === 'Enter') {
|
||
setPagination(prev => ({ ...prev, page: 1 }));
|
||
setCards([]);
|
||
setHasMore(true);
|
||
hasMoreRef.current = true;
|
||
fetchCards(false);
|
||
}
|
||
}}
|
||
/>
|
||
<button
|
||
onClick={() => {
|
||
setPagination(prev => ({ ...prev, page: 1 }));
|
||
setCards([]);
|
||
setHasMore(true);
|
||
hasMoreRef.current = true;
|
||
fetchCards(false);
|
||
}}
|
||
className="absolute right-2 top-1/2 transform -translate-y-1/2 p-2 rounded-lg hover:bg-opacity-20 transition-all duration-200"
|
||
style={{ backgroundColor: 'var(--bg-tertiary)' }}
|
||
>
|
||
<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>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
||
Rarity
|
||
</label>
|
||
<select
|
||
value={selectedRarity}
|
||
onChange={(e) => setSelectedRarity(e.target.value)}
|
||
className="input-field w-full"
|
||
>
|
||
{rarityOptions.map(option => (
|
||
<option key={option.value} value={option.value}>
|
||
{option.label}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
||
Set
|
||
</label>
|
||
<select
|
||
value={selectedSet}
|
||
onChange={(e) => setSelectedSet(e.target.value)}
|
||
className="input-field w-full"
|
||
>
|
||
{setOptions.map(option => (
|
||
<option key={option.value} value={option.value}>
|
||
{option.label}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
||
Value Range
|
||
</label>
|
||
<select
|
||
value={selectedValueRange}
|
||
onChange={(e) => setSelectedValueRange(e.target.value)}
|
||
className="input-field w-full"
|
||
>
|
||
{valueRangeOptions.map(option => (
|
||
<option key={option.value} value={option.value}>
|
||
{option.label}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Active Filters Display */}
|
||
{(selectedTCG !== 'all' || selectedRarity !== 'all' || selectedSet !== 'all' || selectedValueRange !== 'all') && (
|
||
<div className="mt-4">
|
||
<div className="flex flex-wrap gap-2">
|
||
{selectedTCG !== 'all' && (
|
||
<span className="px-3 py-1 rounded-full text-sm font-medium" style={{
|
||
backgroundColor: 'var(--bg-tertiary)',
|
||
color: 'var(--text-primary)',
|
||
border: '1px solid var(--border)'
|
||
}}>
|
||
{tcgOptions.find(opt => opt.value === selectedTCG)?.label}
|
||
<button
|
||
onClick={() => setSelectedTCG('all')}
|
||
className="ml-2 hover:opacity-70"
|
||
>
|
||
×
|
||
</button>
|
||
</span>
|
||
)}
|
||
{selectedRarity !== 'all' && (
|
||
<span className="px-3 py-1 rounded-full text-sm font-medium" style={{
|
||
backgroundColor: 'var(--bg-tertiary)',
|
||
color: 'var(--text-primary)',
|
||
border: '1px solid var(--border)'
|
||
}}>
|
||
{rarityOptions.find(opt => opt.value === selectedRarity)?.label}
|
||
<button
|
||
onClick={() => setSelectedRarity('all')}
|
||
className="ml-2 hover:opacity-70"
|
||
>
|
||
×
|
||
</button>
|
||
</span>
|
||
)}
|
||
{selectedSet !== 'all' && (
|
||
<span className="px-3 py-1 rounded-full text-sm font-medium" style={{
|
||
backgroundColor: 'var(--bg-tertiary)',
|
||
color: 'var(--text-primary)',
|
||
border: '1px solid var(--border)'
|
||
}}>
|
||
{setOptions.find(opt => opt.value === selectedSet)?.label}
|
||
<button
|
||
onClick={() => setSelectedSet('all')}
|
||
className="ml-2 hover:opacity-70"
|
||
>
|
||
×
|
||
</button>
|
||
</span>
|
||
)}
|
||
{selectedValueRange !== 'all' && (
|
||
<span className="px-3 py-1 rounded-full text-sm font-medium" style={{
|
||
backgroundColor: 'var(--bg-tertiary)',
|
||
color: 'var(--text-primary)',
|
||
border: '1px solid var(--border)'
|
||
}}>
|
||
{valueRangeOptions.find(opt => opt.value === selectedValueRange)?.label}
|
||
<button
|
||
onClick={() => setSelectedValueRange('all')}
|
||
className="ml-2 hover:opacity-70"
|
||
>
|
||
×
|
||
</button>
|
||
</span>
|
||
)}
|
||
<button
|
||
onClick={() => {
|
||
setSelectedTCG('all');
|
||
setSelectedRarity('all');
|
||
setSelectedSet('all');
|
||
setSelectedValueRange('all');
|
||
}}
|
||
className="px-3 py-1 rounded-full text-sm font-medium hover:opacity-70" style={{
|
||
color: 'var(--text-accent)',
|
||
border: '1px solid var(--border)'
|
||
}}>
|
||
Clear All
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Cards Display */}
|
||
<div className="p-6 pb-64">
|
||
{cards.length === 0 ? (
|
||
<div className="text-center py-12">
|
||
<div className="text-6xl mb-4">🃏</div>
|
||
<h3 className="text-xl font-semibold mb-2" style={{ color: 'var(--text-primary)' }}>
|
||
No cards found
|
||
</h3>
|
||
<p className="mb-6" style={{ color: 'var(--text-secondary)' }}>
|
||
Try adjusting your search or filters
|
||
</p>
|
||
</div>
|
||
) : (
|
||
<>
|
||
<div className={viewMode === 'grid' ? 'card-grid-container grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-3 sm:gap-4 lg:gap-6 p-3 sm:p-4 lg:p-6 xl:p-8' : 'space-y-4 p-6'}>
|
||
{cards.map((card) => (
|
||
<CardItem
|
||
key={card.id}
|
||
card={card}
|
||
viewMode={viewMode}
|
||
isSelected={selectedCards.some(c => c.id === card.id)}
|
||
onToggleSelect={handleToggleSelect}
|
||
onAddToCollection={(card) => handleBulkAddToCollection([card])}
|
||
onAddToDeck={handleBulkAddToDeck}
|
||
onToggleFavorite={handleToggleFavorite}
|
||
isFavorited={favoritedCards.has(card.id)}
|
||
/>
|
||
))}
|
||
</div>
|
||
|
||
{/* Infinite Scroll Loading Indicator */}
|
||
{loadingMore && (
|
||
<div className="flex justify-center py-8">
|
||
<div className="flex items-center space-x-3">
|
||
<div className="animate-spin rounded-full h-8 w-8 border-b-2" style={{ borderColor: 'var(--text-accent)' }}></div>
|
||
<span style={{ color: 'var(--text-secondary)' }}>Loading more cards...</span>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Infinite Scroll Sentinel */}
|
||
<div id="infinite-scroll-sentinel" className="h-4 w-full" />
|
||
|
||
{/* Load More Button */}
|
||
{hasMore && !loadingMore && (
|
||
<div className="flex justify-center py-8">
|
||
<button
|
||
onClick={loadMoreCards}
|
||
className="px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-lg hover:from-blue-600 hover:to-purple-700 transition-all duration-200 shadow-lg hover:shadow-xl"
|
||
>
|
||
Load More Cards
|
||
</button>
|
||
</div>
|
||
)}
|
||
|
||
{/* End of results indicator */}
|
||
{!hasMore && cards.length > 0 && (
|
||
<div className="flex justify-center py-8">
|
||
<span style={{ color: 'var(--text-secondary)' }}>No more cards to load</span>
|
||
</div>
|
||
)}
|
||
|
||
|
||
</>
|
||
)}
|
||
</div>
|
||
|
||
{/* Bulk Selection Toolbar */}
|
||
<BulkSelectionToolbar
|
||
selectedCards={selectedCards}
|
||
onClearSelection={handleClearSelection}
|
||
onAddToCollection={handleBulkAddToCollection}
|
||
onAddToDeck={handleBulkAddToDeck}
|
||
onMarkAsOwned={handleBulkMarkAsOwned}
|
||
onRemoveFromOwned={handleBulkRemoveFromOwned}
|
||
onBulkFavorite={handleBulkFavorite}
|
||
onBulkDelete={handleBulkDelete}
|
||
/>
|
||
|
||
{/* Collection Selection Modal */}
|
||
<CollectionSelectionModal
|
||
isOpen={showCollectionModal}
|
||
onClose={() => setShowCollectionModal(false)}
|
||
cards={cardsToAdd}
|
||
onAddToCollections={handleAddToCollections}
|
||
/>
|
||
</>
|
||
);
|
||
}
|