IPFS-portal/.omo/plans/features-plan.md

IPFS Portal Feature Plan

A. Payment / Blockchain Features

A1. Multi-chain Support

• Status: getWalletClient() en getPublicClient() hardcoden naar zkSyncLocal
• Wijzigingen:
  • src/lib/payment/read-service.ts: getPublicClient() chain parameter toevoegen
  • src/lib/payment/write-service.ts: getWalletClient() chain configurable maken
  • src/lib/payment/abi.ts: ChainConfig[] type, default chains (zkSync Local + optioneel Polygon/Arbitrum)
  • src/lib/payment/service.ts: chain selector in constructor
  • src/components/PaymentPanel.tsx: chain switcher UI
  • src/app/admin/payment/page.tsx: multi-chain admin overzicht
• Bestanden: src/lib/payment/read-service.ts, write-service.ts, abi.ts, service.ts, src/components/PaymentPanel.tsx, src/app/admin/payment/page.tsx

A2. Gas Estimator

• Status: Geen indicatie van transactiekosten voor gebruiker
• Wijzigingen:
  • src/lib/payment/read-service.ts: estimateGas() methode
  • src/lib/payment/write-service.ts: gas estimation voor payWithETH, approveAndPayWithToken
  • src/components/PaymentPanel.tsx: gas fee display naast prijs
• Bestanden: src/lib/payment/read-service.ts, write-service.ts, src/components/PaymentPanel.tsx

A3. Batch Upload + Single Payment

• Status: 1 file → 1 upload → 1 tx (sequentieel via startUpload())
• Wijzigingen:
  • src/lib/payment/write-service.ts: payWithBatch(provider, cids[], totalBytes, priceWei) — encodet meerdere CIDs in 1 tx
  • src/app/upload/page.tsx: batch selectie in crypto tab
  • src/components/PaymentPanel.tsx: multiple files support
• Bestanden: src/lib/payment/write-service.ts, src/app/upload/page.tsx, src/components/PaymentPanel.tsx

A4. Storage Quota UI

• Status: getUserStats() returned totalBytes/uploadCount/remainingFree maar nergens getoond als overzicht
• Wijzigingen:
  • Nieuw component: src/components/StorageQuota.tsx — balkje met used/free/total
  • src/app/dashboard/page.tsx: storage quota card toevoegen
  • src/components/PaymentPanel.tsx: quota status in payment panel
• Bestanden: NIEUW src/components/StorageQuota.tsx, src/app/dashboard/page.tsx, src/components/PaymentPanel.tsx

A5. On-chain Transaction History

• Status: History page gebruikt alleen localStorage; contract heeft getUserUploads(address) met records
• Wijzigingen:
  • src/lib/payment/read-service.ts: getUserUploads() bestaat al — wordt gebruikt in UsersPage
  • src/app/history/page.tsx: "On-chain History" tab toevoegen naast localStorage tab
  • Nieuw component: src/components/ChainHistory.tsx
• Bestanden: src/app/history/page.tsx, NIEUW src/components/ChainHistory.tsx

A6. Token Auto-router

• Status: Gebruiker kiest handmatig token in PaymentPanel
• Wijzigingen:
  • src/components/PaymentPanel.tsx: auto-select goedkoopste token op basis van finalWei / weiPerToken
  • Optioneel: "Auto" button naast token lijst
• Bestanden: src/components/PaymentPanel.tsx

A7. Subscription / Pre-paid Tegoed

• Status: Per-file betaling; contract heeft getUserStats() met remainingFree
• Wijzigingen:
  • Nieuw component: src/components/DepositPanel.tsx — stort ETH/tokens op contract
  • Nieuw component: src/components/BalanceDisplay.tsx — toon tegoed
  • src/app/dashboard/page.tsx: balance card
  • src/lib/payment/write-service.ts: deposit(provider, amount) methode
• Bestanden: NIEUW src/components/DepositPanel.tsx, NIEUW src/components/BalanceDisplay.tsx, src/app/dashboard/page.tsx, src/lib/payment/write-service.ts

---

B. IPFS Explorer — Content Viewing

B1. Video Preview (.mp4, .webm, .mov)

• Status: valt onder 'other' → "Preview not available"
• Wijzigingen:
  • src/app/explorer/components/FilePreview.tsx: detectFileType() uitbreiden met 'video' type
  • src/app/explorer/components/FilePreview.tsx: <video> element met lokale gateway URL
  • src/lib/gateway.ts: gatewayUrl(cid) helper (gebruik maos.dedyn.io/ipfs/ ipv ipfs.io)
• Bestanden: src/app/explorer/components/FilePreview.tsx, src/lib/gateway.ts (NIEUW of bestaande helper)

B2. Audio Preview (.mp3, .wav, .ogg)

