SIWE auth, API proxy fixes, dashboard, login, usage pages

- SIWE auth flow: challenge/login/logout/me API routes + JWT middleware - Fixed [...path] catch-all: Kubo proxy with matchRoute() + mapToKuboAPI() - Fixed session_id → nonce field mismatch in AuthProvider - Fixed dashboard pins crash: Kubo returns {Keys: {...}}, not array - Added middleware route guard (307 redirect to /login) - Added login, register, profile, usage, upload pages - Added dashboard components (StorageGauge, FreeTierProgress) - Added SWR hooks + AuthGuard + Providers + Toast/ErrorBoundary - Added payment integration (smart contract ABI, tiers, tokens) - Fixed IPNS key listing: Name/Id → name/id mapping - Added PWA support (manifest, service worker, icons) - Added tests for helpers, limits, search-index, wallet
2026-06-28 18:31:05 +02:00
parent 1ddc89479c
commit c9432a16ba
84 changed files with 6679 additions and 1426 deletions
@@ -0,0 +1,67 @@
+'use client';
+
+/* ════════════════════════════ BatchBar ════════════════════════════
+ * Floating "N selected" action bar voor batch operaties.
+ * Verschijnt onderaan zodra >= 1 item geselecteerd is.
+ */
+
+import { Trash2, Download, X } from 'lucide-react';
+
+export interface BatchAction {
+  key: string;
+  label: string;
+  icon?: React.ReactNode;
+  variant?: 'danger' | 'default';
+  onClick: () => void;
+}
+
+interface BatchBarProps {
+  count: number;
+  actions: BatchAction[];
+  onClear: () => void;
+  label?: string;
+}
+
+export default function BatchBar({ count, actions, onClear, label = 'geselecteerd' }: BatchBarProps) {
+  if (count === 0) return null;
+
+  return (
+    <div className="fixed bottom-6 left-1/2 -translate-x-1/2 z-50 animate-slide-up">
+      <div className="flex items-center gap-3 px-4 py-3 rounded-xl bg-surface-800 border border-surface-700 shadow-xl shadow-black/30">
+        {/* Count badge */}
+        <span className="text-sm text-surface-200 font-medium whitespace-nowrap">
+          <span className="text-brand-400">{count}</span> {label}
+        </span>
+
+        <div className="w-px h-5 bg-surface-700" />
+
+        {/* Actions */}
+        <div className="flex items-center gap-2">
+          {actions.map((action) => (
+            <button
+              key={action.key}
+              onClick={action.onClick}
+              className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors ${
+                action.variant === 'danger'
+                  ? 'bg-accent-rose/10 text-accent-rose hover:bg-accent-rose/20'
+                  : 'bg-brand-500/10 text-brand-400 hover:bg-brand-500/20'
+              }`}
+            >
+              {action.icon}
+              {action.label}
+            </button>
+          ))}
+        </div>
+
+        {/* Close */}
+        <button
+          onClick={onClear}
+          className="p-1.5 rounded-lg text-surface-500 hover:text-surface-300 hover:bg-surface-700 transition-colors"
+          aria-label="Deselecteer alles"
+        >
+          <X className="w-4 h-4" />
+        </button>
+      </div>
+    </div>
+  );
+}