+ {/* Stats grid */}
+
+ );
+}
diff --git a/src/app/admin/payment/components/PricingView.tsx b/src/app/admin/payment/components/PricingView.tsx
new file mode 100644
index 0000000..a2de36b
--- /dev/null
+++ b/src/app/admin/payment/components/PricingView.tsx
@@ -0,0 +1,124 @@
+'use client';
+
+import { type Dispatch, type SetStateAction } from 'react';
+import { Settings } from 'lucide-react';
+import { paymentService, type TokenInfo } from '@/lib/payment';
+import type { WalletProvider } from '@/lib/wallet';
+import { formatWeiToETH, formatBytes } from '@/lib/wallet';
+
+/* ── Props ── */
+interface PricingViewProps {
+ basePrice: bigint;
+ freeTier: bigint;
+ isOwner: boolean;
+ tokens: TokenInfo[];
+ contractBalance: Record
+
+
+ {/* Contract info */}
+
+
+ {tokens.filter(t => t.enabled).map(tk => {
+ const rev = revenues[tk.symbol] || BigInt(0);
+ const bal = contractBalance[tk.symbol];
+ return (
+ Total Uploads
+ {totalUploads.toString()}
+
+
+ );
+ })}
+ {tk.symbol} Revenue
+
+ {tk.symbol === 'ETH' ? formatWeiToETH(rev, 6) : rev.toString()}
+
+ {bal && (
+
+ Balance: {tk.symbol === 'ETH' ? formatWeiToETH(bal, 6) : bal} {tk.symbol}
+
+ )}
+
+
+
+ {/* If owner — quick actions */}
+ {isOwner && (
+ Contract
+
+
+
+ Address
+
+ {contractAddress.slice(0, 10)}...
+
+
+
+ Owner
+
+ {owner ? `${owner.slice(0, 8)}...${owner.slice(-6)}` : '-'}
+ {isOwner && ✓}
+
+
+
+ Deployed
+
+ {deployed ? 'Yes' : 'No'}
+
+
+
+ Connected
+
+ {address ? `${address.slice(0, 6)}...${address.slice(-4)}` : '-'}
+
+
+
+
+ )}
+ Quick Actions
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/app/admin/payment/components/TiersView.tsx b/src/app/admin/payment/components/TiersView.tsx
new file mode 100644
index 0000000..ce23732
--- /dev/null
+++ b/src/app/admin/payment/components/TiersView.tsx
@@ -0,0 +1,88 @@
+'use client';
+
+import { type Dispatch, type SetStateAction } from 'react';
+import { Tags, Plus, Trash2 } from 'lucide-react';
+import { paymentService, type MAOSDiscountTier } from '@/lib/payment';
+import type { WalletProvider } from '@/lib/wallet';
+import { formatWeiToETH } from '@/lib/wallet';
+
+/* ── Props ── */
+interface TiersViewProps {
+ tiers: MAOSDiscountTier[];
+ isOwner: boolean;
+ tierBalance: string;
+ setTierBalance: Dispatch
+
+
+
+ {/* Current values */}
+
+
+
+
+ {/* Current values */}
+
+
+
+ {isOwner && (
+ <>
+ {/* Set price */}
+
+
+ Base Price / MB
+ {formatWeiToETH(basePrice, 8)} ETH
+
+
+ Free Tier
+ {formatBytes(freeTier)}
+
+
+
+
+ {/* Set free tier */}
+
+ setPriceInput(e.target.value)}
+ placeholder={basePrice.toString()}
+ className="flex-1 px-3 py-1.5 rounded-lg bg-surface-800 border border-surface-700 text-surface-200 text-xs font-mono focus:outline-none focus:border-brand-500"
+ />
+
+
+
+ Current: {formatWeiToETH(basePrice, 8)} ETH — e.g. 100000000000000 = 0.0001 ETH
+
+
+
+
+
+ {/* Withdraw */}
+
+ setFreeInput(e.target.value)}
+ placeholder={freeTier.toString()}
+ className="flex-1 px-3 py-1.5 rounded-lg bg-surface-800 border border-surface-700 text-surface-200 text-xs font-mono focus:outline-none focus:border-brand-500"
+ />
+
+
+
+ Current: {formatBytes(freeTier)} — 10485760 = 10 MB
+
+
+
+
+
+ )}
+
+ {tokens.filter(t => t.enabled).map(tk => {
+ const bal = contractBalance[tk.symbol];
+ if (!bal || bal === '0') return null;
+ return (
+
+ );
+ })}
+
+
+
+ );
+}
diff --git a/src/app/admin/payment/components/TokensView.tsx b/src/app/admin/payment/components/TokensView.tsx
new file mode 100644
index 0000000..6e9d5b8
--- /dev/null
+++ b/src/app/admin/payment/components/TokensView.tsx
@@ -0,0 +1,124 @@
+'use client';
+
+import { type Dispatch, type SetStateAction } from 'react';
+import { Coins, PiggyBank } from 'lucide-react';
+import { paymentService, type TokenInfo } from '@/lib/payment';
+import type { WalletProvider } from '@/lib/wallet';
+import { formatWeiToETH } from '@/lib/wallet';
+
+/* ── Props ── */
+interface TokensViewProps {
+ tokens: TokenInfo[];
+ isOwner: boolean;
+ contractBalance: Record
+
+
+
+ {/* Tier list */}
+
+
+ {/* Admin: add tier */}
+ {isOwner && (
+
+
+
+ {/* Tier list */}
+
+ {tiers.map((tier, i) => (
+
+
+
+ ))}
+
+ {formatWeiToETH(tier.minBalance, 0)} MAOS
+ {tier.discountBps / 100}% off
+
+ {isOwner && (
+
+ )}
+
+
+
+
+ )}
+
+
+
+
+
+
+ setTierBalance(e.target.value)}
+ placeholder="e.g. 5000" className="w-full px-3 py-1.5 rounded-lg bg-surface-800 border border-surface-700 text-surface-200 text-xs font-mono focus:outline-none focus:border-brand-500"
+ />
+
+
+
+ setTierBps(e.target.value)}
+ placeholder="e.g. 50" className="w-full px-3 py-1.5 rounded-lg bg-surface-800 border border-surface-700 text-surface-200 text-xs font-mono focus:outline-none focus:border-brand-500"
+ />
+
+
+
+
+ );
+}
diff --git a/src/app/admin/payment/page.tsx b/src/app/admin/payment/page.tsx
index b26d0eb..6d12b72 100644
--- a/src/app/admin/payment/page.tsx
+++ b/src/app/admin/payment/page.tsx
@@ -2,16 +2,20 @@
import { useState, useEffect, useCallback } from 'react';
import PortalLayout from '@/app/layout-portal';
+import AuthGuard from '@/components/AuthGuard';
import { paymentService, type TokenInfo, type MAOSDiscountTier } from '@/lib/payment';
import {
connectWallet, switchToChain270, getInjectedProvider,
formatWeiToETH, formatBytes, type WalletProvider,
} from '@/lib/wallet';
import {
- Wallet, Coins, Loader2, CheckCircle, XCircle,
- Settings, PiggyBank, Tags, RefreshCw, ExternalLink,
- Plus, Trash2, Copy, AlertTriangle,
+ Wallet, Loader2, CheckCircle, XCircle,
+ RefreshCw, AlertTriangle,
} from 'lucide-react';
+import Overview from './components/Overview';
+import PricingView from './components/PricingView';
+import TokensView from './components/TokensView';
+import TiersView from './components/TiersView';
type ViewMode = 'overview' | 'pricing' | 'tokens' | 'tiers';
type TxStatus = { ok: boolean; msg: string } | null;
@@ -37,14 +41,14 @@ export default function AdminPaymentPage() {
const [loading, setLoading] = useState(true);
const [contractBalance, setContractBalance] = useState
+
+
+
+ {/* Token list */}
+
+
+ {/* Admin: configure token */}
+ {isOwner && (
+
+
+
+ {/* Token list */}
+
+ {tokens.map(tk => (
+
+
+
+ ))}
+
+
+ {tk.symbol}
+ {tk.address.slice(0, 10)}...
+ {tk.decimals} decimals
+
+ {formatWeiToETH(tk.weiPerToken, 4)} wei/token
+
+
+ )}
+
+ {/* Withdraw section */}
+ {isOwner && Object.keys(contractBalance).length > 0 && (
+ Configure Token
+
+ setTokenSymbol(e.target.value.toUpperCase())}
+ placeholder="Symbol (e.g. USDC)" className="px-3 py-1.5 rounded-lg bg-surface-800 border border-surface-700 text-surface-200 font-mono focus:outline-none focus:border-brand-500"
+ />
+ setTokenAddr(e.target.value)}
+ placeholder="Token address (0x...)" className="px-3 py-1.5 rounded-lg bg-surface-800 border border-surface-700 text-surface-200 font-mono focus:outline-none focus:border-brand-500"
+ />
+ setTokenDec(e.target.value)}
+ placeholder="Decimals (e.g. 6)" className="px-3 py-1.5 rounded-lg bg-surface-800 border border-surface-700 text-surface-200 font-mono focus:outline-none focus:border-brand-500"
+ />
+ setTokenWei(e.target.value)}
+ placeholder="weiPerToken (e.g. 500000000000000)" className="px-3 py-1.5 rounded-lg bg-surface-800 border border-surface-700 text-surface-200 font-mono focus:outline-none focus:border-brand-500"
+ />
+
+
+
+
+
+
+
+ )}
+
+
+
+ {Object.entries(contractBalance).filter(([_, bal]) => bal !== '0').map(([sym, bal]) => (
+
+ ))}
+ {Object.values(contractBalance).every(b => b === '0') && (
+ No balance to withdraw
+ )}
+
+
@@ -224,329 +225,70 @@ export default function AdminPaymentPage() {
) : (
<>
- {/* ── Overview ── */}
{view === 'overview' && (
-
- {/* Stats grid */}
-
+
-
-
- {/* Contract info */}
-
-
- {tokens.filter(t => t.enabled).map(tk => {
- const rev = revenues[tk.symbol] || BigInt(0);
- const bal = contractBalance[tk.symbol];
- return (
- Total Uploads
- {totalUploads.toString()}
-
-
- );
- })}
- {tk.symbol} Revenue
-
- {tk.symbol === 'ETH' ? formatWeiToETH(rev, 6) : rev.toString()}
-
- {bal && (
-
- Balance: {tk.symbol === 'ETH' ? formatWeiToETH(bal, 6) : bal} {tk.symbol}
-
- )}
-
-
-
- {/* If owner — quick actions */}
- {isOwner && (
- Contract
-
-
-
- Address
-
- {paymentService['contractAddress'].slice(0, 10)}...
-
-
-
- Owner
-
- {owner ? `${owner.slice(0, 8)}...${owner.slice(-6)}` : '-'}
- {isOwner && ✓}
-
-
-
- Deployed
-
- {deployed ? 'Yes' : 'No'}
-
-
-
- Connected
-
- {address.slice(0, 6)}...{address.slice(-4)}
-
-
-
-
- )}
- Quick Actions
-
-
-
-
-
-
-
+
-
-
-
- {/* Current values */}
-
-
-
-
- {/* Current values */}
-
-
-
- {isOwner && (
- <>
- {/* Set price */}
-
-
- Base Price / MB
- {formatWeiToETH(basePrice, 8)} ETH
-
-
- Free Tier
- {formatBytes(freeTier)}
-
-
-
-
- {/* Set free tier */}
-
- setPriceInput(e.target.value)}
- placeholder={basePrice.toString()}
- className="flex-1 px-3 py-1.5 rounded-lg bg-surface-800 border border-surface-700 text-surface-200 text-xs font-mono focus:outline-none focus:border-brand-500"
- />
-
-
-
- Current: {formatWeiToETH(basePrice, 8)} ETH — e.g. 100000000000000 = 0.0001 ETH
-
-
-
-
-
- {/* Withdraw */}
-
- setFreeInput(e.target.value)}
- placeholder={freeTier.toString()}
- className="flex-1 px-3 py-1.5 rounded-lg bg-surface-800 border border-surface-700 text-surface-200 text-xs font-mono focus:outline-none focus:border-brand-500"
- />
-
-
-
- Current: {formatBytes(freeTier)} — 10485760 = 10 MB
-
-
-
-
-
- )}
-
- {tokens.filter(t => t.enabled).map(tk => {
- const bal = contractBalance[tk.symbol];
- if (!bal || bal === '0') return null;
- return (
-
- );
- })}
-
-
-
+
-
-
-
- {/* Token list */}
-
-
- {/* Admin: configure token */}
- {isOwner && (
-
-
-
- {/* Token list */}
-
- {tokens.map(tk => (
-
-
-
- ))}
-
-
- {tk.symbol}
- {tk.address.slice(0, 10)}...
- {tk.decimals} decimals
-
- {formatWeiToETH(tk.weiPerToken, 4)} wei/token
-
-
- )}
-
- {/* Withdraw section */}
- {isOwner && Object.keys(contractBalance).length > 0 && (
- Configure Token
-
- setTokenSymbol(e.target.value.toUpperCase())}
- placeholder="Symbol (e.g. USDC)" className="px-3 py-1.5 rounded-lg bg-surface-800 border border-surface-700 text-surface-200 font-mono focus:outline-none focus:border-brand-500"
- />
- setTokenAddr(e.target.value)}
- placeholder="Token address (0x...)" className="px-3 py-1.5 rounded-lg bg-surface-800 border border-surface-700 text-surface-200 font-mono focus:outline-none focus:border-brand-500"
- />
- setTokenDec(e.target.value)}
- placeholder="Decimals (e.g. 6)" className="px-3 py-1.5 rounded-lg bg-surface-800 border border-surface-700 text-surface-200 font-mono focus:outline-none focus:border-brand-500"
- />
- setTokenWei(e.target.value)}
- placeholder="weiPerToken (e.g. 500000000000000)" className="px-3 py-1.5 rounded-lg bg-surface-800 border border-surface-700 text-surface-200 font-mono focus:outline-none focus:border-brand-500"
- />
-
-
-
-
-
-
-
- )}
-
-
-
- {Object.entries(contractBalance).filter(([_, bal]) => bal !== '0').map(([sym, bal]) => (
-
- ))}
- {Object.values(contractBalance).every(b => b === '0') && (
- No balance to withdraw
- )}
-
-
-
+
-
-
-
- {/* Tier list */}
-
-
- {/* Admin: add tier */}
- {isOwner && (
-
-
-
- {/* Tier list */}
-
- {tiers.map((tier, i) => (
-
-
-
- ))}
-
- {formatWeiToETH(tier.minBalance, 0)} MAOS
- {tier.discountBps / 100}% off
-
- {isOwner && (
-
- )}
-
-
-
-
- )}
-
-
-
-
-
-
- setTierBalance(e.target.value)}
- placeholder="e.g. 5000" className="w-full px-3 py-1.5 rounded-lg bg-surface-800 border border-surface-700 text-surface-200 text-xs font-mono focus:outline-none focus:border-brand-500"
- />
-
-
-
- setTierBps(e.target.value)}
- placeholder="e.g. 50" className="w-full px-3 py-1.5 rounded-lg bg-surface-800 border border-surface-700 text-surface-200 text-xs font-mono focus:outline-none focus:border-brand-500"
- />
-
-
-
+
+ );
+}
diff --git a/src/app/dashboard/components/StorageGauge.tsx b/src/app/dashboard/components/StorageGauge.tsx
new file mode 100644
index 0000000..422ebf6
--- /dev/null
+++ b/src/app/dashboard/components/StorageGauge.tsx
@@ -0,0 +1,43 @@
+'use client';
+
+/* ════════════════════════════ StorageGauge ════════════════════════════ */
+
+interface StorageGaugeProps {
+ usedGB: number;
+ maxGB: number;
+ label?: string;
+}
+
+export default function StorageGauge({ usedGB, maxGB, label = 'Storage' }: StorageGaugeProps) {
+ const pct = maxGB > 0 ? Math.min((usedGB / maxGB) * 100, 100) : 0;
+ const color =
+ pct > 90 ? 'bg-accent-rose' : pct > 70 ? 'bg-accent-amber' : 'bg-accent-cyan';
+
+ const textColor =
+ pct > 90 ? 'text-accent-rose' : pct > 70 ? 'text-accent-amber' : 'text-accent-cyan';
+
+ return (
+
+ {label}
+
+ {remaining} / {max}
+
+
+
+
+
+
+
+ {used} gebruikt vandaag
+
+ {remaining <= 3 && remaining > 0 && (
+ Bijna op
+ )}
+ {remaining === 0 && (
+ Limiet bereikt
+ )}
+
+
+
+ );
+}
diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
index 44f0826..fd3a5e5 100644
--- a/src/app/dashboard/page.tsx
+++ b/src/app/dashboard/page.tsx
@@ -1,13 +1,12 @@
'use client';
-import { useEffect, useState } from 'react';
-import { getPeers, listPins, checkHealth, getRepoStats, getBWStats } from '@/lib/api';
-import type { RepoStats, BWStats } from '@/lib/api';
import PortalLayout from '@/app/layout-portal';
import Link from 'next/link';
+import { SkeletonCard, SkeletonRow } from '@/components/Skeleton';
+import { useDashboard } from '@/lib/swr';
+import { useRealtime } from '@/lib/useRealtime';
import {
HardDrive,
- Globe,
Wifi,
Database,
Server,
@@ -17,49 +16,42 @@ import {
Fingerprint,
} from 'lucide-react';
-interface PeerData { id: string; addr: string; latency: string }
-interface PinData { cid: string; name: string; size: number }
-
export default function DashboardPage() {
- const [peers, setPeers] = useState
+ {label}
+
+ {usedGB.toFixed(1)} / {maxGB.toFixed(1)} GB
+
+
+
+
+
+
+ {pct.toFixed(0)}% gebruikt
+ {pct > 80 && (
+
+ ⚠️ Bijna vol
+
+ )}
+
+ Dashboard
IPFS node overview, storage, and bandwidth
- {loading && ( -
-
- refreshing…
-
- )}
+
+ {realtime.connected && (
+
+
+ Live
+
+ )}
+ {!realtime.connected && (
+
+
+ Polling
+
+ )}
+ {loading && (
+
{/* Stat cards */}
+
+ loading…
+
+ )}
+
- {stats.map((s) => (
+ {loading
+ ? Array.from({ length: 4 }).map((_, i) =>
@@ -101,9 +109,11 @@ export default function DashboardPage() {
- {peers.length === 0 ? (
+ {loading
+ ? Array.from({ length: 5 }).map((_, i) =>
- {peers.length === 0 ? (
+ {loading
+ ? Array.from({ length: 5 }).map((_, i) => No peers connected
) : (
diff --git a/src/app/error.tsx b/src/app/error.tsx
new file mode 100644
index 0000000..c7e9aaf
--- /dev/null
+++ b/src/app/error.tsx
@@ -0,0 +1,38 @@
+'use client';
+
+/* ════════════════════════════ Error (Next.js root) ════════════════════════════
+ * Next.js error boundary voor root layout crashes.
+ */
+
+import { AlertCircle, RefreshCw } from 'lucide-react';
+
+interface Props {
+ error: Error & { digest?: string };
+ reset: () => void;
+}
+
+export default function RootError({ error, reset }: Props) {
+ return (
+
+
+ );
+}
diff --git a/src/app/explorer/components/DirectoryListing.tsx b/src/app/explorer/components/DirectoryListing.tsx
index 5e210f3..1fb3aa5 100644
--- a/src/app/explorer/components/DirectoryListing.tsx
+++ b/src/app/explorer/components/DirectoryListing.tsx
@@ -2,7 +2,9 @@
import type { IPFSEntry } from '@/lib/api';
import FileIcon from './FileIcon';
-import { CheckCircle } from 'lucide-react';
+import { CheckCircle, Download } from 'lucide-react';
+import { truncateCid } from '@/lib/helpers';
+import { downloadFile } from '@/lib/download';
interface DirectoryListingProps {
entries: IPFSEntry[];
@@ -20,11 +22,6 @@ function formatSize(bytes: number): string {
return `${s} ${units[i] ?? ''}`;
}
-function truncateHash(hash: string): string {
- if (hash.length <= 12) return hash;
- return `${hash.slice(0, 6)}…${hash.slice(-4)}`;
-}
-
function SkeletonRow() {
return (
+
+ Er ging iets mis
++ De applicatie kon niet laden. Probeer het opnieuw. +
+ {error.digest && ( ++ Error ID: {error.digest} +
+ )} + +
@@ -82,7 +79,7 @@ export default function DirectoryListing({
Type
Size
Hash
-
+
@@ -113,10 +110,23 @@ export default function DirectoryListing({
- {truncateHash(entry.hash)}
+ {truncateCid(entry.hash, 6)}
-
+
([]);
const [search, setSearch] = useState('');
const [copied, setCopied] = useState(null);
+ const [loading, setLoading] = useState(true);
+ const [selected, setSelected] = useState>(new Set());
+
+ const recordKey = (r: UploadRecord) => `${r.cid}||${r.date}`;
function load() {
setHistory(getHistory());
+ setLoading(false);
}
useEffect(() => { load(); }, []);
@@ -79,13 +75,41 @@ export default function HistoryPage() {
} catch { /* ignore */ }
}
- /* ── Gateway URL ── */
- const gatewayUrl = useMemo(() => {
- try { return getSettings().gatewayUrl; }
- catch { return 'https://maos.dedyn.io/ipfs'; }
- }, []);
+ /* ── Selection ── */
+ function toggleSelection(key: string) {
+ setSelected((prev) => {
+ const next = new Set(prev);
+ if (next.has(key)) next.delete(key);
+ else next.add(key);
+ return next;
+ });
+ }
- const gatewayLink = (cid: string) => `${gatewayUrl}/${cid}`;
+ function toggleAll() {
+ if (selected.size === filtered.length) {
+ setSelected(new Set());
+ } else {
+ setSelected(new Set(filtered.map(recordKey)));
+ }
+ }
+
+ /* ── Batch delete ── */
+ const { notify } = useNotify();
+
+ function handleBatchDelete() {
+ const count = selected.size;
+ if (!confirm(`Delete ${count} upload${count !== 1 ? 's' : ''} from history?`)) return;
+
+ const keys = Array.from(selected).map((key) => {
+ const idx = key.lastIndexOf('||');
+ return { cid: key.slice(0, idx), date: key.slice(idx + 2) };
+ });
+
+ removeMultipleFromHistory(keys);
+ setHistory((prev) => prev.filter((r) => !selected.has(recordKey(r))));
+ setSelected(new Set());
+ notify({ type: 'success', title: `Deleted ${count} upload${count !== 1 ? 's' : ''}` });
+ }
/* ── Render ── */
return (
@@ -133,8 +157,17 @@ export default function HistoryPage() {
)}
+ {/* ── Loading skeleton ── */}
+ {loading && (
+
+ {entry.type === 'file' && (
+
+ )}
{isPinned && (
([]);
const [recentCids] = useState(loadRecentCids);
+ const [indexStats, setIndexStats] = useState(getIndexStats);
+ const [rebuilding, setRebuilding] = useState(false);
// Load pins from the pins page (shared localStorage or just track in-memory)
function handlePinToggle(cid: string) {
@@ -122,6 +127,46 @@ export default function ExplorerPage() {
if (cid) navigateTo(cid);
}
+ /* ── Search ── */
+
+ function handleSearchResult(result: SearchResult) {
+ navigateTo(result.entry.cid);
+ }
+
+ async function rebuildSearchIndex() {
+ setRebuilding(true);
+ try {
+ const pinsList = await listPins();
+ clearIndex();
+ let indexed = 0;
+ let failed = 0;
+ for (const pin of pinsList) {
+ if (isTextFile(pin.name) || !pin.name) {
+ try {
+ const text = await explorerCat(pin.cid);
+ const extracted = extractText(text);
+ if (extracted.length > 0) {
+ addToIndex({
+ cid: pin.cid,
+ name: pin.name || pin.cid.slice(0, 20),
+ type: 'file',
+ text: extracted,
+ size: text.length,
+ indexedAt: Date.now(),
+ });
+ indexed++;
+ }
+ } catch {
+ failed++;
+ }
+ }
+ }
+ setIndexStats({ entries: indexed, totalChars: 0, lastIndexed: Date.now() });
+ } finally {
+ setRebuilding(false);
+ }
+ }
+
const isPinned = previewCid ? pins.includes(previewCid) : false;
return (
@@ -134,6 +179,26 @@ export default function ExplorerPage() {
+ {/* Search + Index rebuild */}
+ $1
') .replace(/^## (.+)$/gm, '$1
') .replace(/^# (.+)$/gm, '$1
') diff --git a/src/app/explorer/page.tsx b/src/app/explorer/page.tsx index e0a8da9..84c0ac8 100644 --- a/src/app/explorer/page.tsx +++ b/src/app/explorer/page.tsx @@ -2,7 +2,7 @@ import { useState, useEffect, useCallback } from 'react'; import PortalLayout from '@/app/layout-portal'; -import { explorerLs, explorerCat } from '@/lib/api'; +import { explorerLs, explorerCat, listPins } from '@/lib/api'; import type { IPFSEntry } from '@/lib/api'; import CIDInput from './components/CIDInput'; import DirectoryListing from './components/DirectoryListing'; @@ -10,7 +10,10 @@ import FilePreview from './components/FilePreview'; import Breadcrumbs from './components/Breadcrumbs'; import PinBadge from './components/PinBadge'; import GatewayLink from './components/GatewayLink'; -import { Search, AlertCircle, RefreshCw } from 'lucide-react'; +import SearchBar from '@/components/SearchBar'; +import type { SearchResult } from '@/lib/search-index'; +import { isTextFile, extractText, addToIndex, clearIndex, getIndexStats } from '@/lib/search-index'; +import { Search, AlertCircle, RefreshCw, Database, Loader2 } from 'lucide-react'; const RECENT_STORAGE_KEY = 'ipfs-explorer-recent-cids'; @@ -52,6 +55,8 @@ export default function ExplorerPage() { const [error, setError] = useState(''); const [pins, setPins] = useState
+
+
{/* CID input */}
+
+
+
+
+ )}
+
{/* ── Empty state ── */}
- {history.length === 0 && (
+ {!loading && history.length === 0 && (
+
+
@@ -163,6 +196,14 @@ export default function HistoryPage() {