From 890d54c011d48cd180b3cdddfd1c5db2738f8d4b Mon Sep 17 00:00:00 2001
From: Christopher <admin@gaion.chat>
Date: Thu, 22 Jan 2026 04:39:28 -0800
Subject: [PATCH] feat: add banner upload functionality and replace
 SynapsisLogo with logo image in admin and login pages

---
 src/app/admin/page.tsx     | 50 ++++++++++++++++++++++++++++++++++++++
 src/app/login/page.tsx     | 29 +---------------------
 src/components/Sidebar.tsx |  4 +--
 3 files changed, 53 insertions(+), 30 deletions(-)

diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
index 4d516d3..66af812 100644
--- a/src/app/admin/page.tsx
+++ b/src/app/admin/page.tsx
@@ -63,6 +63,8 @@ export default function AdminPage() {
         bannerUrl: '',
     });
     const [savingSettings, setSavingSettings] = useState(false);
+    const [isUploadingBanner, setIsUploadingBanner] = useState(false);
+    const [bannerUploadError, setBannerUploadError] = useState<string | null>(null);
 
     useEffect(() => {
         fetch('/api/admin/me')
@@ -181,6 +183,39 @@ export default function AdminPage() {
         }
     };
 
+    const handleBannerUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
+        const file = event.target.files?.[0];
+        event.target.value = '';
+        if (!file) return;
+
+        setBannerUploadError(null);
+        setIsUploadingBanner(true);
+
+        try {
+            const formData = new FormData();
+            formData.append('file', file);
+            const res = await fetch('/api/media/upload', {
+                method: 'POST',
+                body: formData,
+            });
+            const data = await res.json();
+
+            if (!res.ok || !data.url) {
+                throw new Error(data.error || 'Upload failed');
+            }
+
+            setNodeSettings((prev) => ({
+                ...prev,
+                bannerUrl: data.media?.url || data.url,
+            }));
+        } catch (error) {
+            console.error('Banner upload failed', error);
+            setBannerUploadError('Upload failed. Please try again.');
+        } finally {
+            setIsUploadingBanner(false);
+        }
+    };
+
     const handleUserAction = async (id: string, action: 'suspend' | 'unsuspend' | 'silence' | 'unsilence') => {
         const needsReason = action === 'suspend' || action === 'silence';
         const reason = needsReason ? window.prompt('Reason (optional):') || '' : '';
@@ -471,6 +506,21 @@ export default function AdminPage() {
                                     onChange={e => setNodeSettings({ ...nodeSettings, bannerUrl: e.target.value })}
                                     placeholder="https://"
                                 />
+                                <div style={{ marginTop: '8px', display: 'flex', gap: '8px', alignItems: 'center', flexWrap: 'wrap' }}>
+                                    <label className="btn btn-ghost btn-sm">
+                                        {isUploadingBanner ? 'Uploading...' : 'Upload image'}
+                                        <input
+                                            type="file"
+                                            accept="image/*"
+                                            onChange={handleBannerUpload}
+                                            disabled={isUploadingBanner}
+                                            style={{ display: 'none' }}
+                                        />
+                                    </label>
+                                    {bannerUploadError && (
+                                        <span style={{ fontSize: '12px', color: 'var(--danger)' }}>{bannerUploadError}</span>
+                                    )}
+                                </div>
                                 {nodeSettings.bannerUrl && (
                                     <div style={{ marginTop: '8px', height: '120px', borderRadius: '8px', overflow: 'hidden', border: '1px solid var(--border)', position: 'relative' }}>
                                         <div style={{
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index df7df24..079c243 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -4,33 +4,6 @@ import { useState } from 'react';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 
-const SynapsisLogo = () => (
-    <svg
-        width="28"
-        height="28"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-    >
-        <path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z" />
-        <path d="M9 13a4.5 4.5 0 0 0 3-4" />
-        <path d="M6.003 5.125A3 3 0 0 0 6.401 6.5" />
-        <path d="M3.477 10.896a4 4 0 0 1 .585-.396" />
-        <path d="M6 18a4 4 0 0 1-1.967-.516" />
-        <path d="M12 13h4" />
-        <path d="M12 18h6a2 2 0 0 1 2 2v1" />
-        <path d="M12 8h8" />
-        <path d="M16 8V5a2 2 0 0 1 2-2" />
-        <circle cx="16" cy="13" r=".5" fill="currentColor" />
-        <circle cx="18" cy="3" r=".5" fill="currentColor" />
-        <circle cx="20" cy="21" r=".5" fill="currentColor" />
-        <circle cx="20" cy="8" r=".5" fill="currentColor" />
-    </svg>
-);
-
 export default function LoginPage() {
     const router = useRouter();
     const [mode, setMode] = useState<'login' | 'register'>('login');
@@ -85,7 +58,7 @@ export default function LoginPage() {
                 {/* Logo */}
                 <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', marginBottom: '32px' }}>
                     <div className="logo" style={{ marginBottom: '8px', fontSize: '32px' }}>
-                        <SynapsisLogo />
+                        <img className="logo-icon" src="/logo.svg" alt="Synapsis" width={28} height={28} />
                         <span>Synapsis</span>
                     </div>
                     <p style={{ color: 'var(--foreground-secondary)', marginTop: '0' }}>
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 1233a63..8b2823d 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -3,7 +3,7 @@
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { useAuth } from '@/lib/contexts/AuthContext';
-import { HomeIcon, SearchIcon, BellIcon, UserIcon, ShieldIcon, SynapsisLogo } from './Icons';
+import { HomeIcon, SearchIcon, BellIcon, UserIcon, ShieldIcon } from './Icons';
 
 export function Sidebar() {
     const { user, isAdmin } = useAuth();
@@ -15,7 +15,7 @@ export function Sidebar() {
     return (
         <aside className="sidebar">
             <Link href="/" className="logo">
-                <SynapsisLogo />
+                <img className="logo-icon" src="/logo.svg" alt="Synapsis" width={28} height={28} />
                 <span>Synapsis</span>
             </Link>
             <nav>