add price display and message preview in trade creator

Reviewed-on: #12

.claude/settings.local.json

@@ -0,0 +1,11 @@
+{
+  "enableAllProjectMcpServers": true,
+  "enabledMcpjsonServers": [
+    "supabase"
+  ],
+  "permissions": {
+    "allow": [
+      "mcp__supabase__apply_migration"
+    ]
+  }
+}

.dockerignore

@@ -0,0 +1,21 @@
+node_modules
+dist
+.git
+.gitignore
+.env
+.env.*
+!.env.example
+*.md
+!DOCKER.md
+.vscode
+.idea
+*.log
+npm-debug.log*
+.DS_Store
+Thumbs.db
+coverage
+.nyc_output
+*.test.ts
+*.test.tsx
+*.spec.ts
+*.spec.tsx

.env.example

@@ -0,0 +1,98 @@
+# =====================================================
+# DECKERR DOCKER CONFIGURATION
+# =====================================================
+# Copy this file to .env and configure your settings
+#
+# Two deployment modes available:
+#   1. External Supabase: Use docker-compose.yml (simpler)
+#   2. Self-hosted Supabase: Use docker-compose.selfhosted.yml (full stack)
+# =====================================================
+
+# =====================================================
+# MODE 1: EXTERNAL SUPABASE (docker-compose.yml)
+# =====================================================
+# Use this if you have:
+# - A Supabase cloud account (supabase.com)
+# - A separately self-hosted Supabase instance
+# - Access to a paid hosted Supabase service
+
+# Your Supabase project URL
+VITE_SUPABASE_URL=https://your-project.supabase.co
+
+# Your Supabase anonymous/public key
+VITE_SUPABASE_ANON_KEY=your-anon-key-here
+
+# Port to run Deckerr on (default: 3000)
+PORT=3000
+
+
+# =====================================================
+# MODE 2: SELF-HOSTED SUPABASE (docker-compose.selfhosted.yml)
+# =====================================================
+# Use this to run everything locally, including Supabase
+
+# --- Site Configuration ---
+# Your domain or IP address (used for redirects)
+SITE_URL=http://localhost:3000
+
+# External API URL (Kong gateway)
+API_EXTERNAL_URL=http://localhost:8000
+
+# --- Port Configuration ---
+DECKERR_PORT=3000
+KONG_HTTP_PORT=8000
+KONG_HTTPS_PORT=8443
+POSTGRES_PORT=5432
+
+# --- Security Keys ---
+# IMPORTANT: Generate secure random values for production!
+# You can use: openssl rand -base64 32
+
+# PostgreSQL password
+POSTGRES_PASSWORD=your-super-secret-postgres-password
+
+# JWT Secret (must be at least 32 characters)
+# Generate with: openssl rand -base64 32
+JWT_SECRET=your-super-secret-jwt-token-with-at-least-32-characters
+
+# JWT Expiry in seconds (default: 3600 = 1 hour)
+JWT_EXPIRY=3600
+
+# Supabase Anonymous Key
+# Generate at: https://supabase.com/docs/guides/self-hosting#api-keys
+# Or use: npx @supabase/cli@latest gen key --type anon --jwt-secret "YOUR_JWT_SECRET"
+ANON_KEY=your-anon-key
+
+# Supabase Service Role Key (admin access)
+# Generate at: https://supabase.com/docs/guides/self-hosting#api-keys
+# Or use: npx @supabase/cli@latest gen key --type service_role --jwt-secret "YOUR_JWT_SECRET"
+SERVICE_ROLE_KEY=your-service-role-key
+
+# --- Email Configuration (Optional) ---
+# Required for email verification and password reset
+SMTP_HOST=smtp.example.com
+SMTP_PORT=587
+SMTP_USER=your-email@example.com
+SMTP_PASS=your-email-password
+SMTP_ADMIN_EMAIL=admin@example.com
+SMTP_SENDER_NAME=Deckerr
+
+# Enable email auto-confirm (set to true to skip email verification)
+ENABLE_EMAIL_AUTOCONFIRM=true
+
+# --- Feature Flags ---
+# Disable new user signups
+DISABLE_SIGNUP=false
+
+# Enable email signup
+ENABLE_EMAIL_SIGNUP=true
+
+# Enable anonymous users
+ENABLE_ANONYMOUS_USERS=false
+
+# --- Advanced ---
+# Additional redirect URLs (comma-separated)
+ADDITIONAL_REDIRECT_URLS=
+
+# PostgREST schemas
+PGRST_DB_SCHEMAS=public,graphql_public

.mcp.json

@@ -0,0 +1,8 @@
+{
+  "mcpServers": {
+    "supabase": {
+      "type": "http",
+      "url": "https://mcp.supabase.com/mcp?project_ref=yedghjrpyxhxesnbtbip"
+    }
+  }
+}

DOCKER.md

@@ -0,0 +1,191 @@
+# Deckerr Docker Deployment
+
+Self-host Deckerr with two deployment options:
+
+## Deployment Options
+
+| Option | Use Case | Complexity |
+|--------|----------|------------|
+| **External Supabase** | Use hosted Supabase (cloud or paid) | Simple |
+| **Self-hosted Supabase** | Run everything locally | Advanced |
+
+---
+
+## Option 1: External Supabase (Recommended)
+
+Use your own Supabase instance (cloud, paid hosted, or separately self-hosted).
+
+### Quick Start
+
+```bash
+# 1. Copy environment template
+cp .env.example .env
+
+# 2. Edit .env with your Supabase credentials
+VITE_SUPABASE_URL=https://your-project.supabase.co
+VITE_SUPABASE_ANON_KEY=your-anon-key
+PORT=3000
+
+# 3. Run database migrations on your Supabase
+# Go to Supabase Dashboard > SQL Editor and run:
+# Contents of supabase/migrations/20250131132458_black_frost.sql
+
+# 4. Start Deckerr
+docker-compose up -d
+
+# 5. Access at http://localhost:3000
+```
+
+### Using Hosted Supabase (Paid Service)
+
+Contact the Deckerr team for access credentials to use the hosted backend.
+
+---
+
+## Option 2: Self-Hosted Supabase (Full Stack)
+
+Run Deckerr with a complete self-hosted Supabase stack.
+
+### Prerequisites
+
+- Docker & Docker Compose
+- 2GB+ RAM
+- Ports: 3000, 5432, 8000
+
+### Quick Start
+
+```bash
+# 1. Copy environment template
+cp .env.example .env
+
+# 2. Generate secure keys
+# JWT Secret (required)
+openssl rand -base64 32
+
+# Generate Supabase API keys
+# Option A: Use online generator at https://supabase.com/docs/guides/self-hosting#api-keys
+# Option B: Use Supabase CLI
+npx @supabase/cli@latest gen key --type anon --jwt-secret "YOUR_JWT_SECRET"
+npx @supabase/cli@latest gen key --type service_role --jwt-secret "YOUR_JWT_SECRET"
+
+# 3. Update .env with your generated values
+POSTGRES_PASSWORD=<generated-password>
+JWT_SECRET=<generated-jwt-secret>
+ANON_KEY=<generated-anon-key>
+SERVICE_ROLE_KEY=<generated-service-key>
+
+# 4. Start all services
+docker-compose -f docker-compose.selfhosted.yml up -d
+
+# 5. Access Deckerr at http://localhost:3000
+# API available at http://localhost:8000
+```
+
+### Generate Keys Script
+
+```bash
+#!/bin/bash
+JWT_SECRET=$(openssl rand -base64 32)
+echo "JWT_SECRET=$JWT_SECRET"
+echo ""
+echo "Now generate API keys at:"
+echo "https://supabase.com/docs/guides/self-hosting#api-keys"
+echo "Use this JWT secret: $JWT_SECRET"
+```
+
+### Self-Hosted Services
+
+| Service | Port | Description |
+|---------|------|-------------|
+| Deckerr | 3000 | Frontend app |
+| Kong | 8000 | API Gateway |
+| PostgreSQL | 5432 | Database |
+| Auth | 9999 | Authentication (internal) |
+| REST | 3000 | PostgREST API (internal) |
+| Realtime | 4000 | WebSocket (internal) |
+
+---
+
+## Environment Variables
+
+### External Supabase Mode
+
+| Variable | Required | Description |
+|----------|----------|-------------|
+| `VITE_SUPABASE_URL` | Yes | Supabase project URL |
+| `VITE_SUPABASE_ANON_KEY` | Yes | Supabase anonymous key |
+| `PORT` | No | App port (default: 3000) |
+
+### Self-Hosted Mode
+
+| Variable | Required | Description |
+|----------|----------|-------------|
+| `POSTGRES_PASSWORD` | Yes | PostgreSQL password |
+| `JWT_SECRET` | Yes | JWT signing secret (32+ chars) |
+| `ANON_KEY` | Yes | Supabase anonymous key |
+| `SERVICE_ROLE_KEY` | Yes | Supabase service role key |
+| `SITE_URL` | No | Your domain (default: localhost) |
+| `SMTP_*` | No | Email configuration |
+
+---
+
+## Commands
+
+```bash
+# Start (external Supabase)
+docker-compose up -d
+
+# Start (self-hosted)
+docker-compose -f docker-compose.selfhosted.yml up -d
+
+# Stop
+docker-compose down
+
+# View logs
+docker-compose logs -f
+
+# Rebuild after code changes
+docker-compose build --no-cache
+docker-compose up -d
+
+# Reset database (self-hosted only)
+docker-compose -f docker-compose.selfhosted.yml down -v
+docker-compose -f docker-compose.selfhosted.yml up -d
+```
+
+---
+
+## Production Checklist
+
+- [ ] Use strong passwords (generate with `openssl rand -base64 32`)
+- [ ] Configure HTTPS with reverse proxy (nginx, Traefik, Caddy)
+- [ ] Set up email (SMTP) for password reset
+- [ ] Configure firewall rules
+- [ ] Set up backups for PostgreSQL volume
+- [ ] Consider rate limiting at reverse proxy level
+
+---
+
+## Troubleshooting
+
+### Container won't start
+```bash
+docker-compose logs <service-name>
+```
+
+### Database connection issues
+```bash
+# Check if database is healthy
+docker-compose exec db pg_isready -U postgres
+```
+
+### Reset everything
+```bash
+docker-compose down -v
+docker-compose up -d --build
+```
+
+### Check service health
+```bash
+docker-compose ps
+```

Dockerfile

@@ -0,0 +1,39 @@
+# Build stage
+FROM node:20-alpine AS builder
+
+WORKDIR /app
+
+# Copy package files
+COPY package*.json ./
+
+# Install dependencies
+RUN npm ci
+
+# Copy source code
+COPY . .
+
+# Build arguments for Supabase configuration
+ARG VITE_SUPABASE_URL
+ARG VITE_SUPABASE_ANON_KEY
+
+# Set environment variables for build
+ENV VITE_SUPABASE_URL=$VITE_SUPABASE_URL
+ENV VITE_SUPABASE_ANON_KEY=$VITE_SUPABASE_ANON_KEY
+
+# Build the application
+RUN npm run build
+
+# Production stage
+FROM nginx:alpine
+
+# Copy custom nginx config
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+# Copy built assets from builder
+COPY --from=builder /app/dist /usr/share/nginx/html
+
+# Expose port 80
+EXPOSE 80
+
+# Start nginx
+CMD ["nginx", "-g", "daemon off;"]

PROJECT_STRUCTURE.md

@@ -0,0 +1,157 @@
+# Deckerr
+
+A modern Magic: The Gathering deck builder and collection manager built with React, TypeScript, and Supabase.
+
+## Overview
+
+Deckerr is a web application that allows Magic: The Gathering players to build and manage their decks, track their card collections, search for cards, and use a life counter during games. The application provides a clean, animated interface with user authentication and persistent storage.
+
+## Features
+
+- **Deck Management**: Create, edit, and organize your Magic: The Gathering decks
+- **Collection Tracking**: Keep track of your card collection with quantity management
+- **Card Search**: Search and browse Magic cards to add to your decks or collection
+- **Life Counter**: Track player life totals during games
+- **User Profiles**: Personalized user profiles with theme customization
+- **Authentication**: Secure user authentication powered by Supabase
+- **Format Support**: Support for different Magic formats (Commander, Standard, etc.)
+
+## Technology Stack
+
+- **Frontend**: React 18 with TypeScript
+- **Build Tool**: Vite
+- **Styling**: Tailwind CSS with custom animations
+- **Backend/Database**: Supabase (PostgreSQL)
+- **Authentication**: Supabase Auth
+- **Icons**: Lucide React
+- **Linting**: ESLint with TypeScript support
+
+## Project Structure
+
+```
+deckerr/
+├── src/
+│   ├── components/          # React components
+│   │   ├── CardCarousel.tsx    # Card carousel display
+│   │   ├── CardSearch.tsx      # Card search interface
+│   │   ├── Collection.tsx      # Collection management
+│   │   ├── DeckBuilder.tsx     # Deck building interface
+│   │   ├── DeckCard.tsx        # Deck card component
+│   │   ├── DeckEditor.tsx      # Deck editing interface
+│   │   ├── DeckList.tsx        # List of user decks
+│   │   ├── DeckManager.tsx     # Deck management
+│   │   ├── LifeCounter.tsx     # Game life counter
+│   │   ├── LoginForm.tsx       # User authentication form
+│   │   ├── MagicCard.tsx       # Magic card display component
+│   │   ├── ManaIcons.tsx       # Mana symbol icons
+│   │   ├── Navigation.tsx      # App navigation
+│   │   └── Profile.tsx         # User profile page
+│   │
+│   ├── contexts/            # React contexts
+│   │   └── AuthContext.tsx     # Authentication context
+│   │
+│   ├── lib/                 # Library code
+│   │   ├── Entities.ts         # Supabase database types
+│   │   └── supabase.ts         # Supabase client configuration
+│   │
+│   ├── services/            # API and service layers
+│   │   └── api.ts              # API service functions
+│   │
+│   ├── types/               # TypeScript type definitions
+│   │   └── index.ts            # Shared types
+│   │
+│   ├── utils/               # Utility functions
+│   │   ├── deckValidation.ts   # Deck validation logic
+│   │   └── theme.ts            # Theme utilities
+│   │
+│   ├── App.tsx              # Main application component
+│   ├── main.tsx             # Application entry point
+│   ├── main.js              # JavaScript entry
+│   ├── index.css            # Global styles
+│   └── vite-env.d.ts        # Vite type definitions
+│
+├── public/                  # Static assets (if any)
+│
+├── index.html               # HTML entry point
+├── package.json             # Project dependencies
+├── vite.config.ts           # Vite configuration
+├── tsconfig.json            # TypeScript configuration
+├── tsconfig.app.json        # App-specific TS config
+├── tsconfig.node.json       # Node-specific TS config
+├── tailwind.config.js       # Tailwind CSS configuration
+├── postcss.config.js        # PostCSS configuration
+├── eslint.config.js         # ESLint configuration
+├── LICENSE                  # Project license
+└── README.md                # This file
+```
+
+## Database Schema
+
+The application uses Supabase with the following main tables:
+
+- **profiles**: User profiles with username and theme preferences
+- **decks**: User decks with name, format, and timestamps
+- **deck_cards**: Cards in decks with quantity and commander status
+- **collections**: User card collections with quantities
+
+## Getting Started
+
+### Prerequisites
+
+- Node.js (v18 or higher)
+- npm or pnpm
+- Supabase account and project
+
+### Installation
+
+1. Clone the repository:
+   ```bash
+   git clone <repository-url>
+   cd deckerr
+   ```
+
+2. Install dependencies:
+   ```bash
+   npm install
+   # or
+   pnpm install
+   ```
+
+3. Set up environment variables:
+   Create a `.env` file with your Supabase credentials:
+   ```
+   VITE_SUPABASE_URL=your_supabase_url
+   VITE_SUPABASE_ANON_KEY=your_supabase_anon_key
+   ```
+
+4. Run the development server:
+   ```bash
+   npm run dev
+   ```
+
+5. Open your browser to `http://localhost:5173`
+
+## Available Scripts
+
+- `npm run dev` - Start development server
+- `npm run build` - Build for production
+- `npm run preview` - Preview production build
+- `npm run lint` - Run ESLint
+
+## Features in Detail
+
+### Deck Builder
+Build and customize your Magic decks with support for different formats. The deck editor validates your deck composition according to format rules.
+
+### Collection Manager
+Track which cards you own and their quantities, making it easy to see what cards you have available when building decks.
+
+### Card Search
+Search through Magic cards using various filters and criteria to find exactly what you need for your deck.
+
+### Life Counter
+A built-in life counter for tracking player life totals during games, with an animated interface.
+
+## License
+
+See the LICENSE file for details.

dev-dist/registerSW.js

@@ -0,0 +1 @@
+if('serviceWorker' in navigator) navigator.serviceWorker.register('/dev-sw.js?dev-sw', { scope: '/', type: 'classic' })

dev-dist/sw.js

@@ -0,0 +1,110 @@
+/**
+ * Copyright 2018 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// If the loader is already loaded, just stop.
+if (!self.define) {
+  let registry = {};
+
+  // Used for `eval` and `importScripts` where we can't get script URL by other means.
+  // In both cases, it's safe to use a global var because those functions are synchronous.
+  let nextDefineUri;
+
+  const singleRequire = (uri, parentUri) => {
+    uri = new URL(uri + ".js", parentUri).href;
+    return registry[uri] || (
+      
+        new Promise(resolve => {
+          if ("document" in self) {
+            const script = document.createElement("script");
+            script.src = uri;
+            script.onload = resolve;
+            document.head.appendChild(script);
+          } else {
+            nextDefineUri = uri;
+            importScripts(uri);
+            resolve();
+          }
+        })
+      
+      .then(() => {
+        let promise = registry[uri];
+        if (!promise) {
+          throw new Error(`Module ${uri} didn’t register its module`);
+        }
+        return promise;
+      })
+    );
+  };
+
+  self.define = (depsNames, factory) => {
+    const uri = nextDefineUri || ("document" in self ? document.currentScript.src : "") || location.href;
+    if (registry[uri]) {
+      // Module is already loading or loaded.
+      return;
+    }
+    let exports = {};
+    const require = depUri => singleRequire(depUri, uri);
+    const specialDeps = {
+      module: { uri },
+      exports,
+      require
+    };
+    registry[uri] = Promise.all(depsNames.map(
+      depName => specialDeps[depName] || require(depName)
+    )).then(deps => {
+      factory(...deps);
+      return exports;
+    });
+  };
+}
+define(['./workbox-ca84f546'], (function (workbox) { 'use strict';
+
+  self.skipWaiting();
+  workbox.clientsClaim();
+
+  /**
+   * The precacheAndRoute() method efficiently caches and responds to
+   * requests for URLs in the manifest.
+   * See https://goo.gl/S9QRab
+   */
+  workbox.precacheAndRoute([{
+    "url": "registerSW.js",
+    "revision": "3ca0b8505b4bec776b69afdba2768812"
+  }, {
+    "url": "index.html",
+    "revision": "0.ufhads5pjvs"
+  }], {});
+  workbox.cleanupOutdatedCaches();
+  workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {
+    allowlist: [/^\/$/]
+  }));
+  workbox.registerRoute(/^https:\/\/api\.scryfall\.com\/.*/i, new workbox.CacheFirst({
+    "cacheName": "scryfall-cache",
+    plugins: [new workbox.ExpirationPlugin({
+      maxEntries: 500,
+      maxAgeSeconds: 604800
+    }), new workbox.CacheableResponsePlugin({
+      statuses: [0, 200]
+    })]
+  }), 'GET');
+  workbox.registerRoute(/^https:\/\/cards\.scryfall\.io\/.*/i, new workbox.CacheFirst({
+    "cacheName": "card-images-cache",
+    plugins: [new workbox.ExpirationPlugin({
+      maxEntries: 1000,
+      maxAgeSeconds: 2592000
+    }), new workbox.CacheableResponsePlugin({
+      statuses: [0, 200]
+    })]
+  }), 'GET');
+
+}));

docker-compose.selfhosted.yml

@@ -0,0 +1,201 @@
+version: '3.8'
+
+# Full self-hosted deployment with Supabase included
+# This includes PostgreSQL, Auth, REST API, and the Deckerr frontend
+
+services:
+  # ============================================
+  # DECKERR FRONTEND
+  # ============================================
+  deckerr:
+    build:
+      context: .
+      dockerfile: Dockerfile
+      args:
+        - VITE_SUPABASE_URL=http://${SITE_URL:-localhost}:${KONG_HTTP_PORT:-8000}
+        - VITE_SUPABASE_ANON_KEY=${ANON_KEY}
+    container_name: deckerr
+    ports:
+      - "${DECKERR_PORT:-3000}:80"
+    restart: unless-stopped
+    depends_on:
+      kong:
+        condition: service_healthy
+
+  # ============================================
+  # SUPABASE SERVICES
+  # ============================================
+
+  # PostgreSQL Database
+  db:
+    image: supabase/postgres:15.1.1.78
+    container_name: supabase-db
+    healthcheck:
+      test: pg_isready -U postgres -h localhost
+      interval: 5s
+      timeout: 5s
+      retries: 10
+    ports:
+      - "${POSTGRES_PORT:-5432}:5432"
+    environment:
+      POSTGRES_HOST: /var/run/postgresql
+      PGPORT: 5432
+      POSTGRES_PORT: 5432
+      PGPASSWORD: ${POSTGRES_PASSWORD}
+      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
+      PGDATABASE: postgres
+      POSTGRES_DB: postgres
+    volumes:
+      - supabase-db-data:/var/lib/postgresql/data
+      - ./supabase/migrations:/docker-entrypoint-initdb.d/migrations
+    restart: unless-stopped
+
+  # Supabase Kong API Gateway
+  kong:
+    image: kong:2.8.1
+    container_name: supabase-kong
+    restart: unless-stopped
+    ports:
+      - "${KONG_HTTP_PORT:-8000}:8000/tcp"
+      - "${KONG_HTTPS_PORT:-8443}:8443/tcp"
+    depends_on:
+      db:
+        condition: service_healthy
+    environment:
+      KONG_DATABASE: "off"
+      KONG_DECLARATIVE_CONFIG: /home/kong/kong.yml
+      KONG_DNS_ORDER: LAST,A,CNAME
+      KONG_PLUGINS: request-transformer,cors,key-auth,acl,basic-auth
+      KONG_NGINX_PROXY_PROXY_BUFFER_SIZE: 160k
+      KONG_NGINX_PROXY_PROXY_BUFFERS: 64 160k
+      SUPABASE_ANON_KEY: ${ANON_KEY}
+      SUPABASE_SERVICE_KEY: ${SERVICE_ROLE_KEY}
+    volumes:
+      - ./docker/kong.yml:/home/kong/kong.yml:ro
+    healthcheck:
+      test: ["CMD", "kong", "health"]
+      interval: 10s
+      timeout: 10s
+      retries: 5
+
+  # Supabase Auth (GoTrue)
+  auth:
+    image: supabase/gotrue:v2.143.0
+    container_name: supabase-auth
+    depends_on:
+      db:
+        condition: service_healthy
+    healthcheck:
+      test: ["CMD", "wget", "--no-verbose", "--tries=1", "--spider", "http://localhost:9999/health"]
+      interval: 5s
+      timeout: 5s
+      retries: 3
+    restart: unless-stopped
+    environment:
+      GOTRUE_API_HOST: 0.0.0.0
+      GOTRUE_API_PORT: 9999
+      API_EXTERNAL_URL: ${API_EXTERNAL_URL:-http://localhost:8000}
+
+      GOTRUE_DB_DRIVER: postgres
+      GOTRUE_DB_DATABASE_URL: postgres://supabase_auth_admin:${POSTGRES_PASSWORD}@db:5432/postgres
+
+      GOTRUE_SITE_URL: ${SITE_URL:-http://localhost:3000}
+      GOTRUE_URI_ALLOW_LIST: ${ADDITIONAL_REDIRECT_URLS:-}
+      GOTRUE_DISABLE_SIGNUP: ${DISABLE_SIGNUP:-false}
+
+      GOTRUE_JWT_ADMIN_ROLES: service_role
+      GOTRUE_JWT_AUD: authenticated
+      GOTRUE_JWT_DEFAULT_GROUP_NAME: authenticated
+      GOTRUE_JWT_EXP: ${JWT_EXPIRY:-3600}
+      GOTRUE_JWT_SECRET: ${JWT_SECRET}
+
+      GOTRUE_EXTERNAL_EMAIL_ENABLED: ${ENABLE_EMAIL_SIGNUP:-true}
+      GOTRUE_EXTERNAL_ANONYMOUS_USERS_ENABLED: ${ENABLE_ANONYMOUS_USERS:-false}
+      GOTRUE_MAILER_AUTOCONFIRM: ${ENABLE_EMAIL_AUTOCONFIRM:-false}
+
+      GOTRUE_SMTP_HOST: ${SMTP_HOST:-}
+      GOTRUE_SMTP_PORT: ${SMTP_PORT:-587}
+      GOTRUE_SMTP_USER: ${SMTP_USER:-}
+      GOTRUE_SMTP_PASS: ${SMTP_PASS:-}
+      GOTRUE_SMTP_ADMIN_EMAIL: ${SMTP_ADMIN_EMAIL:-}
+      GOTRUE_SMTP_SENDER_NAME: ${SMTP_SENDER_NAME:-Deckerr}
+      GOTRUE_MAILER_URLPATHS_INVITE: /auth/v1/verify
+      GOTRUE_MAILER_URLPATHS_CONFIRMATION: /auth/v1/verify
+      GOTRUE_MAILER_URLPATHS_RECOVERY: /auth/v1/verify
+      GOTRUE_MAILER_URLPATHS_EMAIL_CHANGE: /auth/v1/verify
+
+  # Supabase REST API (PostgREST)
+  rest:
+    image: postgrest/postgrest:v12.0.1
+    container_name: supabase-rest
+    depends_on:
+      db:
+        condition: service_healthy
+    restart: unless-stopped
+    environment:
+      PGRST_DB_URI: postgres://authenticator:${POSTGRES_PASSWORD}@db:5432/postgres
+      PGRST_DB_SCHEMAS: ${PGRST_DB_SCHEMAS:-public,graphql_public}
+      PGRST_DB_ANON_ROLE: anon
+      PGRST_JWT_SECRET: ${JWT_SECRET}
+      PGRST_DB_USE_LEGACY_GUCS: "false"
+      PGRST_APP_SETTINGS_JWT_SECRET: ${JWT_SECRET}
+      PGRST_APP_SETTINGS_JWT_EXP: ${JWT_EXPIRY:-3600}
+    healthcheck:
+      test: ["CMD-SHELL", "curl -f http://localhost:3000/ready || exit 1"]
+      interval: 10s
+      timeout: 5s
+      retries: 3
+
+  # Supabase Realtime
+  realtime:
+    image: supabase/realtime:v2.28.32
+    container_name: supabase-realtime
+    depends_on:
+      db:
+        condition: service_healthy
+    healthcheck:
+      test: ["CMD", "curl", "-sSfL", "--head", "-o", "/dev/null", "-H", "Authorization: Bearer ${ANON_KEY}", "http://localhost:4000/api/tenants/realtime-dev/health"]
+      interval: 10s
+      timeout: 5s
+      retries: 3
+    restart: unless-stopped
+    environment:
+      PORT: 4000
+      DB_HOST: db
+      DB_PORT: 5432
+      DB_USER: supabase_admin
+      DB_PASSWORD: ${POSTGRES_PASSWORD}
+      DB_NAME: postgres
+      DB_AFTER_CONNECT_QUERY: 'SET search_path TO _realtime'
+      DB_ENC_KEY: supabaserealtime
+      API_JWT_SECRET: ${JWT_SECRET}
+      SECRET_KEY_BASE: ${SECRET_KEY_BASE:-UpNVntn3cDxHJpq99YMc1T1AQgQpc8kfYTuRgBiYa15BLrx8etQoXz3gZv1/u2oq}
+      ERL_AFLAGS: -proto_dist inet_tcp
+      DNS_NODES: "''"
+      RLIMIT_NOFILE: "10000"
+      APP_NAME: realtime
+      SEED_SELF_HOST: true
+      REPLICATION_MODE: RLS
+      REPLICATION_POLL_INTERVAL: 100
+      SECURE_CHANNELS: "true"
+      SLOT_NAME: supabase_realtime_rls
+      TEMPORARY_SLOT: "true"
+
+  # Supabase Meta (for Studio - optional)
+  meta:
+    image: supabase/postgres-meta:v0.80.0
+    container_name: supabase-meta
+    depends_on:
+      db:
+        condition: service_healthy
+    restart: unless-stopped
+    environment:
+      PG_META_PORT: 8080
+      PG_META_DB_HOST: db
+      PG_META_DB_PORT: 5432
+      PG_META_DB_NAME: postgres
+      PG_META_DB_USER: supabase_admin
+      PG_META_DB_PASSWORD: ${POSTGRES_PASSWORD}
+
+volumes:
+  supabase-db-data:

docker-compose.yml

@@ -0,0 +1,22 @@
+version: '3.8'
+
+# Simple deployment - Uses external Supabase (hosted or self-hosted separately)
+# For full self-hosted setup with Supabase included, use docker-compose.selfhosted.yml
+
+services:
+  deckerr:
+    build:
+      context: .
+      dockerfile: Dockerfile
+      args:
+        - VITE_SUPABASE_URL=${VITE_SUPABASE_URL}
+        - VITE_SUPABASE_ANON_KEY=${VITE_SUPABASE_ANON_KEY}
+    container_name: deckerr
+    ports:
+      - "${PORT:-3000}:80"
+    restart: unless-stopped
+    healthcheck:
+      test: ["CMD", "wget", "--no-verbose", "--tries=1", "--spider", "http://localhost:80"]
+      interval: 30s
+      timeout: 10s
+      retries: 3

docker/kong.yml

@@ -0,0 +1,138 @@
+_format_version: "2.1"
+_transform: true
+
+###
+### Consumers / Users
+###
+consumers:
+  - username: DASHBOARD
+  - username: anon
+    keyauth_credentials:
+      - key: ${SUPABASE_ANON_KEY}
+  - username: service_role
+    keyauth_credentials:
+      - key: ${SUPABASE_SERVICE_KEY}
+
+###
+### Access Control Lists
+###
+acls:
+  - consumer: anon
+    group: anon
+  - consumer: service_role
+    group: admin
+
+###
+### API Routes
+###
+services:
+  ## Open Auth routes
+  - name: auth-v1-open
+    url: http://auth:9999/verify
+    routes:
+      - name: auth-v1-open
+        strip_path: true
+        paths:
+          - /auth/v1/verify
+    plugins:
+      - name: cors
+  - name: auth-v1-open-callback
+    url: http://auth:9999/callback
+    routes:
+      - name: auth-v1-open-callback
+        strip_path: true
+        paths:
+          - /auth/v1/callback
+    plugins:
+      - name: cors
+  - name: auth-v1-open-authorize
+    url: http://auth:9999/authorize
+    routes:
+      - name: auth-v1-open-authorize
+        strip_path: true
+        paths:
+          - /auth/v1/authorize
+    plugins:
+      - name: cors
+
+  ## Secure Auth routes
+  - name: auth-v1
+    _comment: "GoTrue: /auth/v1/* -> http://auth:9999/*"
+    url: http://auth:9999/
+    routes:
+      - name: auth-v1-all
+        strip_path: true
+        paths:
+          - /auth/v1/
+    plugins:
+      - name: cors
+      - name: key-auth
+        config:
+          hide_credentials: false
+      - name: acl
+        config:
+          hide_groups_header: true
+          allow:
+            - admin
+            - anon
+
+  ## Secure REST routes
+  - name: rest-v1
+    _comment: "PostgREST: /rest/v1/* -> http://rest:3000/*"
+    url: http://rest:3000/
+    routes:
+      - name: rest-v1-all
+        strip_path: true
+        paths:
+          - /rest/v1/
+    plugins:
+      - name: cors
+      - name: key-auth
+        config:
+          hide_credentials: false
+      - name: acl
+        config:
+          hide_groups_header: true
+          allow:
+            - admin
+            - anon
+
+  ## Realtime routes
+  - name: realtime-v1
+    _comment: "Realtime: /realtime/v1/* -> ws://realtime:4000/socket/*"
+    url: http://realtime:4000/socket/
+    routes:
+      - name: realtime-v1-all
+        strip_path: true
+        paths:
+          - /realtime/v1/
+    plugins:
+      - name: cors
+      - name: key-auth
+        config:
+          hide_credentials: false
+      - name: acl
+        config:
+          hide_groups_header: true
+          allow:
+            - admin
+            - anon
+
+  ## Meta routes (for Supabase Studio)
+  - name: meta
+    _comment: "pg-meta: /pg/* -> http://meta:8080/*"
+    url: http://meta:8080/
+    routes:
+      - name: meta-all
+        strip_path: true
+        paths:
+          - /pg/
+    plugins:
+      - name: key-auth
+        config:
+          hide_credentials: false
+      - name: acl
+        config:
+          hide_groups_header: true
+          allow:
+            - admin

index.html

@@ -2,12 +2,31 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <link rel="icon" type="image/svg+xml" href="/icon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+
+    <!-- Primary Meta Tags -->
+    <title>Deckerr - Card Deck Manager</title>
+    <meta name="title" content="Deckerr - Card Deck Manager" />
+    <meta name="description" content="Manage your trading card game decks on the go. Build, organize, and track your card collection." />
+
+    <!-- PWA Meta Tags -->
+    <meta name="theme-color" content="#0f172a" />
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    <meta name="apple-mobile-web-app-title" content="Deckerr" />
+
+    <!-- Apple Touch Icons -->
+    <link rel="apple-touch-icon" href="/icon.svg" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/icon.svg" />
+
+    <!-- MS Application -->
+    <meta name="msapplication-TileColor" content="#0f172a" />
+    <meta name="msapplication-config" content="/browserconfig.xml" />
   </head>
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
-</html>
+</html>

nginx.conf

@@ -0,0 +1,29 @@
+server {
+    listen 80;
+    server_name localhost;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # Gzip compression
+    gzip on;
+    gzip_vary on;
+    gzip_min_length 1024;
+    gzip_proxied expired no-cache no-store private auth;
+    gzip_types text/plain text/css text/xml text/javascript application/x-javascript application/xml application/javascript application/json;
+
+    # Cache static assets
+    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
+        expires 1y;
+        add_header Cache-Control "public, immutable";
+    }
+
+    # Handle SPA routing - serve index.html for all routes
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    # Security headers
+    add_header X-Frame-Options "SAMEORIGIN" always;
+    add_header X-Content-Type-Options "nosniff" always;
+    add_header X-XSS-Protection "1; mode=block" always;
+}

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "vite-react-typescript-starter",
+  "name": "deckerr",
   "private": true,
-  "version": "0.0.0",
+  "version": "1.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -29,6 +29,7 @@
     "tailwindcss": "^3.4.1",
     "typescript": "^5.5.3",
     "typescript-eslint": "^8.3.0",
-    "vite": "^5.4.2"
+    "vite": "^5.4.2",
+    "vite-plugin-pwa": "^1.1.0"
   }
