🎨 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 · 2025-07-25 11:28:04 -05:00 · 4255464dca
commit 4255464dca
parent 083c4f61ac
6 changed files with 232 additions and 78 deletions
--- a/TESTING_GUIDE.md
+++ 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! 🎮
--- a/components/AuthLayout.js
+++ b/components/AuthLayout.js
@ -0,0 +1,11 @@
+import { useTheme } from '../lib/theme-context';
+
+export default function AuthLayout({ children }) {
+  const { theme } = useTheme();
+
+  return (
+    <div className="min-h-screen" style={{ backgroundColor: 'var(--bg-primary)' }}>
+      {children}
+    </div>
+  );
+} 
--- 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.
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
        </svg>
+      ),
+      notifications: (
+        <svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 17h5l-5 5v-5zM4.5 19.5L9 15m0 0l-4.5-4.5M9 15v5" />
+        </svg>
      )
    };
    return icons[iconName] || icons.grid;
@ -79,7 +89,7 @@ export default function Layout({ children, user = { email: 'me@randallstillwell.
    <div className="flex h-screen" style={{ backgroundColor: 'var(--bg-primary)' }}>
      {/* Left Sidebar */}
      <div className="w-64 shadow-lg" style={{ backgroundColor: 'var(--bg-secondary)', borderRight: '1px solid var(--border)' }}>
-        <div className="p-4">
+        <div className="p-4 h-full flex flex-col">
          <div className="flex items-center mb-8">
            <div className="w-10 h-10 logo-container mr-3">
              <span className="text-white font-bold text-sm">TCG</span>
@ -87,7 +97,7 @@ export default function Layout({ children, user = { email: 'me@randallstillwell.
            <h1 className="text-xl font-bold" style={{ color: 'var(--text-primary)' }}>TCG Vault</h1>
          </div>
          
-          <nav className="space-y-2">
+          <nav className="space-y-2 flex-1">
            {navigation.map((item) => (
              <Link key={item.name} href={item.href}>
                <div 
@ -117,69 +127,18 @@ export default function Layout({ children, user = { email: 'me@randallstillwell.
              </Link>
            ))}
          </nav>
-          
-          <div className="absolute bottom-4 left-4">
-            <div className="w-10 h-10 logo-container">
-              <span className="text-white font-bold text-sm">N</span>
-            </div>
-          </div>
-        </div>
-      </div>

-      {/* Main Content */}
-      <div className="flex-1 flex flex-col">
-        {/* Top Header */}
-        <header className="p-6" style={{ backgroundColor: 'var(--bg-secondary)', borderBottom: '1px solid var(--border)' }}>
-          <div className="flex items-center justify-between">
-            {/* Search Bar */}
-            <div className="flex-1 max-w-2xl">
-              <div className="relative">
-                <input
-                  type="text"
-                  placeholder="Search cards, decks, or collections..."
-                  className="search-bar pr-12"
-                  value={searchQuery}
-                  onChange={(e) => setSearchQuery(e.target.value)}
-                />
-                <div className="absolute inset-y-0 right-0 flex items-center pr-4">
-                  <span className="text-sm" style={{ color: 'var(--text-secondary)' }}>⌘F</span>
-                </div>
-                <div className="absolute inset-y-0 left-0 flex items-center pl-4">
-                  <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" style={{ color: 'var(--text-secondary)' }}>
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-                  </svg>
-                </div>
-              </div>
-            </div>
-
-            {/* Right Side */}
-            <div className="flex items-center space-x-4">
-              <button 
-                onClick={toggleTheme}
-                className="theme-toggle"
-              >
-                {theme === 'light' ? (
-                  <svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
-                  </svg>
-                ) : (
-                  <svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
-                  </svg>
-                )}
-              </button>
-              <button className="header-icon">
-                <svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
-                </svg>
-              </button>
-              <button className="header-icon">
-                <svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 17h5l-5 5v-5zM4.5 19.5L9 15m0 0l-4.5-4.5M9 15v5" />
-                </svg>
-              </button>
+          {/* Profile Section */}
+          <div className="mt-auto space-y-4">
+            {/* User Profile */}
+            <div className="px-4 py-3 rounded-2xl" style={{ backgroundColor: 'var(--bg-tertiary)' }}>
              <div className="flex items-center space-x-3">
-                <div className="text-right">
+                <div className="h-10 w-10 logo-container">
+                  <span className="text-white text-sm font-medium">
+                    {user?.email?.charAt(0).toUpperCase() || 'G'}
+                  </span>
+                </div>
+                <div className="flex-1">
                  <p className="text-sm font-medium" style={{ color: 'var(--text-primary)' }}>
                    {user?.email || 'Guest'}
                  </p>
@ -187,15 +146,77 @@ export default function Layout({ children, user = { email: 'me@randallstillwell.
                    {user?.role || 'visitor'}
                  </p>
                </div>
-                <div className="h-10 w-10 logo-container">
-                  <span className="text-white text-sm font-medium">
-                    {user?.email?.charAt(0).toUpperCase() || 'G'}
-                  </span>
+                <button 
+                  onClick={toggleTheme}
+                  className="p-2 rounded-lg transition-all duration-200 hover:shadow-md"
+                  style={{ backgroundColor: 'var(--bg-primary)' }}
+                >
+                  {theme === 'light' ? (
+                    <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" style={{ color: 'var(--text-primary)' }}>
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
+                    </svg>
+                  ) : (
+                    <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" style={{ color: 'var(--text-primary)' }}>
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
+                    </svg>
+                  )}
+                </button>
+              </div>
+            </div>
+
+            {/* Bottom Navigation */}
+            <nav className="space-y-1">
+              {bottomNavigation.map((item) => (
+                <Link key={item.name} href={item.href}>
+                  <div 
+                    className={`flex items-center px-4 py-2 rounded-xl transition-all duration-200 cursor-pointer ${
+                      item.active 
+                        ? 'shadow-md' 
+                        : 'hover:shadow-sm'
+                    }`}
+                    style={{
+                      backgroundColor: item.active ? 'var(--bg-tertiary)' : 'transparent',
+                      color: item.active ? 'var(--text-primary)' : 'var(--text-secondary)'
+                    }}
+                  >
+                    <span className="mr-3">{getIcon(item.icon)}</span>
+                    <span className="text-sm font-medium">{item.name}</span>
+                  </div>
+                </Link>
+              ))}
+            </nav>
+          </div>
+        </div>
+      </div>
+
+      {/* Main Content */}
+      <div className="flex-1 flex flex-col">
+        {/* Top Header - Only show search on dashboard */}
+        {showSearch && (
+          <header className="p-6" style={{ backgroundColor: 'var(--bg-secondary)', borderBottom: '1px solid var(--border)' }}>
+            <div className="flex items-center">
+              <div className="flex-1 max-w-2xl">
+                <div className="relative">
+                  <input
+                    type="text"
+                    placeholder="Search cards, decks, or collections..."
+                    className="search-bar pr-12"
+                    value={searchQuery}
+                    onChange={(e) => setSearchQuery(e.target.value)}
+                  />
+                  <div className="absolute inset-y-0 right-0 flex items-center pr-4">
+                    <span className="text-sm" style={{ color: 'var(--text-secondary)' }}>⌘F</span>
+                  </div>
+                  <div className="absolute inset-y-0 left-0 flex items-center pl-4">
+                    <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" style={{ color: 'var(--text-secondary)' }}>
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                    </svg>
+                  </div>
                </div>
              </div>
            </div>
-          </div>
-        </header>
+          </header>
+        )}

        {/* Page Content */}
        <main className="flex-1 overflow-auto">
--- a/pages/dashboard.js
+++ b/pages/dashboard.js
@ -10,7 +10,7 @@ export default function Dashboard() {
  const [searchQuery, setSearchQuery] = useState('');

  return (
-    <Layout user={user}>
+    <Layout user={user} showSearch={true}>
      {/* Dashboard Content */}
      <div className="p-6">
        {/* Dashboard Header */}
--- 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 (
-    <Layout user={null}>
+    <AuthLayout>
      <div className="min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
        <div className="max-w-md w-full space-y-8">
          <div>
@ -220,6 +220,6 @@ export default function Login() {
          </div>
        </div>
      </div>
-    </Layout>
+    </AuthLayout>
  );
 } 
--- 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 (
-    <Layout user={null}>
+    <AuthLayout>
      <div className="min-h-screen flex items-center justify-center">
        <div className="text-center">
          <div className="text-6xl mb-4">👋</div>
@ -31,6 +31,6 @@ export default function Logout() {
          </div>
        </div>
      </div>
-    </Layout>
+    </AuthLayout>
  );
 }