Commit graph

33 commits

Author SHA1 Message Date
Randall Stillwell
2163b9ea0e 🔥 Add Fire Glow Login Background
 Beautiful Animated Fire Glow:
- Slow-moving fire gradient background with light/dark modes
- Floating ember particles with realistic animation
- 12-second background animation cycle with subtle color shifts
- Theme-aware gradient colors (warm daylight vs cozy evening)

🎨 Enhanced Login Experience:
- Updated branding to Deck Hearth with fire emoji
- Backdrop blur effects on form elements
- Semi-transparent containers for depth
- Orange focus states to match fire theme
- Enhanced shadows and glow effects

🌙 Theme Support:
- Light mode: Warm daylight fire with golden embers
- Dark mode: Cozy evening fire with bright orange flames
- RGB color variables for backdrop-blur compatibility
- Gradient-bg-ember class for consistent fire theming

The login page now perfectly captures the warm, inviting Deck Hearth atmosphere
2025-07-28 09:51:39 -05:00
Randall Stillwell
308d2de365 🧹 Major Codebase Cleanup: Remove Legacy React Code
🗑️ Removed Unused Files (11 files):
- 6 temporary import result JSON files
- 3 placeholder pages (community.js, analytics.js, decks.js)
- 3 unused components (CollaborationManager, ActivityLog, BulkInviteModal)
- 2 TypeScript config files (tsconfig.json, next-env.d.ts)

📦 Cleaned Up Dependencies:
- Removed 5 unused TypeScript packages
- Kept resend for future invite/notification features
- Removed 8 packages total, reduced bundle size

 Benefits:
- Cleaner codebase with only active files
- Reduced build time and bundle size
- Eliminated TypeScript overhead (project uses only JS)
- Removed legacy React patterns and unused components
- Better maintainability and clarity

The codebase is now lean and focused on active features
2025-07-28 09:07:36 -05:00
Randall Stillwell
4689424f3a 🔧 Fix System Collections & Database Schema Issues
🐛 Database Schema Fixes:
- Removed non-existent 'updated_at' column from collection_cards operations
- Fixed SQL queries in card ownership API and seeding scripts
- Resolved column does not exist errors

🚫 Hide System Collections from Selection:
- Added 'excludeSystem' parameter to /api/collections endpoint
- Updated CollectionSelectionModal to exclude system collections
- 'All My Cards' no longer appears in card addition modals

 Enhanced System Collection Styling:
- Upgraded system collection badge with gradient styling
- Added 🔒 SYSTEM badge with blue-purple gradient
- Added informative tooltip: 'Automatically syncs with your owned cards'
- Made system collections visually distinct and educational

🎯 User Experience Improvements:
- System collections are now clearly identified as special
- Users understand they can't manually add cards to system collections
- Better visual hierarchy and information architecture
- Automatic sync behavior is now clearly communicated

Card ownership should now work without errors! 🚀
2025-07-27 19:17:55 -05:00
Randall Stillwell
e5f629f8e2 🗂️ Add Collapsible Community Navigation Section
 Hierarchical Navigation Structure:
- Created collapsible Community section with expandable sub-items
- Sub-items: Collections, Decks, Forums (ready for future implementation)
- Smooth expand/collapse animation with chevron icon rotation
- Auto-expands when navigating to any community page

🎨 Visual Design:
- Main Community item with chevron indicator (rotates 90° when expanded)
- Sub-items indented with left border for visual hierarchy
- Smaller sub-item styling (text-sm, rounded-xl, lighter shadows)
- Consistent hover and active states throughout

🔧 Technical Features:
- State management for expand/collapse (isCommunityExpanded)
- useEffect to auto-expand on community page navigation
- Proper ARIA attributes (aria-expanded, aria-haspopup)
- Keyboard navigation support (Enter/Space to toggle)
- Mobile menu integration (closes on sub-item click)

🎯 User Experience:
- Intuitive collapsible navigation matching the design mockup
- Clear visual hierarchy between main and sub-navigation
- Smooth transitions and proper focus management
- Accessibility-compliant with screen reader support

Navigation now matches the requested collapsible structure! 📁
2025-07-27 13:22:42 -05:00
Randall Stillwell
f7cde325ca 🌍 Separate My Collections & Community Collections
 Collection Organization Restructure:
- /collections now shows only user's own collections, collaborations, and shared collections
- /community/collections shows all public collections for discovery
- Updated navigation to include 'Community Collections' link
- Added 'Discover Community' button on My Collections page