-}
+}

public/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+  <msapplication>
+    <tile>
+      <square150x150logo src="/icon.svg"/>
+      <TileColor>#0f172a</TileColor>
+    </tile>
+  </msapplication>
+</browserconfig>

public/icon.svg

@@ -0,0 +1,23 @@
+<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+  <!-- Background -->
+  <rect width="512" height="512" fill="#0f172a" rx="128"/>
+
+  <!-- Card stack effect - back card -->
+  <rect x="120" y="130" width="240" height="320" rx="16" fill="#1e293b" transform="rotate(-8 240 290)"/>
+
+  <!-- Card stack effect - middle card -->
+  <rect x="120" y="130" width="240" height="320" rx="16" fill="#334155" transform="rotate(-4 240 290)"/>
+
+  <!-- Front card -->
+  <rect x="120" y="130" width="240" height="320" rx="16" fill="#475569"/>
+  <rect x="135" y="145" width="210" height="290" rx="12" fill="#1e293b"/>
+
+  <!-- Card details/design -->
+  <circle cx="240" cy="200" r="40" fill="#3b82f6" opacity="0.6"/>
+  <rect x="160" y="280" width="160" height="12" rx="6" fill="#3b82f6" opacity="0.8"/>
+  <rect x="160" y="310" width="120" height="12" rx="6" fill="#3b82f6" opacity="0.6"/>
+  <rect x="160" y="340" width="140" height="12" rx="6" fill="#3b82f6" opacity="0.4"/>
+
+  <!-- "D" Letter overlay -->
+  <text x="256" y="310" font-family="Arial, sans-serif" font-size="160" font-weight="bold" fill="#3b82f6" text-anchor="middle" opacity="0.15">D</text>
+</svg>

public/manifest.json

@@ -0,0 +1,111 @@
+{
+  "name": "Deckerr - Card Deck Manager",
+  "short_name": "Deckerr",
+  "description": "Manage your trading card game decks on the go",
+  "theme_color": "#0f172a",
+  "background_color": "#0f172a",
+  "display": "standalone",
+  "orientation": "portrait",
+  "scope": "/",
+  "start_url": "/",
+  "icons": [
+    {
+      "src": "/icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/icon-128x128.png",
+      "sizes": "128x128",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/icon-152x152.png",
+      "sizes": "152x152",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/icon-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/icon-maskable-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/icon-maskable-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "screenshots": [
+    {
+      "src": "/screenshot-mobile-1.png",
+      "sizes": "540x720",
+      "type": "image/png",
+      "form_factor": "narrow"
+    },
+    {
+      "src": "/screenshot-desktop-1.png",
+      "sizes": "1280x720",
+      "type": "image/png",
+      "form_factor": "wide"
+    }
+  ],
+  "categories": ["games", "utilities"],
+  "shortcuts": [
+    {
+      "name": "My Decks",
+      "short_name": "Decks",
+      "description": "View your deck collection",
+      "url": "/?page=home",
+      "icons": [{ "src": "/icon-192x192.png", "sizes": "192x192" }]
+    },
+    {
+      "name": "Search Cards",
+      "short_name": "Search",
+      "description": "Search for cards",
+      "url": "/?page=search",
+      "icons": [{ "src": "/icon-192x192.png", "sizes": "192x192" }]
+    },
+    {
+      "name": "Life Counter",
+      "short_name": "Life",
+      "description": "Track life totals",
+      "url": "/?page=life-counter",
+      "icons": [{ "src": "/icon-192x192.png", "sizes": "192x192" }]
+    }
+  ]
+}

src/App.tsx

@@ -1,91 +1,103 @@
 import React, { useState } from 'react';
-    import DeckManager from './components/DeckManager';
-    import DeckList from './components/DeckList';
-    import LoginForm from './components/LoginForm';
-    import Navigation from './components/Navigation';
-    import Collection from './components/Collection';
-    import DeckEditor from './components/DeckEditor';
-    import Profile from './components/Profile';
-    import CardSearch from './components/CardSearch';
-    import LifeCounter from './components/LifeCounter';
-    import { AuthProvider, useAuth } from './contexts/AuthContext';
+import DeckManager from './components/DeckManager';
+import DeckList from './components/DeckList';
+import LoginForm from './components/LoginForm';
+import Navigation from './components/Navigation';
+import Collection from './components/Collection';
+import DeckEditor from './components/DeckEditor';
+import CardSearch from './components/CardSearch';
+import LifeCounter from './components/LifeCounter';
+import Community from './components/Community';
+import PWAInstallPrompt from './components/PWAInstallPrompt';
+import { AuthProvider, useAuth } from './contexts/AuthContext';
+import { ToastProvider } from './contexts/ToastContext';
 
-    type Page = 'home' | 'deck' | 'login' | 'collection' | 'edit-deck' | 'profile' | 'search' | 'life-counter';
+type Page = 'home' | 'deck' | 'login' | 'collection' | 'edit-deck' | 'search' | 'life-counter' | 'community';
 
-    function AppContent() {
-      const [currentPage, setCurrentPage] = useState<Page>('home');
-      const [selectedDeckId, setSelectedDeckId] = useState<string | null>(null);
-      const { user, loading } = useAuth();
+function AppContent() {
+  const [currentPage, setCurrentPage] = useState<Page>('home');
+  const [selectedDeckId, setSelectedDeckId] = useState<string | null>(null);
+  const { user, loading } = useAuth();
 
-      if (loading) {
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-gray-900 flex items-center justify-center">
+        <div className="loading-spinner h-32 w-32"></div>
+      </div>
+    );
+  }
+
+  if (!user && currentPage !== 'login') {
+    return <LoginForm />;
+  }
+
+  const handleDeckEdit = (deckId: string) => {
+    setSelectedDeckId(deckId);
+    setCurrentPage('edit-deck');
+  };
+
+  const renderPage = () => {
+    switch (currentPage) {
+      case 'home':
         return (
-          <div className="min-h-screen bg-gray-900 flex items-center justify-center">
-            <div className="loading-spinner h-32 w-32"></div>
+          <div className="relative bg-gray-900 text-white p-3 sm:p-6 animate-fade-in md:min-h-screen">
+            <div className="max-w-7xl mx-auto">
+              <h1 className="text-2xl md:text-3xl font-bold mb-4 md:mb-6 animate-slide-in-left">My Decks</h1>
+              <DeckList
+                onDeckEdit={handleDeckEdit}
+                onCreateDeck={() => setCurrentPage('deck')}
+              />
+            </div>
           </div>
         );
-      }
-
-      if (!user && currentPage !== 'login') {
+      case 'deck':
+        return <DeckManager />;
+      case 'edit-deck':
+        return selectedDeckId ? (
+          <DeckEditor
+            deckId={selectedDeckId}
+            onClose={() => {
+              setSelectedDeckId(null);
+              setCurrentPage('home');
+            }}
+          />
+        ) : null;
+      case 'collection':
+        return <Collection />;
+      case 'search':
+        return <CardSearch />;
+      case 'life-counter':
+        return <LifeCounter />;
+      case 'community':
+        return <Community />;
+      case 'login':
         return <LoginForm />;
-      }
+      default:
+        return null;
+    }
+  };
 
-      const handleDeckEdit = (deckId: string) => {
-        setSelectedDeckId(deckId);
-        setCurrentPage('edit-deck');
-      };
-
-      const renderPage = () => {
-        switch (currentPage) {
-          case 'home':
-            return (
-              <div className="min-h-screen bg-gray-900 text-white p-6 animate-fade-in">
-                <div className="max-w-7xl mx-auto">
-                  <h1 className="text-3xl font-bold mb-6 animate-slide-in-left">My Decks</h1>
-                  <DeckList onDeckEdit={handleDeckEdit} />
-                </div>
-              </div>
-            );
-          case 'deck':
-            return <DeckManager />;
-          case 'edit-deck':
-            return selectedDeckId ? (
-              <DeckEditor 
-                deckId={selectedDeckId} 
-                onClose={() => {
-                  setSelectedDeckId(null);
-                  setCurrentPage('home');
-                }}
-              />
-            ) : null;
-          case 'collection':
-            return <Collection />;
-          case 'profile':
-            return <Profile />;
-          case 'search':
-            return <CardSearch />;
-          case 'life-counter':
-            return <LifeCounter />;
-          case 'login':
-            return <LoginForm />;
-          default:
-            return null;
-        }
-      };
-
-      return (
-        <div className="min-h-screen bg-gray-900">
-          <Navigation currentPage={currentPage} setCurrentPage={setCurrentPage} />
+  return (
+    <div className="min-h-screen bg-gray-900 flex flex-col">
+      <Navigation currentPage={currentPage} setCurrentPage={setCurrentPage} />
+      <main className="relative flex-1 overflow-y-auto">
+        <div className="relative min-h-full md:min-h-0 pt-0 md:pt-16 pb-20 md:pb-0">
           {renderPage()}
         </div>
-      );
-    }
+      </main>
+      <PWAInstallPrompt />
+    </div>
+  );
+}
 
-    function App() {
-      return (
-        <AuthProvider>
-          <AppContent />
-        </AuthProvider>
-      );
-    }
+function App() {
+  return (
+    <AuthProvider>
+      <ToastProvider>
+        <AppContent />
+      </ToastProvider>
+    </AuthProvider>
+  );
+}
 
-    export default App;
+export default App;

src/components/CardSearch.tsx

@@ -4,6 +4,7 @@ import { searchCards, getUserCollection, addCardToCollection } from '../services
 import { Card } from '../types';
 import { useAuth } from '../contexts/AuthContext';
 import MagicCard from './MagicCard';
