IPFS Portal · Verbeterplan

Data flow

Nieuwe bestanden

• src/app/login/page.tsx — Login formulier met username/password
• src/lib/auth.tsx — AuthContext + AuthProvider + useAuth() hook
• src/app/register/page.tsx — Registratie formulier
• src/app/layout.tsx — Wrap met AuthProvider
• src/app/api/[...path]/route.ts — Voeg login/register/auth-check routes toe
• src/components/AuthGuard.tsx — Redirect niet-ingelogde users naar /login

Code sketch — AuthContext

// src/lib/auth.tsx
import { createContext, useContext, useState, useEffect } from 'react';

interface AuthState {
  user: string | null;
  role: 'admin' | 'user' | null;
  login: (username: string, password: string) => Promise<void>;
  logout: () => void;
  loading: boolean;
}

export function AuthProvider({ children }: { children: React.ReactNode }) {
  const [user, setUser] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);

  // Check session on mount
  useEffect(() => {
    fetch('/api/auth/me')
      .then(r => r.ok ? r.json() : null)
      .then(d => setUser(d?.username ?? null))
      .finally(() => setLoading(false));
  }, []);

  async function login(username: string, password: string) {
    const res = await fetch('/api/auth/login', {
      method: 'POST',
      body: JSON.stringify({ username, password }),
    });
    if (!res.ok) throw new Error('Login failed');
    const data = await res.json();
    setUser(data.username);
  }

  return (
    <AuthContext.Provider value={{ user, loading, login, logout: () => { ... } }}>
      {children}
    </AuthContext.Provider>
  );
}

Flow — upload met limietcheck

Nieuwe bestanden

• src/lib/limits.ts — Limiet configuratie + check functies
• src/app/api/[...path]/route.ts — Injecteer limit check in proxyIPFS
• src/app/dashboard/components/UsageCard.tsx — Visuele usage meter

Code sketch — limit checker

// src/lib/limits.ts
export interface UsageQuota {
  maxStorageMB: number;     // 30720 = 30 GB
  maxUploads: number;       // 1000
  freeUploadsPerDay: number; // 50
}

const DEFAULT_QUOTA: UsageQuota = {
  maxStorageMB: 30720,
  maxUploads: 1000,
  freeUploadsPerDay: 50,
};

export async function checkUploadAllowed(wallet?: string): Promise<{
  allowed: boolean;
  reason?: string;
  quota: UsageQuota;
  used: { storageMB: number; uploads: number };
}> {
  // Haal repo stats van Kubo
  // Check storage, upload count, free tier
  // Return: { allowed: false, reason: 'Storage limit reached (23/30 GB)' }
}

Architectuur

Nieuwe bestanden

• src/lib/notifications.tsx — NotificationContext + useNotify() hook
• src/components/Toast.tsx — Toast component met progress-bar
• src/components/ToastContainer.tsx — Gestapelde toasts, max 5
• src/app/layout.tsx — Wrap met NotificationProvider

Code sketch

// Gebruik in elke pagina:
const { notify } = useNotify();

async function handleUpload(file: File) {
  notify({ type: 'info', title: 'Uploaden…', message: file.name });
  try {
    const result = await uploadFile(file);
    notify({ type: 'success', title: 'Upload voltooid', message: result.cid });
  } catch (e) {
    notify({ type: 'error', title: 'Upload mislukt', message: shortError(e) });
  }
}

Component structuur

Data sources

Nieuwe bestanden

• src/app/usage/page.tsx — Volledige usage overview pagina
• src/app/dashboard/components/StorageGauge.tsx — Ring chart met used/max
• src/app/dashboard/components/FreeTierProgress.tsx — Progress bar free uploads
• src/components/PortalSidebar.tsx — Voeg "Usage" link toe

Code sketch — StorageGauge

// src/app/dashboard/components/StorageGauge.tsx
export function StorageGauge({ used, max }: { used: number; max: number }) {
  const pct = max > 0 ? Math.min(used / max, 1) : 0;
  const color = pct > 0.9 ? 'text-accent-rose'
              : pct > 0.7 ? 'text-accent-amber'
              : 'text-accent-cyan';

  return (
    <div className="glass rounded-xl p-5">
      <div className="flex items-center justify-between mb-2">
        <span className="text-xs text-surface-400">Storage</span>
        <span className={"text-xs font-mono " + color}>{used.toFixed(1)} / {max.toFixed(1)} GB</span>
      </div>
      <div className="h-2 rounded-full bg-surface-700 overflow-hidden">
        <div className={"h-full rounded-full transition-all duration-500 " + (
          pct > 0.9 ? 'bg-accent-rose'
          : pct > 0.7 ? 'bg-accent-amber'
          : 'bg-accent-cyan'
        )} style={{ width: `${pct * 100}%` }} />
      </div>
    </div>
  );
}

Nieuwe bestanden

• src/app/profile/page.tsx — Wachtwoord wijzigen, API key overzicht
• src/app/register/page.tsx — Registratie met username/password

Flow — batch unpin

Bestanden

• src/components/BatchBar.tsx — "N selected" floating bar
• src/app/pins/page.tsx — Checkbox in elke rij + BatchBar
• src/app/history/page.tsx — Idem voor history clear

Bestanden

• src/lib/theme.tsx — ThemeContext + useTheme() hook
• src/app/layout.tsx — .dark / .light class op html element
• src/app/globals.css — Voeg :root.light variablen toe
• src/components/PortalSidebar.tsx — Theme toggle button

Code sketch — ThemeContext

// src/lib/theme.tsx
export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState<'dark' | 'light'>(getSettings().theme);

  useEffect(() => {
    document.documentElement.classList.toggle('dark', theme === 'dark');
    document.documentElement.classList.toggle('light', theme === 'light');
  }, [theme]);

  const toggle = () => {
    const next = theme === 'dark' ? 'light' : 'dark';
    setTheme(next);
    saveSettings({ theme: next });
  };
}

CSS: :root.light { --bg: #fff; --surface-900: #f8fafc; ... } + * { transition: background-color 0.3s, border-color 0.3s; }