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,82 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import {
+  LayoutDashboard,
+  Upload,
+  Globe,
+  HardDrive,
+  Users,
+  Activity,
+  Settings,
+  Fingerprint,
+  Shield,
+  LogOut,
+  Clock,
+} from 'lucide-react';
+
+const NAV_ITEMS = [
+  { href: '/dashboard', label: 'Dashboard', icon: LayoutDashboard },
+  { href: '/upload', label: 'Upload', icon: Upload },
+  { href: '/explorer', label: 'Explorer', icon: Globe },
+  { href: '/pins', label: 'Pins', icon: HardDrive },
+  { href: '/history', label: 'History', icon: Clock },
+  { href: '/ipns', label: 'IPNS', icon: Fingerprint },
+  { href: '/peers', label: 'Peers', icon: Activity },
+  { href: '/users', label: 'Users', icon: Users },
+  { href: '/admin/payment', label: 'Payment Admin', icon: Shield },
+  { href: '/settings', label: 'Settings', icon: Settings },
+];
+
+export default function PortalSidebar() {
+  const pathname = usePathname();
+
+  function handleDisconnect() {
+    window.location.href = '/';
+  }
+
+  return (
+    <aside className="fixed left-0 top-0 bottom-0 w-56 flex flex-col glass border-r border-surface-800 z-50">
+      {/* Logo */}
+      <div className="flex items-center gap-2.5 px-5 h-14 border-b border-surface-800 shrink-0">
+        <div className="w-7 h-7 rounded-lg bg-gradient-to-br from-brand-500 to-accent-purple flex items-center justify-center text-xs font-bold text-white">
+          M
+        </div>
+        <span className="text-sm font-semibold text-white">IPFS Portal</span>
+      </div>
+
+      {/* Nav */}
+      <nav className="flex-1 p-3 space-y-1 overflow-y-auto">
+        {NAV_ITEMS.map((item) => {
+          const active = pathname === item.href;
+          return (
+            <Link
+              key={item.href}
+              href={item.href}
+              className={`flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-all duration-150 ${
+                active
+                  ? 'bg-brand-500/10 text-brand-400 border border-brand-500/20'
+                  : 'text-surface-400 hover:text-surface-200 hover:bg-surface-800/50 border border-transparent'
+              }`}
+            >
+              <item.icon className="w-4 h-4 shrink-0" />
+              {item.label}
+            </Link>
+          );
+        })}
+      </nav>
+
+      {/* Disconnect */}
+      <div className="p-3 border-t border-surface-800">
+        <button
+          onClick={handleDisconnect}
+          className="flex items-center gap-3 w-full px-3 py-2 rounded-lg text-sm text-surface-500 hover:text-accent-rose hover:bg-accent-rose/5 transition-all duration-150"
+        >
+          <LogOut className="w-4 h-4 shrink-0" />
+          Disconnect
+        </button>
+      </div>
+    </aside>
+  );
+}