Kieran/route96
1
0
Fork 0
mirror of https://github.com/v0l/route96.git synced 2025-06-16 08:18:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: new UI

Browse Source 
chore: update readme
fix: upload
This commit is contained in:
Kieran
2025-06-11 12:52:04 +01:00
parent c4a519afb4
commit dd6b35380b
20 changed files with 1012 additions and 454 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
ui_src/package.json
View File

@ -16,12 +16,14 @@
"@snort/system-react": "^1.5.1",
"classnames": "^2.5.1",
"react": "^18.3.1",
"react-dom": "^18.3.1"
"react-dom": "^18.3.1",
"react-router-dom": "^7.6.2"
},
"devDependencies": {
"@eslint/js": "^9.9.0",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"@types/react-router-dom": "^5.3.3",
"@vitejs/plugin-react": "^4.3.1",
"autoprefixer": "^10.4.20",
"eslint": "^9.9.0",

19
ui_src/src/App.tsx
View File

@ -1,12 +1,23 @@
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Header from "./views/header";
import Upload from "./views/upload";
import Admin from "./views/admin";
function App() {
return (
<div className="flex flex-col gap-4 mx-auto mt-4 max-w-[1920px] px-10">
<Header />
<Upload />
</div>
<Router>
<div className="min-h-screen bg-gray-900">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<Header />
<main className="py-8">
<Routes>
<Route path="/" element={<Upload />} />
<Route path="/admin" element={<Admin />} />
</Routes>
</main>
</div>
</div>
</Router>
);
}

4
ui_src/src/components/button.tsx
View File

@ -22,12 +22,12 @@ export default function Button({
}
return (
<button
className={`py-2 px-4 rounded-md border-0 text-sm font-semibold bg-neutral-700 hover:bg-neutral-600 ${className} ${props.disabled || loading ? "opacity-50" : ""}`}
className={`${className} ${props.disabled || loading ? "opacity-50 cursor-not-allowed" : ""}`}
onClick={doClick}
{...props}
disabled={loading || (props.disabled ?? false)}
>
{children}
{loading ? "..." : children}
</button>
);
}

99
ui_src/src/components/payment.tsx
View File

@ -9,8 +9,8 @@ interface PaymentFlowProps {
export default function PaymentFlow({ route96, onPaymentRequested }: PaymentFlowProps) {
const [paymentInfo, setPaymentInfo] = useState<PaymentInfo | null>(null);
const [units, setUnits] = useState<number>(1);
const [quantity, setQuantity] = useState<number>(1);
const [gigabytes, setGigabytes] = useState<number>(1);
const [months, setMonths] = useState<number>(1);
const [paymentRequest, setPaymentRequest] = useState<string>("");
const [error, setError] = useState<string>("");
const [loading, setLoading] = useState(false);
@ -41,7 +41,7 @@ export default function PaymentFlow({ route96, onPaymentRequested }: PaymentFlow
setError("");
try {
const request: PaymentRequest = { units, quantity };
const request: PaymentRequest = { units: gigabytes, quantity: months };
const response = await route96.requestPayment(request);
setPaymentRequest(response.pr);
onPaymentRequested?.(response.pr);
@ -57,71 +57,86 @@ export default function PaymentFlow({ route96, onPaymentRequested }: PaymentFlow
}
if (error && !paymentInfo) {
return <div className="text-red-500">Payment not available: {error}</div>;
return <div className="text-red-400">Payment not available: {error}</div>;
}
if (!paymentInfo) {
return <div>Loading payment info...</div>;
return <div className="text-gray-400">Loading payment info...</div>;
}
const totalCost = paymentInfo.cost.amount * units * quantity;
const totalCostBTC = paymentInfo.cost.amount * gigabytes * months;
const totalCostSats = Math.round(totalCostBTC * 100000000); // Convert BTC to sats
function formatStorageUnit(unit: string): string {
if (unit.toLowerCase().includes('gbspace') || unit.toLowerCase().includes('gb')) {
return 'GB';
}
return unit;
}
return (
<div className="bg-neutral-700 p-4 rounded-lg">
<div className="card">
<h3 className="text-lg font-bold mb-4">Top Up Account</h3>
<div className="grid grid-cols-2 gap-4 mb-4">
<div>
<label className="block text-sm font-medium mb-1">
Units ({paymentInfo.unit})
</label>
<input
type="number"
min="0.1"
step="0.1"
value={units}
onChange={(e) => setUnits(parseFloat(e.target.value) || 0)}
className="w-full px-3 py-2 bg-neutral-800 border border-neutral-600 rounded"
/>
<div className="space-y-4 mb-6">
<div className="text-center">
<div className="text-2xl font-bold text-gray-100 mb-2">
{gigabytes} {formatStorageUnit(paymentInfo.unit)} for {months} month{months > 1 ? 's' : ''}
</div>
<div className="text-lg text-blue-400 font-semibold">
{totalCostSats.toLocaleString()} sats
</div>
</div>
<div>
<label className="block text-sm font-medium mb-1">
Quantity
</label>
<input
type="number"
min="1"
value={quantity}
onChange={(e) => setQuantity(parseInt(e.target.value) || 1)}
className="w-full px-3 py-2 bg-neutral-800 border border-neutral-600 rounded"
/>
<div className="grid grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium mb-2 text-gray-300">
Storage ({formatStorageUnit(paymentInfo.unit)})
</label>
<input
type="number"
min="1"
step="1"
value={gigabytes}
onChange={(e) => setGigabytes(parseInt(e.target.value) || 1)}
className="input w-full text-center text-lg"
/>
</div>
<div>
<label className="block text-sm font-medium mb-2 text-gray-300">
Duration (months)
</label>
<input
type="number"
min="1"
step="1"
value={months}
onChange={(e) => setMonths(parseInt(e.target.value) || 1)}
className="input w-full text-center text-lg"
/>
</div>
</div>
</div>
<div className="mb-4">
<div className="text-sm text-neutral-300">
Cost: {totalCost.toFixed(8)} {paymentInfo.cost.currency} per {paymentInfo.interval}
</div>
</div>
<Button
onClick={requestPayment}
disabled={loading || units <= 0 || quantity <= 0}
className="w-full mb-4"
disabled={loading || gigabytes <= 0 || months <= 0}
className="btn-primary w-full mb-4"
>
{loading ? "Processing..." : "Generate Payment Request"}
</Button>
{error && <div className="text-red-500 text-sm mb-4">{error}</div>}
{error && <div className="text-red-400 text-sm mb-4">{error}</div>}
{paymentRequest && (
<div className="bg-neutral-800 p-4 rounded">
<div className="bg-gray-800 p-4 rounded-lg border border-gray-700">
<div className="text-sm font-medium mb-2">Lightning Invoice:</div>
<div className="font-mono text-xs break-all bg-neutral-900 p-2 rounded">
<div className="font-mono text-xs break-all bg-gray-900 p-2 rounded">
{paymentRequest}
</div>
<div className="text-xs text-neutral-400 mt-2">
<div className="text-xs text-gray-400 mt-2">
Copy this invoice to your Lightning wallet to complete payment
</div>
</div>

11
ui_src/src/components/profile.tsx
View File

@ -1,6 +1,7 @@
import { hexToBech32 } from "@snort/shared";
import { NostrLink } from "@snort/system";
import { useUserProfile } from "@snort/system-react";
import { useMemo } from "react";
export default function Profile({
link,
@ -11,15 +12,21 @@ export default function Profile({
size?: number;
showName?: boolean;
}) {
const profile = useUserProfile(link.id);
const linkId = useMemo(() => link.id, [link.id]);
const profile = useUserProfile(linkId);
const s = size ?? 40;
return (
<a className="flex gap-2 items-center" href={`https://snort.social/${link.encode()}`} target="_blank">
<img
src={profile?.picture}
src={profile?.picture || '/default-avatar.svg'}
alt={profile?.display_name || profile?.name || 'User avatar'}
width={s}
height={s}
className="rounded-full object-fit object-center"
onError={(e) => {
const target = e.target as HTMLImageElement;
target.src = '/default-avatar.svg';
}}
/>
{(showName ?? true) && (
<div>

14
ui_src/src/hooks/publisher.ts
View File

@ -1,10 +1,16 @@
import { EventPublisher, Nip7Signer } from "@snort/system";
import { useMemo } from "react";
import useLogin from "./login";
export default function usePublisher() {
const login = useLogin();
switch (login?.type) {
case "nip7":
return new EventPublisher(new Nip7Signer(), login.pubkey);
}
return useMemo(() => {
switch (login?.type) {
case "nip7":
return new EventPublisher(new Nip7Signer(), login.pubkey);
default:
return undefined;
}
}, [login?.type, login?.pubkey]);
}

44
ui_src/src/index.css
View File

@ -4,9 +4,49 @@
html,
body {
@apply bg-black text-white;
@apply bg-gray-900 text-gray-100 font-sans;
}
[data-theme="light"] {
@apply bg-gray-50 text-gray-900;
}
hr {
@apply border-neutral-500;
@apply border-gray-700;
}
[data-theme="light"] hr {
@apply border-gray-200;
}
.card {
@apply bg-gray-800 rounded-lg shadow-sm border border-gray-700 p-6;
}
[data-theme="light"] .card {
@apply bg-white border-gray-200;
}
.btn-primary {
@apply bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-medium transition-colors duration-200;
}
.btn-secondary {
@apply bg-gray-700 hover:bg-gray-600 text-gray-200 px-4 py-2 rounded-lg font-medium transition-colors duration-200;
}
[data-theme="light"] .btn-secondary {
@apply bg-gray-100 hover:bg-gray-200 text-gray-700;
}
.btn-danger {
@apply bg-red-600 hover:bg-red-700 text-white px-3 py-1.5 rounded-md text-sm font-medium transition-colors duration-200;
}
.input {
@apply border border-gray-600 bg-gray-700 text-gray-100 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
}
[data-theme="light"] .input {
@apply border-gray-300 bg-white text-gray-900;
}

5
ui_src/src/login.ts
View File

@ -13,6 +13,11 @@ class LoginStore extends ExternalStore<LoginSession | undefined> {
this.notifyChange();
}
logout() {
this.#session = undefined;
this.notifyChange();
}
takeSnapshot(): LoginSession | undefined {
return this.#session ? { ...this.#session } : undefined;
}

4
ui_src/src/upload/admin.ts
View File

@ -23,7 +23,9 @@ export interface Report {
export interface PaymentInfo {
unit: string;
interval: string;
interval: {
[key: string]: number;
};
cost: {
currency: string;
amount: number;

238
ui_src/src/views/admin.tsx Normal file
View File

@ -0,0 +1,238 @@
import { useEffect, useState, useCallback } from "react";
import { Navigate } from "react-router-dom";
import Button from "../components/button";
import FileList from "./files";
import ReportList from "./reports";
import { Blossom } from "../upload/blossom";
import useLogin from "../hooks/login";
import usePublisher from "../hooks/publisher";
import { Nip96FileList } from "../upload/nip96";
import { AdminSelf, Route96, Report } from "../upload/admin";
export default function Admin() {
const [self, setSelf] = useState<AdminSelf>();
const [error, setError] = useState<string>();
const [adminListedFiles, setAdminListedFiles] = useState<Nip96FileList>();
const [reports, setReports] = useState<Report[]>();
const [reportPages, setReportPages] = useState<number>();
const [reportPage, setReportPage] = useState(0);
const [adminListedPage, setAdminListedPage] = useState(0);
const [mimeFilter, setMimeFilter] = useState<string>();
const [loading, setLoading] = useState(true);
const login = useLogin();
const pub = usePublisher();
const url =
import.meta.env.VITE_API_URL || `${location.protocol}//${location.host}`;
const listAllUploads = useCallback(async (n: number) => {
if (!pub) return;
try {
setError(undefined);
const uploader = new Route96(url, pub);
const result = await uploader.listFiles(n, 50, mimeFilter);
setAdminListedFiles(result);
} catch (e) {
if (e instanceof Error) {
setError(e.message.length > 0 ? e.message : "Upload failed");
} else if (typeof e === "string") {
setError(e);
} else {
setError("List files failed");
}
}
}, [pub, url, mimeFilter]);
const listReports = useCallback(async (n: number) => {
if (!pub) return;
try {
setError(undefined);
const route96 = new Route96(url, pub);
const result = await route96.listReports(n, 10);
setReports(result.files);
setReportPages(Math.ceil(result.total / result.count));
} catch (e) {
if (e instanceof Error) {
setError(e.message.length > 0 ? e.message : "List reports failed");
} else if (typeof e === "string") {
setError(e);
} else {
setError("List reports failed");
}
}
}, [pub, url]);
async function acknowledgeReport(reportId: number) {
if (!pub) return;
try {
setError(undefined);
const route96 = new Route96(url, pub);
await route96.acknowledgeReport(reportId);
await listReports(reportPage);
} catch (e) {
if (e instanceof Error) {
setError(e.message.length > 0 ? e.message : "Acknowledge report failed");
} else if (typeof e === "string") {
setError(e);
} else {
setError("Acknowledge report failed");
}
}
}
async function deleteFile(id: string) {
if (!pub) return;
try {
setError(undefined);
const uploader = new Blossom(url, pub);
await uploader.delete(id);
} catch (e) {
if (e instanceof Error) {
setError(e.message.length > 0 ? e.message : "Upload failed");
} else if (typeof e === "string") {
setError(e);
} else {
setError("List files failed");
}
}
}
useEffect(() => {
if (pub && !self) {
const r96 = new Route96(url, pub);
r96.getSelf().then((v) => {
setSelf(v.data);
setLoading(false);
}).catch(() => {
setLoading(false);
});
}
}, [pub, self, url]);
useEffect(() => {
if (pub && self?.is_admin && !adminListedFiles) {
listAllUploads(adminListedPage);
}
}, [adminListedPage, pub, self?.is_admin, listAllUploads, adminListedFiles]);
useEffect(() => {
if (pub && self?.is_admin && !reports) {
listReports(reportPage);
}
}, [reportPage, pub, self?.is_admin, listReports, reports]);
if (loading) {
return (
<div className="flex justify-center items-center h-64">
<div className="text-lg text-gray-400">Loading...</div>
</div>
);
}
if (!login) {
return (
<div className="card max-w-md mx-auto text-center">
<h2 className="text-xl font-semibold mb-4">Authentication Required</h2>
<p className="text-gray-400">Please log in to access the admin panel.</p>
</div>
);
}
if (!self?.is_admin) {
return <Navigate to="/" replace />;
}
return (
<div className="space-y-8">
<div className="flex items-center justify-between">
<h1 className="text-3xl font-bold text-gray-100">Admin Panel</h1>
</div>
{error && (
<div className="bg-red-900/20 border border-red-800 text-red-400 px-4 py-3 rounded-lg">
{error}
</div>
)}
<div className="grid gap-8 lg:grid-cols-2">
<div className="card">
<h2 className="text-xl font-semibold mb-6">File Management</h2>
<div className="space-y-4">
<div>
<label className="block text-sm font-medium text-gray-300 mb-2">
Filter by MIME type
</label>
<select
className="input w-full"
value={mimeFilter || ""}
onChange={e => setMimeFilter(e.target.value || undefined)}
>
<option value="">All Files</option>
<option value="image/webp">WebP Images</option>
<option value="image/jpeg">JPEG Images</option>
<option value="image/jpg">JPG Images</option>
<option value="image/png">PNG Images</option>
<option value="image/gif">GIF Images</option>
<option value="video/mp4">MP4 Videos</option>
<option value="video/mov">MOV Videos</option>
</select>
</div>
<Button
onClick={() => listAllUploads(0)}
className="btn-primary w-full"
>
Load All Files
</Button>
</div>
</div>
<div className="card">
<h2 className="text-xl font-semibold mb-6">Reports Management</h2>
<Button
onClick={() => listReports(0)}
className="btn-primary w-full"
>
Load Reports
</Button>
</div>
</div>
{adminListedFiles && (
<div className="card">
<h2 className="text-xl font-semibold mb-6">All Files</h2>
<FileList
files={adminListedFiles.files}
pages={Math.ceil(adminListedFiles.total / adminListedFiles.count)}
page={adminListedFiles.page}
onPage={(x) => setAdminListedPage(x)}
onDelete={async (x) => {
await deleteFile(x);
await listAllUploads(adminListedPage);
}}
/>
</div>
)}
{reports && (
<div className="card">
<h2 className="text-xl font-semibold mb-6">Reports</h2>
<ReportList
reports={reports}
pages={reportPages}
page={reportPage}
onPage={(x) => setReportPage(x)}
onAcknowledge={acknowledgeReport}
onDeleteFile={async (fileId) => {
await deleteFile(fileId);
await listReports(reportPage);
}}
/>
</div>
)}
</div>
);
}

236
ui_src/src/views/files.tsx
View File

@ -28,7 +28,7 @@ export default function FileList({
}) {
const [viewType, setViewType] = useState<"grid" | "list">("grid");
if (files.length === 0) {
return <b>No Files</b>;
return <b className="text-gray-400">No Files</b>;
}
function renderInner(f: FileInfo) {
@ -77,19 +77,21 @@ export default function FileList({
for (let x = start; x < n; x++) {
ret.push(
<div
<button
key={x}
onClick={() => onPage?.(x)}
className={classNames(
"bg-neutral-700 hover:bg-neutral-600 min-w-8 text-center cursor-pointer font-bold",
"px-3 py-2 text-sm font-medium border transition-colors",
{
"rounded-l-md": x === start,
"rounded-r-md": x + 1 === n,
"bg-neutral-400": page === x,
"bg-blue-600 text-white border-blue-600": page === x,
"bg-white text-gray-700 border-gray-300 hover:bg-gray-50": page !== x,
},
)}
>
{x + 1}
</div>,
</button>,
);
}
@ -98,49 +100,48 @@ export default function FileList({
function showGrid() {
return (
<div className="grid gap-2 grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 2xl:grid-cols-10">
<div className="grid gap-4 grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8">
{files.map((a) => {
const info = getInfo(a);
return (
<div
key={info.id}
className="relative rounded-md aspect-square overflow-hidden bg-neutral-900"
className="group relative rounded-lg aspect-square overflow-hidden bg-gray-100 border border-gray-200 hover:shadow-md transition-shadow"
>
<div className="absolute flex flex-col items-center justify-center w-full h-full text-wrap text-sm break-all text-center opacity-0 hover:opacity-100 hover:bg-black/80">
<div>
<div className="absolute inset-0 flex flex-col items-center justify-center p-2 text-xs text-center opacity-0 group-hover:opacity-100 bg-black/75 text-white transition-opacity">
<div className="font-medium mb-1">
{(info.name?.length ?? 0) === 0
? "Untitled"
: info.name!.length > 20
? `${info.name?.substring(0, 10)}...${info.name?.substring(info.name.length - 10)}`
: info.name}
</div>
<div>
<div className="text-gray-300 mb-1">
{info.size && !isNaN(info.size)
? FormatBytes(info.size, 2)
: ""}
</div>
<div>{info.type}</div>
<div className="text-gray-300 mb-2">{info.type}</div>
<div className="flex gap-2">
<a href={info.url} className="underline" target="_blank">
Link
<a href={info.url} className="bg-blue-600 hover:bg-blue-700 px-2 py-1 rounded text-xs" target="_blank">
View
</a>
{onDelete && (
<a
href="#"
<button
onClick={(e) => {
e.preventDefault();
onDelete?.(info.id);
}}
className="underline"
className="bg-red-600 hover:bg-red-700 px-2 py-1 rounded text-xs"
>
Delete
</a>
</button>
)}
</div>
{info.uploader &&
info.uploader.map((a) => (
<Profile link={NostrLink.publicKey(a)} size={20} />
info.uploader.map((a, idx) => (
<Profile key={idx} link={NostrLink.publicKey(a)} size={20} />
))}
</div>
{renderInner(info)}
@ -153,106 +154,123 @@ export default function FileList({
function showList() {
return (
<table className="table-auto text-sm">
<thead>
<tr>
<th className="border border-neutral-400 bg-neutral-500 py-1 px-2">
Preview
</th>
<th className="border border-neutral-400 bg-neutral-500 py-1 px-2">
Name
</th>
<th className="border border-neutral-400 bg-neutral-500 py-1 px-2">
Type
</th>
<th className="border border-neutral-400 bg-neutral-500 py-1 px-2">
Size
</th>
{files.some((i) => "uploader" in i) && (
<th className="border border-neutral-400 bg-neutral-500 py-1 px-2">
Uploader
<div className="overflow-x-auto">
<table className="min-w-full bg-white border border-gray-200 rounded-lg">
<thead className="bg-gray-50">
<tr>
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-b border-gray-200">
Preview
</th>
)}
<th className="border border-neutral-400 bg-neutral-500 py-1 px-2">
Actions
</th>
</tr>
</thead>
<tbody>
{files.map((a) => {
const info = getInfo(a);
return (
<tr key={info.id}>
<td className="border border-neutral-500 py-1 px-2 w-8 h-8">
{renderInner(info)}
</td>
<td className="border border-neutral-500 py-1 px-2 break-all">
{(info.name?.length ?? 0) === 0 ? "<Untitled>" : info.name}
</td>
<td className="border border-neutral-500 py-1 px-2 break-all">
{info.type}
</td>
<td className="border border-neutral-500 py-1 px-2">
{info.size && !isNaN(info.size)
? FormatBytes(info.size, 2)
: ""}
</td>
{info.uploader && (
<td className="border border-neutral-500 py-1 px-2">
{info.uploader.map((a) => (
<Profile link={NostrLink.publicKey(a)} size={20} />
))}
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-b border-gray-200">
Name
</th>
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-b border-gray-200">
Type
</th>
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-b border-gray-200">
Size
</th>
{files.some((i) => "uploader" in i) && (
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-b border-gray-200">
Uploader
</th>
)}
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-b border-gray-200">
Actions
</th>
</tr>
</thead>
<tbody className="divide-y divide-gray-200">
{files.map((a) => {
const info = getInfo(a);
return (
<tr key={info.id} className="hover:bg-gray-50">
<td className="px-4 py-3 w-16">
<div className="w-12 h-12 bg-gray-100 rounded overflow-hidden">
{renderInner(info)}
</div>
</td>
)}
<td className="border border-neutral-500 py-1 px-2">
<div className="flex gap-2">
<a href={info.url} className="underline" target="_blank">
Link
</a>
{onDelete && (
<a
href="#"
onClick={(e) => {
e.preventDefault();
onDelete?.(info.id);
}}
className="underline"
>
Delete
<td className="px-4 py-3 text-sm text-gray-900 break-all max-w-xs">
{(info.name?.length ?? 0) === 0 ? "<Untitled>" : info.name}
</td>
<td className="px-4 py-3 text-sm text-gray-500">
{info.type}
</td>
<td className="px-4 py-3 text-sm text-gray-500">
{info.size && !isNaN(info.size)
? FormatBytes(info.size, 2)
: ""}
</td>
{info.uploader && (
<td className="px-4 py-3">
{info.uploader.map((a, idx) => (
<Profile key={idx} link={NostrLink.publicKey(a)} size={20} />
))}
</td>
)}
<td className="px-4 py-3">
<div className="flex gap-2">
<a href={info.url} className="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded text-xs" target="_blank">
View
</a>
)}
</div>
</td>
</tr>
);
})}
</tbody>
</table>
{onDelete && (
<button
onClick={(e) => {
e.preventDefault();
onDelete?.(info.id);
}}
className="bg-red-600 hover:bg-red-700 text-white px-3 py-1 rounded text-xs"
>
Delete
</button>
)}
</div>
</td>
</tr>
);
})}
</tbody>
</table>
</div>
);
}
return (
<>
<div className="flex">
<div
onClick={() => setViewType("grid")}
className={`bg-neutral-700 hover:bg-neutral-600 min-w-20 text-center cursor-pointer font-bold rounded-l-md ${viewType === "grid" ? "bg-neutral-500" : ""}`}
>
Grid
</div>
<div
onClick={() => setViewType("list")}
className={`bg-neutral-700 hover:bg-neutral-600 min-w-20 text-center cursor-pointer font-bold rounded-r-md ${viewType === "list" ? "bg-neutral-500" : ""}`}
>
List
<div className="space-y-4">
<div className="flex justify-between items-center">
<div className="flex rounded-lg border border-gray-300 overflow-hidden">
<button
onClick={() => setViewType("grid")}
className={`px-4 py-2 text-sm font-medium transition-colors ${
viewType === "grid"
? "bg-blue-600 text-white"
: "bg-white text-gray-700 hover:bg-gray-50"
}`}
>
Grid
</button>
<button
onClick={() => setViewType("list")}
className={`px-4 py-2 text-sm font-medium transition-colors border-l border-gray-300 ${
viewType === "list"
? "bg-blue-600 text-white"
: "bg-white text-gray-700 hover:bg-gray-50"
}`}
>
List
</button>
</div>
</div>
{viewType === "grid" ? showGrid() : showList()}
{pages !== undefined && (
<>
<div className="flex flex-wrap">{pageButtons(page ?? 0, pages)}</div>
</>
{pages !== undefined && pages > 1 && (
<div className="flex justify-center">
<div className="flex rounded-lg border border-gray-300 overflow-hidden">
{pageButtons(page ?? 0, pages)}
</div>
</div>
)}
</>
</div>
);
}

81
ui_src/src/views/header.tsx
View File

@ -1,11 +1,21 @@
import { Nip7Signer, NostrLink } from "@snort/system";
import { Link, useLocation } from "react-router-dom";
import { useEffect, useState } from "react";
import Button from "../components/button";
import Profile from "../components/profile";
import useLogin from "../hooks/login";
import usePublisher from "../hooks/publisher";
import { Login } from "../login";
import { AdminSelf, Route96 } from "../upload/admin";
export default function Header() {
const login = useLogin();
const pub = usePublisher();
const location = useLocation();
const [self, setSelf] = useState<AdminSelf>();
const url =
import.meta.env.VITE_API_URL || `${window.location.protocol}//${window.location.host}`;
async function tryLogin() {
try {
@ -19,14 +29,69 @@ export default function Header() {
//ignore
}
}
useEffect(() => {
if (pub && !self) {
const r96 = new Route96(url, pub);
r96.getSelf().then((v) => setSelf(v.data)).catch(() => {});
}
}, [pub, self, url]);
return (
<div className="flex justify-between items-center">
<div className="text-xl font-bold">route96</div>
{login ? (
<Profile link={NostrLink.publicKey(login.pubkey)} />
) : (
<Button onClick={tryLogin}>Login</Button>
)}
</div>
<header className="border-b border-gray-700 bg-gray-800">
<div className="flex justify-between items-center py-4">
<div className="flex items-center space-x-8">
<Link to="/">
<div className="text-2xl font-bold text-gray-100 hover:text-blue-400 transition-colors">
route96
</div>
</Link>
<nav className="flex space-x-6">
<Link
to="/"
className={`text-sm font-medium transition-colors ${
location.pathname === "/"
? "text-blue-400 border-b-2 border-blue-400 pb-1"
: "text-gray-300 hover:text-gray-100"
}`}
>
Upload
</Link>
{self?.is_admin && (
<Link
to="/admin"
className={`text-sm font-medium transition-colors ${
location.pathname === "/admin"
? "text-blue-400 border-b-2 border-blue-400 pb-1"
: "text-gray-300 hover:text-gray-100"
}`}
>
Admin
</Link>
)}
</nav>
</div>
<div className="flex items-center space-x-4">
{login ? (
<div className="flex items-center space-x-3">
<Profile link={NostrLink.publicKey(login.pubkey)} />
<Button
onClick={() => Login.logout()}
className="btn-secondary text-sm"
>
Logout
</Button>
</div>
) : (
<Button onClick={tryLogin} className="btn-primary">
Login
</Button>
)}
</div>
</div>
</header>
);
}

434
ui_src/src/views/upload.tsx
View File

@ -1,14 +1,13 @@
import { useEffect, useState } from "react";
import { useEffect, useState, useCallback } from "react";
import Button from "../components/button";
import FileList from "./files";
import ReportList from "./reports";
import PaymentFlow from "../components/payment";
import { openFile } from "../upload";
import { Blossom } from "../upload/blossom";
import useLogin from "../hooks/login";
import usePublisher from "../hooks/publisher";
import { Nip96, Nip96FileList } from "../upload/nip96";
import { AdminSelf, Route96, Report } from "../upload/admin";
import { AdminSelf, Route96 } from "../upload/admin";
import { FormatBytes } from "../const";
export default function Upload() {
@ -19,13 +18,7 @@ export default function Upload() {
const [error, setError] = useState<string>();
const [results, setResults] = useState<Array<object>>([]);
const [listedFiles, setListedFiles] = useState<Nip96FileList>();
const [adminListedFiles, setAdminListedFiles] = useState<Nip96FileList>();
const [reports, setReports] = useState<Report[]>();
const [reportPages, setReportPages] = useState<number>();
const [reportPage, setReportPage] = useState(0);
const [listedPage, setListedPage] = useState(0);
const [adminListedPage, setAdminListedPage] = useState(0);
const [mimeFilter, setMimeFilter] = useState<string>();
const [showPaymentFlow, setShowPaymentFlow] = useState(false);
const login = useLogin();
@ -62,7 +55,7 @@ export default function Upload() {
}
}
async function listUploads(n: number) {
const listUploads = useCallback(async (n: number) => {
if (!pub) return;
try {
setError(undefined);
@ -79,62 +72,8 @@ export default function Upload() {
setError("List files failed");
}
}
}
}, [pub, url]);
async function listAllUploads(n: number) {
if (!pub) return;
try {
setError(undefined);
const uploader = new Route96(url, pub);
const result = await uploader.listFiles(n, 50, mimeFilter);
setAdminListedFiles(result);
} catch (e) {
if (e instanceof Error) {
setError(e.message.length > 0 ? e.message : "Upload failed");
} else if (typeof e === "string") {
setError(e);
} else {
setError("List files failed");
}
}
}
async function listReports(n: number) {
if (!pub) return;
try {
setError(undefined);
const route96 = new Route96(url, pub);
const result = await route96.listReports(n, 10);
setReports(result.files);
setReportPages(Math.ceil(result.total / result.count));
} catch (e) {
if (e instanceof Error) {
setError(e.message.length > 0 ? e.message : "List reports failed");
} else if (typeof e === "string") {
setError(e);
} else {
setError("List reports failed");
}
}
}
async function acknowledgeReport(reportId: number) {
if (!pub) return;
try {
setError(undefined);
const route96 = new Route96(url, pub);
await route96.acknowledgeReport(reportId);
await listReports(reportPage); // Refresh the list
} catch (e) {
if (e instanceof Error) {
setError(e.message.length > 0 ? e.message : "Acknowledge report failed");
} else if (typeof e === "string") {
setError(e);
} else {
setError("Acknowledge report failed");
}
}
}
async function deleteFile(id: string) {
if (!pub) return;
@ -154,210 +93,217 @@ export default function Upload() {
}
useEffect(() => {
if (pub) {
if (pub && !listedFiles) {
listUploads(listedPage);
}
}, [listedPage, pub]);
}, [listedPage, pub, listUploads, listedFiles]);
useEffect(() => {
if (pub) {
listAllUploads(adminListedPage);
}
}, [adminListedPage, mimeFilter, pub]);
useEffect(() => {
if (pub && self?.is_admin) {
listReports(reportPage);
}
}, [reportPage, pub, self?.is_admin]);
useEffect(() => {
if (pub && !self) {
const r96 = new Route96(url, pub);
r96.getSelf().then((v) => setSelf(v.data));
}
}, [pub, self]);
}, [pub, self, url]);
if (!login) {
return (
<div className="card max-w-2xl mx-auto text-center">
<h2 className="text-2xl font-semibold mb-4 text-gray-100">Welcome to {window.location.hostname}</h2>
<p className="text-gray-400 mb-6">Please log in to start uploading files to your storage.</p>
</div>
);
}
return (
<div className="flex flex-col gap-2 bg-neutral-800 p-8 rounded-xl w-full">
<h1 className="text-lg font-bold">
Welcome to {window.location.hostname}
</h1>
<div className="text-neutral-400 uppercase text-xs font-medium">
Upload Method
</div>
<div className="flex gap-4 items-center">
<div
className="flex gap-2 cursor-pointer"
onClick={() => setType("blossom")}
>
Blossom
<input type="radio" checked={type === "blossom"} />
</div>
<div
className="flex gap-2 cursor-pointer"
onClick={() => setType("nip96")}
>
NIP-96
<input type="radio" checked={type === "nip96"} />
</div>
<div className="max-w-4xl mx-auto space-y-8">
<div className="text-center">
<h1 className="text-3xl font-bold text-gray-100 mb-2">
Welcome to {window.location.hostname}
</h1>
<p className="text-lg text-gray-400">Upload and manage your files securely</p>
</div>
<div
className="flex gap-2 cursor-pointer"
onClick={() => setNoCompress((s) => !s)}
>
Disable Compression
<input type="checkbox" checked={noCompress} />
</div>
{toUpload && <FileList files={toUpload ? [toUpload] : []} />}
<div className="flex gap-4">
<Button
className="flex-1"
onClick={async () => {
const f = await openFile();
setToUpload(f);
}}
>
Choose Files
</Button>
<Button
className="flex-1"
onClick={doUpload}
disabled={login === undefined}
>
Upload
</Button>
</div>
<hr />
{!listedFiles && (
<Button disabled={login === undefined} onClick={() => listUploads(0)}>
List Uploads
</Button>
)}
{self && (
<div className="flex justify-between font-medium">
<div>Uploads: {self.file_count.toLocaleString()}</div>
<div>Total Size: {FormatBytes(self.total_size)}</div>
{error && (
<div className="bg-red-900/20 border border-red-800 text-red-400 px-4 py-3 rounded-lg">
{error}
</div>
)}
{self && (
<div className="bg-neutral-700 p-4 rounded-lg">
<h3 className="text-lg font-bold mb-2">Storage Quota</h3>
<div className="space-y-2">
{self.free_quota && (
<div className="text-sm">
Free Quota: {FormatBytes(self.free_quota)}
</div>
)}
{self.quota && (
<div className="text-sm">
Paid Quota: {FormatBytes(self.quota)}
</div>
)}
{self.total_available_quota && (
<div className="text-sm font-medium">
Total Available: {FormatBytes(self.total_available_quota)}
</div>
)}
{self.total_available_quota && (
<div className="text-sm">
Remaining: {FormatBytes(Math.max(0, self.total_available_quota - self.total_size))}
</div>
)}
{self.paid_until && (
<div className="text-sm text-neutral-300">
Paid Until: {new Date(self.paid_until * 1000).toLocaleDateString()}
</div>
)}
<div className="card">
<h2 className="text-xl font-semibold mb-6">Upload Settings</h2>
<div className="space-y-6">
<div>
<label className="block text-sm font-medium text-gray-300 mb-3">
Upload Method
</label>
<div className="flex gap-6">
<label className="flex items-center cursor-pointer">
<input
type="radio"
checked={type === "blossom"}
onChange={() => setType("blossom")}
className="mr-2"
/>
<span className="text-sm font-medium text-gray-300">Blossom</span>
</label>
<label className="flex items-center cursor-pointer">
<input
type="radio"
checked={type === "nip96"}
onChange={() => setType("nip96")}
className="mr-2"
/>
<span className="text-sm font-medium text-gray-300">NIP-96</span>
</label>
</div>
</div>
<div>
<label className="flex items-center cursor-pointer">
<input
type="checkbox"
checked={noCompress}
onChange={(e) => setNoCompress(e.target.checked)}
className="mr-2"
/>
<span className="text-sm font-medium text-gray-300">Disable Compression</span>
</label>
</div>
{toUpload && (
<div className="border-2 border-dashed border-gray-600 rounded-lg p-4">
<FileList files={[toUpload]} />
</div>
)}
<div className="flex gap-4">
<Button
onClick={async () => {
const f = await openFile();
setToUpload(f);
}}
className="btn-secondary flex-1"
>
Choose File
</Button>
<Button
onClick={doUpload}
disabled={!toUpload}
className="btn-primary flex-1"
>
Upload
</Button>
</div>
</div>
</div>
{self && (
<div className="grid gap-6 md:grid-cols-2">
<div className="card">
<h3 className="text-lg font-semibold mb-4">Storage Usage</h3>
<div className="space-y-2">
<div className="flex justify-between text-sm">
<span>Files:</span>
<span className="font-medium">{self.file_count.toLocaleString()}</span>
</div>
<div className="flex justify-between text-sm">
<span>Total Size:</span>
<span className="font-medium">{FormatBytes(self.total_size)}</span>
</div>
</div>
</div>
<div className="card">
<h3 className="text-lg font-semibold mb-4">Storage Quota</h3>
<div className="space-y-2">
{self.free_quota && (
<div className="flex justify-between text-sm">
<span>Free Quota:</span>
<span className="font-medium">{FormatBytes(self.free_quota)}</span>
</div>
)}
{self.quota && (
<div className="flex justify-between text-sm">
<span>Paid Quota:</span>
<span className="font-medium">{FormatBytes(self.quota)}</span>
</div>
)}
{self.total_available_quota && (
<div className="flex justify-between text-sm font-medium">
<span>Total Available:</span>
<span>{FormatBytes(self.total_available_quota)}</span>
</div>
)}
{self.total_available_quota && (
<div className="flex justify-between text-sm">
<span>Remaining:</span>
<span className="font-medium text-green-400">
{FormatBytes(Math.max(0, self.total_available_quota - self.total_size))}
</span>
</div>
)}
{self.paid_until && (
<div className="flex justify-between text-sm text-gray-400">
<span>Paid Until:</span>
<span>{new Date(self.paid_until * 1000).toLocaleDateString()}</span>
</div>
)}
</div>
<Button
onClick={() => setShowPaymentFlow(!showPaymentFlow)}
className="btn-primary w-full mt-4"
>
{showPaymentFlow ? "Hide" : "Show"} Payment Options
</Button>
</div>
<Button
onClick={() => setShowPaymentFlow(!showPaymentFlow)}
className="mt-3 w-full"
>
{showPaymentFlow ? "Hide" : "Show"} Top Up Options
</Button>
</div>
)}
{showPaymentFlow && pub && (
<PaymentFlow
route96={new Route96(url, pub)}
onPaymentRequested={(pr) => {
console.log("Payment requested:", pr);
// You could add more logic here, like showing a QR code
}}
/>
<div className="card">
<PaymentFlow
route96={new Route96(url, pub)}
onPaymentRequested={(pr) => {
console.log("Payment requested:", pr);
}}
/>
</div>
)}
{listedFiles && (
<FileList
files={listedFiles.files}
pages={Math.ceil(listedFiles.total / listedFiles.count)}
page={listedFiles.page}
onPage={(x) => setListedPage(x)}
onDelete={async (x) => {
await deleteFile(x);
await listUploads(listedPage);
}}
/>
)}
<div className="card">
<div className="flex justify-between items-center mb-6">
<h2 className="text-xl font-semibold">Your Files</h2>
{!listedFiles && (
<Button onClick={() => listUploads(0)} className="btn-primary">
Load Files
</Button>
)}
</div>
{listedFiles && (
<FileList
files={listedFiles.files}
pages={Math.ceil(listedFiles.total / listedFiles.count)}
page={listedFiles.page}
onPage={(x) => setListedPage(x)}
onDelete={async (x) => {
await deleteFile(x);
await listUploads(listedPage);
}}
/>
)}
</div>
{self?.is_admin && (
<>
<hr />
<h3>Admin File List:</h3>
<Button onClick={() => listAllUploads(0)}>List All Uploads</Button>
<Button onClick={() => listReports(0)}>List Reports</Button>
<div>
<select value={mimeFilter} onChange={e => setMimeFilter(e.target.value)}>
<option value={""}>All</option>
<option>image/webp</option>
<option>image/jpeg</option>
<option>image/jpg</option>
<option>image/png</option>
<option>image/gif</option>
<option>video/mp4</option>
<option>video/mov</option>
</select>
</div>
{adminListedFiles && (
<FileList
files={adminListedFiles.files}
pages={Math.ceil(adminListedFiles.total / adminListedFiles.count)}
page={adminListedFiles.page}
onPage={(x) => setAdminListedPage(x)}
onDelete={async (x) => {
await deleteFile(x);
await listAllUploads(adminListedPage);
}}
/>
)}
{reports && (
<>
<h3>Reports:</h3>
<ReportList
reports={reports}
pages={reportPages}
page={reportPage}
onPage={(x) => setReportPage(x)}
onAcknowledge={acknowledgeReport}
onDeleteFile={async (fileId) => {
await deleteFile(fileId);
await listReports(reportPage); // Refresh reports after deleting file
}}
/>
</>
)}
</>
{results.length > 0 && (
<div className="card">
<h3 className="text-lg font-semibold mb-4">Upload Results</h3>
<pre className="text-xs bg-gray-100 p-4 rounded overflow-auto">
{JSON.stringify(results, undefined, 2)}
</pre>
</div>
)}
{error && <b className="text-red-500">{error}</b>}
<pre className="text-xs font-monospace overflow-wrap">
{JSON.stringify(results, undefined, 2)}
</pre>
</div>
);
}

2
ui_src/tsconfig.app.tsbuildinfo
View File

@ -1 +1 @@
{"root":["./src/App.tsx","./src/const.ts","./src/login.ts","./src/main.tsx","./src/vite-env.d.ts","./src/components/button.tsx","./src/components/payment.tsx","./src/components/profile.tsx","./src/hooks/login.ts","./src/hooks/publisher.ts","./src/upload/admin.ts","./src/upload/blossom.ts","./src/upload/index.ts","./src/upload/nip96.ts","./src/views/files.tsx","./src/views/header.tsx","./src/views/reports.tsx","./src/views/upload.tsx"],"errors":true,"version":"5.8.3"}
{"root":["./src/App.tsx","./src/const.ts","./src/login.ts","./src/main.tsx","./src/vite-env.d.ts","./src/components/button.tsx","./src/components/payment.tsx","./src/components/profile.tsx","./src/hooks/login.ts","./src/hooks/publisher.ts","./src/upload/admin.ts","./src/upload/blossom.ts","./src/upload/index.ts","./src/upload/nip96.ts","./src/views/admin.tsx","./src/views/files.tsx","./src/views/header.tsx","./src/views/reports.tsx","./src/views/upload.tsx"],"version":"5.6.2"}

2
ui_src/tsconfig.node.tsbuildinfo
View File

@ -1 +1 @@
{"root":["./vite.config.ts"],"errors":true,"version":"5.8.3"}
{"root":["./vite.config.ts"],"version":"5.6.2"}

72
ui_src/yarn.lock
View File

@ -993,6 +993,13 @@ __metadata:
languageName: node
linkType: hard
"@types/history@npm:^4.7.11":
version: 4.7.11
resolution: "@types/history@npm:4.7.11"
checksum: 10c0/3facf37c2493d1f92b2e93a22cac7ea70b06351c2ab9aaceaa3c56aa6099fb63516f6c4ec1616deb5c56b4093c026a043ea2d3373e6c0644d55710364d02c934
languageName: node
linkType: hard
"@types/json-schema@npm:^7.0.15":
version: 7.0.15
resolution: "@types/json-schema@npm:7.0.15"
@ -1016,6 +1023,27 @@ __metadata:
languageName: node
linkType: hard
"@types/react-router-dom@npm:^5.3.3":
version: 5.3.3
resolution: "@types/react-router-dom@npm:5.3.3"
dependencies:
"@types/history": "npm:^4.7.11"
"@types/react": "npm:*"
"@types/react-router": "npm:*"
checksum: 10c0/a9231a16afb9ed5142678147eafec9d48582809295754fb60946e29fcd3757a4c7a3180fa94b45763e4c7f6e3f02379e2fcb8dd986db479dcab40eff5fc62a91
languageName: node
linkType: hard
"@types/react-router@npm:*":
version: 5.1.20
resolution: "@types/react-router@npm:5.1.20"
dependencies:
"@types/history": "npm:^4.7.11"
"@types/react": "npm:*"
checksum: 10c0/1f7eee61981d2f807fa01a34a0ef98ebc0774023832b6611a69c7f28fdff01de5a38cabf399f32e376bf8099dcb7afaf724775bea9d38870224492bea4cb5737
languageName: node
linkType: hard
"@types/react@npm:*, @types/react@npm:^18.3.3":
version: 18.3.8
resolution: "@types/react@npm:18.3.8"
@ -1522,6 +1550,13 @@ __metadata:
languageName: node
linkType: hard
"cookie@npm:^1.0.1":
version: 1.0.2
resolution: "cookie@npm:1.0.2"
checksum: 10c0/fd25fe79e8fbcfcaf6aa61cd081c55d144eeeba755206c058682257cb38c4bd6795c6620de3f064c740695bb65b7949ebb1db7a95e4636efb8357a335ad3f54b
languageName: node
linkType: hard
"cross-spawn@npm:^7.0.0, cross-spawn@npm:^7.0.2":
version: 7.0.3
resolution: "cross-spawn@npm:7.0.3"
@ -3187,6 +3222,34 @@ __metadata:
languageName: node
linkType: hard
"react-router-dom@npm:^7.6.2":
version: 7.6.2
resolution: "react-router-dom@npm:7.6.2"
dependencies:
react-router: "npm:7.6.2"
peerDependencies:
react: ">=18"
react-dom: ">=18"
checksum: 10c0/9a8370333b5c1ada5ed76a2c30a90ca5a5a8e6c8565165f147fb42b150f2b258b9e73935fe4945c459d770841abdfaf99c28f7e13da93b1f49b28e6a8e87aadb
languageName: node
linkType: hard
"react-router@npm:7.6.2":
version: 7.6.2
resolution: "react-router@npm:7.6.2"
dependencies:
cookie: "npm:^1.0.1"
set-cookie-parser: "npm:^2.6.0"
peerDependencies:
react: ">=18"
react-dom: ">=18"
peerDependenciesMeta:
react-dom:
optional: true
checksum: 10c0/c8ef65f2a378f38e3cba900d67fa2b80a41c1c3925102875ee07c12faa01ea40991cb3fbefaf3ff6914e724c755732e3d7dec2b1bdef09e0fddd00fccc85a06a
languageName: node
linkType: hard
"react@npm:^18.2.0, react@npm:^18.3.1":
version: 18.3.1
resolution: "react@npm:18.3.1"
@ -3367,6 +3430,13 @@ __metadata:
languageName: node
linkType: hard
"set-cookie-parser@npm:^2.6.0":
version: 2.7.1
resolution: "set-cookie-parser@npm:2.7.1"
checksum: 10c0/060c198c4c92547ac15988256f445eae523f57f2ceefeccf52d30d75dedf6bff22b9c26f756bd44e8e560d44ff4ab2130b178bd2e52ef5571bf7be3bd7632d9a
languageName: node
linkType: hard
"shebang-command@npm:^2.0.0":
version: 2.0.0
resolution: "shebang-command@npm:2.0.0"
@ -3726,6 +3796,7 @@ __metadata:
"@snort/system-react": "npm:^1.5.1"
"@types/react": "npm:^18.3.3"
"@types/react-dom": "npm:^18.3.0"
"@types/react-router-dom": "npm:^5.3.3"
"@vitejs/plugin-react": "npm:^4.3.1"
autoprefixer: "npm:^10.4.20"
classnames: "npm:^2.5.1"
@ -3737,6 +3808,7 @@ __metadata:
prettier: "npm:^3.3.3"
react: "npm:^18.3.1"
react-dom: "npm:^18.3.1"
react-router-dom: "npm:^7.6.2"
tailwindcss: "npm:^3.4.13"
typescript: "npm:^5.5.3"
typescript-eslint: "npm:^8.0.1"