feat: add accent color setting and apply it dynamically across components

src/app/admin/page.tsx

@@ -61,6 +61,7 @@ export default function AdminPage() {
         longDescription: '',
         rules: '',
         bannerUrl: '',
+        accentColor: '#00D4AA',
     });
     const [savingSettings, setSavingSettings] = useState(false);
     const [isUploadingBanner, setIsUploadingBanner] = useState(false);
@@ -123,6 +124,7 @@ export default function AdminPage() {
                 longDescription: data.longDescription || '',
                 rules: data.rules || '',
                 bannerUrl: data.bannerUrl || '',
+                accentColor: data.accentColor || '#00D4AA',
             });
         } catch {
             // error
@@ -501,6 +503,24 @@ export default function AdminPage() {
                                 />
                             </div>
 
+                            <div>
+                                <label style={{ fontSize: '13px', fontWeight: 500, marginBottom: '4px', display: 'block' }}>Accent Color</label>
+                                <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
+                                    <input
+                                        type="color"
+                                        value={nodeSettings.accentColor}
+                                        onChange={(e) => setNodeSettings({ ...nodeSettings, accentColor: e.target.value })}
+                                        style={{ width: '44px', height: '36px', padding: 0, border: '1px solid var(--border)', background: 'transparent', borderRadius: '8px' }}
+                                    />
+                                    <input
+                                        className="input"
+                                        value={nodeSettings.accentColor}
+                                        onChange={(e) => setNodeSettings({ ...nodeSettings, accentColor: e.target.value })}
+                                        placeholder="#00D4AA"
+                                    />
+                                </div>
+                            </div>
+
                             <div>
                                 <label style={{ fontSize: '13px', fontWeight: 500, marginBottom: '4px', display: 'block' }}>Banner image</label>
                                 <div style={{ display: 'flex', gap: '8px', alignItems: 'center', flexWrap: 'wrap' }}>

src/app/api/admin/node/route.ts

@@ -33,6 +33,7 @@ export async function PATCH(req: NextRequest) {
                     longDescription: data.longDescription,
                     rules: data.rules,
                     bannerUrl: data.bannerUrl,
+                    accentColor: data.accentColor,
                     updatedAt: new Date(),
                 })
                 .where(eq(nodes.id, node.id))

src/app/login/page.tsx

@@ -3,6 +3,7 @@
 import { useState } from 'react';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
+import { SynapsisLogo } from '@/components/Icons';
 
 export default function LoginPage() {
     const router = useRouter();
@@ -58,7 +59,7 @@ export default function LoginPage() {
                 {/* Logo */}
                 <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', marginBottom: '32px' }}>
                     <div className="logo" style={{ marginBottom: '8px', fontSize: '32px' }}>
-                        <img className="logo-icon" src="/logo.svg" alt="Synapsis" width={28} height={28} />
+                        <SynapsisLogo />
                         <span>Synapsis</span>
                     </div>
                     <p style={{ color: 'var(--foreground-secondary)', marginTop: '0' }}>