add commander color identity validation and improve deck validation logic

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({

src/components/DeckManager.tsx

@@ -442,11 +442,8 @@ export default function DeckManager({ initialDeck, onSave }: DeckManagerProps) {
 
   const validation = validateDeck(currentDeck);
 
-  // Commander color identity validation
+  // Commander color identity validation (for land suggestions)
   const commanderColors = deckFormat === 'commander' ? getCommanderColors(commander) : [];
-  const invalidCards = deckFormat === 'commander' && commander
-    ? selectedCards.filter(({ card }) => !isCardValidForCommander(card, commanderColors))
-    : [];
 
   const deckSize = selectedCards.reduce((acc, curr) => acc + curr.quantity, 0);
   const {
@@ -829,26 +826,6 @@ export default function DeckManager({ initialDeck, onSave }: DeckManagerProps) {
                 </div>
               )}
 
-              {/* Commander Color Identity Warning */}
-              {deckFormat === 'commander' && commander && invalidCards.length > 0 && (
-                <div className="bg-yellow-500/10 border border-yellow-500 rounded-lg p-3">
-                  <div className="flex items-start gap-2">
-                    <AlertCircle className="text-yellow-500 flex-shrink-0 mt-0.5" size={16} />
-                    <div className="text-sm">
-                      <p className="text-yellow-400 font-semibold mb-1">Commander Color Identity Warning</p>
-                      <p className="text-yellow-300 text-xs mb-2">
-                        The following cards don't match your commander's color identity:
-                      </p>
-                      <ul className="list-disc list-inside text-yellow-300 text-xs">
-                        {invalidCards.map(({ card }) => (
-                          <li key={card.id}>{card.name}</li>
-                        ))}
-                      </ul>
-                    </div>
-                  </div>
-                </div>
-              )}
-
               <div className="space-y-2">
                 <div className="flex items-center justify-between mb-4">
                   <h3 className="font-bold text-xl">