• Status: valt onder 'other' → "Preview not available"
• Wijzigingen:
  • src/app/explorer/components/FilePreview.tsx: detectFileType() uitbreiden met 'audio' type
  • <audio> element met controls
• Bestanden: src/app/explorer/components/FilePreview.tsx

B3. PDF Inline Viewer

• Status: valt onder 'other' → "Preview not available"
• Wijzigingen:
  • src/app/explorer/components/FilePreview.tsx: detectFileType() uitbreiden met 'pdf' type
  • <iframe> of <embed> met gateway URL
  • Fallback naar download als browser geen PDF ondersteunt
• Bestanden: src/app/explorer/components/FilePreview.tsx

B4. HTML Preview

• Status: .html valt onder 'text' → raw content tonen
• Wijzigingen:
  • src/app/explorer/components/FilePreview.tsx: detectFileType() uitbreiden met 'html' type
  • <iframe> met srcdoc om HTML veilig te renderen (sandboxed)
• Bestanden: src/app/explorer/components/FilePreview.tsx

B5. Eigen Gateway voor Afbeeldingen

• Status: FilePreview.tsx gebruikt hardcoded https://ipfs.io/ipfs/${cid} voor images
• Wijzigingen:
  • src/app/explorer/components/FilePreview.tsx: vervang door settings.gatewayUrl uit localStorage
  • Of src/lib/gateway.ts: imageUrl(cid) die maos.dedyn.io/ipfs/${cid} gebruikt
• Bestanden: src/app/explorer/components/FilePreview.tsx, src/lib/storage.ts (gateway setting)

B6. Full-Screen Preview Mode

• Status: Preview is inline card onder directory listing
• Wijzigingen:
  • src/app/explorer/components/FilePreview.tsx: full-screen toggle
  • NIEUW src/app/explorer/components/FullScreenPreview.tsx: overlay modal met grotere view
  • Keyboard shortcuts: Escape, pijltjes voor navigatie
• Bestanden: src/app/explorer/components/FilePreview.tsx, NIEUW src/app/explorer/components/FullScreenPreview.tsx, src/app/explorer/page.tsx

B7. Directory Tree View

• Status: Alleen flat listing, 1 level diep
• Wijzigingen:
  • src/app/explorer/components/DirectoryListing.tsx: recursive toggle — klik op dir opent inline ipv nieuwe pagina
  • src/app/explorer/page.tsx: tree mode / flat mode toggle
• Bestanden: src/app/explorer/components/DirectoryListing.tsx, src/app/explorer/page.tsx

B8. Content Type Icons

• Status: FileIcon.tsx toont alleen folder/file icoon
• Wijzigingen:
  • src/components/FileIcon.tsx: specifieke iconen voor image/video/audio/pdf/code per extensie
  • Gebruik Lucide icons: FileImage, FileVideo, FileAudio, FileText
• Bestanden: src/components/FileIcon.tsx

---

C. Prioriteit & Volgorde

Prio	Feature	Impact	Effort
P0	B5 Eigen gateway voor media	Direct zichtbare verbetering, laag risico	1 file, ~5 min
P0	B1-B4 Video/Audio/PDF/HTML preview	Meeste gebruikerswaarde Explorer	~2 files, ~30 min
P0	B6 Full-screen preview	UX upgrade	~2 files, ~20 min
P1	A5 On-chain history	Nuttig voor betalende gebruikers	~2 files, ~30 min
P1	A4 Storage quota UI	Inzicht voor gebruikers	~2 files, ~20 min
P1	B7 Directory tree	Explorer power feature	~2 files, ~30 min
P1	B8 Content type icons	Polijsting	1 file, ~10 min
P2	A1 Multi-chain	Uitbreiding naar andere chains	~5 files, ~1-2 uur
P2	A6 Token auto-router	Gemak voor betalende gebruikers	1 file, ~15 min
P2	A2 Gas estimator	Transparantie	~2 files, ~20 min
P3	A3 Batch upload + betaling	Nieuwe feature	~3 files, ~1 uur
P3	A7 Subscription / tegoed	Grote nieuwe feature	~4 files, ~2+ uur

---

D. Graph Impact

Deze features veranderen de knowledge graph:

HUIDIGE COMMUNITIES:
  WalletProvider ── PaymentService ── Smart Contract
          │               │
          │         ExplorerPage ── FilePreview ── Kubo API
          │               │
          │         UploadPage ── PaymentPanel

NA DEZE FEATURES:
  ChainManager ──► PaymentService ──► SmartContract (multi-chain)
  StorageQuota ──► Dashboard ──► PaymentService
  ChainHistory ──► HistoryPage ──► PaymentReadService
  TreeView ──► ExplorerPage ──► DirectoryListing ──► FilePreview
  FullScreenPreview ──► FilePreview ──► Gateway