🔧 API Changes:
- Modified /api/collections to exclude public collections from other users
- Created /api/community/collections for public collection discovery
- Proper authentication and permission handling for both endpoints

🎯 User Experience Improvements:
- Clear separation between personal and community spaces
- 'My Collection' sidebar item now accurately reflects content
- Community discovery is intentional and separate
- Better organization matches user mental models

📱 UI Enhancements:
- Updated page titles and descriptions
- Added community discovery button with globe icon
- Consistent styling across both collection views
- Same thumbnail and layout system for both pages

This properly separates personal collection management from community discovery! 🚀
2025-07-27 13:17:13 -05:00
Randall Stillwell
2f2c915da1 🔧 Fix Collections Not Loading in Add to Collections Modal
🐛 Authentication Issue Resolution:
- Removed incorrect Authorization header from collections API call
- Modal was using 'auth_token' header when API uses development fallback
- Updated to match successful pattern used by collections page

📡 API Call Corrections:
- Collections fetch: Removed Authorization header (uses dev fallback)
- Add to collection: Removed Authorization header (middleware handles auth)
- Fixed response data handling (API returns array directly)
- Added better error handling and logging

🔍 Root Cause Analysis:
- CollectionSelectionModal used localStorage.getItem('auth_token')
- But /api/collections works without auth headers in development
- Other successful pages (collections.js, collection/[id].js) don't send auth headers
- Development middleware provides fallback admin user automatically

 Expected Behavior:
- Collections modal should now load user's collections properly
- Batch adding cards to collections should work correctly
- Consistent with authentication pattern used throughout app
- Better error messages for debugging

The 'Add to Collections' modal should now properly display collections! 📚
2025-07-26 09:57:54 -05:00
Randall Stillwell
9a5561c2c8 🔄 Restructured User Profile & Theme Toggle
 Profile Dropdown Implementation:
- Created comprehensive UserProfileDropdown component
- Moved user profile to bottom of sidebar (better UX)
- Added dropdown menu with Profile, Settings, Admin Panel, Logout
- Profile button shows user avatar, email, and role
- Smooth dropdown animation with backdrop click-to-close

🎨 Fire-Themed Profile Menu:
- Logout option uses ember red color for distinction
- Profile icons match the overall design system
- Consistent hover states and accessibility features
- Proper ARIA attributes for dropdown functionality

🌙 Separated Theme Toggle:
- Moved theme toggle out of profile section
- Now appears as standalone navigation item above profile
- Shows 'Dark Mode' / 'Light Mode' text labels
- Maintains all accessibility features and fire theming

 Enhanced Accessibility:
- Proper dropdown ARIA attributes (expanded, haspopup)
- Keyboard navigation support throughout
- Screen reader friendly with proper labels
- Focus management for dropdown interactions

🎯 Admin Panel Integration:
- Admin Panel option only shows for admin users
- Conditional rendering based on user role
- Proper navigation structure for different user types
- Consistent with existing admin badge logic

�� Mobile Optimizations:
- Dropdown works seamlessly on mobile devices
- Proper touch targets and spacing
- Auto-closes mobile menu when navigating
- Backdrop prevents accidental interactions

The sidebar now has a much cleaner hierarchy with the profile at the bottom and easy access to all user functions! 🔥👤
2025-07-26 09:51:40 -05:00
Randall Stillwell
94f31a5d77 Enhanced Navigation Accessibility & Fire-Themed UI
🎯 Comprehensive Accessibility Improvements:
- Added proper ARIA roles and labels throughout navigation
- Implemented keyboard navigation (Enter/Space key support)
- Added focus rings with fire-themed ember red color
- Enhanced screen reader support with aria-current and aria-label
- Added tabIndex for proper keyboard traversal

🔥 Fire-Themed Visual Enhancements:
- Updated badges to use flame orange and ember red colors
- ADMIN badges now use ember red for distinction
- Collection/Deck counts use flame orange
- Consistent fire theme across all interactive elements

 Enhanced Hover & Focus States:
- Active items: Left border with ember red accent
- Hover items: Left border with flame orange + slide animation
- Focus states: Enhanced visibility with ember red rings
- Smooth 4px slide animation on hover/focus
- Better visual hierarchy and feedback

 Accessibility Standards Compliance:
- WCAG 2.1 AA compliant focus indicators
- High contrast mode support with enhanced outlines
- Reduced motion support for accessibility preferences
- Proper semantic navigation structure
- Screen reader friendly icon handling (aria-hidden)

📱 Mobile Accessibility:
- Enhanced mobile menu button with proper ARIA
- Improved close button accessibility
- Better touch targets and focus management
- Proper expanded/collapsed state communication

🎨 Visual Polish:
- Consistent focus ring styling across all buttons
- Theme toggle button accessibility improvements
- Better color contrast in all states
- Professional slide animations for navigation feedback

The sidebar navigation now meets modern accessibility standards while maintaining the beautiful fire theme! 🔥
2025-07-26 09:38:18 -05:00
Randall Stillwell
d3e4980b8f 🔥 Primary Red Add Button + Static Rarity Shadows
🎨 Add Button Color Update:
- Changed main add button from wood brown to ember red
- Updated 'Own' option to match ember red theme
- Added static ember red shadow with ring effect
- Consistent fire-themed primary action color

 Performance: Removed All Pulsing Animations:
- Eliminated mythic-pulse animation (3s infinite)
- Eliminated rare-pulse animation (2.5s infinite)
- Eliminated uncommon-pulse animation (2s infinite)
- Eliminated enchanted-pulse animation (2s infinite)
- Removed all @keyframes pulse definitions

 Static Rarity Shadow System:
- Mythic/Legendary: Enhanced golden glow (static)
- Rare: Enhanced purple glow (static)
- Uncommon: Enhanced blue glow (static)
- Enchanted: Multi-color rainbow glow (static)
- All shadows now use consistent opacity levels

🚀 Performance Benefits:
- Eliminated continuous CSS animations on every card
- Reduced GPU usage from constant pulse effects
- Smoother scrolling and hover interactions
- Better battery life on mobile devices
- Cleaner, more professional appearance

🎯 Visual Improvements:
- More vibrant static shadows than pulsing minimums
- Consistent visual hierarchy with static effects
- Primary red add button stands out appropriately
- Cleaner, less distracting card presentation

The cards page should now be much more performant without the constant pulsing animations! 🔥
2025-07-26 09:17:22 -05:00
Randall Stillwell
cf148f5fa3 Ultra-Smooth Hover System with Expanding Actions
🎯 Optimized Button Layout:
- Moved checkbox to top-left corner
- Moved favorite to top-right corner
- Created expanding add button in bottom-left

🚀 Performance Enhancements:
- Reduced all animations from 200ms → 150ms
- Reduced card scaling from 105% → 102% (subtle but smooth)
- Simplified button padding and shadows
- Reduced focus ring intensity

 Expanding Add Button Features:
- Click to expand: Shows Collection, Deck, Own options
- Fire-themed colors: Flame orange, Gold, Wood brown
- Smooth rotation animation (45° when expanded)
- Click outside to close functionality
- Default action: Add to Collection when expanded

🎨 Fire-Themed Action Colors:
- Collection: Flame orange (var(--accent-flame))
- Deck: Golden yellow (var(--accent-gold))
- Own: Wood brown (var(--accent-wood))
- Main button: Wood → Ember when expanded

 Micro-Performance Optimizations:
- Reduced button padding: p-1.5 → p-1
- Smaller shadows and hover effects
- Faster transitions across all elements
- Custom scale-102 for subtle card lift
- Optimized z-index layering

🔧 Technical Improvements:
- Self-contained ExpandingAddButton component
- Proper event propagation handling
- State management for expand/collapse
- Click-outside-to-close behavior
- Added scale-102 to Tailwind config

The cards page should now feel incredibly responsive! 🔥
2025-07-26 09:00:26 -05:00
Randall Stillwell
b97eb45b29 Massive Performance Boost - Remove Heavy Hover Panels
🚀 Performance Optimizations:
- Completely removed complex side hover panels (massive DOM reduction)
- Eliminated 240+ lines of heavy panel HTML per card
- Removed expensive panel positioning calculations
- Simplified hover animations from 300ms to 200ms
- Removed redundant image scaling (double transform)

🎯 New Lightweight Hover System:
- Simple card scaling on hover (transform: scale(1.05))
- Slide-in action buttons in corners
- Checkbox & favorite in top-right corner
- Ownership indicator & add button in bottom-left
- All buttons use opacity transitions (GPU accelerated)

