From defcf2af9cfad13871c9d877388c1106a6bce478 Mon Sep 17 00:00:00 2001
From: Matthieu <matthieu.reynier@echoes.solutions>
Date: Fri, 21 Nov 2025 17:36:00 +0100
Subject: [PATCH] Add functionality to create new decks and update navigation
 labels

---
 src/App.tsx                    |  5 +-
 src/components/DeckList.tsx    | 20 +++++++-
 src/components/DeckManager.tsx |  2 +-
 src/components/Navigation.tsx  | 92 ++++++++++++++++++----------------
 4 files changed, 73 insertions(+), 46 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index ce4d5cd..4650848 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -42,7 +42,10 @@ import React, { useState } from 'react';
               <div className="bg-gray-900 text-white p-3 sm:p-6 animate-fade-in">
                 <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} />
+                  <DeckList
+                    onDeckEdit={handleDeckEdit}
+                    onCreateDeck={() => setCurrentPage('deck')}
+                  />
                 </div>
               </div>
             );
diff --git a/src/components/DeckList.tsx b/src/components/DeckList.tsx
index 3cbdb28..9845ab1 100644
--- a/src/components/DeckList.tsx
+++ b/src/components/DeckList.tsx
@@ -3,12 +3,14 @@ import { getCardById, getCardsByIds } from '../services/api';
 import { Deck } from '../types';
 import { supabase } from "../lib/supabase";
 import DeckCard from "./DeckCard";
+import { PlusCircle } from 'lucide-react';
 
 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);
 
@@ -92,6 +94,22 @@ const DeckList = ({ onDeckEdit }: DeckListProps) => {
       {decks.map((deck) => (
         <DeckCard key={deck.id} deck={deck} onEdit={onDeckEdit} />
       ))}
+
+      {/* Create New Deck Card */}
+      <button
+        onClick={onCreateDeck}
+        className="bg-gray-800 rounded-xl overflow-hidden shadow-lg hover:shadow-2xl border-2 border-dashed border-gray-600 hover:border-blue-500 transition-all duration-300 hover:scale-105 cursor-pointer group min-h-[300px] flex flex-col items-center justify-center gap-4 p-8"
+      >
+        <PlusCircle size={64} className="text-gray-600 group-hover:text-blue-500 transition-colors" />
+        <div className="text-center">
+          <h3 className="text-xl font-bold text-gray-400 group-hover:text-blue-400 transition-colors">
+            Create New Deck
+          </h3>
+          <p className="text-sm text-gray-500 mt-2">
+            Start building your collection
+          </p>
+        </div>
+      </button>
     </div>
   );
 };
diff --git a/src/components/DeckManager.tsx b/src/components/DeckManager.tsx
index 4eae315..a88c897 100644
--- a/src/components/DeckManager.tsx
+++ b/src/components/DeckManager.tsx
@@ -490,7 +490,7 @@ export default function DeckManager({ initialDeck, onSave }: DeckManagerProps) {
   };
 
   return (
-    <div className="bg-gray-900 text-white p-3 sm:p-6">
+    <div className="bg-gray-900 text-white p-3 sm:p-6 pt-6 pb-20 md:pt-20 md:pb-6">
       <div className="max-w-7xl mx-auto">
         <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-6">
           {/* Card Search Section */}
diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
index 0679461..8524cf6 100644
--- a/src/components/Navigation.tsx
+++ b/src/components/Navigation.tsx
@@ -51,8 +51,7 @@ import React, { useState, useRef, useEffect } from 'react';
       }, []);
 
       const navItems = [
-        { id: 'home' as const, label: 'Home', icon: Home },
-        { id: 'deck' as const, label: 'New Deck', icon: PlusSquare },
+        { id: 'home' as const, label: 'Decks', icon: Library },
         { 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 },
@@ -140,52 +139,59 @@ import React, { useState, useRef, useEffect } from 'react';
           </nav>
 
           {/* 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">
-              <span className="text-2xl font-bold text-orange-500 animate-bounce-in">Deckerr</span>
-              <div className="relative" ref={mobileMenuRef}>
+          <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>
+              ))}
+
+              {/* Settings with dropdown */}
+              <div className="relative flex-1 h-full" ref={mobileMenuRef}>
                 <button
                   onClick={() => setShowMobileMenu(!showMobileMenu)}
-                  className="text-gray-300 hover:text-white"
+                  className={`flex flex-col items-center justify-center w-full h-full transition-colors ${
+                    currentPage === 'profile' || showMobileMenu
+                      ? 'text-blue-500'
+                      : 'text-gray-400 hover:text-gray-200'
+                  }`}
                 >
-                  <Menu size={24} />
+                  <Settings size={20} />
+                  <span className="text-xs mt-1">Settings</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) => (
-                      <button
-                        key={item.id}
-                        onClick={() => {
-                          setCurrentPage(item.id);
-                          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"
-                      >
-                        <item.icon size={16} />
-                        <span>{item.label}</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 className="absolute right-0 bottom-full mb-2 w-48 bg-gray-800 rounded-lg shadow-xl py-1 border border-gray-700 animate-scale-in">
+                    <button
+                      onClick={() => {
+                        setCurrentPage('profile');
+                        setShowMobileMenu(false);
+                      }}
+                      className="flex items-center space-x-3 w-full px-4 py-3 text-sm text-gray-300 hover:bg-gray-700 transition-colors"
+                    >
+                      <Settings size={18} />
+                      <span>Profile</span>
+                    </button>
+                    <button
+                      onClick={() => {
+                        handleSignOut();
+                        setShowMobileMenu(false);
+                      }}
+                      className="flex items-center space-x-3 w-full px-4 py-3 text-sm text-red-400 hover:bg-gray-700 transition-colors"
+                    >
+                      <LogOut size={18} />
+                      <span>Sign Out</span>
+                    </button>
                   </div>
                 )}
               </div>