From 4255464dca8144c6e816de39d717f159f91e9a49 Mon Sep 17 00:00:00 2001 From: Randall Stillwell Date: Fri, 25 Jul 2025 11:28:04 -0500 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Restructured=20Layout=20System?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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! ๐Ÿš€ --- TESTING_GUIDE.md | 122 +++++++++++++++++++++++++++++ components/AuthLayout.js | 11 +++ components/Layout.js | 163 ++++++++++++++++++++++----------------- pages/dashboard.js | 2 +- pages/login.js | 6 +- pages/logout.js | 6 +- 6 files changed, 232 insertions(+), 78 deletions(-) create mode 100644 TESTING_GUIDE.md create mode 100644 components/AuthLayout.js diff --git a/TESTING_GUIDE.md b/TESTING_GUIDE.md new file mode 100644 index 0000000..1e20a2e --- /dev/null +++ b/TESTING_GUIDE.md @@ -0,0 +1,122 @@ +# ๐ŸŽฏ TCG Vault Collaboration Testing Guide + +## ๐Ÿ‘ฅ Test Accounts + +| User | Email | Password | Role | +|------|-------|----------|------| +| Admin | `admin@tcgvault.com` | `admin123` | Admin | +| Alice | `alice@tcgvault.com` | `alice123` | User | +| Bob | `bob@tcgvault.com` | `bob123` | User | + +## ๐Ÿƒ Sample Cards Available + +- **Lightning Bolt** (MTG) - $2.50 +- **Black Lotus** (MTG) - $25,000 +- **Pikachu** (Pokemon) - $8.50 +- **Charizard** (Pokemon) - $350 +- **Mickey Mouse** (Lorcana) - $45 +- **Elsa** (Lorcana) - $15.75 + +## ๐Ÿงช Testing Workflow + +### 1. **Login as Alice** +``` +Email: alice@tcgvault.com +Password: alice123 +``` + +### 2. **Create a Collection** +- Go to `/collections` +- Click "Create Collection" +- Fill out: + - Name: "Alice's Pokemon Collection" + - Description: "My favorite Pokemon cards" + - Image: (optional) `https://images.unsplash.com/photo-1606092195730-5d7b9af1efc5?w=1200` + - Show in Community: Toggle ON for public visibility + +### 3. **Add Cards to Collection** +- Navigate to the new collection (auto-redirect after creation) +- Use "Quick Add" search in empty state +- Search for "Pikachu" and click to add +- Search for "Charizard" and click to add +- See real-time collection value updates + +### 4. **Invite Bob as Collaborator** +- Click "Invite Collaborator" button +- Enter: `bob@tcgvault.com` +- Role: Collaborator (default) +- Message: "Help me build this Pokemon collection!" +- Click "Send Invitation" + +### 5. **Switch to Bob's Account** +- Logout and login as Bob +- Email: `bob@tcgvault.com` +- Password: `bob123` + +### 6. **Accept Invitation (Simulated)** +Since we're testing locally, simulate email acceptance: +- Go to: `/invite/accept?token=MOCK_TOKEN` +- Or manually add Bob to Alice's collection via database + +### 7. **Test Collaboration** +As Bob: +- Go to `/collections` - should see Alice's collection +- Open Alice's collection +- Add more cards using Quick Add +- See Bob's activity in collaboration panel + +### 8. **Test Permission Levels** +- Bob can add/edit cards (Collaborator role) +- Bob cannot delete collection (only Alice can) +- Collection shows as "Public" but editing requires invitation + +## ๐Ÿ”ง Quick Database Commands + +### Add Bob to Alice's Collection Manually: +```sql +-- Get collection ID (usually 1 for first collection) +SELECT id FROM collections WHERE name LIKE '%Alice%'; + +-- Add Bob as collaborator +INSERT INTO collection_permissions (collection_id, user_id, role, status) +VALUES (1, 3, 'editor', 'active'); +``` + +### Check Users: +```bash +node scripts/list-users.js +``` + +## ๐ŸŽฏ What to Test + +### โœ… Collection Management: +- [x] Create collection with image and visibility +- [x] Real-time stats (card count, value) +- [x] Only see your own collections initially + +### โœ… Card Management: +- [x] Search and add cards via Quick Add +- [x] Real card data with images and prices +- [x] Collection value updates automatically + +### โœ… Collaboration: +- [x] Invite collaborators with email +- [x] Permission indicators throughout UI +- [x] Activity logging for all changes + +### โœ… User Experience: +- [x] Beautiful empty states with guidance +- [x] Real-time search with dropdown results +- [x] Success confirmations and navigation +- [x] Permission-based UI elements + +## ๐Ÿš€ Ready to Test! + +The system now provides a complete, real-world testing environment with: +- Real user authentication +- Database-driven collections and cards +- Working collaboration system +- Beautiful UX with proper empty states +- Permission-based access control + +Start testing by logging in as Alice and creating your first collection! ๐ŸŽฎ diff --git a/components/AuthLayout.js b/components/AuthLayout.js new file mode 100644 index 0000000..4b27a04 --- /dev/null +++ b/components/AuthLayout.js @@ -0,0 +1,11 @@ +import { useTheme } from '../lib/theme-context'; + +export default function AuthLayout({ children }) { + const { theme } = useTheme(); + + return ( +
+ {children} +
+ ); +} \ No newline at end of file diff --git a/components/Layout.js b/components/Layout.js index 053a5e9..24a0f0c 100644 --- a/components/Layout.js +++ b/components/Layout.js @@ -3,7 +3,7 @@ import { useRouter } from 'next/router'; import Link from 'next/link'; import { useTheme } from '../lib/theme-context'; -export default function Layout({ children, user = { email: 'me@randallstillwell.com', role: 'user' } }) { +export default function Layout({ children, user = { email: 'me@randallstillwell.com', role: 'user' }, showSearch = false }) { const router = useRouter(); const { theme, toggleTheme } = useTheme(); const [searchQuery, setSearchQuery] = useState(''); @@ -18,7 +18,12 @@ export default function Layout({ children, user = { email: 'me@randallstillwell. { name: 'Settings', href: '/settings', icon: 'settings', active: router.pathname === '/settings' }, ...(user?.role === 'admin' ? [ { name: 'Admin Tools', href: '/admin/card-editor', icon: 'admin', active: router.pathname.startsWith('/admin'), badge: 'ADMIN' } - ] : []), + ] : []) + ]; + + const bottomNavigation = [ + { name: 'Notifications', href: '/notifications', icon: 'notifications', active: router.pathname === '/notifications' }, + { name: 'Settings', href: '/settings', icon: 'settings', active: router.pathname === '/settings' }, { name: 'Logout', href: '/logout', icon: 'logout', active: router.pathname === '/logout' } ]; @@ -70,6 +75,11 @@ export default function Layout({ children, user = { email: 'me@randallstillwell. + ), + notifications: ( + + + ) }; return icons[iconName] || icons.grid; @@ -79,7 +89,7 @@ export default function Layout({ children, user = { email: 'me@randallstillwell.
{/* Left Sidebar */}
-
+
TCG @@ -87,7 +97,7 @@ export default function Layout({ children, user = { email: 'me@randallstillwell.

TCG Vault

-
-
- {/* Main Content */} -
- {/* Top Header */} -
-
- {/* Search Bar */} -
-
- setSearchQuery(e.target.value)} - /> -
- โŒ˜F -
-
- - - -
-
-
- - {/* Right Side */} -
- - - + {/* Profile Section */} +
+ {/* User Profile */} +
-
+
+ + {user?.email?.charAt(0).toUpperCase() || 'G'} + +
+

{user?.email || 'Guest'}

@@ -187,15 +146,77 @@ export default function Layout({ children, user = { email: 'me@randallstillwell. {user?.role || 'visitor'}

-
- - {user?.email?.charAt(0).toUpperCase() || 'G'} - + +
+
+ + {/* Bottom Navigation */} + +
+
+
+ + {/* Main Content */} +
+ {/* Top Header - Only show search on dashboard */} + {showSearch && ( +
+
+
+
+ setSearchQuery(e.target.value)} + /> +
+ โŒ˜F +
+
+ + + +
-
-
+ + )} {/* Page Content */}
diff --git a/pages/dashboard.js b/pages/dashboard.js index 8aabcce..c7f9a20 100644 --- a/pages/dashboard.js +++ b/pages/dashboard.js @@ -10,7 +10,7 @@ export default function Dashboard() { const [searchQuery, setSearchQuery] = useState(''); return ( - + {/* Dashboard Content */}
{/* Dashboard Header */} diff --git a/pages/login.js b/pages/login.js index 1f8358f..65cfe5d 100644 --- a/pages/login.js +++ b/pages/login.js @@ -1,6 +1,6 @@ import { useState } from 'react'; import { useRouter } from 'next/router'; -import Layout from '../components/Layout'; +import AuthLayout from '../components/AuthLayout'; export default function Login() { const router = useRouter(); @@ -62,7 +62,7 @@ export default function Login() { }; return ( - +
@@ -220,6 +220,6 @@ export default function Login() {
- + ); } \ No newline at end of file diff --git a/pages/logout.js b/pages/logout.js index 21f1c7c..574fae1 100644 --- a/pages/logout.js +++ b/pages/logout.js @@ -1,6 +1,6 @@ import { useEffect } from 'react'; import { useRouter } from 'next/router'; -import Layout from '../components/Layout'; +import AuthLayout from '../components/AuthLayout'; export default function Logout() { const router = useRouter(); @@ -16,7 +16,7 @@ export default function Logout() { }, [router]); return ( - +
๐Ÿ‘‹
@@ -31,6 +31,6 @@ export default function Logout() {
- + ); } \ No newline at end of file