🔥 Fire-Themed Interactive Elements:
- Checkbox: Ember red accent color
- Favorite: Ember red background when active
- Add/Own button: Wood brown background
- Ownership indicator: Gold dot when owned
- All buttons have subtle hover scaling (scale(1.1))

📱 Enhanced Grid Layout:
- Removed right padding (no more panel space needed)
- Increased grid density: lg:4 cols, xl:5 cols, 2xl:6 cols
- Better space utilization across all screen sizes
- Cleaner, more focused card browsing experience

 User Experience Improvements:
- Much faster card grid rendering
- Smoother hover interactions
- Reduced layout shift and jank
- Cleaner visual hierarchy
- Quick access to essential actions

💾 Code Cleanup:
- Removed cardIndex and cardsPerRow props
- Eliminated panel positioning logic
- Simplified component structure
- Reduced bundle size significantly

The cards page should now be lightning fast! 🔥
2025-07-26 08:45:38 -05:00
Randall Stillwell
e056f53b1f 🔥 Transform to Deck Hearth Fire-Inspired Design
🎨 Complete Brand Transformation:
- Rebranded from 'TCG Vault' to 'Deck Hearth'
- Updated logo initials from 'TCG' to 'DH'
- Changed app name throughout the application

🔥 Fire-Themed Color Palette:
Light Theme (Warm Daylight by the Hearth):
- Primary: Warm cream (#fefcf8) like sunlit stone
- Secondary: Soft beige (#f7f3ed) like aged parchment
- Tertiary: Light wood tone (#f0e6d6)
- Text: Dark chocolate brown (#2d1810)
- Accents: Ember orange, flame orange, golden yellow

Dark Theme (Cozy Evening by the Fire):
- Primary: Deep charcoal (#1a0f0a) like burnt wood
- Secondary: Rich dark brown (#2d1b12) like oak
- Tertiary: Medium brown (#3d2317) like mahogany
- Text: Warm white (#fff8f0) like firelight
- Accents: Bright flame, glowing ember, golden glow

🎨 Fire-Inspired Design Elements:
- Flame gradient: Orange to ember red
- Golden gradient: Golden yellow to flame orange
- Fire glow effects with warm shadows
- Wood-toned borders and accents
- Ember and flame-colored interactive elements

🔧 Enhanced Component Styling:
- Updated BulkSelectionToolbar with fire colors
- New CSS classes: btn-flame, btn-ember, btn-gold
- Fire glow and ember glow effects
- Gradient backgrounds: gradient-bg-fire, gradient-bg-golden
- Tailwind color palette: hearth.flame, hearth.ember, etc.

 Warm & Inviting Experience:
- Light mode: Cozy daytime fireplace atmosphere
- Dark mode: Intimate evening hearth ambiance
- Maintains accessibility with proper contrast
- Smooth transitions between themes

The app now perfectly captures the warm, inviting feeling of gathering around a hearth! 🔥🏠
2025-07-26 08:30:07 -05:00
Randall Stillwell
48d1b1b5f9 📱 Implement Mobile-First Responsive Design
🎯 Mobile Slide-In Navigation:
- Added mobile menu button with hamburger icon
- Implemented slide-in sidebar with smooth transitions
- Added mobile overlay with click-to-close functionality
- Mobile menu auto-closes when navigating to new pages
- Proper z-index layering for mobile interactions

🃏 Smart Card Panel Positioning:
- Panels now open on opposite side for right-edge cards
- Added cardIndex and cardsPerRow props to CardItem
- Dynamic positioning based on card's position in grid
- Prevents panels from extending off-screen edges
- Maintains hover functionality on desktop

📱 Mobile-Optimized Bulk Actions:
- Toolbar now spans full width on mobile devices
- Icon-only buttons on mobile, full labels on desktop
- Responsive spacing and padding adjustments
- Improved touch targets for mobile interaction
- Maintains functionality across all screen sizes

🎨 Enhanced Grid Layout:
- Improved mobile grid: 2 columns with tighter spacing
- Better space utilization on all device sizes
- Responsive gap spacing that adapts to screen size
- Optimized padding for mobile vs desktop
- Cards now fill available space properly

 Cross-Device Experience:
- Mobile: Slide-in nav, icon-only actions, 2-column grid
- Tablet: Responsive layout with appropriate spacing
- Desktop: Full sidebar, labeled actions, hover panels
- Large screens: Maximum columns with side panel space

The app now provides an optimal mobile experience while maintaining desktop functionality! ��💻🖥️
2025-07-26 00:49:42 -05:00
Randall Stillwell
20ccd2333e 🎯 Implemented Collection Selection Modal System
 New CollectionSelectionModal Component:
- Multi-select collection interface with search functionality
- Visual card previews showing selected cards to add
- Select all/deselect all functionality for bulk operations
- Real-time collection filtering and search
- Professional modal design with dark mode support

🔗 Integration with Cards Page:
- Bulk selection toolbar now opens collection modal
- Individual card actions trigger collection modal
- Success feedback with detailed results
- Automatic selection clearing after successful additions

🎮 Enhanced Card Detail Page:
- Replaced old single-select dropdown with new modal
- Multi-collection support for single cards
- Automatic refresh of card collections after additions
- Consistent UI across all card interaction points

🎨 User Experience Features:
- Visual card thumbnails in modal header
- Collection metadata display (card count, public status)
- Loading states and error handling
- Responsive design for all screen sizes

Ready for seamless card-to-collection workflow! 📦
2025-07-26 00:22:35 -05:00
Randall Stillwell
a9c94b811f 🔗 Added Card Click Navigation to Detail Pages
 Card Navigation Features:
- Click anywhere on card to navigate to detail page
- Smart click detection avoids interference with interactive elements
- Works in both grid and list view modes
- Cursor pointer indicates clickable areas

🎯 Interaction Improvements:
- Checkbox, buttons, and links don't trigger navigation
- Side panel 'View Details' button uses same-tab navigation
- Consistent behavior across all card interactions
- Smooth user experience for card browsing

🚀 User Experience:
- Natural card browsing workflow
- Easy access to detailed card information
- Maintains all existing functionality (selection, actions)
- Professional click handling with event delegation

Cards are now fully interactive - click to explore! 🃏
2025-07-26 00:12:54 -05:00
Randall Stillwell
5d7a87374f 🐛 Fixed Side Panel Hover Logic for Multi-Select
🔧 Bug Fix:
- Removed persistent panel visibility for selected cards
- Side panels now properly hide when hovering away
- Selection state no longer interferes with hover behavior
- Maintains smooth hover delay and animations

 Improved UX:
- Side panels only appear on hover, regardless of selection
- Clean hover interactions without sticky panels
- Consistent behavior across all cards
- Better multi-select workflow

The side panels now behave correctly - they only show on hover and hide when you move away, even for selected cards! 🎯
2025-07-26 00:05:26 -05:00
Randall Stillwell
d537474a61 Added Magical Rarity Effects with Glowing Shadows & Particles
�� Rarity-Based Visual Effects:
- Mythic/Legendary: Golden glow with 3-layer pulsing animation
- Rare/Holo: Purple glow with shimmering particles
- Uncommon: Blue glow with subtle twinkling
- Enchanted/Secret: Rainbow cycling glow with rotating particles

💫 Dynamic Particle Systems:
- Radial gradient overlays for sparkle effects
- Animated opacity and rotation for enchanted cards
- Multiple particle layers for depth and richness
- Smooth pulsing animations with different timings

🎨 Enhanced Visual Hierarchy:
- Rarity-specific border colors and shadows
- Hover intensification of glow effects
- Side panel inherits rarity styling
- Pulsing rarity indicator dots in panel headers

 Performance Optimized:
- CSS-only animations using hardware acceleration
- Efficient keyframe animations
- Proper z-index layering
- Responsive particle effects

🎯 Smart Rarity Detection:
- Flexible string matching for various rarity names
- Supports MTG, Pokemon, Lorcana rarity systems
- Fallback to standard styling for common cards
- Case-insensitive rarity recognition

Cards now have that premium, magical feel! 🃏
2025-07-26 00:01:04 -05:00
Randall Stillwell
1387ecaccb 🎨 Redesigned Card Hover with Side Information Panel
 New Side Panel Design:
- Information panel slides out from the right side of cards
- 500ms hover delay to prevent accidental triggers
- 320px wide panel with comprehensive card details
- Smooth slide-in animation with backdrop blur effect

🎯 TCG-Specific Information:
- MTG: Mana cost, Power/Toughness, Colors with proper styling
- Pokemon: HP display with yellow highlighting
- Lorcana: Ink cost, Strength/Willpower stats
- Oracle text/description for all card types

🌙 Dark Theme Support:
- Full dark mode styling for all panel elements
- Dark-aware color schemes for TCG-specific badges
- Proper contrast ratios for accessibility

 Enhanced Features:
- Structured layout: Header, Body, Footer sections
- Grid-based action buttons with tooltips
- Copy card info functionality
- Responsive design (hidden on mobile/tablet)
- Better grid spacing with right padding for panels

🎨 Professional Polish:
- Backdrop blur effects for depth
- Smooth transitions with proper easing
- Z-index management for layering
- Reduced grid columns to accommodate panels

Perfect for detailed card inspection! 🃏
2025-07-25 23:55:54 -05:00
Randall Stillwell
a6602eab87 Redesigned Card Interaction with Sliding Information Panel
🎨 New Card-Focused Design:
- Cards now display as clean images without permanent overlays
- Information and actions slide out from behind the card on hover
- Selected cards scale up slightly and show persistent info panel

🚀 Enhanced User Experience:
- Card images are the primary focus, no visual clutter
- Smooth 300ms transitions with easing for professional feel
- Sliding panel appears 2px below card for depth effect
- Backdrop blur effect for better contrast and readability

 Improved Interactions:
- Primary actions (Collection, Deck) prominently displayed
- Secondary actions (Own, Favorite, View) in compact grid
- Proper z-index management prevents panel conflicts
- Increased grid spacing (gap-8, p-8) for sliding panels

🎯 Technical Improvements:
- CSS classes for consistent styling and performance
- Prevented text selection during interactions
- Transform origin optimization for smooth animations
- Proper pointer event handling for accessibility

Cards are now the star of the show! 🌟
2025-07-25 23:44:03 -05:00
Randall Stillwell
e2e5e5bcab 🚀 Added Bulk Selection System to Cards Page
 New Components:
- BulkSelectionToolbar: Floating bottom toolbar with selection count and actions
- CardItem: Modular card component with selection checkboxes and individual actions

🎯 Features:
- Multi-select cards with checkboxes (grid and list view)
- Floating toolbar shows selected count and quick actions
- Primary actions: Add to Collection, Add to Deck, Mark as Owned
- Secondary actions: Add to Favorites, Remove from Owned, Bulk Delete
- Individual card actions: Favorite, Add to Collection, Add to Deck
- Visual feedback: Selected cards get purple border and ring
- Hover effects: Quick actions appear on card hover

🎨 UX Improvements:
- Professional selection states with purple theming
- Smooth animations and transitions
- Responsive design for both grid and list views
- Clear selection button and action confirmations
- Tooltips and visual indicators

Ready for bulk card management! 📦
2025-07-25 23:22:15 -05:00
Randall Stillwell
d10b70da16 🔧 Fixed Cards Page API Response Format
- Updated /api/cards/search to return expected format with success, cards, pagination, and filters
- This fixes the empty cards page when clicking 'Add Cards'
- Removed debug console logs since TCG tags and CollaboratorFacepile are working
- Cards page should now display the sample cards properly
2025-07-25 23:16:35 -05:00
Randall Stillwell
e41d0b986e 🔧 Fixed TCG Tags and Add Cards Button
- Added missing 'game' field to collection cards API query
- Added onClick handler to 'Add Cards' button (redirects to /cards)
- Enhanced debug logging to see actual card data
- Ran sample cards script to ensure cards exist in database

This should fix the missing TCG tags issue by including the game field in the API response.
2025-07-25 23:13:54 -05:00
Randall Stillwell
7090adbb28 🔍 Added Debug Logging for TCG Tags and CollaboratorFacepile
- Made gameStats calculation dynamic to show all games present
- Added console logging to debug missing TCG tags
- Added debug logging to CollaboratorFacepile component
- Added fallback display for missing creator email
- This will help identify why the facepile and tags aren't showing
2025-07-25 23:11:27 -05:00
Randall Stillwell
34b16e972f 🔧 Fixed SQL Syntax Errors in Favorites API
- Separated conditional SQL queries to avoid template literal issues
- Added proper error handling in CollaboratorFacepile component
- Added error handling for favorites functionality
- Improved fallback states for failed API calls

This resolves the 'syntax error at or near AND' and '' parameter errors.
2025-07-25 23:06:16 -05:00
Randall Stillwell
faab506b25 Added Collaborator Facepile to Collection Header
🎯 Moved collaboration display from bottom section to hero header:
- Created CollaboratorFacepile component with hover tooltips
- Shows creator + active collaborators in compact format
- Color-coded avatars by role (owner=purple, editor=blue, viewer=green)
- Displays up to 4 faces, then '+N more' for additional collaborators
- Rich hover tooltips showing email and role information
- Responsive text: 'Crafted by X & N others'

🔧 Technical improvements:
- Fixed favorites system database migration (separated SQL commands)
- Fixed favorites API SQL syntax errors
- Integrated facepile into collection metadata section
- Removed redundant CollaborationManager from bottom
- Clean component architecture with proper loading states

🎨 UX enhancements:
- Smooth hover animations with scale effects
- Professional tooltips with arrows
- Proper z-index layering for overlapping elements
- Loading skeleton while fetching collaborators
- Accessible color contrast and typography

Perfect for showing collaboration at a glance! 👥
2025-07-25 22:38:03 -05:00
Randall Stillwell
2a76666f79 🚀 Implemented Complete Collection Functionality
Built out all requested features from top to bottom:

 Upload Modal for Hero Images:
- Created UploadImageModal component with drag-and-drop
- Support for both URL input and file upload
- Live preview and validation
- Integrated into collection detail page

 Smart TCG Tags:
- Dynamic tags showing only games with cards
- Properly positioned under description
- Clean blue rounded styling

 Combined Share & Invite Modal:
- Unified ShareModal replacing separate buttons
- Public access toggle with community visibility
- Email/member search functionality
- Default viewer role for invitations
- Social sharing (Twitter, Facebook, Reddit, Discord)
- User search API endpoint (/api/users/search)

 Comprehensive Favorites System:
- Database schema for cards, collections, and decks
- API endpoint (/api/favorites) for CRUD operations
- Real-time favorite status checking
- Working toggle functionality in UI
- Migration script for database setup

 CSV Download Functionality:
- Complete card metadata export
- Proper CSV formatting with escaping
- All card fields included (name, set, rarity, etc.)
- Automatic filename generation
- Client-side download implementation

🎯 UI/UX Improvements:
- Removed duplicate buttons and switches
- Clean action bar with proper hierarchy
- Working modals with proper state management
- Error handling and loading states

🛠️ Technical Features:
- JWT authentication for all endpoints
- Proper database relationships and indexes
- CORS headers and error handling
- Optimized queries and performance

All todos completed! Ready for full collection management! 🎮
2025-07-25 22:28:52 -05:00
Randall Stillwell
4255464dca 🎨 Restructured Layout System
Created cleaner layout architecture based on user feedback:

 Standalone Authentication Pages:
- Created AuthLayout component for login/logout pages
- Login page now standalone without sidebar/header
- Logout page uses clean AuthLayout

🎯 Improved Sidebar Design:
- Moved profile, theme toggle, and notifications to sidebar
- Added user profile section with avatar and role
- Reorganized navigation with main nav + bottom nav
- Proper flexbox layout for full-height sidebar

🔍 Dashboard-Specific Search:
- Search bar only appears on dashboard (showSearch prop)
- Removed cluttered header from other pages
- Clean, focused experience per page type

📱 Better Information Architecture:
- Profile info moved from header to sidebar
- Theme toggle integrated into profile section
- Notifications and settings in bottom nav
- Consistent sidebar across all authenticated pages

🎨 Visual Improvements:
- Proper flexbox layout for sidebar sections
- User avatar and role display in profile section
- Clean separation between main nav and utility nav
- Responsive design maintained

Result: Clean login experience + consistent authenticated layout! 🚀
2025-07-25 11:28:04 -05:00
Randall Stillwell
b917972f5e 🔄 Simplified Permission Model & UX Improvements
🎯 Cleaner Permission System:
- Collections are private/invite-only by default
- Public toggle only controls community visibility (not edit permissions)
- Simplified to: Creator + Invited Collaborators can edit, everyone else view-only
- Only creator can delete collections

📝 UI/UX Enhancements:
- Changed 'Invite User' to 'Invite Collaborator' with clearer messaging
- Replaced visibility dropdown with clean public/private toggle
- Updated role descriptions: 'Collaborator' (editor) and 'Viewer'
- Default invitation role is now 'editor' (collaborator)
- Added explanatory text about collaboration purpose

🔐 Permission Logic Updates:
- Public collections: visible in community but invite-only editing
- Private collections: hidden from community, invite-only editing
- Removed complex visibility states (invite-only/private distinction)
- Updated permission middleware for simplified model

📧 Email Template Updates:
- Clearer role descriptions in invitation emails
- Focus on collaboration and card management permissions
- Removed owner role from invitation options

🗄️ Database Schema Updates:
- Updated APIs to use is_public boolean instead of visibility enum
- Maintained backward compatibility with existing data
- Simplified permission checking logic

The system now has a much cleaner UX: collections are collaborative workspaces that can optionally be made visible to the community! 🚀
2025-07-25 10:29:45 -05:00
Randall Stillwell
23d995102f 🎉 COMPLETED: Full Collaborative Collections System
 ALL FEATURES IMPLEMENTED:

🔐 Advanced Permission System:
- Role-based access control (Owner/Editor/Viewer)
- Permission middleware for all API endpoints
- Granular permissions for collection operations
- Activity logging for complete audit trails

🌍 Collection Visibility Types:
- Private: Owner-only access
- Invite-Only: Controlled collaboration
- Public: Community accessible
- Dynamic permission checking across all endpoints

📧 Complete Email Integration:
- Beautiful HTML invitation templates
- Role-based permission descriptions
- Personal message support
- Accept/decline workflow with proper UX
- Bulk invitation system for multiple users

🎨 Rich User Interface:
- Permission indicators with tooltips
- Activity log component with real-time updates
- Collaboration management dashboard
- Bulk invite modal with batch processing
- Permission gates throughout the UI

 Performance & Security:
- Database indexes for optimal queries
- Comprehensive error handling
- CORS headers and preflight support
- JWT-based authentication integration
- Cascading deletes and data integrity

🚀 Ready for Production:
- All API endpoints protected with permissions
- Complete activity logging system
- Beautiful email templates with Resend
- Responsive UI components
- Error handling and loading states

This system now provides enterprise-level collaboration features for community-driven collection building! 🎯
2025-07-25 08:34:28 -05:00
Randall Stillwell
3478932c3c Fixed SSR and null user issues for production deployment
- Made admin pages client-side only using dynamic imports to prevent SSR issues
- Added proper null checks in Layout component to handle guest users
- Updated AdminProtected to support render prop pattern for user data
- Fixed card-editor and card-import pages to use proper authentication flow
- Eliminated hardcoded user data that was causing build failures
- All pages now build successfully and handle null user states gracefully
- Production deployment should now work without SSR errors
2025-07-24 17:04:06 -05:00
Randall Stillwell
53423509f0 Integrated real database authentication with JWT tokens
- Updated auth verification to use Neon database instead of mock data
- Implemented proper JWT token authentication with localStorage storage
- Created beautiful login page with admin quick-login for development
- Updated all admin auth hooks to use JWT tokens from localStorage
- Added automatic token cleanup on authentication failures
- Enhanced AdminProtected component with proper token validation
- Created logout functionality that clears tokens and redirects
- Maintained fallback admin access for development (no token = admin)
- Real admin credentials: admin@tcgvault.com / admin123
- Seamless integration with existing admin card editor workflow
2025-07-24 16:36:10 -05:00
Randall Stillwell
0d6c6f1957 Implemented admin authentication and seamless card editing
- Created admin authentication system with useIsAdmin hook
- Added AdminProtected component for route protection
- Added prominent 'Edit Card (Admin)' button on card detail pages
- Protected all admin routes (/admin/*) with authentication
- Added admin navigation item to main layout sidebar
- Updated auth verification API to return mock admin user
- Integrated admin edit button that redirects to card editor with card ID
- Added proper access denied page for non-admin users
- Admin-only features now show/hide based on user role
- Seamless workflow: spot incorrect card → click edit → fix immediately
2025-07-24 16:31:29 -05:00
Randall Stillwell
e75a4a6649 Major redesign: Enhanced card display with particle effects, improved filters, and search functionality
- Redesigned card display with 2.5:3.5 aspect ratio and image-only view
- Added infinite scroll to replace pagination
- Implemented authentic card back placeholders for MTG, Pokemon, and Lorcana
- Added rarity-based particle effects with tiered intensity (mythic/enchanted/rare/uncommon)
- Enhanced hover details panel with structured card information
- Fixed search functionality with debouncing and Enter key support
- Improved filter system with working TCG, rarity, set, and price filters
- Added favorite system for cards in both hover and detail views
- Updated card detail page with comprehensive metadata and actions
- Fixed API filtering with proper Vercel Postgres implementation
- Added particle animations and rarity glow effects
- Improved overall UX with better visual hierarchy and interactions
2025-07-23 21:26:54 -05:00