+import { getManaIconPath } from './ManaCost';
 
 const CardSearch = () => {
   const { user } = useAuth();
@@ -93,6 +94,14 @@ const CardSearch = () => {
     return card.image_uris?.normal || card.image_uris?.small || card.card_faces?.[0]?.image_uris?.normal;
   };
 
+  // Get card art crop for current face
+  const getCardArtCrop = (card: Card, faceIndex: number = 0) => {
+    if (isDoubleFaced(card) && card.card_faces) {
+      return card.card_faces[faceIndex]?.image_uris?.art_crop || card.card_faces[faceIndex]?.image_uris?.normal;
+    }
+    return card.image_uris?.art_crop || card.image_uris?.normal || card.card_faces?.[0]?.image_uris?.art_crop;
+  };
+
   // Add card to collection
   const handleAddCardToCollection = async (cardId: string) => {
     if (!user) {
@@ -192,9 +201,9 @@ const CardSearch = () => {
   };
 
   return (
-    <div className="min-h-screen bg-gray-900 text-white p-6">
+    <div className="relative bg-gray-900 text-white p-3 sm:p-6 md:min-h-screen">
       <div className="max-w-7xl mx-auto">
-        <h1 className="text-3xl font-bold mb-6">Card Search</h1>
+        <h1 className="text-2xl md:text-3xl font-bold mb-4 md:mb-6">Card Search</h1>
         <form onSubmit={handleSearch} className="mb-8 space-y-4">
           {/* Card Details */}
           <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
@@ -219,7 +228,7 @@ const CardSearch = () => {
               className="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white"
               placeholder="Rules Text (~ for card name)"
             />
-            <div className="flex gap-2">
+            <div className="flex flex-col sm:flex-row gap-2">
               <input
                 type="text"
                 value={typeLine}
@@ -259,9 +268,11 @@ const CardSearch = () => {
                       onChange={() => setColors({ ...colors, [color]: !active })}
                       className="rounded border-gray-700 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                     />
-                    <span style={{ fontSize: '1.5em' }}>
-                      {color === 'W' ? '⚪' : color === 'U' ? '🔵' : color === 'B' ? '⚫' : color === 'R' ? '🔴' : color === 'G' ? '🟢' : '🟤'}
-                    </span>
+                    {getManaIconPath(color) ? (
+                      <img src={getManaIconPath(color)!} alt={color} className="w-6 h-6" />
+                    ) : (
+                      <span className="w-6 h-6 flex items-center justify-center bg-gray-500 text-white font-bold rounded-full text-sm">{color}</span>
+                    )}
                   </label>
                 ))}
               </div>
@@ -285,9 +296,11 @@ const CardSearch = () => {
                       onChange={() => setCommanderColors({ ...commanderColors, [color]: !active })}
                       className="rounded border-gray-700 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                     />
-                    <span style={{ fontSize: '1.5em' }}>
-                      {color === 'W' ? '⚪' : color === 'U' ? '🔵' : color === 'B' ? '⚫' : color === 'R' ? '🔴' : color === 'G' ? '🟢' : '🟤'}
-                    </span>
+                    {getManaIconPath(color) ? (
+                      <img src={getManaIconPath(color)!} alt={color} className="w-6 h-6" />
+                    ) : (
+                      <span className="w-6 h-6 flex items-center justify-center bg-gray-500 text-white font-bold rounded-full text-sm">{color}</span>
+                    )}
                   </label>
                 ))}
               </div>
@@ -295,25 +308,32 @@ const CardSearch = () => {
           </div>
 
           {/* Mana Cost */}
-          <div className="grid grid-cols-3 md:grid-cols-6 gap-2">
-            {Object.entries(manaCost).map(([color, count]) => (
-              <div key={color} className="flex items-center space-x-2">
-                <span style={{ fontSize: '1.5em' }}>
-                  {color === 'W' ? '⚪' : color === 'U' ? '🔵' : color === 'B' ? '⚫' : color === 'R' ? '🔴' : color === 'G' ? '🟢' : '🟤'}
-                </span>
-                <input
-                  type="number"
-                  value={count}
-                  onChange={(e) => setManaCost({ ...manaCost, [color]: parseInt(e.target.value) })}
-                  className="w-16 px-2 py-1 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white"
-                  min="0"
-                />
-              </div>
-            ))}
+          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-2">
+            {Object.entries(manaCost).map(([color, count]) => {
+              const iconPath = getManaIconPath(color);
+              return (
+                <div key={color} className="flex items-center space-x-2">
+                  {iconPath ? (
+                    <img src={iconPath} alt={color} className="w-6 h-6 md:w-8 md:h-8" />
+                  ) : (
+                    <span className="w-6 h-6 md:w-8 md:h-8 flex items-center justify-center bg-gray-500 text-white font-bold rounded-full text-sm">
+                      {color}
+                    </span>
+                  )}
+                  <input
+                    type="number"
+                    value={count}
+                    onChange={(e) => setManaCost({ ...manaCost, [color]: parseInt(e.target.value) })}
+                    className="w-14 sm:w-16 px-2 py-2 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white"
+                    min="0"
+                  />
+                </div>
+              );
+            })}
           </div>
 
           {/* Stats */}
-          <div className="flex gap-2">
+          <div className="flex flex-col sm:flex-row gap-2">
             <select
               value={manaValueComparison}
               onChange={(e) => setManaValueComparison(e.target.value)}
@@ -354,7 +374,7 @@ const CardSearch = () => {
           </div>
 
           {/* Formats */}
-          <div className="flex gap-2">
+          <div className="flex flex-col sm:flex-row gap-2">
             <select
               value={format}
               onChange={(e) => setFormat(e.target.value)}
@@ -396,7 +416,7 @@ const CardSearch = () => {
           </div>
 
           {/* Sets */}
-          <div className="flex gap-2">
+          <div className="flex flex-col sm:flex-row gap-2">
             <input
               type="text"
               value={set}
@@ -432,7 +452,7 @@ const CardSearch = () => {
           </div>
 
           {/* Criteria */}
-          <div className="flex gap-2">
+          <div className="flex flex-col sm:flex-row gap-2">
             <input
               type="text"
               value={criteria}
@@ -459,7 +479,7 @@ const CardSearch = () => {
           </div>
 
           {/* Prices */}
-          <div className="flex gap-2">
+          <div className="flex flex-col sm:flex-row gap-2">
             <select
               value={currency}
               onChange={(e) => setCurrency(e.target.value)}
@@ -586,7 +606,7 @@ const CardSearch = () => {
 
           <button
             type="submit"
-            className="mt-4 px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg"
+            className="mt-4 w-full sm:w-auto min-h-[44px] px-6 py-3 bg-blue-600 hover:bg-blue-700 rounded-lg font-medium text-base"
           >
             Search
           </button>
@@ -605,83 +625,147 @@ const CardSearch = () => {
         )}
 
         {searchResults && searchResults.length > 0 && (
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
-            {searchResults.map((card) => {
-              const currentFaceIndex = getCurrentFaceIndex(card.id);
-              const isMultiFaced = isDoubleFaced(card);
-              const inCollection = userCollection.get(card.id) || 0;
-              const isAddingThisCard = addingCardId === card.id;
+          <>
+            {/* Mobile: Horizontal list layout */}
+            <div className="flex flex-col gap-2 sm:hidden">
+              {searchResults.map((card) => {
+                const currentFaceIndex = getCurrentFaceIndex(card.id);
+                const isMultiFaced = isDoubleFaced(card);
+                const inCollection = userCollection.get(card.id) || 0;
+                const isAddingThisCard = addingCardId === card.id;
 
-              const displayName = isMultiFaced && card.card_faces
-                ? card.card_faces[currentFaceIndex]?.name || card.name
-                : card.name;
+                const displayName = isMultiFaced && card.card_faces
+                  ? card.card_faces[currentFaceIndex]?.name || card.name
+                  : card.name;
 
-              return (
-                <div key={card.id} className="bg-gray-800 rounded-lg overflow-hidden hover:ring-2 hover:ring-blue-500 transition-all">
-                  <div className="relative">
-                    {getCardImageUri(card, currentFaceIndex) ? (
+                return (
+                  <div key={card.id} className="flex bg-gray-800 rounded-lg overflow-hidden">
+                    {/* Card art crop */}
+                    <div className="relative w-16 h-16 flex-shrink-0">
                       <img
-                        src={getCardImageUri(card, currentFaceIndex)}
+                        src={getCardArtCrop(card, currentFaceIndex)}
                         alt={displayName}
-                        className="w-full h-auto"
+                        className="w-full h-full object-cover rounded-l-lg"
                       />
-                    ) : (
-                      <MagicCard card={card} />
-                    )}
-                    {isMultiFaced && (
+                      {isMultiFaced && (
+                        <button
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            toggleCardFace(card.id, card.card_faces!.length);
+                          }}
+                          className="absolute bottom-0.5 right-0.5 bg-purple-600 text-white p-0.5 rounded-full"
+                        >
+                          <RefreshCw size={10} />
+                        </button>
+                      )}
+                    </div>
+                    {/* Info */}
+                    <div className="flex-1 p-2 flex flex-col justify-center min-w-0">
+                      <h3 className="font-bold text-sm truncate">{displayName}</h3>
+                      <div className="flex items-center gap-2 text-xs text-gray-400">
+                        {card.prices?.usd && <span>${card.prices.usd}</span>}
+                        {inCollection > 0 && (
+                          <span className="text-green-400 flex items-center gap-0.5">
+                            <CheckCircle size={10} />
+                            x{inCollection}
+                          </span>
+                        )}
+                      </div>
+                    </div>
+                    {/* Action button */}
+                    <div className="flex items-center p-2">
                       <button
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          toggleCardFace(card.id, card.card_faces!.length);
-                        }}
-                        className="absolute bottom-2 right-2 bg-purple-600 hover:bg-purple-700 text-white p-2 rounded-full shadow-lg transition-all"
-                        title="Flip card"
+                        onClick={() => handleAddCardToCollection(card.id)}
+                        disabled={isAddingThisCard}
+                        className="p-2.5 bg-green-600 active:bg-green-700 disabled:bg-gray-600 rounded-lg"
+                        title="Add to collection"
                       >
-                        <RefreshCw size={16} />
+                        {isAddingThisCard ? (
+                          <Loader2 className="animate-spin" size={18} />
+                        ) : (
+                          <PackagePlus size={18} />
+                        )}
                       </button>
-                    )}
+                    </div>
                   </div>
-                  <div className="p-4">
-                    <div className="flex items-center justify-between mb-2">
-                      <h3 className="font-bold">{displayName}</h3>
+                );
+              })}
+            </div>
+
+            {/* Desktop: Grid layout */}
+            <div className="hidden sm:grid sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-3">
+              {searchResults.map((card) => {
+                const currentFaceIndex = getCurrentFaceIndex(card.id);
+                const isMultiFaced = isDoubleFaced(card);
+                const inCollection = userCollection.get(card.id) || 0;
+                const isAddingThisCard = addingCardId === card.id;
+
+                const displayName = isMultiFaced && card.card_faces
+                  ? card.card_faces[currentFaceIndex]?.name || card.name
+                  : card.name;
+
+                return (
+                  <div key={card.id} className="bg-gray-800 rounded-lg overflow-hidden hover:ring-2 hover:ring-blue-500 transition-all">
+                    <div className="relative">
+                      {getCardImageUri(card, currentFaceIndex) ? (
+                        <img
+                          src={getCardImageUri(card, currentFaceIndex)}
+                          alt={displayName}
+                          className="w-full h-auto"
+                        />
+                      ) : (
+                        <MagicCard card={card} />
+                      )}
+                      {isMultiFaced && (
+                        <button
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            toggleCardFace(card.id, card.card_faces!.length);
+                          }}
+                          className="absolute bottom-2 right-2 bg-purple-600 hover:bg-purple-700 text-white p-2 rounded-full shadow-lg transition-all"
+                          title="Flip card"
+                        >
+                          <RefreshCw size={16} />
+                        </button>
+                      )}
                       {inCollection > 0 && (
-                        <span className="text-xs bg-green-600 px-2 py-0.5 rounded-full flex items-center gap-1">
+                        <span className="absolute top-1 right-1 text-xs bg-green-600 px-2 py-0.5 rounded-full flex items-center gap-1">
                           <CheckCircle size={12} />
                           x{inCollection}
                         </span>
                       )}
                     </div>
-                    <p className="text-gray-400 text-sm mb-3">
-                      {isMultiFaced && card.card_faces
-                        ? card.card_faces[currentFaceIndex]?.type_line || card.type_line
-                        : card.type_line}
-                    </p>
-                    {card.prices?.usd && (
-                      <div className="text-sm text-gray-400 mb-2">${card.prices.usd}</div>
-                    )}
-                    <button
-                      onClick={() => handleAddCardToCollection(card.id)}
-                      disabled={isAddingThisCard}
-                      className="w-full px-4 py-2 bg-green-600 hover:bg-green-700 disabled:bg-gray-600 disabled:cursor-not-allowed rounded-lg flex items-center justify-center gap-2"
-                      title="Add to collection"
-                    >
-                      {isAddingThisCard ? (
-                        <>
-                          <Loader2 className="animate-spin" size={20} />
-                          Adding...
-                        </>
-                      ) : (
-                        <>
-                          <PackagePlus size={20} />
-                          Add to Collection
-                        </>
+                    <div className="p-3">
+                      <h3 className="font-bold text-sm truncate mb-1">{displayName}</h3>
+                      <p className="text-gray-400 text-xs truncate mb-2">
+                        {isMultiFaced && card.card_faces
+                          ? card.card_faces[currentFaceIndex]?.type_line || card.type_line
+                          : card.type_line}
+                      </p>
+                      {card.prices?.usd && (
+                        <div className="text-xs text-gray-400 mb-2">${card.prices.usd}</div>
                       )}
-                    </button>
+                      <button
+                        onClick={() => handleAddCardToCollection(card.id)}
+                        disabled={isAddingThisCard}
+                        className="w-full px-3 py-2 bg-green-600 hover:bg-green-700 disabled:bg-gray-600 disabled:cursor-not-allowed rounded-lg flex items-center justify-center gap-2 text-sm"
+                        title="Add to collection"
+                      >
+                        {isAddingThisCard ? (
+                          <Loader2 className="animate-spin" size={16} />
+                        ) : (
+                          <>
+                            <PackagePlus size={16} />
+                            Add
+                          </>
+                        )}
+                      </button>
+                    </div>
                   </div>
-                </div>
-              );
-            })}
-          </div>
+                );
+              })}
+            </div>
+          </>
         )}
       </div>
 
@@ -690,7 +774,7 @@ const CardSearch = () => {
         <div
           className={`fixed bottom-4 right-4 p-4 rounded-lg shadow-lg transition-all duration-300 ${
             snackbar.type === 'success' ? 'bg-green-500' : 'bg-red-500'
-          } text-white z-50`}
+          } text-white z-[140]`}
         >
           <div className="flex items-center justify-between">
             <div className="flex items-center">

src/components/Collection.tsx

@@ -189,9 +189,9 @@ export default function Collection() {
   };
 
   return (
-    <div className="min-h-screen bg-gray-900 text-white p-6">
+    <div className="relative bg-gray-900 text-white p-3 sm:p-6 md:min-h-screen">
       <div className="max-w-7xl mx-auto">
-        <h1 className="text-3xl font-bold mb-6">My Collection</h1>
+        <h1 className="text-2xl md:text-3xl font-bold mb-4 md:mb-6">My Collection</h1>
 
         {/* Search within collection */}
         <div className="mb-8">
@@ -228,7 +228,7 @@ export default function Collection() {
               <p className="text-sm">Try a different search term</p>
             </div>
           ) : (
-            <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8 xl:grid-cols-10 gap-3">
+            <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8 xl:grid-cols-10 gap-1.5 sm:gap-2">
               {filteredCollection.map(({ card, quantity }) => {
                 const currentFaceIndex = getCurrentFaceIndex(card.id);
                 const isMultiFaced = isDoubleFaced(card);
@@ -252,7 +252,7 @@ export default function Collection() {
                         className="w-full h-auto"
                       />
                       {/* Quantity badge */}
-                      <div className="absolute top-1 right-1 bg-blue-600 text-white text-xs font-bold px-2 py-1 rounded-full shadow-lg">
+                      <div className="absolute top-1 right-1 bg-blue-600 text-white text-xs sm:text-sm font-bold px-2 py-1 rounded-full shadow-lg">
                         x{quantity}
                       </div>
                       {/* Flip button for double-faced cards */}
@@ -295,7 +295,7 @@ export default function Collection() {
         const displayOracleText = currentFace?.oracle_text || hoveredCard.oracle_text;
 
         return (
-          <div className="fixed top-1/2 right-8 transform -translate-y-1/2 z-40 pointer-events-none">
+          <div className="hidden lg:block fixed top-1/2 right-8 transform -translate-y-1/2 z-30 pointer-events-none">
             <div className="bg-gray-800 rounded-lg shadow-2xl p-4 max-w-md">
               <div className="relative">
                 <img
@@ -344,23 +344,25 @@ export default function Collection() {
           <>
             {/* Backdrop */}
             <div
-              className="fixed inset-0 bg-black bg-opacity-50 z-40 transition-opacity duration-300"
+              className="fixed inset-0 bg-black bg-opacity-50 z-[110] transition-opacity duration-300"
               onClick={() => setSelectedCard(null)}
             />
 
             {/* Sliding Panel */}
-            <div className="fixed top-0 right-0 h-full w-full md:w-96 bg-gray-800 shadow-2xl z-50 overflow-y-auto animate-slide-in-right">
-              <div className="p-6">
-                {/* Close button */}
-                <button
-                  onClick={() => setSelectedCard(null)}
-                  className="absolute top-4 right-4 text-gray-400 hover:text-white transition-colors"
-                >
-                  <X size={24} />
-                </button>
+            <div className="fixed top-0 right-0 h-full w-full md:w-96 bg-gray-800 shadow-2xl z-[120] overflow-y-auto animate-slide-in-right">
+              {/* Close button - fixed position, stays visible when scrolling */}
+              <button
+                onClick={() => setSelectedCard(null)}
+                className="fixed top-4 right-4 bg-gray-700 hover:bg-gray-600 text-white p-2 md:p-1.5 rounded-full transition-colors z-[130] shadow-lg"
+                aria-label="Close"
+              >
+                <X size={24} className="md:w-5 md:h-5" />
+              </button>
+
+              <div className="p-4 sm:p-6">
 
                 {/* Card Image */}
-                <div className="relative mb-4">
+                <div className="relative mb-4 max-w-sm mx-auto">
                   <img
                     src={getCardLargeImageUri(selectedCard.card, currentFaceIndex)}
                     alt={displayName}
@@ -385,8 +387,8 @@ export default function Collection() {
                 {/* Card Info */}
                 <div className="space-y-4">
                   <div>
-                    <h2 className="text-2xl font-bold text-white mb-2">{displayName}</h2>
-                    <p className="text-sm text-gray-400">{displayTypeLine}</p>
+                    <h2 className="text-xl md:text-2xl font-bold text-white mb-2">{displayName}</h2>
+                    <p className="text-xs sm:text-sm text-gray-400">{displayTypeLine}</p>
                   </div>
 
                   {displayOracleText && (
@@ -442,7 +444,7 @@ export default function Collection() {
                         });
                       }}
                       disabled={isUpdating}
-                      className="w-full mt-3 px-4 py-2 bg-red-600 hover:bg-red-700 disabled:bg-gray-600 disabled:cursor-not-allowed text-white rounded-lg flex items-center justify-center gap-2 transition-colors"
+                      className="w-full mt-3 min-h-[44px] px-4 py-2 bg-red-600 hover:bg-red-700 disabled:bg-gray-600 disabled:cursor-not-allowed text-white rounded-lg flex items-center justify-center gap-2 transition-colors"
                     >
                       <Trash2 size={20} />
                       Remove from Collection
@@ -476,7 +478,7 @@ export default function Collection() {
         <div
           className={`fixed bottom-4 right-4 p-4 rounded-lg shadow-lg transition-all duration-300 ${
             snackbar.type === 'success' ? 'bg-green-500' : 'bg-red-500'
-          } text-white z-50`}
+          } text-white z-[140]`}
         >
           <div className="flex items-center justify-between">
             <div className="flex items-center">

src/components/Community.tsx

@@ -0,0 +1,983 @@
+import React, { useState, useEffect } from 'react';
+import { Search, Globe, Users, Eye, ArrowLeftRight, Loader2, Clock, History, UserPlus, UserMinus, Check, X, Send, Settings, Save, ChevronLeft } from 'lucide-react';
+import { useAuth } from '../contexts/AuthContext';
+import { useToast } from '../contexts/ToastContext';
+import { supabase } from '../lib/supabase';
+import {
+  getFriends,
+  getPendingRequests,
+  getSentRequests,
+  searchUsers,
+  sendFriendRequest,
+  acceptFriendRequest,
+  declineFriendRequest,
+  removeFriend,
+  Friend,
+} from '../services/friendsService';
+import {
+  getTrades,
+  getTradeHistory,
+  acceptTrade,
+  declineTrade,
+  cancelTrade,
+  Trade,
+  TradeItem,
+} from '../services/tradesService';
+import { getUserCollection, getCardsByIds } from '../services/api';
+import { Card } from '../types';
+import TradeCreator from './TradeCreator';
+import TradeDetail from './TradeDetail';
+import ConfirmModal from './ConfirmModal';
+
+interface UserProfile {
+  id: string;
+  username: string | null;
+  collection_visibility: 'public' | 'friends' | 'private' | null;
+}
+
+interface CollectionItem {
+  card: Card;
+  quantity: number;
+}
+
+type Tab = 'browse' | 'friends' | 'trades' | 'profile';
+type FriendsSubTab = 'list' | 'requests' | 'search';
+type TradesSubTab = 'pending' | 'history';
+
+const VISIBILITY_OPTIONS = [
+  { value: 'public', label: 'Public', description: 'Anyone can view' },
+  { value: 'friends', label: 'Friends', description: 'Friends only' },
+  { value: 'private', label: 'Private', description: 'Only you' },
+] as const;
+
+export default function Community() {
+  const { user } = useAuth();
+  const toast = useToast();
+  const [activeTab, setActiveTab] = useState<Tab>('browse');
+  const [loading, setLoading] = useState(true);
+
+  // Browse state
+  const [browseSearch, setBrowseSearch] = useState('');
+  const [publicUsers, setPublicUsers] = useState<UserProfile[]>([]);
+  const [selectedUser, setSelectedUser] = useState<UserProfile | null>(null);
+  const [selectedUserCollection, setSelectedUserCollection] = useState<CollectionItem[]>([]);
+  const [loadingCollection, setLoadingCollection] = useState(false);
+  const [showTradeCreator, setShowTradeCreator] = useState(false);
+  const [userCollectionSearch, setUserCollectionSearch] = useState('');
+
+  // Friends state
+  const [friendsSubTab, setFriendsSubTab] = useState<FriendsSubTab>('list');
+  const [friends, setFriends] = useState<Friend[]>([]);
+  const [pendingRequests, setPendingRequests] = useState<Friend[]>([]);
+  const [sentRequests, setSentRequests] = useState<Friend[]>([]);
+  const [friendSearch, setFriendSearch] = useState('');
+  const [friendSearchResults, setFriendSearchResults] = useState<{ id: string; username: string | null }[]>([]);
+  const [searchingFriends, setSearchingFriends] = useState(false);
+
+  // Trades state
+  const [tradesSubTab, setTradesSubTab] = useState<TradesSubTab>('pending');
+  const [pendingTrades, setPendingTrades] = useState<Trade[]>([]);
+  const [tradeHistory, setTradeHistory] = useState<Trade[]>([]);
+  const [tradeCardDetails, setTradeCardDetails] = useState<Map<string, Card>>(new Map());
+  const [processingTradeId, setProcessingTradeId] = useState<string | null>(null);
+  const [selectedTrade, setSelectedTrade] = useState<Trade | null>(null);
+  const [counterOfferData, setCounterOfferData] = useState<{
+    receiverId: string;
+    receiverUsername: string;
+    receiverCollection: CollectionItem[];
+    initialOffer?: { senderCards: Card[]; receiverCards: Card[] };
+  } | null>(null);
+
+  // Profile state
+  const [username, setUsername] = useState('');
+  const [collectionVisibility, setCollectionVisibility] = useState<'public' | 'friends' | 'private'>('private');
+  const [savingProfile, setSavingProfile] = useState(false);
+
+  // Confirm modal state
+  const [confirmModal, setConfirmModal] = useState<{
+    isOpen: boolean;
+    title: string;
+    message: string;
+    onConfirm: () => void;
+    variant: 'danger' | 'warning' | 'info' | 'success';
+  }>({ isOpen: false, title: '', message: '', onConfirm: () => {}, variant: 'danger' });
+
+  useEffect(() => {
+    if (user) {
+      loadAllData();
+    }
+  }, [user]);
+
+  const loadAllData = async () => {
+    if (!user) return;
+    setLoading(true);
+    try {
+      await Promise.all([
+        loadPublicUsers(),
+        loadFriendsData(),
+        loadTradesData(),
+        loadProfile(),
+      ]);
+    } catch (error) {
+      console.error('Error loading data:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // ============ BROWSE FUNCTIONS ============
+  const loadPublicUsers = async () => {
+    const { data, error } = await supabase
+      .from('profiles')
+      .select('id, username, collection_visibility')
+      .eq('collection_visibility', 'public')
+      .neq('id', user?.id)
+      .order('username');
+
+    if (!error && data) {
+      setPublicUsers(data);
+    }
+  };
+
+  const loadUserCollection = async (userId: string) => {
+    setLoadingCollection(true);
+    try {
+      const collectionMap = await getUserCollection(userId);
+      if (collectionMap.size === 0) {
+        setSelectedUserCollection([]);
+        return;
+      }
+      const cardIds = Array.from(collectionMap.keys());
+      const cards = await getCardsByIds(cardIds);
+      setSelectedUserCollection(cards.map((card) => ({
+        card,
+        quantity: collectionMap.get(card.id) || 0,
+      })));
+    } catch (error) {
+      console.error('Error loading collection:', error);
+      setSelectedUserCollection([]);
+    } finally {
+      setLoadingCollection(false);
+    }
+  };
+
+  // ============ FRIENDS FUNCTIONS ============
+  const loadFriendsData = async () => {
+    if (!user) return;
+    const [friendsData, pendingData, sentData] = await Promise.all([
+      getFriends(user.id),
+      getPendingRequests(user.id),
+      getSentRequests(user.id),
+    ]);
+    setFriends(friendsData);
+    setPendingRequests(pendingData);
+    setSentRequests(sentData);
+  };
+
+  const handleSearchFriends = async () => {
+    if (!user || friendSearch.trim().length < 2) return;
+    setSearchingFriends(true);
+    try {
+      const results = await searchUsers(friendSearch, user.id);
+      setFriendSearchResults(results || []);
+    } catch (error) {
+      console.error('Error searching users:', error);
+    } finally {
+      setSearchingFriends(false);
+    }
+  };
+
+  const handleSendRequest = async (addresseeId: string) => {
+    if (!user) return;
+    try {
+      await sendFriendRequest(user.id, addresseeId);
+      setFriendSearchResults((prev) => prev.filter((u) => u.id !== addresseeId));
+      await loadFriendsData();
+      toast.success('Friend request sent!');
+    } catch (error) {
+      toast.error('Failed to send friend request');
+    }
+  };
+
+  const handleAcceptRequest = async (friendshipId: string) => {
+    try {
+      await acceptFriendRequest(friendshipId);
+      await loadFriendsData();
+      toast.success('Friend request accepted!');
+    } catch (error) {
+      toast.error('Failed to accept request');
+    }
+  };
+
+  const handleDeclineRequest = async (friendshipId: string) => {
+    try {
+      await declineFriendRequest(friendshipId);
+      await loadFriendsData();
+      toast.info('Friend request declined');
+    } catch (error) {
+      toast.error('Failed to decline request');
+    }
+  };
+
+  const handleRemoveFriend = (friendshipId: string, friendName: string) => {
+    setConfirmModal({
+      isOpen: true,
+      title: 'Remove Friend',
+      message: `Remove ${friendName} from your friends?`,
+      variant: 'danger',
+      onConfirm: async () => {
+        try {
+          await removeFriend(friendshipId);
+          await loadFriendsData();
+          toast.success('Friend removed');
+        } catch (error) {
+          toast.error('Failed to remove friend');
+        }
+      },
+    });
+  };
+
+  const isAlreadyFriendOrPending = (userId: string) => {
+    return friends.some((f) => f.id === userId) ||
+           pendingRequests.some((f) => f.id === userId) ||
+           sentRequests.some((f) => f.id === userId);
+  };
+
+  // ============ TRADES FUNCTIONS ============
+  const loadTradesData = async () => {
+    if (!user) return;
+    const [pending, history] = await Promise.all([
+      getTrades(user.id).then((trades) => trades.filter((t) => t.status === 'pending')),
+      getTradeHistory(user.id),
+    ]);
+
+    const allCardIds = new Set<string>();
+    [...pending, ...history].forEach((trade) => {
+      trade.items?.forEach((item) => allCardIds.add(item.card_id));
+    });
+
+    if (allCardIds.size > 0) {
+      const cards = await getCardsByIds(Array.from(allCardIds));
+      const cardMap = new Map<string, Card>();
+      cards.forEach((card) => cardMap.set(card.id, card));
+      setTradeCardDetails(cardMap);
+    }
+
+    setPendingTrades(pending);
+    setTradeHistory(history);
+  };
+
+  const handleAcceptTrade = async (tradeId: string) => {
+    setProcessingTradeId(tradeId);
+    try {
+      const success = await acceptTrade(tradeId);
+      if (success) {
+        await loadTradesData();
+        toast.success('Trade accepted! Cards exchanged.');
+      } else {
+        toast.error('Failed. Check your collection.');
+      }
+    } catch (error) {
+      toast.error('Error accepting trade');
+    } finally {
+      setProcessingTradeId(null);
+    }
+  };
+
+  const handleDeclineTrade = async (tradeId: string) => {
+    setProcessingTradeId(tradeId);
+    try {
+      await declineTrade(tradeId);
+      await loadTradesData();
+      toast.info('Trade declined');
+    } catch (error) {
+      toast.error('Error declining trade');
+    } finally {
+      setProcessingTradeId(null);
+    }
+  };
+
+  const handleCancelTrade = (tradeId: string) => {
+    setConfirmModal({
+      isOpen: true,
+      title: 'Cancel Trade',
+      message: 'Cancel this trade offer?',
+      variant: 'warning',
+      onConfirm: async () => {
+        setProcessingTradeId(tradeId);
+        try {
+          await cancelTrade(tradeId);
+          await loadTradesData();
+          toast.info('Trade cancelled');
+        } catch (error) {
+          toast.error('Error cancelling trade');
+        } finally {
+          setProcessingTradeId(null);
+        }
+      },
+    });
+  };
+
+  const handleCounterOffer = async (trade: Trade, senderCards: Card[], receiverCards: Card[]) => {
+    try {
+      // Decline the original trade
+      await declineTrade(trade.id);
+
+      // Load the sender's collection for the counter-offer
+      const collectionMap = await getUserCollection(trade.sender_id);
+      const cardIds = Array.from(collectionMap.keys());
+      const cards = await getCardsByIds(cardIds);
+      const senderCollection = cards.map((card) => ({
+        card,
+        quantity: collectionMap.get(card.id) || 0,
+      }));
+
+      // Set up counter-offer data (swap sender and receiver)
+      setCounterOfferData({
+        receiverId: trade.sender_id,
+        receiverUsername: trade.sender?.username || 'User',
+        receiverCollection: senderCollection,
+        initialOffer: {
+          senderCards: receiverCards, // What you want to give back
+          receiverCards: senderCards, // What you want to receive
+        },
+      });
+
+      await loadTradesData();
+    } catch (error) {
+      console.error('Error setting up counter-offer:', error);
+      toast.error('Failed to set up counter-offer');
+    }
+  };
+
+  // ============ PROFILE FUNCTIONS ============
+  const loadProfile = async () => {
+    if (!user) return;
+    const { data } = await supabase
+      .from('profiles')
+      .select('username, collection_visibility')
+      .eq('id', user.id)
+      .single();
+
+    if (data) {
+      setUsername(data.username || '');
+      setCollectionVisibility(data.collection_visibility || 'private');
+    }
+  };
+
+  const handleSaveProfile = async () => {
+    if (!user) return;
+    setSavingProfile(true);
+    try {
+      const { error } = await supabase
+        .from('profiles')
+        .upsert({
+          id: user.id,
+          username,
+          collection_visibility: collectionVisibility,
+          updated_at: new Date(),
+        });
+
+      if (error) throw error;
+      toast.success('Profile updated!');
+    } catch (error) {
+      toast.error('Failed to update profile');
+    } finally {
+      setSavingProfile(false);
+    }
+  };
+
+  // ============ RENDER HELPERS ============
+  const calculateTradeItemsPrice = (items: TradeItem[] | undefined, ownerId: string): number => {
+    const ownerItems = items?.filter((i) => i.owner_id === ownerId) || [];
+    return ownerItems.reduce((total, item) => {
+      const card = tradeCardDetails.get(item.card_id);
+      const price = card?.prices?.usd ? parseFloat(card.prices.usd) : 0;
+      return total + (price * item.quantity);
+    }, 0);
+  };
+
+  const renderTradeItems = (items: TradeItem[] | undefined, ownerId: string, label: string) => {
+    const ownerItems = items?.filter((i) => i.owner_id === ownerId) || [];
+    const totalPrice = calculateTradeItemsPrice(items, ownerId);
+
+    if (ownerItems.length === 0) {
+      return (
+        <div>
+          <p className="text-gray-400 text-xs mb-1">{label}:</p>
+          <p className="text-gray-500 text-xs">Gift</p>
+        </div>
+      );
+    }
+
+    return (
+      <div>
+        <div className="flex items-center justify-between mb-1">
+          <p className="text-gray-400 text-xs">{label}:</p>
+          <p className="text-green-400 text-xs font-semibold">${totalPrice.toFixed(2)}</p>
+        </div>
+        <div className="flex flex-wrap gap-1">
+          {ownerItems.map((item) => {
+            const card = tradeCardDetails.get(item.card_id);
+            return (
+              <div key={item.id} className="flex items-center gap-1 bg-gray-700 px-2 py-0.5 rounded text-xs">
+                <span className="truncate max-w-[100px]">{card?.name || 'Card'}</span>
+                {item.quantity > 1 && <span className="text-gray-400">x{item.quantity}</span>}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  };
+
+  // Loading state
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-gray-900 flex items-center justify-center">
+        <Loader2 className="animate-spin text-blue-500" size={48} />
+      </div>
+    );
+  }
+
+  // ============ USER COLLECTION VIEW ============
+  if (selectedUser) {
+    const filteredUserCollection = selectedUserCollection.filter(({ card }) =>
+      card.name.toLowerCase().includes(userCollectionSearch.toLowerCase())
+    );
+
+    return (
+      <div className="bg-gray-900 text-white min-h-screen">
+        {/* Header */}
+        <div className="sticky top-0 bg-gray-900/95 backdrop-blur border-b border-gray-800 p-3 z-10">
+          <div className="flex items-center justify-between gap-2 mb-3">
+            <button
+              onClick={() => { setSelectedUser(null); setSelectedUserCollection([]); setUserCollectionSearch(''); }}
+              className="flex items-center gap-1 text-blue-400 text-sm min-w-0"
+            >
+              <ChevronLeft size={20} />
+              <span className="hidden sm:inline">Back</span>
+            </button>
+            <h1 className="text-lg font-bold truncate flex-1 text-center">{selectedUser.username}</h1>
+            <button
+              onClick={() => setShowTradeCreator(true)}
+              className="flex items-center gap-1 px-3 py-1.5 bg-blue-600 hover:bg-blue-700 rounded-lg text-sm whitespace-nowrap"
+            >
+              <ArrowLeftRight size={16} />
+              <span className="hidden sm:inline">Trade</span>
+            </button>
+          </div>
+          {/* Search input */}
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" size={16} />
+            <input
+              type="text"
+              value={userCollectionSearch}
+              onChange={(e) => setUserCollectionSearch(e.target.value)}
+              placeholder="Search cards..."
+              className="w-full pl-9 pr-8 py-2 bg-gray-700 border border-gray-600 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            />
+            {userCollectionSearch && (
+              <button
+                onClick={() => setUserCollectionSearch('')}
+                className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-white"
+              >
+                <X size={16} />
+              </button>
+            )}
+          </div>
+        </div>
+
+        {/* Collection Grid */}
+        <div className="p-3">
+          {loadingCollection ? (
+            <div className="flex justify-center py-12">
+              <Loader2 className="animate-spin text-blue-500" size={32} />
+            </div>
+          ) : selectedUserCollection.length === 0 ? (
+            <p className="text-gray-400 text-center py-12">Empty collection</p>
+          ) : filteredUserCollection.length === 0 ? (
+            <p className="text-gray-400 text-center py-12">No cards match "{userCollectionSearch}"</p>
+          ) : (
+            <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-2">
+              {filteredUserCollection.map(({ card, quantity }) => (
+                <div key={card.id} className="relative">
+                  <img
+                    src={card.image_uris?.small || card.image_uris?.normal}
+                    alt={card.name}
+                    className="w-full h-auto rounded-lg"
+                  />
+                  <span className="absolute top-1 right-1 bg-blue-600 text-white text-[10px] font-bold px-1.5 py-0.5 rounded-full">
+                    x{quantity}
+                  </span>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {showTradeCreator && (
+          <TradeCreator
+            receiverId={selectedUser.id}
+            receiverUsername={selectedUser.username || 'Unknown'}
+            receiverCollection={selectedUserCollection}
+            onClose={() => setShowTradeCreator(false)}
+            onTradeCreated={() => {
+              setShowTradeCreator(false);
+              loadTradesData();
+              toast.success('Trade proposal sent!');
+            }}
+          />
+        )}
+      </div>
+    );
+  }
+
+  const filteredPublicUsers = publicUsers.filter(
+    (u) => !browseSearch || u.username?.toLowerCase().includes(browseSearch.toLowerCase())
+  );
+
+  // ============ MAIN VIEW ============
+  return (
+    <div className="relative bg-gray-900 text-white md:min-h-screen">
+      {/* Header */}
+      <div className="sticky top-0 bg-gray-900/95 backdrop-blur border-b border-gray-800 p-3 z-10">
+        <h1 className="text-xl font-bold mb-3">Community</h1>
+
+        {/* Tabs - Scrollable on mobile */}
+        <div className="flex gap-1 overflow-x-auto pb-1 -mx-3 px-3 scrollbar-hide">
+          {[
+            { id: 'browse' as Tab, label: 'Browse', icon: Globe },
+            { id: 'friends' as Tab, label: `Friends`, count: friends.length, icon: Users },
+            { id: 'trades' as Tab, label: `Trades`, count: pendingTrades.length, icon: ArrowLeftRight },
+            { id: 'profile' as Tab, label: 'Profile', icon: Settings },
+          ].map((tab) => (
+            <button
+              key={tab.id}
+              onClick={() => setActiveTab(tab.id)}
+              className={`flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm whitespace-nowrap transition flex-shrink-0 ${
+                activeTab === tab.id
+                  ? 'bg-blue-600 text-white'
+                  : 'bg-gray-800 text-gray-300 active:bg-gray-700'
+              }`}
+            >
+              <tab.icon size={16} />
+              <span>{tab.label}</span>
+              {tab.count !== undefined && tab.count > 0 && (
+                <span className={`text-xs px-1.5 py-0.5 rounded-full ${
+                  activeTab === tab.id ? 'bg-blue-500' : 'bg-gray-700'
+                }`}>
+                  {tab.count}
+                </span>
+              )}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="p-3">
+        {/* ============ BROWSE TAB ============ */}
+        {activeTab === 'browse' && (
+          <div className="space-y-3">
+            {/* Search */}
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" size={18} />
+              <input
+                type="text"
+                value={browseSearch}
+                onChange={(e) => setBrowseSearch(e.target.value)}
+                placeholder="Search users..."
+                className="w-full pl-10 pr-4 py-2.5 bg-gray-800 border border-gray-700 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              />
+            </div>
+
+            {/* Users List */}
+            {filteredPublicUsers.length === 0 ? (
+              <p className="text-gray-400 text-center py-8 text-sm">No public collections</p>
+            ) : (
+              <div className="space-y-2">
+                {filteredPublicUsers.map((userProfile) => (
+                  <button
+                    key={userProfile.id}
+                    onClick={() => { setSelectedUser(userProfile); loadUserCollection(userProfile.id); }}
+                    className="w-full flex items-center justify-between bg-gray-800 p-3 rounded-lg active:bg-gray-700 transition"
+                  >
+                    <div className="flex items-center gap-2 min-w-0">
+                      <Globe size={18} className="text-green-400 flex-shrink-0" />
+                      <span className="font-medium truncate">{userProfile.username || 'Unknown'}</span>
+                    </div>
+                    <Eye size={18} className="text-gray-400 flex-shrink-0" />
+                  </button>
+                ))}
+              </div>
+            )}
+
+            {/* Friends shortcut */}
+            {friends.length > 0 && (
+              <div className="pt-3 border-t border-gray-800">
+                <p className="text-xs text-gray-500 mb-2">Your friends</p>
+                <div className="space-y-2">
+                  {friends.slice(0, 3).map((friend) => (
+                    <button
+                      key={friend.id}
+                      onClick={() => {
+                        setSelectedUser({ id: friend.id, username: friend.username, collection_visibility: 'friends' });
+                        loadUserCollection(friend.id);
+                      }}
+                      className="w-full flex items-center justify-between bg-gray-800 p-3 rounded-lg active:bg-gray-700 transition"
+                    >
+                      <div className="flex items-center gap-2 min-w-0">
+                        <Users size={18} className="text-blue-400 flex-shrink-0" />
+                        <span className="font-medium truncate">{friend.username || 'Unknown'}</span>
+                      </div>
+                      <Eye size={18} className="text-gray-400 flex-shrink-0" />
+                    </button>
+                  ))}
+                  {friends.length > 3 && (
+                    <button
+                      onClick={() => setActiveTab('friends')}
+                      className="w-full text-center text-blue-400 text-sm py-2"
+                    >
+                      View all {friends.length} friends
+                    </button>
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* ============ FRIENDS TAB ============ */}
+        {activeTab === 'friends' && (
+          <div className="space-y-3">
+            {/* Sub tabs */}
+            <div className="flex gap-1">
+              {[
+                { id: 'list' as FriendsSubTab, label: 'List' },
+                { id: 'requests' as FriendsSubTab, label: 'Requests', count: pendingRequests.length },
+                { id: 'search' as FriendsSubTab, label: 'Add' },
+              ].map((tab) => (
+                <button
+                  key={tab.id}
+                  onClick={() => setFriendsSubTab(tab.id)}
+                  className={`px-3 py-1.5 rounded-lg text-sm flex-1 ${
+                    friendsSubTab === tab.id ? 'bg-blue-600' : 'bg-gray-800 active:bg-gray-700'
+                  }`}
+                >
+                  {tab.label}
+                  {tab.count !== undefined && tab.count > 0 && (
+                    <span className="ml-1 text-xs">({tab.count})</span>
+                  )}
+                </button>
+              ))}
+            </div>
+
+            {/* Friends List */}
+            {friendsSubTab === 'list' && (
+              friends.length === 0 ? (
+                <p className="text-gray-400 text-center py-8 text-sm">No friends yet</p>
+              ) : (
+                <div className="space-y-2">
+                  {friends.map((friend) => (
+                    <div key={friend.id} className="flex items-center justify-between bg-gray-800 p-3 rounded-lg">
+                      <span className="font-medium truncate">{friend.username || 'Unknown'}</span>
+                      <div className="flex gap-1">
+                        <button
+                          onClick={() => {
+                            setSelectedUser({ id: friend.id, username: friend.username, collection_visibility: 'friends' });
+                            loadUserCollection(friend.id);
+                          }}
+                          className="p-2 text-blue-400 active:bg-blue-400/20 rounded-lg"
+                        >
+                          <Eye size={18} />
+                        </button>
+                        <button
+                          onClick={() => handleRemoveFriend(friend.friendshipId, friend.username || 'user')}
+                          className="p-2 text-red-400 active:bg-red-400/20 rounded-lg"
+                        >
+                          <UserMinus size={18} />
+                        </button>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )
+            )}
+
+            {/* Requests */}
+            {friendsSubTab === 'requests' && (
+              <div className="space-y-4">
+                {pendingRequests.length > 0 && (
+                  <div>
+                    <p className="text-xs text-gray-500 mb-2">Received</p>
+                    <div className="space-y-2">
+                      {pendingRequests.map((req) => (
+                        <div key={req.id} className="flex items-center justify-between bg-gray-800 p-3 rounded-lg">
+                          <span className="font-medium truncate">{req.username || 'Unknown'}</span>
+                          <div className="flex gap-1">
+                            <button onClick={() => handleAcceptRequest(req.friendshipId)} className="p-2 text-green-400 active:bg-green-400/20 rounded-lg">
+                              <Check size={18} />
+                            </button>
+                            <button onClick={() => handleDeclineRequest(req.friendshipId)} className="p-2 text-red-400 active:bg-red-400/20 rounded-lg">
+                              <X size={18} />
+                            </button>
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                )}
+
+                {sentRequests.length > 0 && (
+                  <div>
+                    <p className="text-xs text-gray-500 mb-2">Sent</p>
+                    <div className="space-y-2">
+                      {sentRequests.map((req) => (
+                        <div key={req.id} className="flex items-center justify-between bg-gray-800 p-3 rounded-lg">
+                          <div className="flex items-center gap-2">
+                            <Send size={14} className="text-gray-500" />
+                            <span className="font-medium truncate">{req.username || 'Unknown'}</span>
+                          </div>
+                          <span className="text-xs text-yellow-500">Pending</span>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                )}
+
+                {pendingRequests.length === 0 && sentRequests.length === 0 && (
+                  <p className="text-gray-400 text-center py-8 text-sm">No requests</p>
+                )}
+              </div>
+            )}
+
+            {/* Search/Add */}
+            {friendsSubTab === 'search' && (
+              <div className="space-y-3">
+                <div className="flex gap-2">
+                  <input
+                    type="text"
+                    value={friendSearch}
+                    onChange={(e) => setFriendSearch(e.target.value)}
+                    onKeyDown={(e) => e.key === 'Enter' && handleSearchFriends()}
+                    placeholder="Username..."
+                    className="flex-1 px-3 py-2.5 bg-gray-800 border border-gray-700 rounded-lg text-sm"
+                  />
+                  <button
+                    onClick={handleSearchFriends}
+                    disabled={searchingFriends || friendSearch.trim().length < 2}
+                    className="px-4 py-2.5 bg-blue-600 disabled:bg-gray-600 rounded-lg"
+                  >
+                    {searchingFriends ? <Loader2 className="animate-spin" size={18} /> : <Search size={18} />}
+                  </button>
+                </div>
+
+                {friendSearchResults.length > 0 && (
+                  <div className="space-y-2">
+                    {friendSearchResults.map((result) => (
+                      <div key={result.id} className="flex items-center justify-between bg-gray-800 p-3 rounded-lg">
+                        <span className="font-medium truncate">{result.username || 'Unknown'}</span>
+                        {isAlreadyFriendOrPending(result.id) ? (
+                          <span className="text-xs text-gray-500">Connected</span>
+                        ) : (
+                          <button
+                            onClick={() => handleSendRequest(result.id)}
+                            className="flex items-center gap-1 px-3 py-1.5 bg-blue-600 rounded-lg text-sm"
+                          >
+                            <UserPlus size={14} />
+                            Add
+                          </button>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* ============ TRADES TAB ============ */}
+        {activeTab === 'trades' && (
+          <div className="space-y-3">
+            {/* Sub tabs */}
+            <div className="flex gap-1">
+              <button
+                onClick={() => setTradesSubTab('pending')}
+                className={`flex-1 flex items-center justify-center gap-1 px-3 py-1.5 rounded-lg text-sm ${
+                  tradesSubTab === 'pending' ? 'bg-blue-600' : 'bg-gray-800'
+                }`}
+              >
+                <Clock size={14} />
+                Pending ({pendingTrades.length})
+              </button>
+              <button
+                onClick={() => setTradesSubTab('history')}
+                className={`flex-1 flex items-center justify-center gap-1 px-3 py-1.5 rounded-lg text-sm ${
+                  tradesSubTab === 'history' ? 'bg-blue-600' : 'bg-gray-800'
+                }`}
+              >
+                <History size={14} />
+                History
+              </button>
+            </div>
+
+            {/* Trades List */}
+            {(tradesSubTab === 'pending' ? pendingTrades : tradeHistory).length === 0 ? (
+              <p className="text-gray-400 text-center py-8 text-sm">
+                {tradesSubTab === 'pending' ? 'No pending trades' : 'No history'}
+              </p>
+            ) : (
+              <div className="space-y-3">
+                {(tradesSubTab === 'pending' ? pendingTrades : tradeHistory).map((trade) => {
+                  const isSender = trade.sender_id === user?.id;
+                  const otherUser = isSender ? trade.receiver : trade.sender;
+                  const statusColors: Record<string, string> = {
+                    accepted: 'text-green-400',
+                    declined: 'text-red-400',
+                    cancelled: 'text-gray-400',
+                    pending: 'text-yellow-400',
+                  };
+
+                  const canViewDetails = !isSender && trade.status === 'pending';
+
+                  return (
+                    <div
+                      key={trade.id}
+                      className={`bg-gray-800 rounded-lg p-3 space-y-2 ${
+                        canViewDetails ? 'cursor-pointer hover:bg-gray-750 transition-colors' : ''
+                      }`}
+                      onClick={() => canViewDetails && setSelectedTrade(trade)}
+                    >
+                      {/* Header */}
+                      <div className="flex items-center justify-between">
+                        <div className="flex items-center gap-2 min-w-0">
+                          <ArrowLeftRight size={16} className="text-blue-400 flex-shrink-0" />
+                          <span className="text-sm truncate">
+                            {isSender ? 'To' : 'From'}: <strong>{otherUser?.username}</strong>
+                          </span>
+                        </div>
+                        <span className={`text-xs capitalize ${statusColors[trade.status]}`}>
+                          {trade.status}
+                        </span>
+                      </div>
+
+                      {/* Items */}
+                      <div className="grid grid-cols-2 gap-2 text-sm">
+                        {renderTradeItems(trade.items, trade.sender_id, isSender ? 'Give' : 'Receive')}
+                        {renderTradeItems(trade.items, trade.receiver_id, isSender ? 'Get' : 'Send')}
+                      </div>
+
+                      {canViewDetails && (
+                        <p className="text-xs text-blue-400 text-center pt-1">
+                          Tap to view details
+                        </p>
+                      )}
+
+                      {/* Actions - Only show quick actions for sender (cancel) */}
+                      {tradesSubTab === 'pending' && isSender && (
+                        <div className="flex gap-2 pt-2 border-t border-gray-700" onClick={(e) => e.stopPropagation()}>
+                          <button
+                            onClick={() => handleCancelTrade(trade.id)}
+                            disabled={processingTradeId === trade.id}
+                            className="flex-1 flex items-center justify-center gap-1 px-3 py-2 bg-gray-700 rounded-lg text-sm"
+                          >
+                            <X size={14} /> Cancel
+                          </button>
+                        </div>
+                      )}
+                    </div>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* ============ PROFILE TAB ============ */}
+        {activeTab === 'profile' && (
+          <div className="space-y-4 max-w-md">
+            {/* Username */}
+            <div>
+              <label className="block text-sm text-gray-400 mb-1.5">Username</label>
+              <input
+                type="text"
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+                className="w-full px-3 py-2.5 bg-gray-800 border border-gray-700 rounded-lg text-sm"
+                placeholder="Your username"
+              />
+            </div>
+
+            {/* Visibility */}
+            <div>
+              <label className="block text-sm text-gray-400 mb-1.5">Collection Visibility</label>
+              <div className="grid grid-cols-3 gap-2">
+                {VISIBILITY_OPTIONS.map((option) => (
+                  <button
+                    key={option.value}
+                    onClick={() => setCollectionVisibility(option.value)}
+                    className={`p-3 rounded-lg border-2 transition text-center ${
+                      collectionVisibility === option.value
+                        ? 'border-blue-500 bg-blue-500/10'
+                        : 'border-gray-700 bg-gray-800 active:border-gray-600'
+                    }`}
+                  >
+                    <div className="font-medium text-sm">{option.label}</div>
+                    <div className="text-xs text-gray-400 mt-0.5">{option.description}</div>
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            {/* Save */}
+            <button
+              onClick={handleSaveProfile}
+              disabled={savingProfile}
+              className="w-full flex items-center justify-center gap-2 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 py-3 rounded-lg font-medium"
+            >
+              {savingProfile ? <Loader2 className="animate-spin" size={18} /> : <><Save size={18} /> Save</>}
+            </button>
+          </div>
+        )}
+      </div>
+
+      {/* Trade Detail Modal */}
+      {selectedTrade && (
+        <TradeDetail
+          trade={selectedTrade}
+          onClose={() => setSelectedTrade(null)}
+          onAccept={handleAcceptTrade}
+          onDecline={handleDeclineTrade}
+          onCounterOffer={handleCounterOffer}
+        />
+      )}
+
+      {/* Counter Offer Creator */}
+      {counterOfferData && (
+        <TradeCreator
+          receiverId={counterOfferData.receiverId}
+          receiverUsername={counterOfferData.receiverUsername}
+          receiverCollection={counterOfferData.receiverCollection}
+          onClose={() => setCounterOfferData(null)}
+          onTradeCreated={() => {
+            setCounterOfferData(null);
+            loadTradesData();
+            toast.success('Counter offer sent!');
+          }}
+        />
+      )}
+
+      {/* Confirm Modal */}
+      <ConfirmModal
+        isOpen={confirmModal.isOpen}
+        onClose={() => setConfirmModal({ ...confirmModal, isOpen: false })}
+        onConfirm={confirmModal.onConfirm}
+        title={confirmModal.title}
+        message={confirmModal.message}
+        variant={confirmModal.variant}
+      />
+    </div>
+  );
+}

src/components/DeckBuilder.tsx

@@ -31,7 +31,7 @@ export default function DeckBuilder({
                 initial={{ x: "100%" }}
                 animate={{ x: isOpen ? "0%" : "100%" }}
                 transition={{ type: "spring", stiffness: 300, damping: 30 }}
-                className="fixed top-0 right-0 w-4/5 h-full bg-gray-800 p-6 shadow-lg md:static md:w-full md:h-auto md:p-6 md:shadow-none z-50"
+                className="fixed top-0 right-0 w-4/5 h-full bg-gray-800 p-6 shadow-lg md:static md:w-full md:h-auto md:p-6 md:shadow-none z-[110]"
             >
                 {/* Bouton de fermeture */}
                 <button
@@ -117,4 +117,4 @@ export default function DeckBuilder({
             </motion.div>
         </div>
     );
-}
+}

src/components/DeckCard.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { AlertTriangle, Check, Edit } from 'lucide-react';
 import { Deck } from '../types';
-import { validateDeck } from '../utils/deckValidation';
 
 interface DeckCardProps {
   deck: Deck;
@@ -9,68 +8,67 @@ interface DeckCardProps {
 }
 
 export default function DeckCard({ deck, onEdit }: DeckCardProps) {
+  // Use pre-calculated validation data
+  const isValid = deck.isValid ?? true;
+  const validationErrors = deck.validationErrors || [];
 
-  if(deck.id === "410ed539-a8f4-4bc4-91f1-6c113b9b7e25"){
-    console.log("deck", deck.name);
-    console.log("cardEntities", deck.cards);
-  }
-
-  const validation = validateDeck(deck);
-  const commander = deck.format === 'commander' ? deck.cards.find(card => 
-    card.is_commander
-  )?.card : null;
+  // Use cover card (already loaded)
+  const coverImage = deck.coverCard?.image_uris?.normal;
 
   return (
     <div
-      className="bg-gray-800 rounded-xl overflow-hidden shadow-lg card-hover cursor-pointer animate-scale-in"
+      className="bg-gray-800 rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-all cursor-pointer group"
       onClick={() => onEdit?.(deck.id)}
     >
-      <div className="relative h-48 overflow-hidden">
-        <img
-          src={commander?.image_uris?.normal || deck.cards[0]?.card.image_uris?.normal}
-          alt={commander?.name || deck.cards[0]?.card.name}
-          className="w-full object-cover object-top transform translate-y-[-12%]"
-        />
-        <div className="absolute inset-0 bg-gradient-to-t from-gray-900 to-transparent" />
-      </div>
-      
-      <div className="p-4">
-        <div className="flex items-center justify-between mb-2">
-          <h3 className="text-xl font-bold text-white">{deck.name}</h3>
-          {validation.isValid ? (
-            <div className="flex items-center text-green-400">
-              <Check size={16} className="mr-1" />
-              <span className="text-sm">Legal</span>
-            </div>
-          ) : (
-            <div className="flex items-center text-yellow-400" title={validation.errors.join(', ')}>
-              <AlertTriangle size={16} className="mr-1" />
-              <span className="text-sm">Issues</span>
-            </div>
-          )}
-        </div>
-        
-        <div className="flex items-center justify-between text-sm text-gray-400">
-          <span className="capitalize">{deck.format}</span>
-          <span>{deck.cards.reduce((acc, curr) => acc + curr.quantity, 0)} cards</span>
-        </div>
-        
-        {commander && (
-          <div className="mt-2 text-sm text-gray-300">
-            <span className="text-blue-400">Commander:</span> {commander.name}
+      {/* Full Card Art */}
+      <div className="relative aspect-[5/7] overflow-hidden">
+        {coverImage ? (
+          <img
+            src={coverImage}
+            alt={deck.coverCard?.name || deck.name}
+            className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+          />
+        ) : (
+          <div className="w-full h-full bg-gray-700 flex items-center justify-center text-gray-500">
+            No Cover
           </div>
         )}
+        {/* Overlay for text readability */}
+        <div className="absolute inset-0 bg-gradient-to-t from-gray-900 via-gray-900/60 to-transparent" />
 
-        <button
-          onClick={(e) => {
-            e.stopPropagation();
-            onEdit?.(deck.id);
-          }}
-          className="mt-4 w-full px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg flex items-center justify-center gap-2 text-white btn-ripple transition-smooth glow-on-hover"
-        >
-          <Edit size={20} />
-          Edit Deck
-        </button>
+        {/* Deck info overlay */}
+        <div className="absolute bottom-0 left-0 right-0 p-3">
+          <div className="flex items-start justify-between mb-1">
+            <h3 className="text-base sm:text-lg font-bold text-white line-clamp-2 flex-1">{deck.name}</h3>
+            {isValid ? (
+              <Check size={16} className="text-green-400 ml-2 flex-shrink-0" />
+            ) : (
+              <AlertTriangle size={16} className="text-yellow-400 ml-2 flex-shrink-0" title={validationErrors.join(', ')} />
+            )}
+          </div>
+
+          <div className="flex items-center justify-between text-xs text-gray-300 mb-2">
+            <span className="capitalize">{deck.format}</span>
+            <span>{deck.cardCount || 0} cards</span>
+          </div>
+
+          {deck.format === 'commander' && deck.coverCard && (
+            <div className="text-xs text-blue-300 mb-2 truncate">
+              <span className="font-semibold">Commander:</span> {deck.coverCard.name}
+            </div>
+          )}
+
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              onEdit?.(deck.id);
+            }}
+            className="w-full min-h-[36px] px-3 py-2 bg-blue-600/90 hover:bg-blue-600 rounded-md flex items-center justify-center gap-2 text-white text-sm font-medium transition-colors backdrop-blur-sm"
+          >
+            <Edit size={16} />
+            <span>Edit</span>
+          </button>
+        </div>
       </div>
     </div>
   );

src/components/DeckEditor.tsx

@@ -42,6 +42,7 @@ export default function DeckEditor({ deckId, onClose }: DeckEditorProps) {
         const cards = cardEntities.map(entity => ({
           card: scryfallCards.find(c => c.id === entity.card_id) as Card,
           quantity: entity.quantity,
+          is_commander: entity.is_commander,
         }));
 
         setDeck({
@@ -62,7 +63,7 @@ export default function DeckEditor({ deckId, onClose }: DeckEditorProps) {
 
   if (loading) {
     return (
-      <div className="min-h-screen bg-gray-900 text-white p-6 flex items-center justify-center">
+      <div className="relative md:min-h-screen bg-gray-900 text-white p-6 flex items-center justify-center">
         <div className="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-blue-500"></div>
       </div>
     );
@@ -70,7 +71,7 @@ export default function DeckEditor({ deckId, onClose }: DeckEditorProps) {
 
   if (!deck) {
     return (
-      <div className="min-h-screen bg-gray-900 text-white p-6">
+      <div className="relative md:min-h-screen bg-gray-900 text-white p-6">
         <div className="max-w-7xl mx-auto">
           <div className="bg-red-500/10 border border-red-500 rounded-lg p-4">
             <h2 className="text-xl font-bold text-red-500">Error</h2>
@@ -82,4 +83,4 @@ export default function DeckEditor({ deckId, onClose }: DeckEditorProps) {
   }
 
   return <DeckManager initialDeck={deck} onSave={onClose} />;
-}
+}

src/components/DeckList.tsx

@@ -3,12 +3,15 @@ import { getCardById, getCardsByIds } from '../services/api';
 import { Deck } from '../types';
 import { supabase } from "../lib/supabase";
 import DeckCard from "./DeckCard";
+import { PlusCircle } from 'lucide-react';
+import MigrateDeckButton from "./MigrateDeckButton.tsx";
 
 interface DeckListProps {
   onDeckEdit?: (deckId: string) => void;
+  onCreateDeck?: () => void;
 }
 
-const DeckList = ({ onDeckEdit }: DeckListProps) => {
+const DeckList = ({ onDeckEdit, onCreateDeck }: DeckListProps) => {
   const [decks, setDecks] = useState<Deck[]>([]);
   const [loading, setLoading] = useState(true);
 
@@ -21,58 +24,36 @@ const DeckList = ({ onDeckEdit }: DeckListProps) => {
         return;
       }
 
-      const decksWithCards = await Promise.all(decksData.map(async (deck) => {
-        const { data: cardEntities, error: cardsError } = await supabase
-          .from('deck_cards')
-          .select('*')
-          .eq('deck_id', deck.id);
+      // Get all unique cover card IDs
+      const coverCardIds = decksData
+        .map(deck => deck.cover_card_id)
+        .filter(Boolean);
 
+      // Fetch only cover cards (much lighter!)
+      const coverCards = coverCardIds.length > 0
+        ? await getCardsByIds(coverCardIds)
+        : [];
 
+      // Map decks with their cover cards
+      const decksWithCoverCards = decksData.map(deck => {
+        const coverCard = deck.cover_card_id
+          ? coverCards.find(c => c.id === deck.cover_card_id)
+          : null;
 
-        if (cardsError) {
-          console.error(`Error fetching cards for deck ${deck.id}:`, cardsError);
-          return { ...deck, cards: [] };
-        }
+        return {
+          ...deck,
+          cards: [], // Empty array, we don't load all cards here
+          coverCard: coverCard || null,
+          createdAt: new Date(deck.created_at),
+          updatedAt: new Date(deck.updated_at),
+          validationErrors: deck.validation_errors || [],
+          isValid: deck.is_valid ?? true,
+          cardCount: deck.card_count || 0,
+          coverCardId: deck.cover_card_id,
+        };
+      });
 
-        const cardIds = cardEntities.map((entity) => entity.card_id);
-        const uniqueCardIds = [...new Set(cardIds)];
-
-        if(deck.id === "410ed539-a8f4-4bc4-91f1-6c113b9b7e25"){
-          console.log("uniqueCardIds", uniqueCardIds);
-        }
-
-
-
-        try {
-          const scryfallCards = await getCardsByIds(uniqueCardIds);
-
-          if (!scryfallCards) {
-            console.error("scryfallCards is undefined after getCardsByIds");
-            return { ...deck, cards: [] };
-          }
-
-          const cards = cardEntities.map((entity) => {
-            const card = scryfallCards.find((c) => c.id === entity.card_id);
-            return {
-              card,
-              quantity: entity.quantity,
-              is_commander: entity.is_commander,
-            };
-          });
-
-          return {
-            ...deck,
-            cards,
-            createdAt: new Date(deck.created_at),
-            updatedAt: new Date(deck.updated_at),
-          };
-        } catch (error) {
-          console.error("Error fetching cards from Scryfall:", error);
-          return { ...deck, cards: [] };
-        }
-      }));
-
-      setDecks(decksWithCards);
+      setDecks(decksWithCoverCards);
       setLoading(false);
     };
 
@@ -88,10 +69,26 @@ const DeckList = ({ onDeckEdit }: DeckListProps) => {
   }
 
   return (
-    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+    <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-3 sm:gap-4">
       {decks.map((deck) => (
         <DeckCard key={deck.id} deck={deck} onEdit={onDeckEdit} />
       ))}
+
+      {/* Create New Deck Card */}
+      <button
+        onClick={onCreateDeck}
+        className="bg-gray-800 rounded-lg overflow-hidden shadow-lg hover:shadow-xl border-2 border-dashed border-gray-600 hover:border-blue-500 transition-all duration-300 hover:scale-105 cursor-pointer group aspect-[5/7] flex flex-col items-center justify-center gap-3 p-4"
+      >
+        <PlusCircle size={48} className="text-gray-600 group-hover:text-blue-500 transition-colors" />
+        <div className="text-center">
+          <h3 className="text-sm sm:text-base font-bold text-gray-400 group-hover:text-blue-400 transition-colors">
+            Create New Deck
+          </h3>
+          <p className="text-xs text-gray-500 mt-1 hidden sm:block">
+            Start building
+          </p>
+        </div>
+      </button>
     </div>
   );
 };

src/components/DeckManager.tsx

@@ -1,11 +1,12 @@
 import React, { useState, useEffect } from 'react';
-import { Plus, Search, Save, Trash2, Loader2, CheckCircle, XCircle, AlertCircle, PackagePlus, RefreshCw } from 'lucide-react';
+import { Plus, Minus, Search, Save, Trash2, Loader2, CheckCircle, XCircle, AlertCircle, PackagePlus, RefreshCw, X } from 'lucide-react';
 import { Card, Deck } from '../types';
 import { searchCards, getUserCollection, addCardToCollection, addMultipleCardsToCollection } from '../services/api';
 import { useAuth } from '../contexts/AuthContext';
 import { supabase } from '../lib/supabase';
 import { validateDeck } from '../utils/deckValidation';
 import MagicCard from './MagicCard';
+import { ManaCost, ManaSymbol } from './ManaCost';
 
 interface DeckManagerProps {
   initialDeck?: Deck;
@@ -25,7 +26,8 @@ interface DeckManagerProps {
 
 const suggestLandCountAndDistribution = (
   cards: { card; quantity: number }[],
-  format: string
+  format: string,
+  commanderColors: string[] = []
 ) => {
   const formatRules = {
     standard: { minCards: 60 },
@@ -63,6 +65,16 @@ const suggestLandCountAndDistribution = (
     }
   });
 
+  // For commander, filter out colors not in commander's color identity
+  if (format === 'commander' && commanderColors.length > 0) {
+    for (const color in colorCounts) {
+      if (!commanderColors.includes(color)) {
+        totalColorSymbols -= colorCounts[color as keyof typeof colorCounts];
+        colorCounts[color as keyof typeof colorCounts] = 0;
+      }
+    }
+  }
+
   const landDistribution: { [key: string]: number } = {};
   for (const color in colorCounts) {
     const proportion =
@@ -95,9 +107,25 @@ const suggestLandCountAndDistribution = (
   return { landCount: landsToAdd, landDistribution };
 };
 
+// Get commander color identity
+const getCommanderColors = (commander: Card | null): string[] => {
+  if (!commander) return [];
+  return commander.colors || [];
+};
+
+// Check if a card's colors are valid for the commander
+const isCardValidForCommander = (card: Card, commanderColors: string[]): boolean => {
+  if (commanderColors.length === 0) return true; // No commander restriction
+  const cardColors = card.colors || [];
+  // Every color in the card must be in the commander's colors
+  return cardColors.every(color => commanderColors.includes(color));
+};
+
 export default function DeckManager({ initialDeck, onSave }: DeckManagerProps) {
+  const [currentDeckId, setCurrentDeckId] = useState<string | null>(initialDeck?.id || null);
   const [searchQuery, setSearchQuery] = useState('');
   const [searchResults, setSearchResults] = useState<Card[]>([]);
+  const [isSearching, setIsSearching] = useState(false);
   const [selectedCards, setSelectedCards] = useState<{
     card: Card;
     quantity: number;
@@ -121,6 +149,9 @@ export default function DeckManager({ initialDeck, onSave }: DeckManagerProps) {
   const [addingCardId, setAddingCardId] = useState<string | null>(null);
   const [isAddingAll, setIsAddingAll] = useState(false);
   const [cardFaceIndex, setCardFaceIndex] = useState<Map<string, number>>(new Map());
+  const [hoveredCard, setHoveredCard] = useState<Card | null>(null);
+  const [hoverSource, setHoverSource] = useState<'search' | 'deck' | null>(null);
+  const [selectedCard, setSelectedCard] = useState<Card | null>(null);
 
   // Load user collection on component mount
   useEffect(() => {
@@ -169,6 +200,13 @@ export default function DeckManager({ initialDeck, onSave }: DeckManagerProps) {
     return card.image_uris?.normal || card.image_uris?.small || card.card_faces?.[0]?.image_uris?.normal;
   };
 
+  const getCardLargeImageUri = (card: Card, faceIndex: number = 0) => {
+    if (isDoubleFaced(card) && card.card_faces) {
+      return card.card_faces[faceIndex]?.image_uris?.large || card.card_faces[faceIndex]?.image_uris?.normal;
+    }
+    return card.image_uris?.large || card.image_uris?.normal;
+  };
+
   // Helper function to check if a card is in the collection
   const isCardInCollection = (cardId: string, requiredQuantity: number = 1): boolean => {
     const ownedQuantity = userCollection.get(cardId) || 0;
@@ -260,11 +298,16 @@ export default function DeckManager({ initialDeck, onSave }: DeckManagerProps) {
     e.preventDefault();
     if (!searchQuery.trim()) return;
 
+    setIsSearching(true);
     try {
       const cards = await searchCards(searchQuery);
-      setSearchResults(cards);
+      setSearchResults(cards || []);
     } catch (error) {
       console.error('Failed to search cards:', error);
+      setSearchResults([]);
+      setSnackbar({ message: 'Failed to search cards', type: 'error' });
+    } finally {
+      setIsSearching(false);
     }
   };
 
@@ -310,8 +353,9 @@ export default function DeckManager({ initialDeck, onSave }: DeckManagerProps) {
 
     setIsSaving(true);
     try {
+      const deckId = currentDeckId || crypto.randomUUID();
       const deckToSave: Deck = {
-        id: initialDeck?.id || crypto.randomUUID(),
+        id: deckId,
         name: deckName,
         format: deckFormat,
         cards: selectedCards,
@@ -320,6 +364,17 @@ export default function DeckManager({ initialDeck, onSave }: DeckManagerProps) {
         updatedAt: new Date(),
       };
 
+      // Calculate validation for storage
+      const validation = validateDeck(deckToSave);
+
+      // Determine cover card (commander or first card)
+      const commanderCard = deckFormat === 'commander' ? selectedCards.find(c => c.card.id === commander?.id) : null;
+      const coverCard = commanderCard?.card || selectedCards[0]?.card;
+      const coverCardId = coverCard?.id || null;
+
+      // Calculate total card count
+      const totalCardCount = selectedCards.reduce((acc, curr) => acc + curr.quantity, 0);
+
       const deckData = {
         id: deckToSave.id,
         name: deckToSave.name,
@@ -327,6 +382,10 @@ export default function DeckManager({ initialDeck, onSave }: DeckManagerProps) {
         user_id: deckToSave.userId,
         created_at: deckToSave.createdAt,
         updated_at: deckToSave.updatedAt,
+        cover_card_id: coverCardId,
+        validation_errors: validation.errors,
+        is_valid: validation.isValid,
+        card_count: totalCardCount,
       };
 
       // Save or update the deck
@@ -337,9 +396,14 @@ export default function DeckManager({ initialDeck, onSave }: DeckManagerProps) {
 
       if (deckError) throw deckError;
 
+      // Update current deck ID if this was a new deck
+      if (!currentDeckId) {
+        setCurrentDeckId(deckId);
+      }
+
       // Delete existing cards if updating
-      if (initialDeck) {
-        await supabase.from('deck_cards').delete().eq('deck_id', initialDeck.id);
+      if (currentDeckId) {
+        await supabase.from('deck_cards').delete().eq('deck_id', currentDeckId);
       }
 
       // Save the deck cards
@@ -379,11 +443,14 @@ export default function DeckManager({ initialDeck, onSave }: DeckManagerProps) {
 
   const validation = validateDeck(currentDeck);
 
+  // Commander color identity validation (for land suggestions)
+  const commanderColors = deckFormat === 'commander' ? getCommanderColors(commander) : [];
+
   const deckSize = selectedCards.reduce((acc, curr) => acc + curr.quantity, 0);
   const {
     landCount: suggestedLandCountValue,
     landDistribution: suggestedLands,
-  } = suggestLandCountAndDistribution(selectedCards, deckFormat);
+  } = suggestLandCountAndDistribution(selectedCards, deckFormat, commanderColors);
 
   const totalPrice = selectedCards.reduce((acc, { card, quantity }) => {
     const isBasicLand =
@@ -490,59 +557,94 @@ export default function DeckManager({ initialDeck, onSave }: DeckManagerProps) {
   };
 
   return (
-    <div className="min-h-screen bg-gray-900 text-white p-6">
+    <div className="relative bg-gray-900 text-white p-3 sm:p-6 pt-6 pb-44 md:pt-20 md:pb-6 md:min-h-screen">
       <div className="max-w-7xl mx-auto">
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-6">
           {/* Card Search Section */}
           <div className="lg:col-span-2 space-y-6">
-            <form onSubmit={handleSearch} className="flex gap-2">
-              <div className="relative flex-1">
-                <Search
-                  className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"
-                  size={20}
-                />
-                <input
-                  type="text"
-                  value={searchQuery}
-                  onChange={e => setSearchQuery(e.target.value)}
-                  className="w-full pl-10 pr-4 py-2 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white"
-                  placeholder="Search for cards..."
-                />
-              </div>
+            {/* Mobile-First Search Bar */}
+            <form onSubmit={handleSearch} className="relative">
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
+              <input
+                type="text"
+                value={searchQuery}
+                onChange={e => setSearchQuery(e.target.value)}
+                className="w-full pl-10 pr-24 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 text-white"
+                placeholder="Rechercher une carte..."
+              />
+              {searchQuery && (
+                <button
+                  type="button"
+                  onClick={() => {
+                    setSearchQuery('');
+                    setSearchResults([]);
+                  }}
+                  className="absolute right-14 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-white"
+                >
+                  <XCircle size={20} />
+                </button>
+              )}
               <button
                 type="submit"
-                className="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg flex items-center gap-2"
+                className="absolute right-2 top-1/2 transform -translate-y-1/2 p-2 bg-blue-600 hover:bg-blue-700 rounded-md"
               >
                 <Search size={20} />
-                Search
               </button>
             </form>
 
-            <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
-              {searchResults.map(card => {
+            {/* Vertical Card List for Mobile */}
+            <div className="space-y-2">
+              {isSearching ? (
+                <div className="flex items-center justify-center py-12">
+                  <Loader2 className="animate-spin text-blue-500" size={48} />
+                </div>
+              ) : searchResults.length === 0 && searchQuery ? (
+                <div className="text-center py-12 text-gray-400">
+                  <p className="text-lg mb-2">No cards found</p>
+                  <p className="text-sm">Try a different search term</p>
+                </div>
+              ) : (
+                searchResults.map(card => {
                 const currentFaceIndex = getCurrentFaceIndex(card.id);
                 const isMultiFaced = isDoubleFaced(card);
                 const inCollection = userCollection.get(card.id) || 0;
                 const isAddingThisCard = addingCardId === card.id;
+                const cardInDeck = selectedCards.find(c => c.card.id === card.id);
+                const quantityInDeck = cardInDeck?.quantity || 0;
 
                 const displayName = isMultiFaced && card.card_faces
                   ? card.card_faces[currentFaceIndex]?.name || card.name
                   : card.name;
 
+                const isValidForCommander = deckFormat !== 'commander' || !commander || isCardValidForCommander(card, commanderColors);
+
                 return (
                   <div
                     key={card.id}
-                    className="bg-gray-800 rounded-lg overflow-hidden hover:ring-2 hover:ring-blue-500 transition-all"
+                    className={`bg-gray-800 rounded-lg p-3 flex items-center gap-3 hover:bg-gray-750 transition-colors cursor-pointer ${
+                      !isValidForCommander ? 'border border-yellow-500/50' : ''
+                    }`}
+                    onMouseEnter={() => {
+                      setHoveredCard(card);
+                      setHoverSource('search');
+                    }}
+                    onMouseLeave={() => {
+                      setHoveredCard(null);
+                      setHoverSource(null);
+                    }}
+                    onClick={() => setSelectedCard(card)}
                   >
-                    <div className="relative">
+                    {/* Card Thumbnail */}
+                    <div className="relative flex-shrink-0 w-16 h-22 rounded overflow-hidden"
+                         onClick={(e) => e.stopPropagation()}>
                       {getCardImageUri(card, currentFaceIndex) ? (
                         <img
                           src={getCardImageUri(card, currentFaceIndex)}
                           alt={displayName}
-                          className="w-full h-auto"
+                          className="w-full h-full object-cover"
                         />
                       ) : (
-                        <MagicCard card={card} />
+                        <div className="w-full h-full bg-gray-700" />
                       )}
                       {isMultiFaced && (
                         <button
@@ -550,51 +652,93 @@ export default function DeckManager({ initialDeck, onSave }: DeckManagerProps) {
                             e.stopPropagation();
                             toggleCardFace(card.id, card.card_faces!.length);
                           }}
-                          className="absolute bottom-2 right-2 bg-purple-600 hover:bg-purple-700 text-white p-2 rounded-full shadow-lg transition-all"
-                          title="Flip card"
+                          className="absolute bottom-0 right-0 bg-purple-600 text-white p-1 rounded-tl"
                         >
-                          <RefreshCw size={16} />
+                          <RefreshCw size={10} />
                         </button>
                       )}
                     </div>
-                    <div className="p-4">
-                      <div className="flex items-center justify-between mb-2">
-                        <h3 className="font-bold">{displayName}</h3>
-                        {inCollection > 0 && (
-                          <span className="text-xs bg-green-600 px-2 py-0.5 rounded-full flex items-center gap-1">
-                            <CheckCircle size={12} />
-                            x{inCollection}
-                          </span>
+
+                    {/* Card Info */}
+                    <div className="flex-1 min-w-0">
+                      <h3 className="font-medium text-sm truncate">{displayName}</h3>
+                      <div className="flex items-center gap-2 mt-1">
+                        {card.mana_cost && (
+                          <ManaCost cost={card.mana_cost} size={14} />
+                        )}
+                        {card.prices?.usd && (
+                          <div className="text-xs text-gray-400">${card.prices.usd}</div>
                         )}
                       </div>
-                      {card.prices?.usd && (
-                        <div className="text-sm text-gray-400 mb-2">${card.prices.usd}</div>
+                      {inCollection > 0 && (
+                        <div className="text-xs text-green-400 mt-1">
+                          <CheckCircle size={12} className="inline mr-1" />
+                          x{inCollection} in collection
+                        </div>
                       )}
-                      <div className="flex gap-2">
+                      {!isValidForCommander && (
+                        <div className="text-xs text-yellow-400 mt-1 flex items-center gap-1">
+                          <AlertCircle size={12} />
+                          Not in commander colors
+                        </div>
+                      )}
+                    </div>
+
+                    {/* Add/Quantity Controls */}
+                    {quantityInDeck > 0 ? (
+                      <div className="flex-shrink-0 flex items-center gap-1" onClick={(e) => e.stopPropagation()}>
+                        <button
+                          onClick={() => {
+                            if (quantityInDeck === 1) {
+                              removeCardFromDeck(card.id);
+                            } else {
+                              updateCardQuantity(card.id, quantityInDeck - 1);
+                            }
+                          }}
+                          className="w-8 h-8 bg-red-600 hover:bg-red-700 rounded-full flex items-center justify-center transition-colors"
+                        >
+                          <Minus size={16} />
+                        </button>
+                        <span className="w-6 text-center text-sm font-medium">{quantityInDeck}</span>
                         <button
                           onClick={() => addCardToDeck(card)}
-                          className="flex-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg flex items-center justify-center gap-2"
+                          className="w-8 h-8 bg-blue-600 hover:bg-blue-700 rounded-full flex items-center justify-center transition-colors"
                         >
-                          <Plus size={20} />
-                          Add to Deck
-                        </button>
-                        <button
-                          onClick={() => handleAddCardToCollection(card.id, 1)}
-                          disabled={isAddingThisCard}
-                          className="px-4 py-2 bg-green-600 hover:bg-green-700 disabled:bg-gray-600 disabled:cursor-not-allowed rounded-lg flex items-center justify-center gap-2"
-                          title="Add to collection"
-                        >
-                          {isAddingThisCard ? (
-                            <Loader2 className="animate-spin" size={20} />
-                          ) : (
-                            <PackagePlus size={20} />
-                          )}
+                          <Plus size={16} />
                         </button>
                       </div>
-                    </div>
+                    ) : (
+                      <button
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          addCardToDeck(card);
+                        }}
+                        className="flex-shrink-0 w-10 h-10 bg-blue-600 hover:bg-blue-700 rounded-full flex items-center justify-center transition-colors"
+                      >
+                        <Plus size={20} />
+                      </button>
+                    )}
+
+                    {/* Add to Collection Button (hidden on mobile by default) */}
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleAddCardToCollection(card.id, 1);
+                      }}
+                      disabled={isAddingThisCard}
+                      className="hidden sm:flex flex-shrink-0 w-10 h-10 bg-green-600 hover:bg-green-700 disabled:bg-gray-600 disabled:cursor-not-allowed rounded-full items-center justify-center transition-colors"
+                      title="Add to collection"
+                    >
+                      {isAddingThisCard ? (
+                        <Loader2 className="animate-spin" size={20} />
+                      ) : (
+                        <PackagePlus size={20} />
+                      )}
+                    </button>
                   </div>
                 );
-              })}
+              })
+              )}
             </div>
           </div>
 
@@ -623,27 +767,39 @@ export default function DeckManager({ initialDeck, onSave }: DeckManagerProps) {
               </select>
 
               {deckFormat === 'commander' && (
-                <select
-                  value={commander?.id || ''}
-                  onChange={e => {
-                    const card =
-                      selectedCards.find(c => c.card.id === e.target.value)?.card ||
-                      null;
-                    setCommander(card);
-                  }}
-                  className="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white"
-                >
-                  <option value="">Select Commander</option>
-                  {selectedCards
-                    .filter(c =>
-                      c.card.type_line?.toLowerCase().includes('legendary')
-                    )
-                    .map(({ card }) => (
-                      <option key={card.id} value={card.id}>
-                        {card.name}
-                      </option>
-                    ))}
-                </select>
+                <div className="space-y-2">
+                  <select
+                    value={commander?.id || ''}
+                    onChange={e => {
+                      const card =
+                        selectedCards.find(c => c.card.id === e.target.value)?.card ||
+                        null;
+                      setCommander(card);
+                    }}
+                    className="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white"
+                  >
+                    <option value="">Select Commander</option>
+                    {selectedCards
+                      .filter(c =>
+                        c.card.type_line?.toLowerCase().includes('legendary')
+                      )
+                      .map(({ card }) => (
+                        <option key={card.id} value={card.id}>
+                          {card.name}
+                        </option>
+                      ))}
+                  </select>
+                  {commander && commanderColors.length > 0 && (
+                    <div className="bg-gray-700 rounded px-3 py-2 flex items-center gap-2">
+                      <span className="text-xs text-gray-400">Commander Colors:</span>
+                      <div className="flex items-center gap-1">
+                        {commanderColors.map(color => (
+                          <ManaSymbol key={color} symbol={color} size={18} />
+                        ))}
+                      </div>
+                    </div>
+                  )}
+                </div>
               )}
 
               <div className="relative">
@@ -682,91 +838,45 @@ export default function DeckManager({ initialDeck, onSave }: DeckManagerProps) {
                   <h3 className="font-bold text-xl">
                     Cards ({selectedCards.reduce((acc, curr) => acc + curr.quantity, 0)})
                   </h3>
-                  {!isLoadingCollection && getMissingCards().length > 0 && (
-                    <div className="flex items-center gap-2 text-sm text-yellow-500">
-                      <AlertCircle size={16} />
-                      <span>{getMissingCards().length} missing</span>
-                    </div>
-                  )}
                 </div>
 
-                {!isLoadingCollection && getMissingCards().length > 0 && (
-                  <button
-                    onClick={handleAddAllMissingCards}
-                    disabled={isAddingAll}
-                    className="w-full px-4 py-2 bg-yellow-600 hover:bg-yellow-700 disabled:bg-gray-600 disabled:cursor-not-allowed rounded-lg flex items-center justify-center gap-2 mb-3 relative"
-                  >
-                    {isAddingAll ? (
-                      <>
-                        <Loader2 className="animate-spin" size={20} />
-                        <span>Adding to collection...</span>
-                      </>
-                    ) : (
-                      <>
-                        <PackagePlus size={20} />
-                        <span>Add All Missing Cards to Collection</span>
-                      </>
-                    )}
-                  </button>
-                )}
-
                 {selectedCards.map(({ card, quantity }) => {
-                  const ownedQuantity = userCollection.get(card.id) || 0;
-                  const isMissing = !isCardInCollection(card.id, quantity);
-                  const neededQuantity = Math.max(0, quantity - ownedQuantity);
+                  const isValidForCommander = deckFormat !== 'commander' || !commander || isCardValidForCommander(card, commanderColors);
 
                   return (
                     <div
                       key={card.id}
-                      className={`flex items-center gap-4 p-2 rounded-lg ${
-                        isMissing
-                          ? 'bg-yellow-900/20 border border-yellow-700/50'
-                          : 'bg-gray-700'
+                      className={`flex items-center gap-3 p-2 rounded-lg bg-gray-700 cursor-pointer hover:bg-gray-650 transition-colors ${
+                        !isValidForCommander ? 'border border-yellow-500/50' : ''
                       }`}
+                      onMouseEnter={() => {
+                        setHoveredCard(card);
+                        setHoverSource('deck');
+                      }}
+                      onMouseLeave={() => {
+                        setHoveredCard(null);
+                        setHoverSource(null);
+                      }}
+                      onClick={() => setSelectedCard(card)}
                     >
                       <img
                         src={card.image_uris?.art_crop}
                         alt={card.name}
-                        className="w-12 h-12 rounded"
+                        className="w-10 h-10 rounded"
                       />
-                      <div className="flex-1">
-                        <h4 className="font-medium flex items-center gap-2">
-                          {card.name}
-                          {isMissing && (
-                            <span className="text-xs bg-yellow-600 px-2 py-0.5 rounded-full flex items-center gap-1">
-                              <AlertCircle size={12} />
-                              Missing {neededQuantity}
-                            </span>
-                          )}
-                          {!isMissing && ownedQuantity > 0 && (
-                            <span className="text-xs bg-green-600 px-2 py-0.5 rounded-full flex items-center gap-1">
-                              <CheckCircle size={12} />
-                              Owned ({ownedQuantity})
-                            </span>
-                          )}
-                        </h4>
+                      <div className="flex-1 min-w-0">
+                        <h4 className="font-medium text-sm truncate">{card.name}</h4>
                         {card.prices?.usd && (
-                          <div className="text-sm text-gray-400">${card.prices.usd}</div>
+                          <div className="text-xs text-gray-400">${card.prices.usd}</div>
+                        )}
+                        {!isValidForCommander && (
+                          <div className="text-xs text-yellow-400 flex items-center gap-1 mt-0.5">
+                            <AlertCircle size={10} />
+                            <span>Not in commander colors</span>
+                          </div>
                         )}
                       </div>
-                      <div className="flex items-center gap-2">
-                        {isMissing && (
-                          <button
-                            onClick={() => handleAddCardToCollection(card.id, neededQuantity)}
-                            disabled={addingCardId === card.id}
-                            className="px-3 py-1 bg-yellow-600 hover:bg-yellow-700 disabled:bg-gray-600 disabled:cursor-not-allowed rounded text-sm flex items-center gap-1"
-                            title={`Add ${neededQuantity} to collection`}
-                          >
-                            {addingCardId === card.id ? (
-                              <Loader2 className="animate-spin" size={16} />
-                            ) : (
-                              <>
-                                <Plus size={16} />
-                                <span className="hidden sm:inline">Add</span>
-                              </>
-                            )}
-                          </button>
-                        )}
+                      <div className="flex items-center gap-2" onClick={(e) => e.stopPropagation()}>
                         <input
                           type="number"
                           value={quantity}
@@ -774,13 +884,13 @@ export default function DeckManager({ initialDeck, onSave }: DeckManagerProps) {
                             updateCardQuantity(card.id, parseInt(e.target.value))
                           }
                           min="1"
-                          className="w-16 px-2 py-1 bg-gray-600 border border-gray-500 rounded text-center"
+                          className="w-14 px-2 py-1 bg-gray-600 border border-gray-500 rounded text-center text-sm"
                         />
                         <button
                           onClick={() => removeCardFromDeck(card.id)}
                           className="text-red-500 hover:text-red-400"
                         >
-                          <Trash2 size={20} />
+                          <Trash2 size={18} />
                         </button>
                       </div>
                     </div>
@@ -788,57 +898,268 @@ export default function DeckManager({ initialDeck, onSave }: DeckManagerProps) {
                 })}
               </div>
 
-              <div className="font-bold text-xl">
-                Total Price: ${totalPrice.toFixed(2)}
-              </div>
-
-              {deckSize > 0 && (
-                <div className="text-gray-400">
-                  Suggested Land Count: {suggestedLandCountValue}
-                  {Object.entries(suggestedLands).map(([landType, count]) => (
-                    <div key={landType}>
-                      {landType}: {count}
-                    </div>
-                  ))}
+              {deckSize > 0 && suggestedLandCountValue > 0 && (
+                <div className="bg-gray-700 rounded-lg p-3">
+                  <div className="flex items-center justify-between mb-2">
+                    <span className="text-sm font-semibold text-gray-300">Suggested Lands</span>
+                    <span className="text-xs text-gray-400">{suggestedLandCountValue} total</span>
+                  </div>
+                  <div className="flex items-center gap-3 flex-wrap">
+                    {Object.entries(suggestedLands).map(([landType, count]) =>
+                      count > 0 ? (
+                        <div key={landType} className="flex items-center gap-1.5 bg-gray-800 px-2 py-1 rounded">
+                          <ManaSymbol symbol={landType} size={20} />
+                          <span className="text-sm font-medium text-white">{count}</span>
+                        </div>
+                      ) : null
+                    )}
+                  </div>
+                  <button
+                    onClick={addSuggestedLandsToDeck}
+                    className="w-full mt-3 px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg flex items-center justify-center gap-2 transition-colors"
+                  >
+                    <Plus size={20} />
+                    Add Suggested Lands
+                  </button>
                 </div>
               )}
 
-              {deckSize > 0 && (
-                <button
-                  onClick={addSuggestedLandsToDeck}
-                  className="w-full px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg flex items-center justify-center gap-2"
-                >
-                  <Plus size={20} />
-                  Add Suggested Lands
-                </button>
-              )}
-
-              <button
-                onClick={saveDeck}
-                disabled={
-                  !deckName.trim() || selectedCards.length === 0 || isSaving
-                }
-                className="w-full px-4 py-2 bg-green-600 hover:bg-green-700 disabled:bg-gray-600 disabled:cursor-not-allowed rounded-lg flex items-center justify-center gap-2 relative"
-              >
-                {isSaving ? (
-                  <>
-                    <Loader2 className="animate-spin text-white absolute left-2 top-1/2 -translate-y-1/2" size={20} />
-                    <span className="opacity-0">Save Deck</span>
-                  </>
-                ) : (
-                  <>
-                    <Save size={20} />
-                    <span>{initialDeck ? 'Update Deck' : 'Save Deck'}</span>
-                  </>
-                )}
-              </button>
             </div>
           </div>
         </div>
       </div>
+
+      {/* Fixed Footer with Price and Actions - Mobile First */}
+      <div className="fixed bottom-16 left-0 right-0 md:left-auto md:right-4 md:bottom-4 md:w-80 z-20 bg-gray-800 border-t border-gray-700 md:border md:rounded-lg shadow-2xl">
+        <div className="p-3 space-y-3">
+          {/* Total Price */}
+          <div className="flex items-center justify-between">
+            <span className="text-sm font-semibold text-gray-300">Total Price</span>
+            <span className="text-xl font-bold text-green-400">${totalPrice.toFixed(2)}</span>
+          </div>
+
+          {/* Action Buttons */}
+          <div className="flex gap-2">
+            {!isLoadingCollection && getMissingCards().length > 0 && (
+              <button
+                onClick={handleAddAllMissingCards}
+                disabled={isAddingAll}
+                className="flex-1 px-3 py-2 bg-yellow-600 hover:bg-yellow-700 disabled:bg-gray-600 disabled:cursor-not-allowed rounded-lg flex items-center justify-center gap-2 text-sm font-medium transition-colors"
+                title="Add missing cards to collection"
+              >
+                {isAddingAll ? (
+                  <Loader2 className="animate-spin" size={18} />
+                ) : (
+                  <>
+                    <PackagePlus size={18} />
+                    <span className="hidden sm:inline">Add Missing</span>
+                  </>
+                )}
+              </button>
+            )}
+            <button
+              onClick={saveDeck}
+              disabled={
+                !deckName.trim() || selectedCards.length === 0 || isSaving
+              }
+              className="flex-1 px-3 py-2 bg-green-600 hover:bg-green-700 disabled:bg-gray-600 disabled:cursor-not-allowed rounded-lg flex items-center justify-center gap-2 text-sm font-medium relative transition-colors"
+            >
+              {isSaving ? (
+                <>
+                  <Loader2 className="animate-spin text-white" size={18} />
+                  <span>Saving...</span>
+                </>
+              ) : (
+                <>
+                  <Save size={18} />
+                  <span>{initialDeck ? 'Update' : 'Save'}</span>
+                </>
+              )}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Hover Card Preview - only show if no card is selected */}
+      {hoveredCard && !selectedCard && (() => {
+        const currentFaceIndex = getCurrentFaceIndex(hoveredCard.id);
+        const isMultiFaced = isDoubleFaced(hoveredCard);
+        const currentFace = isMultiFaced && hoveredCard.card_faces
+          ? hoveredCard.card_faces[currentFaceIndex]
+          : null;
+
+        const displayName = currentFace?.name || hoveredCard.name;
+        const displayTypeLine = currentFace?.type_line || hoveredCard.type_line;
+        const displayOracleText = currentFace?.oracle_text || hoveredCard.oracle_text;
+
+        // Position preview based on hover source
+        const positionClass = hoverSource === 'deck' ? 'left-8' : 'right-8';
+
+        return (
+          <div className={`hidden lg:block fixed top-1/2 ${positionClass} transform -translate-y-1/2 z-30 pointer-events-none`}>
+            <div className="bg-gray-800 rounded-lg shadow-2xl p-4 max-w-md">
+              <div className="relative">
+                <img
+                  src={getCardLargeImageUri(hoveredCard, currentFaceIndex)}
+                  alt={displayName}
+                  className="w-full h-auto rounded-lg shadow-lg"
+                />
+                {isMultiFaced && (
+                  <div className="absolute top-2 right-2 bg-purple-600 text-white text-xs font-bold px-2 py-1 rounded-full shadow-lg">
+                    Face {currentFaceIndex + 1}/{hoveredCard.card_faces!.length}
+                  </div>
+                )}
+              </div>
+              <div className="mt-3 space-y-2">
+                <h3 className="text-xl font-bold">{displayName}</h3>
+                <p className="text-sm text-gray-400">{displayTypeLine}</p>
+                {displayOracleText && (
+                  <p className="text-sm text-gray-300 border-t border-gray-700 pt-2">
+                    {displayOracleText}
+                  </p>
+                )}
+                {hoveredCard.prices?.usd && (
+                  <div className="text-sm text-green-400 font-semibold border-t border-gray-700 pt-2">
+                    ${hoveredCard.prices.usd}
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        );
+      })()}
+
+      {/* Card Detail Panel - slides in from right */}
+      {selectedCard && (() => {
+        const currentFaceIndex = getCurrentFaceIndex(selectedCard.id);
+        const isMultiFaced = isDoubleFaced(selectedCard);
+        const currentFace = isMultiFaced && selectedCard.card_faces
+          ? selectedCard.card_faces[currentFaceIndex]
+          : null;
+
+        const displayName = currentFace?.name || selectedCard.name;
+        const displayTypeLine = currentFace?.type_line || selectedCard.type_line;
+        const displayOracleText = currentFace?.oracle_text || selectedCard.oracle_text;
+
+        return (
+          <>
+            {/* Backdrop */}
+            <div
+              className="fixed inset-0 bg-black bg-opacity-50 z-[110] transition-opacity duration-300"
+              onClick={() => setSelectedCard(null)}
+            />
+
+            {/* Sliding Panel */}
+            <div className="fixed top-0 right-0 h-full w-full md:w-96 bg-gray-800 shadow-2xl z-[120] overflow-y-auto animate-slide-in-right">
+              {/* Close button */}
+              <button
+                onClick={() => setSelectedCard(null)}
+                className="fixed top-4 right-4 bg-gray-700 hover:bg-gray-600 text-white p-2 md:p-1.5 rounded-full transition-colors z-[130] shadow-lg"
+                aria-label="Close"
+              >
+                <X size={24} className="md:w-5 md:h-5" />
+              </button>
+
+              <div className="p-4 sm:p-6">
+                {/* Card Image */}
+                <div className="relative mb-4 max-w-sm mx-auto">
+                  <img
+                    src={getCardLargeImageUri(selectedCard, currentFaceIndex)}
+                    alt={displayName}
+                    className="w-full h-auto rounded-lg shadow-lg"
+                  />
+                  {isMultiFaced && (
+                    <>
+                      <div className="absolute top-2 right-2 bg-purple-600 text-white text-xs font-bold px-2 py-1 rounded-full shadow-lg">
+                        Face {currentFaceIndex + 1}/{selectedCard.card_faces!.length}
+                      </div>
+                      <button
+                        onClick={() => toggleCardFace(selectedCard.id, selectedCard.card_faces!.length)}
+                        className="absolute bottom-2 right-2 bg-purple-600 hover:bg-purple-700 text-white p-2 rounded-full shadow-lg transition-all"
+                        title="Flip card"
+                      >
+                        <RefreshCw size={20} />
+                      </button>
+                    </>
+                  )}
+                </div>
+
+                {/* Card Info */}
+                <div className="space-y-4">
+                  <div>
+                    <h2 className="text-xl md:text-2xl font-bold text-white mb-2">{displayName}</h2>
+                    <p className="text-xs sm:text-sm text-gray-400">{displayTypeLine}</p>
+                  </div>
+
+                  {displayOracleText && (
+                    <div className="border-t border-gray-700 pt-3">
+                      <p className="text-sm text-gray-300">{displayOracleText}</p>
+                    </div>
+                  )}
+
+                  {selectedCard.prices?.usd && (
+                    <div className="border-t border-gray-700 pt-3">
+                      <div className="text-lg text-green-400 font-semibold">
+                        ${selectedCard.prices.usd} each
+                      </div>
+                    </div>
+                  )}
+
+                  {/* Collection Status */}
+                  {userCollection.has(selectedCard.id) && (
+                    <div className="border-t border-gray-700 pt-3">
+                      <div className="text-sm text-green-400">
+                        <CheckCircle size={16} className="inline mr-1" />
+                        x{userCollection.get(selectedCard.id)} in your collection
+                      </div>
+                    </div>
+                  )}
+
+                  {/* Deck Quantity Management */}
+                  <div className="border-t border-gray-700 pt-3">
+                    <h3 className="text-lg font-semibold mb-3">Quantity in Deck</h3>
+                    <div className="flex items-center justify-between bg-gray-900 rounded-lg p-4">
+                      <button
+                        onClick={() => {
+                          const cardInDeck = selectedCards.find(c => c.card.id === selectedCard.id);
+                          const currentQuantity = cardInDeck?.quantity || 0;
+                          if (currentQuantity === 1) {
+                            removeCardFromDeck(selectedCard.id);
+                          } else if (currentQuantity > 1) {
+                            updateCardQuantity(selectedCard.id, currentQuantity - 1);
+                          }
+                        }}
+                        disabled={!selectedCards.find(c => c.card.id === selectedCard.id)}
+                        className="bg-red-600 hover:bg-red-700 disabled:bg-gray-600 disabled:cursor-not-allowed text-white p-2 rounded-lg transition-colors"
+                      >
+                        <Minus size={20} />
+                      </button>
+
+                      <div className="text-center">
+                        <div className="text-3xl font-bold">
+                          {selectedCards.find(c => c.card.id === selectedCard.id)?.quantity || 0}
+                        </div>
+                        <div className="text-xs text-gray-400">copies</div>
+                      </div>
+
+                      <button
+                        onClick={() => addCardToDeck(selectedCard)}
+                        className="bg-green-600 hover:bg-green-700 text-white p-2 rounded-lg transition-colors"
+                      >
+                        <Plus size={20} />
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </>
+        );
+      })()}
+
       {snackbar && (
         <div
-          className={`fixed bottom-4 right-4 bg-green-500 text-white p-4 rounded-lg shadow-lg transition-all duration-300 ${
+          className={`fixed bottom-4 right-4 text-white p-4 rounded-lg shadow-lg transition-all duration-300 z-[140] ${
             snackbar.type === 'success' ? 'bg-green-500' : 'bg-red-500'
           }`}
         >

src/components/LifeCounter.tsx

@@ -157,11 +157,11 @@ import React, { useState, useEffect } from 'react';
       );
 
       return (
-        <div className="min-h-screen bg-gray-900 text-white p-6">
+        <div className="relative md:min-h-screen bg-gray-900 text-white p-6">
           <div className="max-w-7xl mx-auto">
             <h1 className="text-3xl font-bold mb-6">Life Counter</h1>
             {!setupComplete ? renderSetupForm() : renderLifeCounters()}
           </div>
         </div>
       );
-    }
+    }

src/components/ManaCost.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+
+// Map mana symbols to their icon paths
+const MANA_ICONS: Record<string, string> = {
+  W: '/mana-color/plains.png',
+  U: '/mana-color/island.png',
+  B: '/mana-color/swamp.png',
+  R: '/mana-color/moutain.png', // Note: filename has typo "moutain"
+  G: '/mana-color/forest.png',
+};
+
+interface ManaSymbolProps {
+  symbol: string;
+  size?: number;
+}
+
+// Renders a single mana symbol (either as an icon or as text for numbers/other)
+export function ManaSymbol({ symbol, size = 16 }: ManaSymbolProps) {
+  const iconPath = MANA_ICONS[symbol];
+
+  if (iconPath) {
+    return (
+      <img
+        src={iconPath}
+        alt={symbol}
+        className="inline-block"
+        style={{ width: size, height: size }}
+      />
+    );
+  }
+
+  // For numbers and other symbols, show as a circle with the symbol
+  return (
+    <span
+      className="inline-flex items-center justify-center bg-gray-500 text-white font-bold rounded-full"
+      style={{ width: size, height: size, fontSize: size * 0.6 }}
+    >
+      {symbol}
+    </span>
+  );
+}
+
+interface ManaCostProps {
+  cost: string;
+  size?: number;
+}
+
+// Parses and renders a full mana cost string like "{2}{W}{U}"
+export function ManaCost({ cost, size = 16 }: ManaCostProps) {
+  if (!cost) return null;
+
+  // Parse mana cost string: {2}{W}{U} -> ['2', 'W', 'U']
+  const symbols = cost.match(/\{([^}]+)\}/g)?.map(s => s.slice(1, -1)) || [];
+
+  if (symbols.length === 0) return null;
+
+  return (
+    <span className="inline-flex items-center gap-0.5">
+      {symbols.map((symbol, index) => (
+        <ManaSymbol key={index} symbol={symbol} size={size} />
+      ))}
+    </span>
+  );
+}
+
+// Helper to get icon path for a color (for use in filters, etc.)
+export function getManaIconPath(color: string): string | null {
+  return MANA_ICONS[color] || null;
+}
+
+export default ManaCost;

src/components/MigrateDeckButton.tsx

@@ -0,0 +1,64 @@
+import React, { useState } from 'react';
+import { Database, Loader2 } from 'lucide-react';
+import { migrateExistingDecks } from '../utils/migrateDeckData';
+
+export default function MigrateDeckButton() {
+  const [isMigrating, setIsMigrating] = useState(false);
+  const [result, setResult] = useState<string | null>(null);
+
+  const handleMigrate = async () => {
+    if (!confirm('This will update all existing decks with optimization data. Continue?')) {
+      return;
+    }
+
+    setIsMigrating(true);
+    setResult(null);
+
+    try {
+      await migrateExistingDecks();
+      setResult('Migration completed successfully!');
+    } catch (error) {
+      console.error('Migration error:', error);
+      setResult('Migration failed. Check console for details.');
+    } finally {
+      setIsMigrating(false);
+    }
+  };
+
+  return (
+    <div className="bg-gray-800 rounded-lg p-4 border border-gray-700">
+      <h3 className="text-lg font-semibold mb-2 flex items-center gap-2">
+        <Database size={20} />
+        Deck Migration Tool
+      </h3>
+      <p className="text-sm text-gray-400 mb-4">
+        Update existing decks with optimization fields (cover image, validation cache, card count).
+        Run this once after the database migration.
+      </p>
+
+      <button
+        onClick={handleMigrate}
+        disabled={isMigrating}
+        className="px-4 py-2 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 disabled:cursor-not-allowed text-white rounded-lg flex items-center gap-2 transition-colors"
+      >
+        {isMigrating ? (
+          <>
+            <Loader2 className="animate-spin" size={20} />
+            Migrating...
+          </>
+        ) : (
+          <>
+            <Database size={20} />
+            Migrate Decks
+          </>
+        )}
+      </button>
+
+      {result && (
+        <p className={`mt-3 text-sm ${result.includes('success') ? 'text-green-400' : 'text-red-400'}`}>
+          {result}
+        </p>
+      )}
+    </div>
+  );
+}

src/components/Modal.tsx

@@ -53,12 +53,12 @@ export default function Modal({
     <>
       {/* Backdrop */}
       <div
-        className="fixed inset-0 bg-black bg-opacity-50 z-50 transition-opacity duration-300 animate-fade-in"
+        className="fixed inset-0 bg-black bg-opacity-50 z-[110] transition-opacity duration-300 animate-fade-in"
         onClick={onClose}
       />
 
       {/* Modal */}
-      <div className="fixed inset-0 z-50 flex items-center justify-center p-4 pointer-events-none">
+      <div className="fixed inset-0 z-[120] flex items-center justify-center p-4 pointer-events-none">
         <div
           className={`${sizeClasses[size]} w-full bg-gray-800 rounded-lg shadow-2xl pointer-events-auto animate-scale-in`}
           onClick={(e) => e.stopPropagation()}

src/components/Navigation.tsx

@@ -1,199 +1,157 @@
 import React, { useState, useRef, useEffect } from 'react';
-    import { Home, PlusSquare, Library, LogOut, Settings, ChevronDown, Search, Heart, Menu } from 'lucide-react';
-    import { useAuth } from '../contexts/AuthContext';
-    import { supabase } from '../lib/supabase';
+import { Library, LogOut, ChevronDown, Search, Heart, Users } from 'lucide-react';
+import { useAuth } from '../contexts/AuthContext';
+import { supabase } from '../lib/supabase';
 
-    type Page = 'home' | 'deck' | 'login' | 'collection' | 'profile' | 'search' | 'life-counter';
+type Page = 'home' | 'deck' | 'login' | 'collection' | 'search' | 'life-counter' | 'community';
 
-    interface NavigationProps {
-      currentPage: Page;
-      setCurrentPage: (page: Page) => void;
-    }
+interface NavigationProps {
+  currentPage: Page;
+  setCurrentPage: (page: Page) => void;
+}
 
-    export default function Navigation({ currentPage, setCurrentPage }: NavigationProps) {
-      const { user, signOut } = useAuth();
-      const [showDropdown, setShowDropdown] = useState(false);
-      const [showMobileMenu, setShowMobileMenu] = useState(false);
-      const dropdownRef = useRef<HTMLDivElement>(null);
-      const mobileMenuRef = useRef<HTMLDivElement>(null);
-      const [username, setUsername] = useState<string | null>(null);
+export default function Navigation({ currentPage, setCurrentPage }: NavigationProps) {
+  const { user, signOut } = useAuth();
+  const [showDropdown, setShowDropdown] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const [username, setUsername] = useState<string | null>(null);
 
-      useEffect(() => {
-        const fetchProfile = async () => {
-          if (user) {
-            const { data } = await supabase
-              .from('profiles')
-              .select('username')
-              .eq('id', user.id)
-              .single();
-            
-            if (data) {
-              setUsername(data.username);
-            }
-          }
-        };
+  useEffect(() => {
+    const fetchProfile = async () => {
+      if (user) {
+        const { data } = await supabase
+          .from('profiles')
+          .select('username')
+          .eq('id', user.id)
+          .single();
 
-        fetchProfile();
-      }, [user]);
-
-      useEffect(() => {
-        const handleClickOutside = (event: MouseEvent) => {
-          if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
-            setShowDropdown(false);
-          }
-          if (mobileMenuRef.current && !mobileMenuRef.current.contains(event.target as Node)) {
-            setShowMobileMenu(false);
-          }
-        };
-
-        document.addEventListener('mousedown', handleClickOutside);
-        return () => document.removeEventListener('mousedown', handleClickOutside);
-      }, []);
-
-      const navItems = [
-        { id: 'home' as const, label: 'Home', icon: Home },
-        { id: 'deck' as const, label: 'New Deck', icon: PlusSquare },
-        { id: 'collection' as const, label: 'Collection', icon: Library },
-        { id: 'search' as const, label: 'Search', icon: Search },
-        { id: 'life-counter' as const, label: 'Life Counter', icon: Heart },
-      ];
-
-      const handleSignOut = async () => {
-        try {
-          await signOut();
-          setCurrentPage('login');
-        } catch (error) {
-          console.error('Error signing out:', error);
+        if (data) {
+          setUsername(data.username);
         }
-      };
+      }
+    };
 
-      const getAvatarUrl = (userId: string) => {
-        return `https://api.dicebear.com/7.x/avataaars/svg?seed=${userId}&backgroundColor=b6e3f4,c0aede,d1d4f9`;
-      };
+    fetchProfile();
+  }, [user]);
 
-      return (
-        <>
-          {/* Desktop Navigation - Top */}
-          <nav className="hidden md:block fixed top-0 left-0 right-0 bg-gray-800 border-b border-gray-700 z-50 animate-slide-in-left">
-            <div className="max-w-7xl mx-auto px-4">
-              <div className="flex items-center justify-between h-16">
-                <div className="flex items-center space-x-8">
-                  <span className="text-2xl font-bold text-orange-500 animate-bounce-in">Deckerr</span>
-                  {navItems.map((item) => (
-                    <button
-                      key={item.id}
-                      onClick={() => setCurrentPage(item.id)}
-                      className={`flex items-center space-x-2 px-3 py-2 rounded-md text-sm font-medium transition-smooth
-                        ${currentPage === item.id
-                          ? 'text-white bg-gray-900 animate-pulse-glow'
-                          : 'text-gray-300 hover:text-white hover:bg-gray-700'
-                        }`}
-                    >
-                      <item.icon size={20} />
-                      <span>{item.label}</span>
-                    </button>
-                  ))}
-                </div>
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setShowDropdown(false);
+      }
+    };
 
-                {user && (
-                  <div className="flex items-center space-x-4">
-                    <div className="relative" ref={dropdownRef}>
-                      <button
-                        onClick={() => setShowDropdown(!showDropdown)}
-                        className="flex items-center space-x-3 px-3 py-2 rounded-md hover:bg-gray-700 transition-smooth"
-                      >
-                        <img
-                          src={getAvatarUrl(user.id)}
-                          alt="User avatar"
-                          className="w-8 h-8 rounded-full bg-gray-700 transition-smooth hover:scale-110"
-                        />
-                        <span className="text-gray-300 text-sm">{username || user.email}</span>
-                        <ChevronDown size={16} className="text-gray-400" />
-                      </button>
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
 
-                      {showDropdown && (
-                        <div className="absolute right-0 mt-2 w-48 bg-gray-800 rounded-md shadow-lg py-1 border border-gray-700 animate-scale-in glass-effect">
-                          <button
-                            onClick={() => {
-                              setCurrentPage('profile');
-                              setShowDropdown(false);
-                            }}
-                            className="flex items-center space-x-2 w-full px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 transition-smooth"
-                          >
-                            <Settings size={16} />
-                            <span>Profile Settings</span>
-                          </button>
-                          <button
-                            onClick={handleSignOut}
-                            className="flex items-center space-x-2 w-full px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 transition-smooth"
-                          >
-                            <LogOut size={16} />
-                            <span>Sign Out</span>
-                          </button>
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                )}
-              </div>
-            </div>
-          </nav>
+  const navItems = [
+    { id: 'home' as const, label: 'Decks', icon: Library },
+    { id: 'collection' as const, label: 'Collection', icon: Library },
+    { id: 'community' as const, label: 'Community', icon: Users },
+    { id: 'search' as const, label: 'Search', icon: Search },
+    { id: 'life-counter' as const, label: 'Life', icon: Heart },
+  ];
 
-          {/* Mobile Navigation - Bottom */}
-          <nav className="md:hidden fixed bottom-0 left-0 right-0 bg-gray-800 border-t border-gray-700 z-50 animate-slide-in-right">
-            <div className="flex justify-between items-center h-16 px-4">
+  const handleSignOut = async () => {
+    try {
+      await signOut();
+      setCurrentPage('login');
+    } catch (error) {
+      console.error('Error signing out:', error);
+    }
+  };
+
+  const getAvatarUrl = (userId: string) => {
+    return `https://api.dicebear.com/7.x/avataaars/svg?seed=${userId}&backgroundColor=b6e3f4,c0aede,d1d4f9`;
+  };
+
+  return (
+    <>
+      {/* Desktop Navigation - Top */}
+      <nav className="hidden md:block fixed top-0 left-0 right-0 bg-gray-800 border-b border-gray-700 z-[100] animate-slide-in-left">
+        <div className="max-w-7xl mx-auto px-4">
+          <div className="flex items-center justify-between h-16">
+            <div className="flex items-center space-x-8">
               <span className="text-2xl font-bold text-orange-500 animate-bounce-in">Deckerr</span>
-              <div className="relative" ref={mobileMenuRef}>
+              {navItems.map((item) => (
                 <button
-                  onClick={() => setShowMobileMenu(!showMobileMenu)}
-                  className="text-gray-300 hover:text-white"
+                  key={item.id}
+                  onClick={() => setCurrentPage(item.id)}
+                  className={`flex items-center space-x-2 px-3 py-2 rounded-md text-sm font-medium transition-smooth
+                    ${currentPage === item.id
+                      ? 'text-white bg-gray-900 animate-pulse-glow'
+                      : 'text-gray-300 hover:text-white hover:bg-gray-700'
+                    }`}
                 >
-                  <Menu size={24} />
+                  <item.icon size={20} />
+                  <span>{item.label}</span>
                 </button>
-                {showMobileMenu && (
-                  <div className="absolute right-0 bottom-16 w-48 bg-gray-800 rounded-md shadow-lg py-1 border border-gray-700 animate-scale-in glass-effect">
-                    {navItems.map((item) => (
+              ))}
+            </div>
+
+            {user && (
+              <div className="flex items-center space-x-4">
+                <div className="relative" ref={dropdownRef}>
+                  <button
+                    onClick={() => setShowDropdown(!showDropdown)}
+                    className="flex items-center space-x-3 px-3 py-2 rounded-md hover:bg-gray-700 transition-smooth"
+                  >
+                    <img
+                      src={getAvatarUrl(user.id)}
+                      alt="User avatar"
+                      className="w-8 h-8 rounded-full bg-gray-700 transition-smooth hover:scale-110"
+                    />
+                    <span className="text-gray-300 text-sm">{username || user.email}</span>
+                    <ChevronDown size={16} className="text-gray-400" />
+                  </button>
+
+                  {showDropdown && (
+                    <div className="absolute right-0 mt-2 w-48 bg-gray-800 rounded-md shadow-lg py-1 border border-gray-700 animate-scale-in glass-effect z-[110]">
                       <button
-                        key={item.id}
-                        onClick={() => {
-                          setCurrentPage(item.id);
-                          setShowMobileMenu(false);
-                        }}
+                        onClick={handleSignOut}
                         className="flex items-center space-x-2 w-full px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 transition-smooth"
                       >
-                        <item.icon size={16} />
-                        <span>{item.label}</span>
+                        <LogOut size={16} />
+                        <span>Sign Out</span>
                       </button>
-                    ))}
-                    {user && (
-                      <>
-                        <button
-                          onClick={() => {
-                            setCurrentPage('profile');
-                            setShowMobileMenu(false);
-                          }}
-                          className="flex items-center space-x-2 w-full px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 transition-smooth"
-                        >
-                          <Settings size={16} />
-                          <span>Profile Settings</span>
-                        </button>
-                        <button
-                          onClick={handleSignOut}
-                          className="flex items-center space-x-2 w-full px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 transition-smooth"
-                        >
-                          <LogOut size={16} />
-                          <span>Sign Out</span>
-                        </button>
-                      </>
-                    )}
-                  </div>
-                )}
+                    </div>
+                  )}
+                </div>
               </div>
-            </div>
-          </nav>
+            )}
+          </div>
+        </div>
+      </nav>
 
-          {/* Content Padding */}
-          <div className="md:pt-16 pb-16 md:pb-0" />
-        </>
-      );
-    }
+      {/* Mobile Navigation - Bottom */}
+      <nav className="md:hidden fixed bottom-0 left-0 right-0 bg-gray-800 border-t border-gray-700 z-50 safe-area-bottom">
+        <div className="flex justify-around items-center h-16 px-2">
+          {navItems.map((item) => (
+            <button
+              key={item.id}
+              onClick={() => setCurrentPage(item.id)}
+              className={`flex flex-col items-center justify-center flex-1 h-full transition-colors ${
+                currentPage === item.id
+                  ? 'text-blue-500'
+                  : 'text-gray-400 hover:text-gray-200'
+              }`}
+            >
+              <item.icon size={20} />
+              <span className="text-xs mt-1">{item.label}</span>
+            </button>
+          ))}
+
+          {/* Sign Out button for mobile */}
+          <button
+            onClick={handleSignOut}
+            className="flex flex-col items-center justify-center flex-1 h-full text-gray-400 hover:text-gray-200 transition-colors"
+          >
+            <LogOut size={20} />
+            <span className="text-xs mt-1">Logout</span>
+          </button>
+        </div>
+      </nav>
+    </>
+  );
+}

src/components/PWAInstallPrompt.tsx

@@ -0,0 +1,128 @@
+import React, { useEffect, useState } from 'react';
+import { Download, X } from 'lucide-react';
+
+interface BeforeInstallPromptEvent extends Event {
+  prompt: () => Promise<void>;
+  userChoice: Promise<{ outcome: 'accepted' | 'dismissed' }>;
+}
+
+export default function PWAInstallPrompt() {
+  const [deferredPrompt, setDeferredPrompt] = useState<BeforeInstallPromptEvent | null>(null);
+  const [showPrompt, setShowPrompt] = useState(false);
+  const [isInstalled, setIsInstalled] = useState(false);
+
+  useEffect(() => {
+    // Check if already installed
+    const isStandalone = window.matchMedia('(display-mode: standalone)').matches;
+    if (isStandalone || (window.navigator as any).standalone) {
+      setIsInstalled(true);
+      return;
+    }
+
+    // Check if user dismissed the prompt before
+    const dismissed = localStorage.getItem('pwa-install-dismissed');
+    const dismissedTime = dismissed ? parseInt(dismissed) : 0;
+    const daysSinceDismissed = (Date.now() - dismissedTime) / (1000 * 60 * 60 * 24);
+
+    // Show prompt again after 7 days
+    if (daysSinceDismissed > 7) {
+      localStorage.removeItem('pwa-install-dismissed');
+    }
+
+    const handler = (e: Event) => {
+      e.preventDefault();
+      const promptEvent = e as BeforeInstallPromptEvent;
+      setDeferredPrompt(promptEvent);
+
+      // Show prompt if not dismissed recently
+      if (!dismissed || daysSinceDismissed > 7) {
+        setShowPrompt(true);
+      }
+    };
+
+    window.addEventListener('beforeinstallprompt', handler);
+
+    // Detect if app was installed
+    window.addEventListener('appinstalled', () => {
+      setIsInstalled(true);
+      setShowPrompt(false);
+      setDeferredPrompt(null);
+    });
+
+    return () => {
+      window.removeEventListener('beforeinstallprompt', handler);
+    };
+  }, []);
+
+  const handleInstallClick = async () => {
+    if (!deferredPrompt) return;
+
+    try {
+      await deferredPrompt.prompt();
+      const choiceResult = await deferredPrompt.userChoice;
+
+      if (choiceResult.outcome === 'accepted') {
+        console.log('User accepted the install prompt');
+        setShowPrompt(false);
+      } else {
+        console.log('User dismissed the install prompt');
+        handleDismiss();
+      }
+    } catch (error) {
+      console.error('Error during installation:', error);
+    } finally {
+      setDeferredPrompt(null);
+    }
+  };
+
+  const handleDismiss = () => {
+    setShowPrompt(false);
+    localStorage.setItem('pwa-install-dismissed', Date.now().toString());
+  };
+
+  if (isInstalled || !showPrompt) {
+    return null;
+  }
+
+  return (
+    <div className="fixed bottom-20 md:bottom-4 left-4 right-4 md:left-auto md:right-4 md:max-w-sm z-[105] animate-slide-in-bottom">
+      <div className="bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg shadow-2xl p-4 text-white">
+        <button
+          onClick={handleDismiss}
+          className="absolute top-2 right-2 text-white/80 hover:text-white transition-colors"
+          aria-label="Dismiss"
+        >
+          <X size={20} />
+        </button>
+
+        <div className="flex items-start gap-3 pr-6">
+          <div className="bg-white/20 rounded-lg p-2 flex-shrink-0">
+            <Download size={24} />
+          </div>
+
+          <div className="flex-1">
+            <h3 className="font-bold text-lg mb-1">Install Deckerr</h3>
+            <p className="text-sm text-white/90 mb-3">
+              Install our app for quick access and offline support!
+            </p>
+
+            <div className="flex gap-2">
+              <button
+                onClick={handleInstallClick}
+                className="flex-1 bg-white text-blue-600 font-semibold py-2 px-4 rounded-lg hover:bg-blue-50 transition-colors min-h-[44px]"
+              >
+                Install
+              </button>
+              <button
+                onClick={handleDismiss}
+                className="flex-1 bg-white/20 font-semibold py-2 px-4 rounded-lg hover:bg-white/30 transition-colors min-h-[44px]"
+              >
+                Not Now
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/Profile.tsx

@@ -1,128 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Save } from 'lucide-react';
-import { useAuth } from '../contexts/AuthContext';
-import { supabase } from '../lib/supabase';
-
-const THEME_COLORS = ['red', 'green', 'blue', 'yellow', 'grey', 'purple'];
-
-export default function Profile() {
-  const { user } = useAuth();
-  const [username, setUsername] = useState('');
-  const [themeColor, setThemeColor] = useState('blue');
-  const [loading, setLoading] = useState(true);
-  const [saving, setSaving] = useState(false);
-
-  useEffect(() => {
-    const loadProfile = async () => {
-      if (user) {
-        const { data, error } = await supabase
-          .from('profiles')
-          .select('username, theme_color')
-          .eq('id', user.id)
-          .single();
-
-        if (data) {
-          setUsername(data.username || '');
-          setThemeColor(data.theme_color || 'blue');
-        }
-        setLoading(false);
-      }
-    };
-
-    loadProfile();
-  }, [user]);
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!user) return;
-
-    setSaving(true);
-    try {
-      const { error } = await supabase
-        .from('profiles')
-        .upsert({
-          id: user.id,
-          username,
-          theme_color: themeColor,
-          updated_at: new Date()
-        });
-
-      if (error) throw error;
-      alert('Profile updated successfully!');
-    } catch (error) {
-      console.error('Error updating profile:', error);
-      alert('Failed to update profile');
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  if (loading) {
-    return (
-      <div className="min-h-screen bg-gray-900 flex items-center justify-center">
-        <div className="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-blue-500"></div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="min-h-screen bg-gray-900 text-white p-6">
-      <div className="max-w-2xl mx-auto">
-        <h1 className="text-3xl font-bold mb-8">Profile Settings</h1>
-        
-        <form onSubmit={handleSubmit} className="space-y-6">
-          <div>
-            <label className="block text-sm font-medium text-gray-300 mb-2">
-              Username
-            </label>
-            <input
-              type="text"
-              value={username}
-              onChange={(e) => setUsername(e.target.value)}
-              className="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-              placeholder="Enter your username"
-            />
-          </div>
-
-          <div>
-            <label className="block text-sm font-medium text-gray-300 mb-2">
-              Theme Color
-            </label>
-            <div className="grid grid-cols-3 gap-4">
-              {THEME_COLORS.map((color) => (
-                <button
-                  key={color}
-                  type="button"
-                  onClick={() => setThemeColor(color)}
-                  className={`h-12 rounded-lg border-2 transition-all capitalize
-                    ${themeColor === color
-                      ? 'border-white scale-105'
-                      : 'border-transparent hover:border-gray-600'
-                    }`}
-                  style={{ backgroundColor: `var(--color-${color}-primary)` }}
-                >
-                  {color}
-                </button>
-              ))}
-            </div>
-          </div>
-
-          <button
-            type="submit"
-            disabled={saving}
-            className="w-full flex items-center justify-center gap-2 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 text-white font-semibold py-2 px-4 rounded-lg transition duration-200"
-          >
-            {saving ? (
-              <div className="animate-spin rounded-full h-5 w-5 border-t-2 border-b-2 border-white"></div>
-            ) : (
-              <>
-                <Save size={20} />
-                Save Changes
-              </>
-            )}
-          </button>
-        </form>
-      </div>
-    </div>
-  );
-}

src/components/TradeCreator.tsx

@@ -0,0 +1,694 @@
+import React, { useState, useEffect } from 'react';
+import { X, ArrowLeftRight, ArrowRight, ArrowLeft, Minus, Send, Gift, Loader2, Search } from 'lucide-react';
+import { useAuth } from '../contexts/AuthContext';
+import { useToast } from '../contexts/ToastContext';
+import { getUserCollection, getCardsByIds } from '../services/api';
+import { createTrade } from '../services/tradesService';
+import { Card } from '../types';
+
+interface CollectionItem {
+  card: Card;
+  quantity: number;
+}
+
+interface SelectedCard {
+  card: Card;
+  quantity: number;
+  maxQuantity: number;
+}
+
+// ============ MOVED OUTSIDE TO PREVENT RE-RENDER ============
+
+interface CollectionGridProps {
+  items: CollectionItem[];
+  selectedCards: Map<string, SelectedCard>;
+  onAdd: (card: Card, maxQty: number) => void;
+  onRemove: (cardId: string) => void;
+  emptyMessage: string;
+  selectionColor: 'green' | 'blue';
+  searchValue: string;
+  onSearchChange: (value: string) => void;
+  searchPlaceholder: string;
+}
+
+function CollectionGrid({
+  items,
+  selectedCards,
+  onAdd,
+  onRemove,
+  emptyMessage,
+  selectionColor,
+  searchValue,
+  onSearchChange,
+  searchPlaceholder,
+}: CollectionGridProps) {
+  const ringColor = selectionColor === 'green' ? 'ring-green-500' : 'ring-blue-500';
+  const badgeColor = selectionColor === 'green' ? 'bg-green-600' : 'bg-blue-500';
+
+  const filteredItems = items.filter(({ card }) =>
+    card.name.toLowerCase().includes(searchValue.toLowerCase())
+  );
+
+  return (
+    <div className="space-y-3">
+      <div className="relative">
+        <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" size={16} />
+        <input
+          type="text"
+          value={searchValue}
+          onChange={(e) => onSearchChange(e.target.value)}
+          placeholder={searchPlaceholder}
+          className="w-full pl-9 pr-8 py-2 bg-gray-700 border border-gray-600 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+        />
+        {searchValue && (
+          <button
+            onClick={() => onSearchChange('')}
+            className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-white"
+          >
+            <X size={16} />
+          </button>
+        )}
+      </div>
+
+      {items.length === 0 ? (
+        <p className="text-gray-400 text-center py-8">{emptyMessage}</p>
+      ) : filteredItems.length === 0 ? (
+        <p className="text-gray-400 text-center py-8">No cards match "{searchValue}"</p>
+      ) : (
+        <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 gap-2">
+          {filteredItems.map(({ card, quantity }) => {
+            const selected = selectedCards.get(card.id);
+            const remainingQty = quantity - (selected?.quantity || 0);
+            return (
+              <div
+                key={card.id}
+                className={`relative cursor-pointer rounded-lg overflow-hidden transition active:scale-95 ${
+                  selected ? `ring-2 ${ringColor}` : 'active:ring-2 active:ring-gray-500'
+                }`}
+                onClick={() => remainingQty > 0 && onAdd(card, quantity)}
+              >
+                <img
+                  src={card.image_uris?.small || card.image_uris?.normal}
+                  alt={card.name}
+                  className={`w-full h-auto ${remainingQty === 0 ? 'opacity-50' : ''}`}
+                />
+                <div className="absolute top-1 right-1 bg-gray-900/80 text-white text-[10px] px-1 py-0.5 rounded">
+                  {remainingQty}/{quantity}
+                </div>
+                {card.prices?.usd && (
+                  <div className="absolute top-1 left-1 bg-gray-900/80 text-green-400 text-[10px] px-1 py-0.5 rounded font-semibold">
+                    ${card.prices.usd}
+                  </div>
+                )}
+                {selected && (
+                  <button
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onRemove(card.id);
+                    }}
+                    className={`absolute bottom-1 left-1 ${badgeColor} text-white text-[10px] px-1.5 py-0.5 rounded flex items-center gap-0.5`}
+                  >
+                    +{selected.quantity}
+                    <Minus size={10} />
+                  </button>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface SelectedCardsSummaryProps {
+  cards: Map<string, SelectedCard>;
+  onRemove: (cardId: string) => void;
+  label: string;
+  emptyLabel: string;
+  color: 'green' | 'blue';
+}
+
+function SelectedCardsSummary({ cards, onRemove, label, emptyLabel, color }: SelectedCardsSummaryProps) {
+  const bgColor = color === 'green' ? 'bg-green-900/50' : 'bg-blue-900/50';
+  const textColor = color === 'green' ? 'text-green-400' : 'text-blue-400';
+
+  // Calculate total price
+  const totalPrice = Array.from(cards.values()).reduce((total, item) => {
+    const price = item.card.prices?.usd ? parseFloat(item.card.prices.usd) : 0;
+    return total + (price * item.quantity);
+  }, 0);
+
+  return (
+    <div>
+      <div className="flex items-center justify-between mb-1">
+        <h4 className={`text-xs font-semibold ${textColor}`}>{label}:</h4>
+        {cards.size > 0 && (
+          <span className={`text-xs font-semibold ${textColor}`}>
+            ${totalPrice.toFixed(2)}
+          </span>
+        )}
+      </div>
+      {cards.size === 0 ? (
+        <p className="text-gray-500 text-xs">{emptyLabel}</p>
+      ) : (
+        <div className="flex flex-wrap gap-1">
+          {Array.from(cards.values()).map((item) => (
+            <div
+              key={item.card.id}
+              className={`flex items-center gap-1 ${bgColor} px-1.5 py-0.5 rounded text-xs`}
+            >
+              <span className="truncate max-w-[80px]">{item.card.name}</span>
+              <span className={textColor}>x{item.quantity}</span>
+              <button
+                onClick={() => onRemove(item.card.id)}
+                className="text-red-400 active:text-red-300"
+              >
+                <Minus size={12} />
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ============ MAIN COMPONENT ============
+
+interface TradeCreatorProps {
+  receiverId: string;
+  receiverUsername: string;
+  receiverCollection: CollectionItem[];
+  onClose: () => void;
+  onTradeCreated: () => void;
+}
+
+type MobileStep = 'want' | 'give' | 'review';
+
+export default function TradeCreator({
+  receiverId,
+  receiverUsername,
+  receiverCollection,
+  onClose,
+  onTradeCreated,
+}: TradeCreatorProps) {
+  const { user } = useAuth();
+  const toast = useToast();
+  const [myCollection, setMyCollection] = useState<CollectionItem[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [submitting, setSubmitting] = useState(false);
+  const [message, setMessage] = useState('');
+
+  const [isGiftMode, setIsGiftMode] = useState(false);
+  const [mobileStep, setMobileStep] = useState<MobileStep>('want');
+
+  const [myOfferedCards, setMyOfferedCards] = useState<Map<string, SelectedCard>>(new Map());
+  const [wantedCards, setWantedCards] = useState<Map<string, SelectedCard>>(new Map());
+
+  const [myCollectionSearch, setMyCollectionSearch] = useState('');
+  const [theirCollectionSearch, setTheirCollectionSearch] = useState('');
+
+  useEffect(() => {
+    loadMyCollection();
+  }, [user]);
+
+  useEffect(() => {
+    if (isGiftMode) {
+      setWantedCards(new Map());
+      setMobileStep('give');
+    } else {
+      setMobileStep('want');
+    }
+  }, [isGiftMode]);
+
+  const loadMyCollection = async () => {
+    if (!user) return;
+    setLoading(true);
+    try {
+      const collectionMap = await getUserCollection(user.id);
+      if (collectionMap.size === 0) {
+        setMyCollection([]);
+        return;
+      }
+
+      const cardIds = Array.from(collectionMap.keys());
+      const cards = await getCardsByIds(cardIds);
+
+      const collectionWithCards = cards.map((card) => ({
+        card,
+        quantity: collectionMap.get(card.id) || 0,
+      }));
+
+      setMyCollection(collectionWithCards);
+    } catch (error) {
+      console.error('Error loading my collection:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const addToOffer = (card: Card, maxQuantity: number) => {
+    setMyOfferedCards((prev) => {
+      const newMap = new Map(prev);
+      const existing = newMap.get(card.id);
+      if (existing) {
+        if (existing.quantity < existing.maxQuantity) {
+          newMap.set(card.id, { ...existing, quantity: existing.quantity + 1 });
+        }
+      } else {
+        newMap.set(card.id, { card, quantity: 1, maxQuantity });
+      }
+      return newMap;
+    });
+  };
+
+  const removeFromOffer = (cardId: string) => {
+    setMyOfferedCards((prev) => {
+      const newMap = new Map(prev);
+      const existing = newMap.get(cardId);
+      if (existing && existing.quantity > 1) {
+        newMap.set(cardId, { ...existing, quantity: existing.quantity - 1 });
+      } else {
+        newMap.delete(cardId);
+      }
+      return newMap;
+    });
+  };
+
+  const addToWanted = (card: Card, maxQuantity: number) => {
+    setWantedCards((prev) => {
+      const newMap = new Map(prev);
+      const existing = newMap.get(card.id);
+      if (existing) {
+        if (existing.quantity < existing.maxQuantity) {
+          newMap.set(card.id, { ...existing, quantity: existing.quantity + 1 });
+        }
+      } else {
+        newMap.set(card.id, { card, quantity: 1, maxQuantity });
+      }
+      return newMap;
+    });
+  };
+
+  const removeFromWanted = (cardId: string) => {
+    setWantedCards((prev) => {
+      const newMap = new Map(prev);
+      const existing = newMap.get(cardId);
+      if (existing && existing.quantity > 1) {
+        newMap.set(cardId, { ...existing, quantity: existing.quantity - 1 });
+      } else {
+        newMap.delete(cardId);
+      }
+      return newMap;
+    });
+  };
+
+  const handleSubmit = async () => {
+    if (!user) return;
+
+    if (myOfferedCards.size === 0 && wantedCards.size === 0) {
+      toast.warning('Please select at least one card to trade or gift');
+      return;
+    }
+
+    setSubmitting(true);
+    try {
+      const senderCards = Array.from(myOfferedCards.values()).map((item) => ({
+        cardId: item.card.id,
+        quantity: item.quantity,
+      }));
+
+      const receiverCards = Array.from(wantedCards.values()).map((item) => ({
+        cardId: item.card.id,
+        quantity: item.quantity,
+      }));
+
+      await createTrade({
+        senderId: user.id,
+        receiverId,
+        message: message || undefined,
+        senderCards,
+        receiverCards,
+      });
+
+      onTradeCreated();
+    } catch (error) {
+      console.error('Error creating trade:', error);
+      toast.error('Failed to create trade');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const isGift = myOfferedCards.size > 0 && wantedCards.size === 0;
+  const isRequest = myOfferedCards.size === 0 && wantedCards.size > 0;
+
+  const goToNextStep = () => {
+    if (mobileStep === 'want') setMobileStep('give');
+    else if (mobileStep === 'give') setMobileStep('review');
+  };
+
+  const goToPrevStep = () => {
+    if (mobileStep === 'review') setMobileStep('give');
+    else if (mobileStep === 'give' && !isGiftMode) setMobileStep('want');
+  };
+
+  const canSubmit = myOfferedCards.size > 0 || wantedCards.size > 0;
+
+  if (loading) {
+    return (
+      <div className="fixed inset-0 bg-black/80 z-[110] flex items-center justify-center">
+        <Loader2 className="animate-spin text-blue-500" size={48} />
+      </div>
+    );
+  }
+
+  return (
+    <div className="fixed inset-0 bg-black/80 z-[110] flex items-center justify-center p-0 md:p-4">
+      <div className="bg-gray-800 w-full h-full md:rounded-lg md:w-full md:max-w-6xl md:max-h-[90vh] overflow-hidden flex flex-col">
+
+        {/* ============ MOBILE VIEW ============ */}
+        <div className="flex flex-col h-full md:hidden">
+          <div className="flex items-center justify-between p-3 border-b border-gray-700">
+            <div className="flex items-center gap-2 min-w-0">
+              <ArrowLeftRight size={20} className="text-blue-400 flex-shrink-0" />
+              <h2 className="font-bold truncate">Trade with {receiverUsername}</h2>
+            </div>
+            <button onClick={onClose} className="p-2 -mr-2 active:bg-gray-700 rounded-lg">
+              <X size={20} />
+            </button>
+          </div>
+
+          <div className="p-3 border-b border-gray-700">
+            <label className="flex items-center gap-3 cursor-pointer">
+              <div
+                className={`relative w-12 h-6 rounded-full transition-colors ${
+                  isGiftMode ? 'bg-purple-600' : 'bg-gray-600'
+                }`}
+                onClick={() => setIsGiftMode(!isGiftMode)}
+              >
+                <div
+                  className={`absolute top-1 w-4 h-4 bg-white rounded-full transition-transform ${
+                    isGiftMode ? 'translate-x-7' : 'translate-x-1'
+                  }`}
+                />
+              </div>
+              <div className="flex items-center gap-2">
+                <Gift size={18} className={isGiftMode ? 'text-purple-400' : 'text-gray-400'} />
+                <span className={`text-sm ${isGiftMode ? 'text-purple-400' : 'text-gray-400'}`}>
+                  Gift (I don't want anything back)
+                </span>
+              </div>
+            </label>
+          </div>
+
+          <div className="flex items-center justify-center gap-2 p-2 bg-gray-900/50">
+            {!isGiftMode && (
+              <>
+                <div className={`w-2 h-2 rounded-full ${mobileStep === 'want' ? 'bg-blue-500' : 'bg-gray-600'}`} />
+                <span className={`text-xs ${mobileStep === 'want' ? 'text-blue-400' : 'text-gray-500'}`}>I Want</span>
+                <ArrowRight size={14} className="text-gray-500" />
+              </>
+            )}
+            <div className={`w-2 h-2 rounded-full ${mobileStep === 'give' ? 'bg-green-500' : 'bg-gray-600'}`} />
+            <span className={`text-xs ${mobileStep === 'give' ? 'text-green-400' : 'text-gray-500'}`}>I Give</span>
+            <ArrowRight size={14} className="text-gray-500" />
+            <div className={`w-2 h-2 rounded-full ${mobileStep === 'review' ? 'bg-purple-500' : 'bg-gray-600'}`} />
+            <span className={`text-xs ${mobileStep === 'review' ? 'text-purple-400' : 'text-gray-500'}`}>Review</span>
+          </div>
+
+          <div className="flex-1 overflow-y-auto p-3">
+            {mobileStep === 'want' && !isGiftMode && (
+              <div>
+                <h3 className="text-sm font-semibold text-blue-400 mb-3">
+                  Select cards from {receiverUsername}'s collection
+                </h3>
+                <CollectionGrid
+                  items={receiverCollection}
+                  selectedCards={wantedCards}
+                  onAdd={addToWanted}
+                  onRemove={removeFromWanted}
+                  emptyMessage="Their collection is empty"
+                  selectionColor="blue"
+                  searchValue={theirCollectionSearch}
+                  onSearchChange={setTheirCollectionSearch}
+                  searchPlaceholder="Search their cards..."
+                />
+              </div>
+            )}
+
+            {mobileStep === 'give' && (
+              <div>
+                <h3 className="text-sm font-semibold text-green-400 mb-3">
+                  Select cards to {isGiftMode ? 'gift' : 'offer'}
+                </h3>
+                <CollectionGrid
+                  items={myCollection}
+                  selectedCards={myOfferedCards}
+                  onAdd={addToOffer}
+                  onRemove={removeFromOffer}
+                  emptyMessage="Your collection is empty"
+                  selectionColor="green"
+                  searchValue={myCollectionSearch}
+                  onSearchChange={setMyCollectionSearch}
+                  searchPlaceholder="Search my cards..."
+                />
+              </div>
+            )}
+
+            {mobileStep === 'review' && (
+              <div className="space-y-4">
+                <h3 className="text-sm font-semibold text-purple-400">Review Trade</h3>
+                <div className="bg-gray-900/50 rounded-lg p-3 space-y-3">
+                  <SelectedCardsSummary
+                    cards={myOfferedCards}
+                    onRemove={removeFromOffer}
+                    label="I Give"
+                    emptyLabel="Nothing (requesting cards)"
+                    color="green"
+                  />
+                  {!isGiftMode && (
+                    <SelectedCardsSummary
+                      cards={wantedCards}
+                      onRemove={removeFromWanted}
+                      label="I Want"
+                      emptyLabel="Nothing (sending gift)"
+                      color="blue"
+                    />
+                  )}
+                </div>
+                <div>
+                  <label className="text-xs text-gray-400 mb-1 block">Message (optional)</label>
+                  <input
+                    type="text"
+                    value={message}
+                    onChange={(e) => setMessage(e.target.value)}
+                    placeholder="Add a message..."
+                    className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  />
+                  {message && (
+                    <div className="mt-2 p-2 bg-gray-900/50 rounded border border-gray-700">
+                      <p className="text-xs text-gray-400 mb-1">Preview:</p>
+                      <p className="text-sm text-gray-200">{message}</p>
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+
+          <div className="border-t border-gray-700 p-3 flex gap-2">
+            {(mobileStep !== 'want' && !isGiftMode) || (mobileStep !== 'give' && isGiftMode) ? (
+              <button
+                onClick={goToPrevStep}
+                disabled={mobileStep === 'give' && isGiftMode}
+                className="flex items-center justify-center gap-1 px-4 py-2.5 bg-gray-700 active:bg-gray-600 disabled:opacity-50 rounded-lg flex-1"
+              >
+                <ArrowLeft size={18} />
+                Back
+              </button>
+            ) : (
+              <button
+                onClick={onClose}
+                className="flex items-center justify-center gap-1 px-4 py-2.5 bg-gray-700 active:bg-gray-600 rounded-lg flex-1"
+              >
+                Cancel
+              </button>
+            )}
+
+            {mobileStep === 'review' ? (
+              <button
+                onClick={handleSubmit}
+                disabled={submitting || !canSubmit}
+                className="flex items-center justify-center gap-2 px-4 py-2.5 bg-blue-600 active:bg-blue-700 disabled:bg-gray-600 rounded-lg flex-1"
+              >
+                {submitting ? (
+                  <Loader2 className="animate-spin" size={18} />
+                ) : isGift ? (
+                  <>
+                    <Gift size={18} />
+                    Send Gift
+                  </>
+                ) : isRequest ? (
+                  <>
+                    <Send size={18} />
+                    Request
+                  </>
+                ) : (
+                  <>
+                    <Send size={18} />
+                    Send Trade
+                  </>
+                )}
+              </button>
+            ) : (
+              <button
+                onClick={goToNextStep}
+                className="flex items-center justify-center gap-1 px-4 py-2.5 bg-blue-600 active:bg-blue-700 rounded-lg flex-1"
+              >
+                Next
+                <ArrowRight size={18} />
+              </button>
+            )}
+          </div>
+        </div>
+
+        {/* ============ DESKTOP VIEW ============ */}
+        <div className="hidden md:flex md:flex-col h-full">
+          <div className="flex items-center justify-between p-4 border-b border-gray-700">
+            <div className="flex items-center gap-3">
+              <ArrowLeftRight size={24} className="text-blue-400" />
+              <h2 className="text-xl font-bold">Trade with {receiverUsername}</h2>
+              <label className="flex items-center gap-2 ml-4 cursor-pointer">
+                <div
+                  className={`relative w-10 h-5 rounded-full transition-colors ${
+                    isGiftMode ? 'bg-purple-600' : 'bg-gray-600'
+                  }`}
+                  onClick={() => setIsGiftMode(!isGiftMode)}
+                >
+                  <div
+                    className={`absolute top-0.5 w-4 h-4 bg-white rounded-full transition-transform ${
+                      isGiftMode ? 'translate-x-5' : 'translate-x-0.5'
+                    }`}
+                  />
+                </div>
+                <Gift size={16} className={isGiftMode ? 'text-purple-400' : 'text-gray-400'} />
+                <span className={`text-sm ${isGiftMode ? 'text-purple-400' : 'text-gray-400'}`}>Gift mode</span>
+              </label>
+            </div>
+            <button onClick={onClose} className="p-2 hover:bg-gray-700 rounded-lg transition">
+              <X size={24} />
+            </button>
+          </div>
+
+          <div className="flex-1 overflow-hidden flex">
+            <div className="flex-1 p-4 border-r border-gray-700 overflow-y-auto">
+              <h3 className="text-lg font-semibold mb-3 text-green-400">My Collection (I give)</h3>
+              <CollectionGrid
+                items={myCollection}
+                selectedCards={myOfferedCards}
+                onAdd={addToOffer}
+                onRemove={removeFromOffer}
+                emptyMessage="Your collection is empty"
+                selectionColor="green"
+                searchValue={myCollectionSearch}
+                onSearchChange={setMyCollectionSearch}
+                searchPlaceholder="Search my cards..."
+              />
+            </div>
+
+            {!isGiftMode && (
+              <div className="flex-1 p-4 overflow-y-auto">
+                <h3 className="text-lg font-semibold mb-3 text-blue-400">
+                  {receiverUsername}'s Collection (I want)
+                </h3>
+                <CollectionGrid
+                  items={receiverCollection}
+                  selectedCards={wantedCards}
+                  onAdd={addToWanted}
+                  onRemove={removeFromWanted}
+                  emptyMessage="Their collection is empty"
+                  selectionColor="blue"
+                  searchValue={theirCollectionSearch}
+                  onSearchChange={setTheirCollectionSearch}
+                  searchPlaceholder="Search their cards..."
+                />
+              </div>
+            )}
+          </div>
+
+          <div className="border-t border-gray-700 p-4">
+            <div className="flex gap-6 mb-4">
+              <SelectedCardsSummary
+                cards={myOfferedCards}
+                onRemove={removeFromOffer}
+                label="I Give"
+                emptyLabel="Nothing selected (gift request)"
+                color="green"
+              />
+              {!isGiftMode && (
+                <SelectedCardsSummary
+                  cards={wantedCards}
+                  onRemove={removeFromWanted}
+                  label="I Want"
+                  emptyLabel="Nothing selected (gift)"
+                  color="blue"
+                />
+              )}
+            </div>
+
+            <div className="space-y-2 mb-4">
+              <input
+                type="text"
+                value={message}
+                onChange={(e) => setMessage(e.target.value)}
+                placeholder="Add a message (optional)"
+                className="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              />
+              {message && (
+                <div className="p-2 bg-gray-900/50 rounded border border-gray-700">
+                  <p className="text-xs text-gray-400 mb-1">Preview:</p>
+                  <p className="text-sm text-gray-200">{message}</p>
+                </div>
+              )}
+            </div>
+
+            <div className="flex items-center gap-4">
+              <button
+                onClick={onClose}
+                className="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg transition"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={handleSubmit}
+                disabled={submitting || !canSubmit}
+                className="flex items-center gap-2 px-6 py-2 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 rounded-lg transition"
+              >
+                {submitting ? (
+                  <Loader2 className="animate-spin" size={20} />
+                ) : isGift ? (
+                  <>
+                    <Gift size={20} />
+                    Send Gift
+                  </>
+                ) : isRequest ? (
+                  <>
+                    <Send size={20} />
+                    Request Cards
+                  </>
+                ) : (
+                  <>
+                    <Send size={20} />
+                    Propose Trade
+                  </>
+                )}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/TradeDetail.tsx

@@ -0,0 +1,308 @@
+import React, { useState, useEffect } from 'react';
+import { X, Check, ArrowLeftRight, DollarSign, Loader2, RefreshCcw } from 'lucide-react';
+import { useAuth } from '../contexts/AuthContext';
+import { useToast } from '../contexts/ToastContext';
+import { Trade, TradeItem } from '../services/tradesService';
+import { Card } from '../types';
+import { getCardsByIds } from '../services/api';
+
+interface TradeDetailProps {
+  trade: Trade;
+  onClose: () => void;
+  onAccept: (tradeId: string) => Promise<void>;
+  onDecline: (tradeId: string) => Promise<void>;
+  onCounterOffer: (trade: Trade, senderCards: Card[], receiverCards: Card[]) => void;
+}
+
+interface TradeCardItem {
+  card: Card;
+  quantity: number;
+}
+
+function calculateTotalPrice(items: TradeCardItem[]): number {
+  return items.reduce((total, { card, quantity }) => {
+    const price = card.prices?.usd ? parseFloat(card.prices.usd) : 0;
+    return total + (price * quantity);
+  }, 0);
+}
+
+export default function TradeDetail({
+  trade,
+  onClose,
+  onAccept,
+  onDecline,
+  onCounterOffer,
+}: TradeDetailProps) {
+  const { user } = useAuth();
+  const toast = useToast();
+  const [loading, setLoading] = useState(true);
+  const [processing, setProcessing] = useState(false);
+  const [senderCards, setSenderCards] = useState<TradeCardItem[]>([]);
+  const [receiverCards, setReceiverCards] = useState<TradeCardItem[]>([]);
+
+  const isSender = trade.sender_id === user?.id;
+  const isReceiver = trade.receiver_id === user?.id;
+  const otherUser = isSender ? trade.receiver : trade.sender;
+
+  useEffect(() => {
+    loadTradeCards();
+  }, [trade]);
+
+  const loadTradeCards = async () => {
+    setLoading(true);
+    try {
+      const allCardIds = trade.items?.map(item => item.card_id) || [];
+      if (allCardIds.length === 0) {
+        setSenderCards([]);
+        setReceiverCards([]);
+        return;
+      }
+
+      const cards = await getCardsByIds(allCardIds);
+      const cardMap = new Map<string, Card>();
+      cards.forEach(card => cardMap.set(card.id, card));
+
+      const senderItems: TradeCardItem[] = [];
+      const receiverItems: TradeCardItem[] = [];
+
+      trade.items?.forEach(item => {
+        const card = cardMap.get(item.card_id);
+        if (!card) return;
+
+        if (item.owner_id === trade.sender_id) {
+          senderItems.push({ card, quantity: item.quantity });
+        } else {
+          receiverItems.push({ card, quantity: item.quantity });
+        }
+      });
+
+      setSenderCards(senderItems);
+      setReceiverCards(receiverItems);
+    } catch (error) {
+      console.error('Error loading trade cards:', error);
+      toast.error('Failed to load trade details');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleAccept = async () => {
+    setProcessing(true);
+    try {
+      await onAccept(trade.id);
+      onClose();
+    } catch (error) {
+      console.error('Error accepting trade:', error);
+    } finally {
+      setProcessing(false);
+    }
+  };
+
+  const handleDecline = async () => {
+    setProcessing(true);
+    try {
+      await onDecline(trade.id);
+      onClose();
+    } catch (error) {
+      console.error('Error declining trade:', error);
+    } finally {
+      setProcessing(false);
+    }
+  };
+
+  const handleCounterOffer = () => {
+    const senderCardsList = senderCards.map(item => item.card);
+    const receiverCardsList = receiverCards.map(item => item.card);
+    onCounterOffer(trade, senderCardsList, receiverCardsList);
+    onClose();
+  };
+
+  const senderPrice = calculateTotalPrice(senderCards);
+  const receiverPrice = calculateTotalPrice(receiverCards);
+
+  const yourCards = isSender ? senderCards : receiverCards;
+  const theirCards = isSender ? receiverCards : senderCards;
+  const yourPrice = isSender ? senderPrice : receiverPrice;
+  const theirPrice = isSender ? receiverPrice : senderPrice;
+
+  return (
+    <div className="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 flex items-end md:items-center justify-center p-0 md:p-4">
+      <div className="bg-gray-900 w-full md:max-w-4xl md:rounded-2xl flex flex-col max-h-screen md:max-h-[90vh]">
+        {/* Header */}
+        <div className="flex items-center justify-between p-4 border-b border-gray-800">
+          <div className="flex items-center gap-2">
+            <ArrowLeftRight size={20} className="text-blue-400" />
+            <div>
+              <h2 className="text-lg font-bold">Trade Details</h2>
+              <p className="text-sm text-gray-400">
+                {isSender ? 'To' : 'From'}: {otherUser?.username}
+              </p>
+            </div>
+          </div>
+          <button
+            onClick={onClose}
+            className="p-2 hover:bg-gray-800 rounded-lg transition"
+          >
+            <X size={20} />
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 overflow-y-auto p-4">
+          {loading ? (
+            <div className="flex items-center justify-center py-12">
+              <Loader2 className="animate-spin text-blue-500" size={48} />
+            </div>
+          ) : (
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+              {/* Your Side */}
+              <div className="space-y-3">
+                <div className="flex items-center justify-between">
+                  <h3 className="font-semibold text-green-400">
+                    {isSender ? 'You Give' : 'You Receive'}
+                  </h3>
+                  <div className="flex items-center gap-1 text-green-400 text-sm">
+                    <DollarSign size={14} />
+                    {yourPrice.toFixed(2)}
+                  </div>
+                </div>
+
+                {yourCards.length === 0 ? (
+                  <p className="text-gray-500 text-center py-8">Gift (no cards)</p>
+                ) : (
+                  <div className="grid grid-cols-3 sm:grid-cols-4 gap-2">
+                    {yourCards.map((item, idx) => (
+                      <div key={idx} className="relative rounded-lg overflow-hidden">
+                        <img
+                          src={item.card.image_uris?.small || item.card.image_uris?.normal}
+                          alt={item.card.name}
+                          className="w-full h-auto"
+                        />
+                        {item.quantity > 1 && (
+                          <div className="absolute top-1 right-1 bg-green-600 text-white text-xs px-1.5 py-0.5 rounded font-semibold">
+                            x{item.quantity}
+                          </div>
+                        )}
+                        {item.card.prices?.usd && (
+                          <div className="absolute bottom-1 left-1 bg-gray-900/90 text-white text-[10px] px-1 py-0.5 rounded">
+                            ${item.card.prices.usd}
+                          </div>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+
+              {/* Their Side */}
+              <div className="space-y-3">
+                <div className="flex items-center justify-between">
+                  <h3 className="font-semibold text-blue-400">
+                    {isSender ? 'You Receive' : 'They Give'}
+                  </h3>
+                  <div className="flex items-center gap-1 text-blue-400 text-sm">
+                    <DollarSign size={14} />
+                    {theirPrice.toFixed(2)}
+                  </div>
+                </div>
+
+                {theirCards.length === 0 ? (
+                  <p className="text-gray-500 text-center py-8">Gift (no cards)</p>
+                ) : (
+                  <div className="grid grid-cols-3 sm:grid-cols-4 gap-2">
+                    {theirCards.map((item, idx) => (
+                      <div key={idx} className="relative rounded-lg overflow-hidden">
+                        <img
+                          src={item.card.image_uris?.small || item.card.image_uris?.normal}
+                          alt={item.card.name}
+                          className="w-full h-auto"
+                        />
+                        {item.quantity > 1 && (
+                          <div className="absolute top-1 right-1 bg-blue-600 text-white text-xs px-1.5 py-0.5 rounded font-semibold">
+                            x{item.quantity}
+                          </div>
+                        )}
+                        {item.card.prices?.usd && (
+                          <div className="absolute bottom-1 left-1 bg-gray-900/90 text-white text-[10px] px-1 py-0.5 rounded">
+                            ${item.card.prices.usd}
+                          </div>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+
+          {/* Message */}
+          {trade.message && (
+            <div className="mt-4 p-3 bg-gray-800 rounded-lg">
+              <p className="text-sm text-gray-400 mb-1">Message:</p>
+              <p className="text-sm">{trade.message}</p>
+            </div>
+          )}
+
+          {/* Price Difference */}
+          {!loading && (senderPrice > 0 || receiverPrice > 0) && (
+            <div className="mt-4 p-3 bg-gray-800 rounded-lg">
+              <div className="flex items-center justify-between text-sm">
+                <span className="text-gray-400">Value Difference:</span>
+                <span className={Math.abs(senderPrice - receiverPrice) > 5 ? 'text-yellow-400' : 'text-gray-300'}>
+                  ${Math.abs(senderPrice - receiverPrice).toFixed(2)}
+                  {senderPrice > receiverPrice ? ' in your favor' : senderPrice < receiverPrice ? ' in their favor' : ' (balanced)'}
+                </span>
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Actions - Only for pending trades */}
+        {trade.status === 'pending' && !loading && (
+          <div className="border-t border-gray-800 p-4 space-y-2">
+            {isReceiver ? (
+              <>
+                <div className="flex gap-2">
+                  <button
+                    onClick={handleAccept}
+                    disabled={processing}
+                    className="flex-1 flex items-center justify-center gap-2 px-4 py-3 bg-green-600 hover:bg-green-700 disabled:bg-gray-600 rounded-lg font-medium transition"
+                  >
+                    {processing ? (
+                      <Loader2 className="animate-spin" size={18} />
+                    ) : (
+                      <>
+                        <Check size={18} />
+                        Accept Trade
+                      </>
+                    )}
+                  </button>
+                  <button
+                    onClick={handleDecline}
+                    disabled={processing}
+                    className="flex-1 flex items-center justify-center gap-2 px-4 py-3 bg-red-600 hover:bg-red-700 disabled:bg-gray-600 rounded-lg font-medium transition"
+                  >
+                    <X size={18} />
+                    Decline
+                  </button>
+                </div>
+                <button
+                  onClick={handleCounterOffer}
+                  disabled={processing}
+                  className="w-full flex items-center justify-center gap-2 px-4 py-3 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 rounded-lg font-medium transition"
+                >
+                  <RefreshCcw size={18} />
+                  Make Counter Offer
+                </button>
+              </>
+            ) : (
+              <p className="text-center text-gray-400 text-sm py-2">
+                Waiting for {otherUser?.username} to respond...
+              </p>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

src/contexts/AuthContext.tsx

@@ -34,13 +34,12 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
           const { error } = await supabase
             .from('profiles')
             .upsert(
-              { 
-                id: session.user.id,
-                theme_color: 'blue' // Default theme color
+              {
+                id: session.user.id
               },
               { onConflict: 'id' }
             );
-          
+
           if (error) {
             console.error('Error creating profile:', error);
           }
@@ -65,8 +64,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
         const { error: profileError } = await supabase
           .from('profiles')
           .insert({
-            id: data.user!.id,
-            theme_color: 'blue' // Default theme color
+            id: data.user!.id
           });
 
         if (profileError) {
@@ -104,4 +102,4 @@ export function useAuth() {
     throw new Error('useAuth must be used within an AuthProvider');
   }
   return context;
-}
+}

src/contexts/ToastContext.tsx

@@ -0,0 +1,100 @@
+import React, { createContext, useContext, useState, useCallback } from 'react';
+import { CheckCircle, XCircle, AlertCircle, Info, X } from 'lucide-react';
+
+type ToastType = 'success' | 'error' | 'warning' | 'info';
+
+interface Toast {
+  id: string;
+  message: string;
+  type: ToastType;
+}
+
+interface ToastContextType {
+  showToast: (message: string, type?: ToastType) => void;
+  success: (message: string) => void;
+  error: (message: string) => void;
+  warning: (message: string) => void;
+  info: (message: string) => void;
+}
+
+const ToastContext = createContext<ToastContextType | undefined>(undefined);
+
+export function useToast() {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error('useToast must be used within a ToastProvider');
+  }
+  return context;
+}
+
+export function ToastProvider({ children }: { children: React.ReactNode }) {
+  const [toasts, setToasts] = useState<Toast[]>([]);
+
+  const removeToast = useCallback((id: string) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+
+  const showToast = useCallback((message: string, type: ToastType = 'info') => {
+    const id = Math.random().toString(36).substring(7);
+    setToasts((prev) => [...prev, { id, message, type }]);
+
+    // Auto remove after 4 seconds
+    setTimeout(() => removeToast(id), 4000);
+  }, [removeToast]);
+
+  const success = useCallback((message: string) => showToast(message, 'success'), [showToast]);
+  const error = useCallback((message: string) => showToast(message, 'error'), [showToast]);
+  const warning = useCallback((message: string) => showToast(message, 'warning'), [showToast]);
+  const info = useCallback((message: string) => showToast(message, 'info'), [showToast]);
+
+  const getIcon = (type: ToastType) => {
+    switch (type) {
+      case 'success':
+        return <CheckCircle size={20} />;
+      case 'error':
+        return <XCircle size={20} />;
+      case 'warning':
+        return <AlertCircle size={20} />;
+      case 'info':
+        return <Info size={20} />;
+    }
+  };
+
+  const getStyles = (type: ToastType) => {
+    switch (type) {
+      case 'success':
+        return 'bg-green-600';
+      case 'error':
+        return 'bg-red-600';
+      case 'warning':
+        return 'bg-yellow-600';
+      case 'info':
+        return 'bg-blue-600';
+    }
+  };
+
+  return (
+    <ToastContext.Provider value={{ showToast, success, error, warning, info }}>
+      {children}
+
+      {/* Toast Container */}
+      <div className="fixed bottom-4 right-4 z-[100] flex flex-col gap-2">
+        {toasts.map((toast) => (
+          <div
+            key={toast.id}
+            className={`${getStyles(toast.type)} text-white px-4 py-3 rounded-lg shadow-lg flex items-center gap-3 min-w-[280px] animate-slide-in-right`}
+          >
+            {getIcon(toast.type)}
+            <span className="flex-1">{toast.message}</span>
+            <button
+              onClick={() => removeToast(toast.id)}
+              className="text-white/80 hover:text-white"
+            >
+              <X size={18} />
+            </button>
+          </div>
+        ))}
+      </div>
+    </ToastContext.Provider>
+  );
+}

src/lib/Entities.ts

@@ -140,26 +140,155 @@ export type Database = {
                 Row: {
                     created_at: string | null
                     id: string
-                    theme_color: string | null
                     updated_at: string | null
                     username: string | null
+                    collection_visibility: 'public' | 'friends' | 'private' | null
                 }
                 Insert: {
                     created_at?: string | null
                     id: string
-                    theme_color?: string | null
                     updated_at?: string | null
                     username?: string | null
+                    collection_visibility?: 'public' | 'friends' | 'private' | null
                 }
                 Update: {
                     created_at?: string | null
                     id?: string
-                    theme_color?: string | null
                     updated_at?: string | null
                     username?: string | null
+                    collection_visibility?: 'public' | 'friends' | 'private' | null
                 }
                 Relationships: []
             }
+            friendships: {
+                Row: {
+                    id: string
+                    requester_id: string
+                    addressee_id: string
+                    status: 'pending' | 'accepted' | 'declined'
+                    created_at: string | null
+                    updated_at: string | null
+                }
+                Insert: {
+                    id?: string
+                    requester_id: string
+                    addressee_id: string
+                    status?: 'pending' | 'accepted' | 'declined'
+                    created_at?: string | null
+                    updated_at?: string | null
+                }
+                Update: {
+                    id?: string
+                    requester_id?: string
+                    addressee_id?: string
+                    status?: 'pending' | 'accepted' | 'declined'
+                    created_at?: string | null
+                    updated_at?: string | null
+                }
+                Relationships: [
+                    {
+                        foreignKeyName: "friendships_requester_id_fkey"
+                        columns: ["requester_id"]
+                        isOneToOne: false
+                        referencedRelation: "profiles"
+                        referencedColumns: ["id"]
+                    },
+                    {
+                        foreignKeyName: "friendships_addressee_id_fkey"
+                        columns: ["addressee_id"]
+                        isOneToOne: false
+                        referencedRelation: "profiles"
+                        referencedColumns: ["id"]
+                    }
+                ]
+            }
+            trades: {
+                Row: {
+                    id: string
+                    sender_id: string
+                    receiver_id: string
+                    status: 'pending' | 'accepted' | 'declined' | 'cancelled'
+                    message: string | null
+                    created_at: string | null
+                    updated_at: string | null
+                }
+                Insert: {
+                    id?: string
+                    sender_id: string
+                    receiver_id: string
+                    status?: 'pending' | 'accepted' | 'declined' | 'cancelled'
+                    message?: string | null
+                    created_at?: string | null
+                    updated_at?: string | null
+                }
+                Update: {
+                    id?: string
+                    sender_id?: string
+                    receiver_id?: string
+                    status?: 'pending' | 'accepted' | 'declined' | 'cancelled'
+                    message?: string | null
+                    created_at?: string | null
+                    updated_at?: string | null
+                }
+                Relationships: [
+                    {
+                        foreignKeyName: "trades_sender_id_fkey"
+                        columns: ["sender_id"]
+                        isOneToOne: false
+                        referencedRelation: "profiles"
+                        referencedColumns: ["id"]
+                    },
+                    {
+                        foreignKeyName: "trades_receiver_id_fkey"
+                        columns: ["receiver_id"]
+                        isOneToOne: false
+                        referencedRelation: "profiles"
+                        referencedColumns: ["id"]
+                    }
+                ]
+            }
+            trade_items: {
+                Row: {
+                    id: string
+                    trade_id: string
+                    owner_id: string
+                    card_id: string
+                    quantity: number
+                    created_at: string | null
+                }
+                Insert: {
+                    id?: string
+                    trade_id: string
+                    owner_id: string
+                    card_id: string
+                    quantity?: number
+                    created_at?: string | null
+                }
+                Update: {
+                    id?: string
+                    trade_id?: string
+                    owner_id?: string
+                    card_id?: string
+                    quantity?: number
+                    created_at?: string | null
+                }
+                Relationships: [
+                    {
+                        foreignKeyName: "trade_items_trade_id_fkey"
+                        columns: ["trade_id"]
+                        isOneToOne: false
+                        referencedRelation: "trades"
+                        referencedColumns: ["id"]
+                    },
+                    {
+                        foreignKeyName: "trade_items_owner_id_fkey"
+                        columns: ["owner_id"]
+                        isOneToOne: false
+                        referencedRelation: "profiles"
+                        referencedColumns: ["id"]
+                    }
+                ]
+            }
         }
         Views: {
             [_ in never]: never
@@ -271,4 +400,4 @@ export type CompositeTypes<
     ? Database[PublicCompositeTypeNameOrOptions["schema"]]["CompositeTypes"][CompositeTypeName]
     : PublicCompositeTypeNameOrOptions extends keyof PublicSchema["CompositeTypes"]
         ? PublicSchema["CompositeTypes"][PublicCompositeTypeNameOrOptions]
-        : never
+        : never

src/services/friendsService.ts

@@ -0,0 +1,202 @@
+import { supabase } from '../lib/supabase';
+
+export interface Friend {
+  id: string;
+  odship_id: string;
+  username: string | null;
+  status: 'pending' | 'accepted' | 'declined';
+  isRequester: boolean;
+  created_at: string | null;
+}
+
+export interface FriendshipWithProfile {
+  id: string;
+  requester_id: string;
+  addressee_id: string;
+  status: 'pending' | 'accepted' | 'declined';
+  created_at: string | null;
+  requester: { username: string | null };
+  addressee: { username: string | null };
+}
+
+// Get all friends (accepted friendships)
+export async function getFriends(userId: string): Promise<Friend[]> {
+  const { data, error } = await supabase
+    .from('friendships')
+    .select(`
+      id,
+      requester_id,
+      addressee_id,
+      status,
+      created_at,
+      requester:profiles!friendships_requester_id_fkey(username),
+      addressee:profiles!friendships_addressee_id_fkey(username)
+    `)
+    .eq('status', 'accepted')
+    .or(`requester_id.eq.${userId},addressee_id.eq.${userId}`);
+
+  if (error) throw error;
+
+  return (data as unknown as FriendshipWithProfile[]).map((f) => {
+    const isRequester = f.requester_id === userId;
+    return {
+      id: isRequester ? f.addressee_id : f.requester_id,
+      friendshipId: f.id,
+      username: isRequester ? f.addressee?.username : f.requester?.username,
+      status: f.status,
+      isRequester,
+      created_at: f.created_at,
+    };
+  });
+}
+
+// Get pending friend requests (received)
+export async function getPendingRequests(userId: string): Promise<Friend[]> {
+  const { data, error } = await supabase
+    .from('friendships')
+    .select(`
+      id,
+      requester_id,
+      addressee_id,
+      status,
+      created_at,
+      requester:profiles!friendships_requester_id_fkey(username)
+    `)
+    .eq('status', 'pending')
+    .eq('addressee_id', userId);
+
+  if (error) throw error;
+
+  return (data as any[]).map((f) => ({
+    id: f.requester_id,
+    friendshipId: f.id,
+    username: f.requester?.username,
+    status: f.status,
+    isRequester: false,
+    created_at: f.created_at,
+  }));
+}
+
+// Get sent friend requests (pending)
+export async function getSentRequests(userId: string): Promise<Friend[]> {
+  const { data, error } = await supabase
+    .from('friendships')
+    .select(`
+      id,
+      requester_id,
+      addressee_id,
+      status,
+      created_at,
+      addressee:profiles!friendships_addressee_id_fkey(username)
+    `)
+    .eq('status', 'pending')
+    .eq('requester_id', userId);
+
+  if (error) throw error;
+
+  return (data as any[]).map((f) => ({
+    id: f.addressee_id,
+    friendshipId: f.id,
+    username: f.addressee?.username,
+    status: f.status,
+    isRequester: true,
+    created_at: f.created_at,
+  }));
+}
+
+// Search users by username
+export async function searchUsers(query: string, currentUserId: string) {
+  const { data, error } = await supabase
+    .from('profiles')
+    .select('id, username')
+    .ilike('username', `%${query}%`)
+    .neq('id', currentUserId)
+    .limit(10);
+
+  if (error) throw error;
+  return data;
+}
+
+// Send friend request
+export async function sendFriendRequest(requesterId: string, addresseeId: string) {
+  const { data, error } = await supabase
+    .from('friendships')
+    .insert({
+      requester_id: requesterId,
+      addressee_id: addresseeId,
+      status: 'pending',
+    })
+    .select()
+    .single();
+
+  if (error) throw error;
+  return data;
+}
+
+// Accept friend request
+export async function acceptFriendRequest(friendshipId: string) {
+  const { data, error } = await supabase
+    .from('friendships')
+    .update({ status: 'accepted', updated_at: new Date().toISOString() })
+    .eq('id', friendshipId)
+    .select()
+    .single();
+
+  if (error) throw error;
+  return data;
+}
+
+// Decline friend request
+export async function declineFriendRequest(friendshipId: string) {
+  const { data, error } = await supabase
+    .from('friendships')
+    .update({ status: 'declined', updated_at: new Date().toISOString() })
+    .eq('id', friendshipId)
+    .select()
+    .single();
+
+  if (error) throw error;
+  return data;
+}
+
+// Remove friend (delete friendship)
+export async function removeFriend(friendshipId: string) {
+  const { error } = await supabase
+    .from('friendships')
+    .delete()
+    .eq('id', friendshipId);
+
+  if (error) throw error;
+}
+
+// Check if two users are friends
+export async function areFriends(userId1: string, userId2: string): Promise<boolean> {
+  const { data, error } = await supabase
+    .from('friendships')
+    .select('id')
+    .eq('status', 'accepted')
+    .or(`and(requester_id.eq.${userId1},addressee_id.eq.${userId2}),and(requester_id.eq.${userId2},addressee_id.eq.${userId1})`)
+    .maybeSingle();
+
+  if (error) throw error;
+  return data !== null;
+}
+
+// Get friendship status between two users
+export async function getFriendshipStatus(userId1: string, userId2: string) {
+  const { data, error } = await supabase
+    .from('friendships')
+    .select('id, status, requester_id')
+    .or(`and(requester_id.eq.${userId1},addressee_id.eq.${userId2}),and(requester_id.eq.${userId2},addressee_id.eq.${userId1})`)
+    .maybeSingle();
+
+  if (error) throw error;
+
+  if (!data) return { status: 'none' as const, friendshipId: null, isRequester: false };
+
+  return {
+    status: data.status as 'pending' | 'accepted' | 'declined',
+    friendshipId: data.id,
+    isRequester: data.requester_id === userId1,
+  };
+}

src/services/tradesService.ts

@@ -0,0 +1,184 @@
+import { supabase } from '../lib/supabase';
+
+export interface TradeItem {
+  id: string;
+  trade_id: string;
+  owner_id: string;
+  card_id: string;
+  quantity: number;
+}
+
+export interface Trade {
+  id: string;
+  sender_id: string;
+  receiver_id: string;
+  status: 'pending' | 'accepted' | 'declined' | 'cancelled';
+  message: string | null;
+  created_at: string | null;
+  updated_at: string | null;
+  sender?: { username: string | null };
+  receiver?: { username: string | null };
+  items?: TradeItem[];
+}
+
+export interface CreateTradeParams {
+  senderId: string;
+  receiverId: string;
+  message?: string;
+  senderCards: { cardId: string; quantity: number }[];
+  receiverCards: { cardId: string; quantity: number }[];
+}
+
+// Get all trades for a user
+export async function getTrades(userId: string): Promise<Trade[]> {
+  const { data, error } = await supabase
+    .from('trades')
+    .select(`
+      *,
+      sender:profiles!trades_sender_id_fkey(username),
+      receiver:profiles!trades_receiver_id_fkey(username),
+      items:trade_items(*)
+    `)
+    .or(`sender_id.eq.${userId},receiver_id.eq.${userId}`)
+    .order('created_at', { ascending: false });
+
+  if (error) throw error;
+  return data as Trade[];
+}
+
+// Get pending trades for a user
+export async function getPendingTrades(userId: string): Promise<Trade[]> {
+  const { data, error } = await supabase
+    .from('trades')
+    .select(`
+      *,
+      sender:profiles!trades_sender_id_fkey(username),
+      receiver:profiles!trades_receiver_id_fkey(username),
+      items:trade_items(*)
+    `)
+    .eq('status', 'pending')
+    .or(`sender_id.eq.${userId},receiver_id.eq.${userId}`)
+    .order('created_at', { ascending: false });
+
+  if (error) throw error;
+  return data as Trade[];
+}
+
+// Get trade by ID
+export async function getTradeById(tradeId: string): Promise<Trade | null> {
+  const { data, error } = await supabase
+    .from('trades')
+    .select(`
+      *,
+      sender:profiles!trades_sender_id_fkey(username),
+      receiver:profiles!trades_receiver_id_fkey(username),
+      items:trade_items(*)
+    `)
+    .eq('id', tradeId)
+    .single();
+
+  if (error) throw error;
+  return data as Trade;
+}
+
+// Create a new trade with items
+export async function createTrade(params: CreateTradeParams): Promise<Trade> {
+  const { senderId, receiverId, message, senderCards, receiverCards } = params;
+
+  // Create the trade
+  const { data: trade, error: tradeError } = await supabase
+    .from('trades')
+    .insert({
+      sender_id: senderId,
+      receiver_id: receiverId,
+      message,
+      status: 'pending',
+    })
+    .select()
+    .single();
+
+  if (tradeError) throw tradeError;
+
+  // Add sender's cards
+  const senderItems = senderCards.map((card) => ({
+    trade_id: trade.id,
+    owner_id: senderId,
+    card_id: card.cardId,
+    quantity: card.quantity,
+  }));
+
+  // Add receiver's cards (what sender wants)
+  const receiverItems = receiverCards.map((card) => ({
+    trade_id: trade.id,
+    owner_id: receiverId,
+    card_id: card.cardId,
+    quantity: card.quantity,
+  }));
+
+  const allItems = [...senderItems, ...receiverItems];
+
+  if (allItems.length > 0) {
+    const { error: itemsError } = await supabase
+      .from('trade_items')
+      .insert(allItems);
+
+    if (itemsError) throw itemsError;
+  }
+
+  return trade;
+}
+
+// Accept a trade (executes the card transfer)
+export async function acceptTrade(tradeId: string): Promise<boolean> {
+  const { data, error } = await supabase.rpc('execute_trade', {
+    trade_id: tradeId,
+  });
+
+  if (error) throw error;
+  return data as boolean;
+}
+
+// Decline a trade
+export async function declineTrade(tradeId: string): Promise<Trade> {
+  const { data, error } = await supabase
+    .from('trades')
+    .update({ status: 'declined', updated_at: new Date().toISOString() })
+    .eq('id', tradeId)
+    .select()
+    .single();
+
+  if (error) throw error;
+  return data;
+}
+
+// Cancel a trade (sender only)
+export async function cancelTrade(tradeId: string): Promise<Trade> {
+  const { data, error } = await supabase
+    .from('trades')
+    .update({ status: 'cancelled', updated_at: new Date().toISOString() })
+    .eq('id', tradeId)
+    .select()
+    .single();
+
+  if (error) throw error;
+  return data;
+}
+
+// Get trade history (completed/cancelled/declined trades)
+export async function getTradeHistory(userId: string): Promise<Trade[]> {
+  const { data, error } = await supabase
+    .from('trades')
+    .select(`
+      *,
+      sender:profiles!trades_sender_id_fkey(username),
+      receiver:profiles!trades_receiver_id_fkey(username),
+      items:trade_items(*)
+    `)
+    .or(`sender_id.eq.${userId},receiver_id.eq.${userId}`)
+    .in('status', ['accepted', 'declined', 'cancelled'])
+    .order('updated_at', { ascending: false })
+    .limit(50);
+
+  if (error) throw error;
+  return data as Trade[];
+}

src/types/index.ts

@@ -5,13 +5,28 @@ export interface User {
   themeColor: 'red' | 'green' | 'blue' | 'yellow' | 'grey' | 'purple';
 }
 
+export interface CardImageUris {
+  small?: string;
+  normal?: string;
+  large?: string;
+  art_crop?: string;
+  border_crop?: string;
+  png?: string;
+}
+
+export interface CardFace {
+  name?: string;
+  mana_cost?: string;
+  type_line?: string;
+  oracle_text?: string;
+  image_uris?: CardImageUris;
+}
+
 export interface Card {
   id: string;
   name: string;
-  image_uris?: {
-    normal: string;
-    art_crop: string;
-  };
+  image_uris?: CardImageUris;
+  card_faces?: CardFace[];
   mana_cost?: string;
   type_line?: string;
   oracle_text?: string;
@@ -40,6 +55,11 @@ export interface Deck {
   userId: string;
   createdAt: Date;
   updatedAt: Date;
+  coverCardId?: string;
+  coverCard?: Card | null;
+  validationErrors?: string[];
+  isValid?: boolean;
+  cardCount?: number;
 }
 
 export interface CardEntity {

src/utils/deckValidation.ts

@@ -1,10 +1,23 @@
-import { Deck } from '../types';
+import { Card, Deck } from '../types';
 
 interface DeckValidation {
   isValid: boolean;
   errors: string[];
 }
 
+// Helper function to get commander color identity
+function getCommanderColors(commander: Card | null): string[] {
+  if (!commander) return [];
+  return commander.colors || [];
+}
+
+// Helper function to check if a card's colors are valid for the commander
+function isCardValidForCommander(card: Card, commanderColors: string[]): boolean {
+  if (commanderColors.length === 0) return true;
+  const cardColors = card.colors || [];
+  return cardColors.every(color => commanderColors.includes(color));
+}
+
 const FORMAT_RULES = {
   standard: {
     minCards: 60,
@@ -42,20 +55,20 @@ const FORMAT_RULES = {
 export function validateDeck(deck: Deck): DeckValidation {
   const rules = FORMAT_RULES[deck.format as keyof typeof FORMAT_RULES];
   const errors: string[] = [];
-  
+
   // Count total cards
   const totalCards = deck.cards.reduce((acc, curr) => acc + curr.quantity, 0);
-  
+
   // Check minimum cards
   if (totalCards < rules.minCards) {
     errors.push(`Deck must contain at least ${rules.minCards} cards`);
   }
-  
+
   // Check maximum cards
   if (rules.maxCards && totalCards > rules.maxCards) {
     errors.push(`Deck must not contain more than ${rules.maxCards} cards`);
   }
-  
+
   // Check card copies
   const cardCounts = new Map<string, number>();
   for (const element of deck.cards) {
@@ -64,7 +77,7 @@ export function validateDeck(deck: Deck): DeckValidation {
     const currentCount = cardCounts.get(card.id) || 0;
     cardCounts.set(card.id, currentCount + quantity);
   }
-  
+
   cardCounts.forEach((count, cardName) => {
     const card = deck.cards.find(c => c.card.id === cardName)?.card;
     const isBasicLand = card?.name === 'Plains' || card?.name === 'Island' || card?.name === 'Swamp' || card?.name === 'Mountain' || card?.name === 'Forest';
@@ -73,9 +86,28 @@ export function validateDeck(deck: Deck): DeckValidation {
       errors.push(`${cardName} has too many copies (max ${rules.maxCopies})`);
     }
   });
-  
+
+  // Commander-specific validations
+  if (deck.format === 'commander') {
+    const commander = deck.cards.find(card => card.is_commander)?.card;
+
+    if (!commander) {
+      errors.push('Commander deck must have a commander');
+    } else {
+      // Check commander color identity
+      const commanderColors = getCommanderColors(commander);
+      const invalidCards = deck.cards.filter(({ card, is_commander }) =>
+        !is_commander && !isCardValidForCommander(card, commanderColors)
+      );
+
+      if (invalidCards.length > 0) {
+        errors.push(`Some cards don't match commander's color identity`);
+      }
+    }
+  }
+
   return {
     isValid: errors.length === 0,
     errors,
   };
-}
+}

src/utils/migrateDeckData.ts

@@ -0,0 +1,116 @@
+import { supabase } from '../lib/supabase';
+import { getCardsByIds } from '../services/api';
+import { validateDeck } from './deckValidation';
+import { Deck } from '../types';
+
+/**
+ * Migrate existing decks to include optimization fields
+ * This should be run once to update all existing decks
+ */
+export async function migrateExistingDecks() {
+  console.log('Starting deck migration...');
+
+  // Get all decks
+  const { data: decksData, error: decksError } = await supabase
+    .from('decks')
+    .select('*');
+
+  if (decksError) {
+    console.error('Error fetching decks:', decksError);
+    return;
+  }
+
+  console.log(`Found ${decksData.length} decks to migrate`);
+
+  for (const deck of decksData) {
+    // Skip if already migrated
+    if (deck.cover_card_id && deck.card_count !== null) {
+      console.log(`Deck ${deck.name} already migrated, skipping`);
+      continue;
+    }
+
+    console.log(`Migrating deck: ${deck.name}`);
+
+    // Get deck cards
+    const { data: cardEntities, error: cardsError } = await supabase
+      .from('deck_cards')
+      .select('*')
+      .eq('deck_id', deck.id);
+
+    if (cardsError || !cardEntities || cardEntities.length === 0) {
+      console.error(`Error fetching cards for deck ${deck.id}:`, cardsError);
+      continue;
+    }
+
+    const cardIds = cardEntities.map(entity => entity.card_id);
+    const uniqueCardIds = [...new Set(cardIds)];
+
+    try {
+      // Fetch cards from Scryfall
+      const scryfallCards = await getCardsByIds(uniqueCardIds);
+
+      if (!scryfallCards) {
+        console.error(`Failed to fetch cards for deck ${deck.id}`);
+        continue;
+      }
+
+      const cards = cardEntities.map(entity => {
+        const card = scryfallCards.find(c => c.id === entity.card_id);
+        return {
+          card,
+          quantity: entity.quantity,
+          is_commander: entity.is_commander,
+        };
+      });
+
+      // Create deck object for validation
+      const deckToValidate: Deck = {
+        id: deck.id,
+        name: deck.name,
+        format: deck.format,
+        cards,
+        userId: deck.user_id,
+        createdAt: new Date(deck.created_at),
+        updatedAt: new Date(deck.updated_at),
+      };
+
+      // Calculate validation
+      const validation = validateDeck(deckToValidate);
+
+      // Determine cover card (commander or first card)
+      const commanderCard = deck.format === 'commander'
+        ? cardEntities.find(c => c.is_commander)
+        : null;
+      const coverCardId = commanderCard
+        ? commanderCard.card_id
+        : cardEntities[0]?.card_id || null;
+
+      // Calculate total card count
+      const totalCardCount = cardEntities.reduce((acc, curr) => acc + curr.quantity, 0);
+
+      // Update deck with optimization fields
+      const { error: updateError } = await supabase
+        .from('decks')
+        .update({
+          cover_card_id: coverCardId,
+          validation_errors: validation.errors,
+          is_valid: validation.isValid,
+          card_count: totalCardCount,
+        })
+        .eq('id', deck.id);
+
+      if (updateError) {
+        console.error(`Error updating deck ${deck.id}:`, updateError);
+      } else {
+        console.log(`✓ Migrated deck: ${deck.name}`);
+      }
+
+      // Small delay to avoid rate limiting
+      await new Promise(resolve => setTimeout(resolve, 100));
+    } catch (error) {
+      console.error(`Error processing deck ${deck.id}:`, error);
+    }
+  }
+
+  console.log('Migration complete!');
+}

vite.config.ts

@@ -1,10 +1,99 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
+import { VitePWA } from 'vite-plugin-pwa';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+    react(),
+    VitePWA({
+      registerType: 'autoUpdate',
+      includeAssets: ['icon.svg'],
+      manifest: {
+        name: 'Deckerr - Card Deck Manager',
+        short_name: 'Deckerr',
+        description: 'Manage your trading card game decks on the go',
+        theme_color: '#0f172a',
+        background_color: '#0f172a',
+        display: 'standalone',
+        orientation: 'portrait',
+        scope: '/',
+        start_url: '/',
+        icons: [
+          {
+            src: 'icon.svg',
+            sizes: '512x512',
+            type: 'image/svg+xml',
+            purpose: 'any'
+          },
+          {
+            src: 'icon.svg',
+            sizes: '512x512',
+            type: 'image/svg+xml',
+            purpose: 'maskable'
+          }
+        ],
+        categories: ['games', 'utilities'],
+        shortcuts: [
+          {
+            name: 'My Decks',
+            short_name: 'Decks',
+            description: 'View your deck collection',
+            url: '/?page=home'
+          },
+          {
+            name: 'Search Cards',
+            short_name: 'Search',
+            description: 'Search for cards',
+            url: '/?page=search'
+          },
+          {
+            name: 'Life Counter',
+            short_name: 'Life',
+            description: 'Track life totals',
+            url: '/?page=life-counter'
+          }
+        ]
+      },
+      workbox: {
+        globPatterns: ['**/*.{js,css,html,ico,png,svg,woff,woff2}'],
+        runtimeCaching: [
+          {
+            urlPattern: /^https:\/\/api\.scryfall\.com\/.*/i,
+            handler: 'CacheFirst',
+            options: {
+              cacheName: 'scryfall-cache',
+              expiration: {
+                maxEntries: 500,
+                maxAgeSeconds: 60 * 60 * 24 * 7 // 7 days
+              },
+              cacheableResponse: {
+                statuses: [0, 200]
+              }
+            }
+          },
+          {
+            urlPattern: /^https:\/\/cards\.scryfall\.io\/.*/i,
+            handler: 'CacheFirst',
+            options: {
+              cacheName: 'card-images-cache',
+              expiration: {
+                maxEntries: 1000,
+                maxAgeSeconds: 60 * 60 * 24 * 30 // 30 days
+              },
+              cacheableResponse: {
+                statuses: [0, 200]
+              }
+            }
+          }
+        ]
+      },
+      devOptions: {
+        enabled: true
+      }
+    })
+  ],
   optimizeDeps: {
     exclude: ['lucide-react'],
   },
-});
+});