feat: sync qr code dot and eye colors, add logo upload support

client/src/components/qr-editor/DesignPanel.tsx

@@ -10,9 +10,12 @@ interface DesignPanelProps {
 export default function DesignPanel({ options, onChange }: DesignPanelProps) {
   
   const handleColorChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newColor = e.target.value;
     onChange({
       ...options,
-      dotsOptions: { ...options.dotsOptions, color: e.target.value }
+      dotsOptions: { ...options.dotsOptions, color: newColor },
+      cornersSquareOptions: { ...options.cornersSquareOptions, color: newColor },
+      cornersDotOptions: { ...options.cornersDotOptions, color: newColor }
     });
   };
 
@@ -30,13 +33,35 @@ export default function DesignPanel({ options, onChange }: DesignPanelProps) {
     });
   };
 
+  const handleLogoUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    const reader = new FileReader();
+    reader.onload = (event) => {
+      const dataUrl = event.target?.result as string;
+      onChange({
+        ...options,
+        image: dataUrl
+      });
+    };
+    reader.readAsDataURL(file);
+  };
+
+  const removeLogo = () => {
+    onChange({
+      ...options,
+      image: undefined
+    });
+  };
+
   return (
     <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6 space-y-6">
       <h2 className="text-xl font-bold text-gray-800 border-b pb-4">Design Customization</h2>
       
       {/* Colors */}
       <div>
-        <label className="block text-sm font-medium text-gray-700 mb-2">Dot Color</label>
+        <label className="block text-sm font-medium text-gray-700 mb-2">Primary Color (Dots & Eyes)</label>
         <div className="flex items-center gap-4">
           <input 
             type="color" 
@@ -48,6 +73,27 @@ export default function DesignPanel({ options, onChange }: DesignPanelProps) {
         </div>
       </div>
 
+      {/* Logo */}
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-2">Logo</label>
+        <div className="flex items-center gap-4">
+          <input 
+            type="file" 
+            accept="image/*"
+            onChange={handleLogoUpload}
+            className="text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100"
+          />
+          {options.image && (
+            <button 
+              onClick={removeLogo}
+              className="text-sm text-red-600 hover:text-red-700 font-medium"
+            >
+              Remove Logo
+            </button>
+          )}
+        </div>
+      </div>
+
       {/* Shapes */}
       <div>
         <label className="block text-sm font-medium text-gray-700 mb-2">Dot Pattern</label>