feat: initial IPFS Portal — Next.js frontend for remote IPFS node management

Multi-file upload with Quick Upload + Crypto Payment tabs. Dashboard with live IPFS metrics, Explorer, Peers, Pins, History, Settings pages. Docker deploy (standalone output), full test suite (16 Playwright tests). Payment integration via IPFSPortalPayment + MockUSDC contracts on zkSync.
2026-06-25 19:47:57 +02:00
commit 1ddc89479c
42 changed files with 8383 additions and 0 deletions
@@ -0,0 +1,54 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { checkHealth } from '@/lib/api';
+import { Shield } from 'lucide-react';
+
+export default function PortalHeader() {
+  const [nodeStatus, setNodeStatus] = useState<'online' | 'offline' | 'checking'>('checking');
+  const [nodeVersion, setNodeVersion] = useState('');
+
+  useEffect(() => {
+    let mounted = true;
+    async function poll() {
+      try {
+        const h = await checkHealth();
+        if (!mounted) return;
+        setNodeStatus('online');
+        setNodeVersion(h.node);
+      } catch {
+        if (!mounted) return;
+        setNodeStatus('offline');
+      }
+    }
+    poll();
+    const iv = setInterval(poll, 30_000);
+    return () => { mounted = false; clearInterval(iv); };
+  }, []);
+
+  return (
+    <header className="sticky top-0 z-40 h-14 flex items-center justify-between px-6 glass border-b border-surface-800">
+      {/* Page title slot — parent fills with children */}
+      <div className="flex items-center gap-3" />
+
+      {/* Right side */}
+      <div className="flex items-center gap-4">
+        {/* Node status */}
+        <div className="flex items-center gap-2 text-xs">
+          <span
+            className={`status-dot status-dot--${nodeStatus === 'online' ? 'online' : 'offline'}`}
+          />
+          <span className="text-surface-400">
+            {nodeStatus === 'online' ? `Node ${nodeVersion}` : 'Offline'}
+          </span>
+        </div>
+
+        {/* Wallet badge placeholder */}
+        <div className="flex items-center gap-2 px-3 py-1.5 rounded-lg glass text-xs text-surface-300">
+          <Shield className="w-3.5 h-3.5 text-accent-cyan" />
+          Wallet Connected
+        </div>
+      </div>
+    </header>
+  );
+}