Kieran/route96
1
0
Fork 0
mirror of https://github.com/v0l/route96.git synced 2025-06-14 15:46:32 +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

153
README.md
View File

@ -1,26 +1,143 @@
# route96 # Route96
Image hosting service Decentralized blob storage server with Nostr integration, supporting multiple protocols and advanced media processing capabilities.
## Features ## Core Features
- [NIP-96 Support](https://github.com/nostr-protocol/nips/blob/master/96.md) ### Protocol Support
- [Blossom Support](https://github.com/hzrd149/blossom/blob/master/buds/01.md) - **[NIP-96](https://github.com/nostr-protocol/nips/blob/master/96.md)** - Nostr file storage with media processing
- [BUD-01](https://github.com/hzrd149/blossom/blob/master/buds/01.md) - **[Blossom Protocol](https://github.com/hzrd149/blossom)** - Complete BUD specification compliance:
- [BUD-02](https://github.com/hzrd149/blossom/blob/master/buds/02.md) - [BUD-01](https://github.com/hzrd149/blossom/blob/master/buds/01.md) - Blob retrieval (GET/HEAD)
- [BUD-04](https://github.com/hzrd149/blossom/blob/master/buds/04.md) - [BUD-02](https://github.com/hzrd149/blossom/blob/master/buds/02.md) - Upload, delete, list operations
- [BUD-05](https://github.com/hzrd149/blossom/blob/master/buds/05.md) - [BUD-04](https://github.com/hzrd149/blossom/blob/master/buds/04.md) - Blob mirroring from remote servers
- [BUD-06](https://github.com/hzrd149/blossom/blob/master/buds/06.md) - [BUD-05](https://github.com/hzrd149/blossom/blob/master/buds/05.md) - Media optimization endpoints
- [BUD-08](https://github.com/hzrd149/blossom/blob/master/buds/08.md) - [BUD-06](https://github.com/hzrd149/blossom/blob/master/buds/06.md) - Upload requirement validation
- Image compression to WebP - [BUD-08](https://github.com/hzrd149/blossom/blob/master/buds/08.md) - NIP-94 metadata support
- Blurhash calculation - [BUD-09](https://github.com/hzrd149/blossom/blob/master/buds/09.md) - Content reporting system
- AI image labeling ([ViT224](https://huggingface.co/google/vit-base-patch16-224))
- Plausible analytics
## Planned ### Media Processing
- **Image & Video Compression** - Automatic WebP conversion and optimization
- **Thumbnail Generation** - Auto-generated thumbnails for images and videos
- **Blurhash Calculation** - Progressive image loading with blur previews
- **AI Content Labeling** - Automated tagging using [ViT-224](https://huggingface.co/google/vit-base-patch16-224) model
- **Media Metadata** - Automatic extraction of dimensions, duration, bitrate
- **Range Request Support** - RFC 7233 compliant partial content delivery
- Torrent seed V2 ### Security & Administration
- Payment system - **Nostr Authentication** - Cryptographic identity with kind 24242 events
- **Whitelist Support** - Restrict uploads to approved public keys
- **Quota Management** - Per-user storage limits with payment integration
- **Content Reporting** - Community-driven moderation via NIP-56 reports
- **Admin Dashboard** - Web interface for content and user management
- **CORS Support** - Full cross-origin resource sharing compliance
### Payment System
- **Lightning Network** - Bitcoin payments via LND integration
- **Fiat Tracking** - Multi-currency support (USD/EUR/GBP/JPY/etc.)
- **Flexible Billing** - Usage-based pricing (storage, egress, time-based)
- **Free Quotas** - Configurable free tier for new users
### Analytics & Monitoring
- **Plausible Integration** - Privacy-focused usage analytics
- **Comprehensive Logging** - Detailed operation tracking
- **Health Monitoring** - Service status and performance metrics
## API Endpoints
### Blossom Protocol
- `GET /<sha256>` - Retrieve blob by hash
- `HEAD /<sha256>` - Check blob existence
- `PUT /upload` - Upload new blob
- `DELETE /<sha256>` - Delete owned blob
- `GET /list/<pubkey>` - List user's blobs
- `PUT /mirror` - Mirror blob from remote URL
- `PUT /media` - Upload with media optimization
- `HEAD /upload` - Validate upload requirements
- `PUT /report` - Submit content reports
### NIP-96 Protocol
- `GET /.well-known/nostr/nip96.json` - Server information
- `POST /nip96` - File upload with Nostr auth
- `DELETE /nip96/<sha256>` - Delete with Nostr auth
### Admin Interface
- `GET /admin/*` - Web dashboard for content management
- Admin API endpoints for reports and user management
## Configuration
Route96 uses YAML configuration. See [config.yaml](config.yaml) for a complete example:
```yaml
listen: "127.0.0.1:8000"
database: "mysql://user:pass@localhost:3306/route96"
storage_dir: "./data"
max_upload_bytes: 104857600 # 100MB
public_url: "https://your-domain.com"
# Optional: Restrict to specific pubkeys
whitelist: ["pubkey1", "pubkey2"]
# Optional: Payment system
payments:
free_quota_bytes: 104857600
cost:
currency: "BTC"
amount: 0.00000100
unit: "GBSpace"
interval:
month: 1
```
## Quick Start Examples
### Upload a file (Blossom)
```bash
# Create authorization event (kind 24242)
auth_event='{"kind":24242,"tags":[["t","upload"],["expiration","1234567890"]],"content":"Upload file"}'
auth_b64=$(echo $auth_event | base64 -w 0)
curl -X PUT http://localhost:8000/upload \
-H "Authorization: Nostr $auth_b64" \
-H "Content-Type: image/jpeg" \
--data-binary @image.jpg
```
### Retrieve a file
```bash
curl http://localhost:8000/abc123def456...789
```
### List user's files
```bash
curl http://localhost:8000/list/user_pubkey_hex
```
## Feature Flags
Route96 supports optional features that can be enabled at compile time:
- `nip96` (default) - NIP-96 protocol support
- `blossom` (default) - Blossom protocol support
- `media-compression` - WebP conversion and thumbnails
- `labels` - AI-powered content labeling
- `payments` (default) - Lightning payment integration
- `analytics` (default) - Plausible analytics
- `react-ui` (default) - Web dashboard interface
```bash
# Build with specific features
cargo build --features "blossom,payments,media-compression"
```
## Requirements
- **Rust** 1.70+
- **MySQL/MariaDB** - Database storage
- **FFmpeg libraries** - Media processing (optional)
- **Node.js** - UI building (optional)
See [docs/debian.md](docs/debian.md) for detailed installation instructions.
## Running ## Running

4
migrations/20250202135844_payments.sql
View File

@ -1,7 +1,7 @@
-- Add migration script here -- Add migration script here
alter table users alter table users
add column paid_until timestamp, add column paid_until timestamp,
add column paid_size integer unsigned not null; add column paid_size bigint unsigned not null;
create table payments create table payments
( (
@ -11,7 +11,7 @@ create table payments
amount integer unsigned not null, amount integer unsigned not null,
is_paid bit(1) not null default 0, is_paid bit(1) not null default 0,
days_value integer unsigned not null, days_value integer unsigned not null,
size_value integer unsigned not null, size_value bigint unsigned not null,
settle_index integer unsigned, settle_index integer unsigned,
rate float, rate float,

15
src/db.rs
View File

@ -139,14 +139,23 @@ impl Database {
.bind(pubkey) .bind(pubkey)
.fetch_optional(&self.pool) .fetch_optional(&self.pool)
.await?; .await?;
match res { let user_id = match res {
None => sqlx::query("select id from users where pubkey = ?") None => sqlx::query("select id from users where pubkey = ?")
.bind(pubkey) .bind(pubkey)
.fetch_one(&self.pool) .fetch_one(&self.pool)
.await? .await?
.try_get(0), .try_get(0)?,
Some(res) => res.try_get(0), Some(res) => res.try_get(0)?,
};
// Make the first user (ID 1) an admin
if user_id == 1 {
sqlx::query("update users set is_admin = 1 where id = 1")
.execute(&self.pool)
.await?;
} }
Ok(user_id)
} }
pub async fn get_user(&self, pubkey: &Vec<u8>) -> Result<User, Error> { pub async fn get_user(&self, pubkey: &Vec<u8>) -> Result<User, Error> {

25
src/routes/blossom.rs
View File

@ -24,7 +24,7 @@ pub struct BlobDescriptor {
pub size: u64, pub size: u64,
#[serde(rename = "type", skip_serializing_if = "Option::is_none")] #[serde(rename = "type", skip_serializing_if = "Option::is_none")]
pub mime_type: Option<String>, pub mime_type: Option<String>,
pub created: u64, pub uploaded: u64,
#[serde(rename = "nip94", skip_serializing_if = "Option::is_none")] #[serde(rename = "nip94", skip_serializing_if = "Option::is_none")]
pub nip94: Option<Vec<Vec<String>>>, pub nip94: Option<Vec<Vec<String>>>,
} }
@ -44,7 +44,7 @@ impl BlobDescriptor {
sha256: id_hex, sha256: id_hex,
size: value.size, size: value.size,
mime_type: Some(value.mime_type.clone()), mime_type: Some(value.mime_type.clone()),
created: value.created.timestamp() as u64, uploaded: value.created.timestamp() as u64,
nip94: Some(Nip94Event::from_upload(settings, value).tags), nip94: Some(Nip94Event::from_upload(settings, value).tags),
} }
} }
@ -352,11 +352,16 @@ async fn process_upload(
None None
} }
}); });
if let Some(z) = size {
if z > settings.max_upload_bytes { let size = match size {
return BlossomResponse::error("File too large"); Some(z) => {
if z > settings.max_upload_bytes {
return BlossomResponse::error("File too large");
}
z
} }
} None => return BlossomResponse::error("Size tag is required"),
};
// check whitelist // check whitelist
if let Some(e) = check_whitelist(&auth, settings) { if let Some(e) = check_whitelist(&auth, settings) {
@ -365,7 +370,7 @@ async fn process_upload(
// check quota // check quota
#[cfg(feature = "payments")] #[cfg(feature = "payments")]
if let Some(upload_size) = size { {
let free_quota = settings let free_quota = settings
.payments .payments
.as_ref() .as_ref()
@ -374,7 +379,7 @@ async fn process_upload(
let pubkey_vec = auth.event.pubkey.to_bytes().to_vec(); let pubkey_vec = auth.event.pubkey.to_bytes().to_vec();
match db match db
.check_user_quota(&pubkey_vec, upload_size, free_quota) .check_user_quota(&pubkey_vec, size, free_quota)
.await .await
{ {
Ok(false) => return BlossomResponse::error("Upload would exceed quota"), Ok(false) => return BlossomResponse::error("Upload would exceed quota"),
@ -425,7 +430,7 @@ where
_ => return BlossomResponse::error("File not found"), _ => return BlossomResponse::error("File not found"),
}, },
Err(e) => { Err(e) => {
error!("{}", e.to_string()); error!("{}", e);
return BlossomResponse::error(format!("Error saving file (disk): {}", e)); return BlossomResponse::error(format!("Error saving file (disk): {}", e));
} }
}; };
@ -437,7 +442,7 @@ where
} }
}; };
if let Err(e) = db.add_file(&upload, user_id).await { if let Err(e) = db.add_file(&upload, user_id).await {
error!("{}", e.to_string()); error!("{}", e);
BlossomResponse::error(format!("Error saving file (db): {}", e)) BlossomResponse::error(format!("Error saving file (db): {}", e))
} else { } else {
BlossomResponse::BlobDescriptor(Json(BlobDescriptor::from_upload(settings, &upload))) BlossomResponse::BlobDescriptor(Json(BlobDescriptor::from_upload(settings, &upload)))

4
ui_src/package.json
View File

@ -16,12 +16,14 @@
"@snort/system-react": "^1.5.1", "@snort/system-react": "^1.5.1",
"classnames": "^2.5.1", "classnames": "^2.5.1",
"react": "^18.3.1", "react": "^18.3.1",
"react-dom": "^18.3.1" "react-dom": "^18.3.1",
"react-router-dom": "^7.6.2"
}, },
"devDependencies": { "devDependencies": {
"@eslint/js": "^9.9.0", "@eslint/js": "^9.9.0",
"@types/react": "^18.3.3", "@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0", "@types/react-dom": "^18.3.0",
"@types/react-router-dom": "^5.3.3",
"@vitejs/plugin-react": "^4.3.1", "@vitejs/plugin-react": "^4.3.1",
"autoprefixer": "^10.4.20", "autoprefixer": "^10.4.20",
"eslint": "^9.9.0", "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 Header from "./views/header";
import Upload from "./views/upload"; import Upload from "./views/upload";
import Admin from "./views/admin";
function App() { function App() {
return ( return (
<div className="flex flex-col gap-4 mx-auto mt-4 max-w-[1920px] px-10"> <Router>
<Header /> <div className="min-h-screen bg-gray-900">
<Upload /> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
</div> <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 ( return (
<button <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} onClick={doClick}
{...props} {...props}
disabled={loading || (props.disabled ?? false)} disabled={loading || (props.disabled ?? false)}
> >
{children} {loading ? "..." : children}
</button> </button>
); );
} }

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

@ -9,8 +9,8 @@ interface PaymentFlowProps {
export default function PaymentFlow({ route96, onPaymentRequested }: PaymentFlowProps) { export default function PaymentFlow({ route96, onPaymentRequested }: PaymentFlowProps) {
const [paymentInfo, setPaymentInfo] = useState<PaymentInfo | null>(null); const [paymentInfo, setPaymentInfo] = useState<PaymentInfo | null>(null);
const [units, setUnits] = useState<number>(1); const [gigabytes, setGigabytes] = useState<number>(1);
const [quantity, setQuantity] = useState<number>(1); const [months, setMonths] = useState<number>(1);
const [paymentRequest, setPaymentRequest] = useState<string>(""); const [paymentRequest, setPaymentRequest] = useState<string>("");
const [error, setError] = useState<string>(""); const [error, setError] = useState<string>("");
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
@ -41,7 +41,7 @@ export default function PaymentFlow({ route96, onPaymentRequested }: PaymentFlow
setError(""); setError("");
try { try {
const request: PaymentRequest = { units, quantity }; const request: PaymentRequest = { units: gigabytes, quantity: months };
const response = await route96.requestPayment(request); const response = await route96.requestPayment(request);
setPaymentRequest(response.pr); setPaymentRequest(response.pr);
onPaymentRequested?.(response.pr); onPaymentRequested?.(response.pr);
@ -57,71 +57,86 @@ export default function PaymentFlow({ route96, onPaymentRequested }: PaymentFlow
} }
if (error && !paymentInfo) { 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) { 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 ( 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> <h3 className="text-lg font-bold mb-4">Top Up Account</h3>
<div className="grid grid-cols-2 gap-4 mb-4"> <div className="space-y-4 mb-6">
<div> <div className="text-center">
<label className="block text-sm font-medium mb-1"> <div className="text-2xl font-bold text-gray-100 mb-2">
Units ({paymentInfo.unit}) {gigabytes} {formatStorageUnit(paymentInfo.unit)} for {months} month{months > 1 ? 's' : ''}
</label> </div>
<input <div className="text-lg text-blue-400 font-semibold">
type="number" {totalCostSats.toLocaleString()} sats
min="0.1" </div>
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> </div>
<div> <div className="grid grid-cols-2 gap-4">
<label className="block text-sm font-medium mb-1"> <div>
Quantity <label className="block text-sm font-medium mb-2 text-gray-300">
</label> Storage ({formatStorageUnit(paymentInfo.unit)})
<input </label>
type="number" <input
min="1" type="number"
value={quantity} min="1"
onChange={(e) => setQuantity(parseInt(e.target.value) || 1)} step="1"
className="w-full px-3 py-2 bg-neutral-800 border border-neutral-600 rounded" 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> </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 <Button
onClick={requestPayment} onClick={requestPayment}
disabled={loading || units <= 0 || quantity <= 0} disabled={loading || gigabytes <= 0 || months <= 0}
className="w-full mb-4" className="btn-primary w-full mb-4"
> >
{loading ? "Processing..." : "Generate Payment Request"} {loading ? "Processing..." : "Generate Payment Request"}
</Button> </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 && ( {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="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} {paymentRequest}
</div> </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 Copy this invoice to your Lightning wallet to complete payment
</div> </div>
</div> </div>

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

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

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

@ -1,10 +1,16 @@
import { EventPublisher, Nip7Signer } from "@snort/system"; import { EventPublisher, Nip7Signer } from "@snort/system";
import { useMemo } from "react";
import useLogin from "./login"; import useLogin from "./login";
export default function usePublisher() { export default function usePublisher() {
const login = useLogin(); const login = useLogin();
switch (login?.type) {
case "nip7": return useMemo(() => {
return new EventPublisher(new Nip7Signer(), login.pubkey); 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, html,
body { 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 { 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(); this.notifyChange();
} }
logout() {
this.#session = undefined;
this.notifyChange();
}
takeSnapshot(): LoginSession | undefined { takeSnapshot(): LoginSession | undefined {
return this.#session ? { ...this.#session } : 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 { export interface PaymentInfo {
unit: string; unit: string;
interval: string; interval: {
[key: string]: number;
};
cost: { cost: {
currency: string; currency: string;
amount: number; 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"); const [viewType, setViewType] = useState<"grid" | "list">("grid");
if (files.length === 0) { if (files.length === 0) {
return <b>No Files</b>; return <b className="text-gray-400">No Files</b>;
} }
function renderInner(f: FileInfo) { function renderInner(f: FileInfo) {
@ -77,19 +77,21 @@ export default function FileList({
for (let x = start; x < n; x++) { for (let x = start; x < n; x++) {
ret.push( ret.push(
<div <button
key={x}
onClick={() => onPage?.(x)} onClick={() => onPage?.(x)}
className={classNames( 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-l-md": x === start,
"rounded-r-md": x + 1 === n, "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} {x + 1}
</div>, </button>,
); );
} }
@ -98,49 +100,48 @@ export default function FileList({
function showGrid() { function showGrid() {
return ( 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) => { {files.map((a) => {
const info = getInfo(a); const info = getInfo(a);
return ( return (
<div <div
key={info.id} 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 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> <div className="font-medium mb-1">
{(info.name?.length ?? 0) === 0 {(info.name?.length ?? 0) === 0
? "Untitled" ? "Untitled"
: info.name!.length > 20 : info.name!.length > 20
? `${info.name?.substring(0, 10)}...${info.name?.substring(info.name.length - 10)}` ? `${info.name?.substring(0, 10)}...${info.name?.substring(info.name.length - 10)}`
: info.name} : info.name}
</div> </div>
<div> <div className="text-gray-300 mb-1">
{info.size && !isNaN(info.size) {info.size && !isNaN(info.size)
? FormatBytes(info.size, 2) ? FormatBytes(info.size, 2)
: ""} : ""}
</div> </div>
<div>{info.type}</div> <div className="text-gray-300 mb-2">{info.type}</div>
<div className="flex gap-2"> <div className="flex gap-2">
<a href={info.url} className="underline" target="_blank"> <a href={info.url} className="bg-blue-600 hover:bg-blue-700 px-2 py-1 rounded text-xs" target="_blank">
Link View
</a> </a>
{onDelete && ( {onDelete && (
<a <button
href="#"
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
onDelete?.(info.id); onDelete?.(info.id);
}} }}
className="underline" className="bg-red-600 hover:bg-red-700 px-2 py-1 rounded text-xs"
> >
Delete Delete
</a> </button>
)} )}
</div> </div>
{info.uploader && {info.uploader &&
info.uploader.map((a) => ( info.uploader.map((a, idx) => (
<Profile link={NostrLink.publicKey(a)} size={20} /> <Profile key={idx} link={NostrLink.publicKey(a)} size={20} />
))} ))}
</div> </div>
{renderInner(info)} {renderInner(info)}
@ -153,106 +154,123 @@ export default function FileList({
function showList() { function showList() {
return ( return (
<table className="table-auto text-sm"> <div className="overflow-x-auto">
<thead> <table className="min-w-full bg-white border border-gray-200 rounded-lg">
<tr> <thead className="bg-gray-50">
<th className="border border-neutral-400 bg-neutral-500 py-1 px-2"> <tr>
Preview <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-b border-gray-200">
</th> Preview
<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
</th> </th>
)} <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-b border-gray-200">
<th className="border border-neutral-400 bg-neutral-500 py-1 px-2"> Name
Actions </th>
</th> <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-b border-gray-200">
</tr> Type
</thead> </th>
<tbody> <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-b border-gray-200">
{files.map((a) => { Size
const info = getInfo(a); </th>
return ( {files.some((i) => "uploader" in i) && (
<tr key={info.id}> <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-b border-gray-200">
<td className="border border-neutral-500 py-1 px-2 w-8 h-8"> Uploader
{renderInner(info)} </th>
</td> )}
<td className="border border-neutral-500 py-1 px-2 break-all"> <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-b border-gray-200">
{(info.name?.length ?? 0) === 0 ? "<Untitled>" : info.name} Actions
</td> </th>
<td className="border border-neutral-500 py-1 px-2 break-all"> </tr>
{info.type} </thead>
</td> <tbody className="divide-y divide-gray-200">
<td className="border border-neutral-500 py-1 px-2"> {files.map((a) => {
{info.size && !isNaN(info.size) const info = getInfo(a);
? FormatBytes(info.size, 2) return (
: ""} <tr key={info.id} className="hover:bg-gray-50">
</td> <td className="px-4 py-3 w-16">
{info.uploader && ( <div className="w-12 h-12 bg-gray-100 rounded overflow-hidden">
<td className="border border-neutral-500 py-1 px-2"> {renderInner(info)}
{info.uploader.map((a) => ( </div>
<Profile link={NostrLink.publicKey(a)} size={20} />
))}
</td> </td>
)} <td className="px-4 py-3 text-sm text-gray-900 break-all max-w-xs">
<td className="border border-neutral-500 py-1 px-2"> {(info.name?.length ?? 0) === 0 ? "<Untitled>" : info.name}
<div className="flex gap-2"> </td>
<a href={info.url} className="underline" target="_blank"> <td className="px-4 py-3 text-sm text-gray-500">
Link {info.type}
</a> </td>
{onDelete && ( <td className="px-4 py-3 text-sm text-gray-500">
<a {info.size && !isNaN(info.size)
href="#" ? FormatBytes(info.size, 2)
onClick={(e) => { : ""}
e.preventDefault(); </td>
onDelete?.(info.id); {info.uploader && (
}} <td className="px-4 py-3">
className="underline" {info.uploader.map((a, idx) => (
> <Profile key={idx} link={NostrLink.publicKey(a)} size={20} />
Delete ))}
</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> </a>
)} {onDelete && (
</div> <button
</td> onClick={(e) => {
</tr> e.preventDefault();
); onDelete?.(info.id);
})} }}
</tbody> className="bg-red-600 hover:bg-red-700 text-white px-3 py-1 rounded text-xs"
</table> >
Delete
</button>
)}
</div>
</td>
</tr>
);
})}
</tbody>
</table>
</div>
); );
} }
return ( return (
<> <div className="space-y-4">
<div className="flex"> <div className="flex justify-between items-center">
<div <div className="flex rounded-lg border border-gray-300 overflow-hidden">
onClick={() => setViewType("grid")} <button
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" : ""}`} onClick={() => setViewType("grid")}
> className={`px-4 py-2 text-sm font-medium transition-colors ${
Grid viewType === "grid"
</div> ? "bg-blue-600 text-white"
<div : "bg-white text-gray-700 hover:bg-gray-50"
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" : ""}`} >
> Grid
List </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>
</div> </div>
{viewType === "grid" ? showGrid() : showList()} {viewType === "grid" ? showGrid() : showList()}
{pages !== undefined && (
<> {pages !== undefined && pages > 1 && (
<div className="flex flex-wrap">{pageButtons(page ?? 0, pages)}</div> <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 { Nip7Signer, NostrLink } from "@snort/system";
import { Link, useLocation } from "react-router-dom";
import { useEffect, useState } from "react";
import Button from "../components/button"; import Button from "../components/button";
import Profile from "../components/profile"; import Profile from "../components/profile";
import useLogin from "../hooks/login"; import useLogin from "../hooks/login";
import usePublisher from "../hooks/publisher";
import { Login } from "../login"; import { Login } from "../login";
import { AdminSelf, Route96 } from "../upload/admin";
export default function Header() { export default function Header() {
const login = useLogin(); 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() { async function tryLogin() {
try { try {
@ -19,14 +29,69 @@ export default function Header() {
//ignore //ignore
} }
} }
useEffect(() => {
if (pub && !self) {
const r96 = new Route96(url, pub);
r96.getSelf().then((v) => setSelf(v.data)).catch(() => {});
}
}, [pub, self, url]);
return ( return (
<div className="flex justify-between items-center"> <header className="border-b border-gray-700 bg-gray-800">
<div className="text-xl font-bold">route96</div> <div className="flex justify-between items-center py-4">
{login ? ( <div className="flex items-center space-x-8">
<Profile link={NostrLink.publicKey(login.pubkey)} /> <Link to="/">
) : ( <div className="text-2xl font-bold text-gray-100 hover:text-blue-400 transition-colors">
<Button onClick={tryLogin}>Login</Button> route96
)} </div>
</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 Button from "../components/button";
import FileList from "./files"; import FileList from "./files";
import ReportList from "./reports";
import PaymentFlow from "../components/payment"; import PaymentFlow from "../components/payment";
import { openFile } from "../upload"; import { openFile } from "../upload";
import { Blossom } from "../upload/blossom"; import { Blossom } from "../upload/blossom";
import useLogin from "../hooks/login"; import useLogin from "../hooks/login";
import usePublisher from "../hooks/publisher"; import usePublisher from "../hooks/publisher";
import { Nip96, Nip96FileList } from "../upload/nip96"; import { Nip96, Nip96FileList } from "../upload/nip96";
import { AdminSelf, Route96, Report } from "../upload/admin"; import { AdminSelf, Route96 } from "../upload/admin";
import { FormatBytes } from "../const"; import { FormatBytes } from "../const";
export default function Upload() { export default function Upload() {
@ -19,13 +18,7 @@ export default function Upload() {
const [error, setError] = useState<string>(); const [error, setError] = useState<string>();
const [results, setResults] = useState<Array<object>>([]); const [results, setResults] = useState<Array<object>>([]);
const [listedFiles, setListedFiles] = useState<Nip96FileList>(); 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 [listedPage, setListedPage] = useState(0);
const [adminListedPage, setAdminListedPage] = useState(0);
const [mimeFilter, setMimeFilter] = useState<string>();
const [showPaymentFlow, setShowPaymentFlow] = useState(false); const [showPaymentFlow, setShowPaymentFlow] = useState(false);
const login = useLogin(); 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; if (!pub) return;
try { try {
setError(undefined); setError(undefined);
@ -79,62 +72,8 @@ export default function Upload() {
setError("List files failed"); 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) { async function deleteFile(id: string) {
if (!pub) return; if (!pub) return;
@ -154,210 +93,217 @@ export default function Upload() {
} }
useEffect(() => { useEffect(() => {
if (pub) { if (pub && !listedFiles) {
listUploads(listedPage); 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(() => { useEffect(() => {
if (pub && !self) { if (pub && !self) {
const r96 = new Route96(url, pub); const r96 = new Route96(url, pub);
r96.getSelf().then((v) => setSelf(v.data)); 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 ( return (
<div className="flex flex-col gap-2 bg-neutral-800 p-8 rounded-xl w-full"> <div className="max-w-4xl mx-auto space-y-8">
<h1 className="text-lg font-bold"> <div className="text-center">
Welcome to {window.location.hostname} <h1 className="text-3xl font-bold text-gray-100 mb-2">
</h1> Welcome to {window.location.hostname}
<div className="text-neutral-400 uppercase text-xs font-medium"> </h1>
Upload Method <p className="text-lg text-gray-400">Upload and manage your files securely</p>
</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> </div>
<div {error && (
className="flex gap-2 cursor-pointer" <div className="bg-red-900/20 border border-red-800 text-red-400 px-4 py-3 rounded-lg">
onClick={() => setNoCompress((s) => !s)} {error}
>
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>
</div> </div>
)} )}
{self && ( <div className="card">
<div className="bg-neutral-700 p-4 rounded-lg"> <h2 className="text-xl font-semibold mb-6">Upload Settings</h2>
<h3 className="text-lg font-bold mb-2">Storage Quota</h3>
<div className="space-y-2"> <div className="space-y-6">
{self.free_quota && ( <div>
<div className="text-sm"> <label className="block text-sm font-medium text-gray-300 mb-3">
Free Quota: {FormatBytes(self.free_quota)} Upload Method
</div> </label>
)} <div className="flex gap-6">
{self.quota && ( <label className="flex items-center cursor-pointer">
<div className="text-sm"> <input
Paid Quota: {FormatBytes(self.quota)} type="radio"
</div> checked={type === "blossom"}
)} onChange={() => setType("blossom")}
{self.total_available_quota && ( className="mr-2"
<div className="text-sm font-medium"> />
Total Available: {FormatBytes(self.total_available_quota)} <span className="text-sm font-medium text-gray-300">Blossom</span>
</div> </label>
)} <label className="flex items-center cursor-pointer">
{self.total_available_quota && ( <input
<div className="text-sm"> type="radio"
Remaining: {FormatBytes(Math.max(0, self.total_available_quota - self.total_size))} checked={type === "nip96"}
</div> onChange={() => setType("nip96")}
)} className="mr-2"
{self.paid_until && ( />
<div className="text-sm text-neutral-300"> <span className="text-sm font-medium text-gray-300">NIP-96</span>
Paid Until: {new Date(self.paid_until * 1000).toLocaleDateString()} </label>
</div> </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> </div>
<Button
onClick={() => setShowPaymentFlow(!showPaymentFlow)}
className="mt-3 w-full"
>
{showPaymentFlow ? "Hide" : "Show"} Top Up Options
</Button>
</div> </div>
)} )}
{showPaymentFlow && pub && ( {showPaymentFlow && pub && (
<PaymentFlow <div className="card">
route96={new Route96(url, pub)} <PaymentFlow
onPaymentRequested={(pr) => { route96={new Route96(url, pub)}
console.log("Payment requested:", pr); onPaymentRequested={(pr) => {
// You could add more logic here, like showing a QR code console.log("Payment requested:", pr);
}} }}
/> />
</div>
)} )}
{listedFiles && ( <div className="card">
<FileList <div className="flex justify-between items-center mb-6">
files={listedFiles.files} <h2 className="text-xl font-semibold">Your Files</h2>
pages={Math.ceil(listedFiles.total / listedFiles.count)} {!listedFiles && (
page={listedFiles.page} <Button onClick={() => listUploads(0)} className="btn-primary">
onPage={(x) => setListedPage(x)} Load Files
onDelete={async (x) => { </Button>
await deleteFile(x); )}
await listUploads(listedPage); </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 && ( {results.length > 0 && (
<> <div className="card">
<hr /> <h3 className="text-lg font-semibold mb-4">Upload Results</h3>
<h3>Admin File List:</h3> <pre className="text-xs bg-gray-100 p-4 rounded overflow-auto">
<Button onClick={() => listAllUploads(0)}>List All Uploads</Button> {JSON.stringify(results, undefined, 2)}
<Button onClick={() => listReports(0)}>List Reports</Button> </pre>
<div> </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
}}
/>
</>
)}
</>
)} )}
{error && <b className="text-red-500">{error}</b>}
<pre className="text-xs font-monospace overflow-wrap">
{JSON.stringify(results, undefined, 2)}
</pre>
</div> </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 languageName: node
linkType: hard 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": "@types/json-schema@npm:^7.0.15":
version: 7.0.15 version: 7.0.15
resolution: "@types/json-schema@npm:7.0.15" resolution: "@types/json-schema@npm:7.0.15"
@ -1016,6 +1023,27 @@ __metadata:
languageName: node languageName: node
linkType: hard 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": "@types/react@npm:*, @types/react@npm:^18.3.3":
version: 18.3.8 version: 18.3.8
resolution: "@types/react@npm:18.3.8" resolution: "@types/react@npm:18.3.8"
@ -1522,6 +1550,13 @@ __metadata:
languageName: node languageName: node
linkType: hard 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": "cross-spawn@npm:^7.0.0, cross-spawn@npm:^7.0.2":
version: 7.0.3 version: 7.0.3
resolution: "cross-spawn@npm:7.0.3" resolution: "cross-spawn@npm:7.0.3"
@ -3187,6 +3222,34 @@ __metadata:
languageName: node languageName: node
linkType: hard 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": "react@npm:^18.2.0, react@npm:^18.3.1":
version: 18.3.1 version: 18.3.1
resolution: "react@npm:18.3.1" resolution: "react@npm:18.3.1"
@ -3367,6 +3430,13 @@ __metadata:
languageName: node languageName: node
linkType: hard 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": "shebang-command@npm:^2.0.0":
version: 2.0.0 version: 2.0.0
resolution: "shebang-command@npm:2.0.0" resolution: "shebang-command@npm:2.0.0"
@ -3726,6 +3796,7 @@ __metadata:
"@snort/system-react": "npm:^1.5.1" "@snort/system-react": "npm:^1.5.1"
"@types/react": "npm:^18.3.3" "@types/react": "npm:^18.3.3"
"@types/react-dom": "npm:^18.3.0" "@types/react-dom": "npm:^18.3.0"
"@types/react-router-dom": "npm:^5.3.3"
"@vitejs/plugin-react": "npm:^4.3.1" "@vitejs/plugin-react": "npm:^4.3.1"
autoprefixer: "npm:^10.4.20" autoprefixer: "npm:^10.4.20"
classnames: "npm:^2.5.1" classnames: "npm:^2.5.1"
@ -3737,6 +3808,7 @@ __metadata:
prettier: "npm:^3.3.3" prettier: "npm:^3.3.3"
react: "npm:^18.3.1" react: "npm:^18.3.1"
react-dom: "npm:^18.3.1" react-dom: "npm:^18.3.1"
react-router-dom: "npm:^7.6.2"
tailwindcss: "npm:^3.4.13" tailwindcss: "npm:^3.4.13"
typescript: "npm:^5.5.3" typescript: "npm:^5.5.3"
typescript-eslint: "npm:^8.0.1" typescript-eslint: "npm:^8.0.1"