feat: add Spark Plug module for PDF to 3D generation and move API settings to Dashboard

src/pages/Dashboard.tsx

@@ -1,7 +1,8 @@
 import { useEffect, useState } from 'react';
 import { useAuthStore } from '../store/authStore';
 import { useNavigate, Link } from 'react-router-dom';
-import { LogOut, Plus, Folder, Loader2, Trash2 } from 'lucide-react';
+import { LogOut, Plus, Folder, Loader2, Trash2, Settings, Sparkles } from 'lucide-react';
+import { DashboardSettings } from '../components/DashboardSettings';
 import { api } from '../lib/api';
 
 interface Project {
@@ -15,6 +16,7 @@ export default function Dashboard() {
   const navigate = useNavigate();
   const [projects, setProjects] = useState<Project[]>([]);
   const [loading, setLoading] = useState(true);
+  const [isSettingsOpen, setIsSettingsOpen] = useState(false);
 
   useEffect(() => {
     const fetchProjects = async () => {
@@ -79,6 +81,13 @@ export default function Dashboard() {
             <Link to="/admin" className="text-sm text-primary hover:underline font-medium">Admin Panel</Link>
           )}
           <div className="text-sm text-zinc-400">{user?.email}</div>
+          <button 
+            onClick={() => setIsSettingsOpen(true)}
+            className="p-2 text-zinc-400 hover:text-white hover:bg-zinc-800 rounded-lg transition-colors"
+            title="Global Settings"
+          >
+            <Settings size={18} />
+          </button>
           <button 
             onClick={handleSignOut}
             className="p-2 text-zinc-400 hover:text-white hover:bg-zinc-800 rounded-lg transition-colors"
@@ -127,6 +136,13 @@ export default function Dashboard() {
                </div>
                <span className="text-sm font-medium">Create Blank Scene</span>
              </div>
+
+             <div className="aspect-video bg-gradient-to-br from-amber-500/20 to-purple-500/20 border border-zinc-800 border-dashed rounded-2xl flex flex-col items-center justify-center text-zinc-400 hover:text-white hover:border-amber-500/50 transition-colors cursor-pointer group" onClick={() => navigate('/spark-plug')}>
+               <div className="w-10 h-10 rounded-full bg-zinc-800 group-hover:bg-amber-500/20 flex items-center justify-center mb-2 transition-colors text-amber-500">
+                 <Sparkles size={20} />
+               </div>
+               <span className="text-sm font-medium text-amber-500/80 group-hover:text-amber-400 transition-colors">Spark Plug (PDF to 3D)</span>
+             </div>
              
              {projects.map(project => (
                <div key={project.id} onClick={() => navigate(`/editor/${project.id}`)} className="aspect-video bg-zinc-900 border border-zinc-800 rounded-2xl p-4 flex flex-col cursor-pointer hover:border-zinc-700 transition-colors group relative overflow-hidden">
@@ -150,6 +166,8 @@ export default function Dashboard() {
           </div>
         )}
       </main>
+
+      <DashboardSettings isOpen={isSettingsOpen} onClose={() => setIsSettingsOpen(false)} />
     </div>
   );
 }