improve filter but colorless doesn't work yet

src/components/CardSearch.tsx

@@ -12,7 +12,7 @@ import React, { useState } from 'react';
       const [colors, setColors] = useState({ W: false, U: false, B: false, R: false, G: false, C: false });
       const [colorMode, setColorMode] = useState('exactly');
       const [commanderColors, setCommanderColors] = useState({ W: false, U: false, B: false, R: false, G: false, C: false });
-      const [manaCost, setManaCost] = useState('');
+      const [manaCost, setManaCost] = useState({ W: 0, U: 0, B: 0, R: 0, G: 0, C: 0 });
       const [manaValue, setManaValue] = useState('');
       const [manaValueComparison, setManaValueComparison] = useState('=');
       const [games, setGames] = useState({ paper: false, arena: false, mtgo: false });
@@ -62,7 +62,14 @@ import React, { useState } from 'react';
           const activeColors = Object.keys(commanderColors).filter((key) => commanderColors[key as keyof typeof commanderColors]).join('');
           query += `id:${activeColors} `;
         }
-        if (manaCost) query += `m:${manaCost} `;
+
+        const manaCostString = Object.entries(manaCost)
+          .filter(([, count]) => count > 0)
+          .map(([color, count]) => `{${color}}`.repeat(count))
+          .join('');
+
+        if (manaCostString) query += `m:${manaCostString} `;
+
         if (manaValue) query += `mv${manaValueComparison}${manaValue} `;
         if (Object.values(games).some(Boolean)) {
           const activeGames = Object.keys(games).filter((key) => games[key as keyof typeof games]).join(',');
@@ -161,15 +168,17 @@ import React, { useState } from 'react';
                 <div>
                   <h4 className="font-bold mb-2">Card Colors</h4>
                   <div className="flex gap-2">
-                    {['W', 'U', 'B', 'R', 'G', 'C'].map((color) => (
+                    {Object.entries(colors).map(([color, active]) => (
                       <label key={color} className="flex items-center space-x-2">
                         <input
                           type="checkbox"
-                          checked={colors[color as keyof typeof colors]}
+                          checked={active}
-                          onChange={() => setColors({ ...colors, [color]: !colors[color as keyof typeof colors] })}
+                          onChange={() => setColors({ ...colors, [color]: !active })}
                           className="rounded border-gray-700 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                         />
-                        <span>{color}</span>
+                        <span style={{ fontSize: '1.5em' }}>
+                          {color === 'W' ? '⚪' : color === 'U' ? '🔵' : color === 'B' ? '⚫' : color === 'R' ? '🔴' : color === 'G' ? '🟢' : '🟤'}
+                        </span>
                       </label>
                     ))}
                   </div>
@@ -185,15 +194,17 @@ import React, { useState } from 'react';
                 <div>
                   <h4 className="font-bold mb-2">Commander Colors</h4>
                   <div className="flex gap-2">
-                    {['W', 'U', 'B', 'R', 'G', 'C'].map((color) => (
+                    {Object.entries(commanderColors).map(([color, active]) => (
                       <label key={color} className="flex items-center space-x-2">
                         <input
                           type="checkbox"
-                          checked={commanderColors[color as keyof typeof commanderColors]}
+                          checked={active}
-                          onChange={() => setCommanderColors({ ...commanderColors, [color]: !commanderColors[color as keyof typeof commanderColors] })}
+                          onChange={() => setCommanderColors({ ...commanderColors, [color]: !active })}
                           className="rounded border-gray-700 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                         />
-                        <span>{color}</span>
+                        <span style={{ fontSize: '1.5em' }}>
+                          {color === 'W' ? '⚪' : color === 'U' ? '🔵' : color === 'B' ? '⚫' : color === 'R' ? '🔴' : color === 'G' ? '🟢' : '🟤'}
+                        </span>
                       </label>
                     ))}
                   </div>
@@ -201,13 +212,22 @@ import React, { useState } from 'react';
               </div>
 
               {/* Mana Cost */}
-              <input
+              <div className="grid grid-cols-3 md:grid-cols-6 gap-2">
-                type="text"
+                {Object.entries(manaCost).map(([color, count]) => (
-                value={manaCost}
+                  <div key={color} className="flex items-center space-x-2">
-                onChange={(e) => setManaCost(e.target.value)}
+                    <span style={{ fontSize: '1.5em' }}>
-                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"
+                      {color === 'W' ? '⚪' : color === 'U' ? '🔵' : color === 'B' ? '⚫' : color === 'R' ? '🔴' : color === 'G' ? '🟢' : '🟤'}
-                placeholder="Mana Cost (e.g., {W}{W})"
+                    </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>
 
               {/* Stats */}
               <div className="flex gap-2">

src/components/ManaIcons.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+
+    export const ManaWhite = ({ size = 20, ...props }: { size?: number }) => (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...props}
+      >
+        <path d="M12 2v20M2 12h20" />
+      </svg>
+    );
+
+    export const ManaBlue = ({ size = 20, ...props }: { size?: number }) => (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...props}
+      >
+        <path d="M12 2v20M2 12h20" />
+        <path d="M12 2v20M2 12h20" transform="rotate(45 12 12)" />
+      </svg>
+    );
+
+    export const ManaBlack = ({ size = 20, ...props }: { size?: number }) => (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...props}
+      >
+        <path d="M12 2v20M2 12h20" transform="rotate(90 12 12)" />
+        <path d="M12 2v20M2 12h20" transform="rotate(135 12 12)" />
+      </svg>
+    );
+
+    export const ManaRed = ({ size = 20, ...props }: { size?: number }) => (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...props}
+      >
+        <path d="M12 2v20M2 12h20" transform="rotate(135 12 12)" />
+        <path d="M12 2v20M2 12h20" transform="rotate(180 12 12)" />
+      </svg>
+    );
+
+    export const ManaGreen = ({ size = 20, ...props }: { size?: number }) => (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...props}
+      >
+        <path d="M12 2v20M2 12h20" transform="rotate(180 12 12)" />
+        <path d="M12 2v20M2 12h20" transform="rotate(225 12 12)" />
+      </svg>
+    );
+
+    export const ManaColorless = ({ size = 20, ...props }: { size?: number }) => (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...props}
+      >
+        <circle cx="12" cy="12" r="10" />
+      </svg>
+    );