feat: implement authentication context, admin node settings, and core layout components

2026-01-22 04:26:23 -08:00
parent c5f2d9c128
commit 7213f08b64
17 changed files with 698 additions and 462 deletions
@@ -0,0 +1,82 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+
+export function RightSidebar() {
+    const [nodeInfo, setNodeInfo] = useState({
+        name: process.env.NEXT_PUBLIC_NODE_NAME || 'Synapsis Node',
+        description: 'A federated social network designed as global communication infrastructure. Signal over noise. Identity that is truly yours.',
+        longDescription: '',
+        rules: '',
+        bannerUrl: '',
+    });
+
+    useEffect(() => {
+        fetch('/api/node')
+            .then(res => res.json())
+            .then(data => {
+                if (data.name) {
+                    setNodeInfo(prev => ({ ...prev, ...data }));
+                }
+            })
+            .catch(() => { });
+    }, []);
+
+    return (
+        <aside className="aside">
+            <div className="card" style={{ position: 'relative', overflow: 'hidden', padding: 0 }}>
+                {nodeInfo.bannerUrl && (
+                    <>
+                        <div style={{
+                            position: 'absolute', inset: 0,
+                            background: `url(${nodeInfo.bannerUrl}) center/cover no-repeat`,
+                            opacity: 0.6
+                        }} />
+                        <div style={{
+                            position: 'absolute', inset: 0,
+                            background: 'linear-gradient(to bottom, transparent 0%, var(--background-secondary) 90%)'
+                        }} />
+                    </>
+                )}
+
+                <div style={{ position: 'relative', zIndex: 1, padding: '16px' }}>
+                    <h3 style={{ fontWeight: 600, marginBottom: '12px' }}>Welcome to {nodeInfo.name}</h3>
+                    <p style={{ color: 'var(--foreground-secondary)', fontSize: '14px', lineHeight: 1.6 }}>
+                        {nodeInfo.description}
+                    </p>
+
+                    {nodeInfo.longDescription && (
+                        <div style={{ marginTop: '16px', fontSize: '13px', color: 'var(--foreground-secondary)', lineHeight: 1.5 }}>
+                            {nodeInfo.longDescription.split('\n').map((line, i) => (
+                                <p key={i} style={{ marginBottom: '8px' }}>{line}</p>
+                            ))}
+                        </div>
+                    )}
+
+                    {nodeInfo.rules && (
+                        <div style={{ marginTop: '16px', paddingTop: '16px', borderTop: '1px solid var(--border-hover)' }}>
+                            <h4 style={{ fontSize: '11px', fontWeight: 700, textTransform: 'uppercase', color: 'var(--foreground-tertiary)', marginBottom: '8px', letterSpacing: '0.05em' }}>
+                                Node Rules
+                            </h4>
+                            <div style={{ color: 'var(--foreground-secondary)', fontSize: '13px', lineHeight: 1.5 }}>
+                                {nodeInfo.rules.split('\n').map((rule, i) => (
+                                    <div key={i} style={{ marginBottom: '4px', display: 'flex', gap: '8px' }}>
+                                        <span>•</span>
+                                        <span>{rule}</span>
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+                    )}
+                </div>
+            </div>
+
+            <div className="card" style={{ marginTop: '16px' }}>
+                <h3 style={{ fontWeight: 600, marginBottom: '12px' }}>Network Info</h3>
+                <p style={{ color: 'var(--foreground-secondary)', fontSize: '13px' }}>
+                    Running Synapsis v0.1.0
+                </p>
+            </div>
+        </aside>
+    );
+}