IPFS-portal-deploy/.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
```