Dynamic Branding, Instance name and description on log in sign up page.

src/app/api/auth/check-handle/route.ts

@@ -0,0 +1,30 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { db, users } from '@/db';
+import { eq } from 'drizzle-orm';
+
+export async function GET(req: NextRequest) {
+    try {
+        const { searchParams } = new URL(req.url);
+        const handle = searchParams.get('handle')?.toLowerCase().trim();
+
+        if (!handle || handle.length < 3) {
+            return NextResponse.json({ available: false, error: 'Handle too short' });
+        }
+
+        if (!/^[a-zA-Z0-9_]+$/.test(handle)) {
+            return NextResponse.json({ available: false, error: 'Invalid characters' });
+        }
+
+        const existingUser = await db.query.users.findFirst({
+            where: eq(users.handle, handle),
+        });
+
+        return NextResponse.json({
+            available: !existingUser,
+            handle
+        });
+    } catch (error) {
+        console.error('Check handle error:', error);
+        return NextResponse.json({ error: 'Failed to check handle' }, { status: 500 });
+    }
+}

src/app/login/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import { SynapsisLogo } from '@/components/Icons';
@@ -15,6 +15,46 @@ export default function LoginPage() {
     const [displayName, setDisplayName] = useState('');
     const [error, setError] = useState('');
     const [loading, setLoading] = useState(false);
+    const [nodeInfo, setNodeInfo] = useState({ name: '', description: '' });
+    const [handleStatus, setHandleStatus] = useState<'idle' | 'checking' | 'available' | 'taken'>('idle');
+
+    // Fetch node info
+    useEffect(() => {
+        fetch('/api/node')
+            .then(res => res.json())
+            .then(data => {
+                setNodeInfo({
+                    name: data.name || '',
+                    description: data.description || 'Federated social network infrastructure'
+                });
+            })
+            .catch(() => { });
+    }, []);
+
+    // Handle availability check
+    useEffect(() => {
+        if (mode !== 'register' || !handle || handle.length < 3) {
+            setHandleStatus('idle');
+            return;
+        }
+
+        const timer = setTimeout(async () => {
+            setHandleStatus('checking');
+            try {
+                const res = await fetch(`/api/auth/check-handle?handle=${handle}`);
+                const data = await res.json();
+                if (data.available) {
+                    setHandleStatus('available');
+                } else {
+                    setHandleStatus('taken');
+                }
+            } catch {
+                setHandleStatus('idle');
+            }
+        }, 500);
+
+        return () => clearTimeout(timer);
+    }, [handle, mode]);
 
     const handleSubmit = async (e: React.FormEvent) => {
         e.preventDefault();
@@ -65,12 +105,17 @@ export default function LoginPage() {
             <div style={{ width: '100%', maxWidth: '400px' }}>
                 {/* Logo */}
                 <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', marginBottom: '32px' }}>
-                    <div className="logo" style={{ marginBottom: '8px', fontSize: '32px' }}>
+                    <div className="logo" style={{ marginBottom: '4px', fontSize: '32px' }}>
                         <SynapsisLogo />
                         <span>Synapsis</span>
                     </div>
-                    <p style={{ color: 'var(--foreground-secondary)', marginTop: '0' }}>
+                    {nodeInfo.name && nodeInfo.name !== 'Synapsis' && (
-                        Federated social network infrastructure
+                        <div style={{ fontSize: '18px', fontWeight: 600, color: 'var(--foreground)', marginBottom: '8px' }}>
+                            {nodeInfo.name}
+                        </div>
+                    )}
+                    <p style={{ color: 'var(--foreground-secondary)', marginTop: '0', textAlign: 'center' }}>
+                        {nodeInfo.description}
                     </p>
                 </div>
 
@@ -158,9 +203,26 @@ export default function LoginPage() {
                                         maxLength={20}
                                     />
                                 </div>
-                                <p style={{ fontSize: '12px', color: 'var(--foreground-tertiary)', marginTop: '4px' }}>
+                                <div style={{
-                                    3-20 characters, letters, numbers, and underscores only
+                                    fontSize: '12px',
-                                </p>
+                                    marginTop: '4px',
+                                    display: 'flex',
+                                    justifyContent: 'space-between',
+                                    alignItems: 'center'
+                                }}>
+                                    <span style={{ color: 'var(--foreground-tertiary)' }}>
+                                        3-20 characters, alphanumeric and underscores
+                                    </span>
+                                    {handleStatus === 'checking' && (
+                                        <span style={{ color: 'var(--foreground-tertiary)' }}>Checking...</span>
+                                    )}
+                                    {handleStatus === 'available' && (
+                                        <span style={{ color: 'var(--success)', fontWeight: 600 }}>Available</span>
+                                    )}
+                                    {handleStatus === 'taken' && (
+                                        <span style={{ color: 'var(--error)', fontWeight: 600 }}>Taken</span>
+                                    )}
+                                </div>
                             </div>
 
                             <div style={{ marginBottom: '16px' }}>

src/app/settings/migration/page.tsx

@@ -31,6 +31,32 @@ export default function MigrationPage() {
     const [isImporting, setIsImporting] = useState(false);
     const [importError, setImportError] = useState<string | null>(null);
     const [importSuccess, setImportSuccess] = useState<string | null>(null);
+    const [handleStatus, setHandleStatus] = useState<'idle' | 'checking' | 'available' | 'taken'>('idle');
+
+    // Handle availability check
+    useEffect(() => {
+        if (activeTab !== 'import' || !importHandle || importHandle.length < 3) {
+            setHandleStatus('idle');
+            return;
+        }
+
+        const timer = setTimeout(async () => {
+            setHandleStatus('checking');
+            try {
+                const res = await fetch(`/api/auth/check-handle?handle=${importHandle}`);
+                const data = await res.json();
+                if (data.available) {
+                    setHandleStatus('available');
+                } else {
+                    setHandleStatus('taken');
+                }
+            } catch {
+                setHandleStatus('idle');
+            }
+        }, 500);
+
+        return () => clearTimeout(timer);
+    }, [importHandle, activeTab]);
 
     const handleExport = async () => {
         if (!exportPassword) {
@@ -359,15 +385,45 @@ export default function MigrationPage() {
                         <label style={{ fontSize: '13px', color: 'var(--foreground-tertiary)', display: 'block', marginBottom: '6px' }}>
                             Handle on this node
                         </label>
-                        <input
+                        <div style={{ position: 'relative' }}>
-                            type="text"
+                            <span style={{
-                            className="input"
+                                position: 'absolute',
-                            value={importHandle}
+                                left: '12px',
-                            onChange={(e) => setImportHandle(e.target.value)}
+                                top: '50%',
-                            placeholder="e.g., alice"
+                                transform: 'translateY(-50%)',
-                        />
+                                color: 'var(--foreground-tertiary)',
-                        <div style={{ fontSize: '12px', color: 'var(--foreground-tertiary)', marginTop: '4px' }}>
+                            }}>@</span>
-                            This will be your @handle on this node. Your DID remains the same.
+                            <input
+                                type="text"
+                                className="input"
+                                value={importHandle}
+                                onChange={(e) => setImportHandle(e.target.value.toLowerCase().replace(/[^a-z0-9_]/g, ''))}
+                                style={{ paddingLeft: '28px' }}
+                                placeholder="yourhandle"
+                                required
+                                minLength={3}
+                                maxLength={20}
+                            />
+                        </div>
+                        <div style={{
+                            fontSize: '12px',
+                            marginTop: '4px',
+                            display: 'flex',
+                            justifyContent: 'space-between',
+                            alignItems: 'center'
+                        }}>
+                            <span style={{ color: 'var(--foreground-tertiary)' }}>
+                                3-20 characters, alphanumeric and underscores
+                            </span>
+                            {handleStatus === 'checking' && (
+                                <span style={{ color: 'var(--foreground-tertiary)' }}>Checking...</span>
+                            )}
+                            {handleStatus === 'available' && (
+                                <span style={{ color: 'var(--success)', fontWeight: 600 }}>Available</span>
+                            )}
+                            {handleStatus === 'taken' && (
+                                <span style={{ color: 'var(--error)', fontWeight: 600 }}>Taken</span>
+                            )}
                         </div>
                     </div>