fix: storage calculation

refactor: improve UI

src/db.rs

@@ -165,6 +165,13 @@ impl Database {
             .await
     }
 
+    pub async fn get_user_by_id(&self, user_id: u64) -> Result<User, Error> {
+        sqlx::query_as("select * from users where id = ?")
+            .bind(user_id)
+            .fetch_one(&self.pool)
+            .await
+    }
+
     pub async fn get_user_stats(&self, id: u64) -> Result<UserStats, Error> {
         sqlx::query_as(
             "select cast(count(user_uploads.file) as unsigned integer) as file_count, \
@@ -347,14 +354,49 @@ impl Database {
             .execute(&mut *tx)
             .await?;
 
-        // TODO: check space is not downgraded
+        // Calculate time extension based on fractional quota value
+        // If user upgrades from 5GB to 10GB, their remaining time gets halved
+        // If user pays for 1GB on a 5GB plan, they get 1/5 of the normal time
+        let current_user = self.get_user_by_id(payment.user_id).await?;
         
-        sqlx::query("update users set paid_until = TIMESTAMPADD(DAY, ?, IFNULL(paid_until, current_timestamp)), paid_size = ? where id = ?")
+        if let Some(paid_until) = current_user.paid_until {
+            if paid_until > chrono::Utc::now() {
+                // User has active subscription - calculate fractional time extension
+                let time_fraction = if current_user.paid_size > 0 {
+                    payment.size_value as f64 / current_user.paid_size as f64
+                } else {
+                    1.0 // If no existing quota, treat as 100%
+                };
+                
+                let adjusted_days = (payment.days_value as f64 * time_fraction) as u64;
+                
+                // Extend subscription time and upgrade quota if larger
+                let new_quota_size = std::cmp::max(current_user.paid_size, payment.size_value);
+                
+                sqlx::query("update users set paid_until = TIMESTAMPADD(DAY, ?, paid_until), paid_size = ? where id = ?")
+                    .bind(adjusted_days)
+                    .bind(new_quota_size)
+                    .bind(payment.user_id)
+                    .execute(&mut *tx)
+                    .await?;
+            } else {
+                // Expired subscription - set new quota and time
+                sqlx::query("update users set paid_until = TIMESTAMPADD(DAY, ?, current_timestamp), paid_size = ? where id = ?")
                     .bind(payment.days_value)
                     .bind(payment.size_value)
                     .bind(payment.user_id)
                     .execute(&mut *tx)
                     .await?;
+            }
+        } else {
+            // No existing subscription - set new quota
+            sqlx::query("update users set paid_until = TIMESTAMPADD(DAY, ?, current_timestamp), paid_size = ? where id = ?")
+                .bind(payment.days_value)
+                .bind(payment.size_value)
+                .bind(payment.user_id)
+                .execute(&mut *tx)
+                .await?;
+        }
 
         tx.commit().await?;
 

src/payments.rs

@@ -30,7 +30,7 @@ pub enum PaymentUnit {
 impl PaymentUnit {
     /// Get the total size from a number of units
     pub fn to_size(&self, units: f32) -> u64 {
-        (1000f32 * 1000f32 * 1000f32 * units) as u64
+        (1024f32 * 1024f32 * 1024f32 * units) as u64
     }
 }
 

src/routes/blossom.rs

@@ -251,12 +251,13 @@ async fn mirror(
 
     process_stream(
         StreamReader::new(rsp.bytes_stream().map(|result| {
-            result.map_err(|err| std::io::Error::new(std::io::ErrorKind::Other, err))
+            result.map_err(std::io::Error::other)
         })),
         &mime_type,
         &None,
         &pubkey,
         false,
+        0, // No size info for mirror
         fs,
         db,
         settings,
@@ -345,7 +346,7 @@ async fn process_upload(
             None
         }
     });
-    let size = auth.event.tags.iter().find_map(|t| {
+    let size_tag = auth.event.tags.iter().find_map(|t| {
         if t.kind() == TagKind::Size {
             t.content().and_then(|v| v.parse::<u64>().ok())
         } else {
@@ -353,15 +354,10 @@ async fn process_upload(
         }
     });
     
-    let size = match size {
+    let size = size_tag.or(auth.x_content_length).unwrap_or(0);
-        Some(z) => {
+    if size > 0 && size > settings.max_upload_bytes {
-            if z > settings.max_upload_bytes {
         return BlossomResponse::error("File too large");
     }
-            z
-        }
-        None => return BlossomResponse::error("Size tag is required"),
-    };
 
     // check whitelist
     if let Some(e) = check_whitelist(&auth, settings) {
@@ -378,6 +374,7 @@ async fn process_upload(
             .unwrap_or(104857600); // Default to 100MB
         let pubkey_vec = auth.event.pubkey.to_bytes().to_vec();
 
+        if size > 0 {
             match db
                 .check_user_quota(&pubkey_vec, size, free_quota)
                 .await
@@ -387,6 +384,7 @@ async fn process_upload(
                 Ok(true) => {} // Quota check passed
             }
         }
+    }
 
     process_stream(
         data.open(ByteUnit::Byte(settings.max_upload_bytes)),
@@ -396,6 +394,7 @@ async fn process_upload(
         &name,
         &auth.event.pubkey.to_bytes().to_vec(),
         compress,
+        size,
         fs,
         db,
         settings,
@@ -409,6 +408,7 @@ async fn process_stream<'p, S>(
     name: &Option<&str>,
     pubkey: &Vec<u8>,
     compress: bool,
+    size: u64,
     fs: &State<FileStore>,
     db: &State<Database>,
     settings: &State<Settings>,
@@ -441,6 +441,34 @@ where
             return BlossomResponse::error(format!("Failed to save file (db): {}", e));
         }
     };
+
+    // Post-upload quota check if we didn't have size information before upload
+    #[cfg(feature = "payments")]
+    if size == 0 {
+        let free_quota = settings
+            .payments
+            .as_ref()
+            .and_then(|p| p.free_quota_bytes)
+            .unwrap_or(104857600); // Default to 100MB
+        
+        match db.check_user_quota(pubkey, upload.size, free_quota).await {
+            Ok(false) => {
+                // Clean up the uploaded file if quota exceeded
+                if let Err(e) = tokio::fs::remove_file(fs.get(&upload.id)).await {
+                    log::warn!("Failed to cleanup quota-exceeding file: {}", e);
+                }
+                return BlossomResponse::error("Upload would exceed quota");
+            }
+            Err(_) => {
+                // Clean up on quota check error
+                if let Err(e) = tokio::fs::remove_file(fs.get(&upload.id)).await {
+                    log::warn!("Failed to cleanup file after quota check error: {}", e);
+                }
+                return BlossomResponse::error("Failed to check quota");
+            }
+            Ok(true) => {} // Quota check passed
+        }
+    }
     if let Err(e) = db.add_file(&upload, user_id).await {
         error!("{}", e);
         BlossomResponse::error(format!("Error saving file (db): {}", e))

src/routes/nip96.rs

@@ -174,12 +174,8 @@ async fn upload(
     settings: &State<Settings>,
     form: Form<Nip96Form<'_>>,
 ) -> Nip96Response {
-    if let Some(size) = auth.content_length {
+    let upload_size = auth.content_length.or(Some(form.size)).unwrap_or(0);
-        if size > settings.max_upload_bytes {
+    if upload_size > 0 && upload_size > settings.max_upload_bytes {
-            return Nip96Response::error("File too large");
-        }
-    }
-    if form.size > settings.max_upload_bytes {
         return Nip96Response::error("File too large");
     }
     let file = match form.file.open().await {
@@ -193,7 +189,8 @@ async fn upload(
     }
 
     // account for upload speeds as slow as 1MB/s (8 Mbps)
-    let mbs = form.size / 1.megabytes().as_u64();
+    let size_for_timing = if upload_size > 0 { upload_size } else { form.size };
+    let mbs = size_for_timing / 1.megabytes().as_u64();
     let max_time = 60.max(mbs);
     if auth.event.created_at < Timestamp::now().sub(Duration::from_secs(max_time)) {
         return Nip96Response::error("Auth event timestamp out of range");
@@ -215,18 +212,30 @@ async fn upload(
             .and_then(|p| p.free_quota_bytes)
             .unwrap_or(104857600); // Default to 100MB
         
-        match db.check_user_quota(&pubkey_vec, form.size, free_quota).await {
+        if upload_size > 0 {
+            match db.check_user_quota(&pubkey_vec, upload_size, free_quota).await {
                 Ok(false) => return Nip96Response::error("Upload would exceed quota"),
                 Err(_) => return Nip96Response::error("Failed to check quota"),
                 Ok(true) => {} // Quota check passed
             }
         }
+    }
     let upload = match fs
         .put(file, content_type, !form.no_transform.unwrap_or(false))
         .await
     {
         Ok(FileSystemResult::NewFile(blob)) => {
             let mut upload: FileUpload = (&blob).into();
+            
+            // Validate file size after upload if no pre-upload size was available
+            if upload_size == 0 && upload.size > settings.max_upload_bytes {
+                // Clean up the uploaded file
+                if let Err(e) = tokio::fs::remove_file(fs.get(&upload.id)).await {
+                    log::warn!("Failed to cleanup oversized file: {}", e);
+                }
+                return Nip96Response::error("File too large");
+            }
+            
             upload.name = form.caption.map(|cap| cap.to_string());
             upload.alt = form.alt.as_ref().map(|s| s.to_string());
             upload
@@ -236,7 +245,7 @@ async fn upload(
             _ => return Nip96Response::error("File not found"),
         },
         Err(e) => {
-            error!("{}", e.to_string());
+            error!("{}", e);
             return Nip96Response::error(&format!("Could not save file: {}", e));
         }
     };
@@ -246,8 +255,34 @@ async fn upload(
         Err(e) => return Nip96Response::error(&format!("Could not save user: {}", e)),
     };
 
+    // Post-upload quota check if we didn't have size information before upload
+    #[cfg(feature = "payments")]
+    if upload_size == 0 {
+        let free_quota = settings.payments.as_ref()
+            .and_then(|p| p.free_quota_bytes)
+            .unwrap_or(104857600); // Default to 100MB
+        
+        match db.check_user_quota(&pubkey_vec, upload.size, free_quota).await {
+            Ok(false) => {
+                // Clean up the uploaded file if quota exceeded
+                if let Err(e) = tokio::fs::remove_file(fs.get(&upload.id)).await {
+                    log::warn!("Failed to cleanup quota-exceeding file: {}", e);
+                }
+                return Nip96Response::error("Upload would exceed quota");
+            }
+            Err(_) => {
+                // Clean up on quota check error
+                if let Err(e) = tokio::fs::remove_file(fs.get(&upload.id)).await {
+                    log::warn!("Failed to cleanup file after quota check error: {}", e);
+                }
+                return Nip96Response::error("Failed to check quota");
+            }
+            Ok(true) => {} // Quota check passed
+        }
+    }
+
     if let Err(e) = db.add_file(&upload, user_id).await {
-        error!("{}", e.to_string());
+        error!("{}", e);
         return Nip96Response::error(&format!("Could not save file (db): {}", e));
     }
     Nip96Response::UploadResult(Json(Nip96UploadResult::from_upload(settings, &upload)))

ui_src/src/components/payment.tsx

@@ -1,13 +1,23 @@
 import { useState, useEffect } from "react";
 import Button from "./button";
-import { PaymentInfo, PaymentRequest, Route96 } from "../upload/admin";
+import {
+  PaymentInfo,
+  PaymentRequest,
+  Route96,
+  AdminSelf,
+} from "../upload/admin";
 
 interface PaymentFlowProps {
   route96: Route96;
   onPaymentRequested?: (paymentRequest: string) => void;
+  userInfo?: AdminSelf;
 }
 
-export default function PaymentFlow({ route96, onPaymentRequested }: PaymentFlowProps) {
+export default function PaymentFlow({
+  route96,
+  onPaymentRequested,
+  userInfo,
+}: PaymentFlowProps) {
   const [paymentInfo, setPaymentInfo] = useState<PaymentInfo | null>(null);
   const [gigabytes, setGigabytes] = useState<number>(1);
   const [months, setMonths] = useState<number>(1);
@@ -21,6 +31,17 @@ export default function PaymentFlow({ route96, onPaymentRequested }: PaymentFlow
     }
   }, [paymentInfo]);
 
+  // Set default gigabytes to user's current quota
+  useEffect(() => {
+    if (userInfo?.quota && userInfo.quota > 0) {
+      // Convert from bytes to GB using 1024^3 (MiB)
+      const currentQuotaGB = Math.round(userInfo.quota / (1024 * 1024 * 1024));
+      if (currentQuotaGB > 0) {
+        setGigabytes(currentQuotaGB);
+      }
+    }
+  }, [userInfo]);
+
   async function loadPaymentInfo() {
     try {
       const info = await route96.getPaymentInfo();
@@ -68,8 +89,11 @@ export default function PaymentFlow({ route96, onPaymentRequested }: PaymentFlow
   const totalCostSats = Math.round(totalCostBTC * 100000000); // Convert BTC to sats
 
   function formatStorageUnit(unit: string): string {
-    if (unit.toLowerCase().includes('gbspace') || unit.toLowerCase().includes('gb')) {
+    if (
-      return 'GB';
+      unit.toLowerCase().includes("gbspace") ||
+      unit.toLowerCase().includes("gb")
+    ) {
+      return "GB";
     }
     return unit;
   }
@@ -81,7 +105,8 @@ export default function PaymentFlow({ route96, onPaymentRequested }: PaymentFlow
       <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' : ''}
+            {gigabytes} {formatStorageUnit(paymentInfo.unit)} for {months} month
+            {months > 1 ? "s" : ""}
           </div>
           <div className="text-lg text-blue-400 font-semibold">
             {totalCostSats.toLocaleString()} sats
@@ -119,7 +144,6 @@ export default function PaymentFlow({ route96, onPaymentRequested }: PaymentFlow
         </div>
       </div>
 
-
       <Button
         onClick={requestPayment}
         disabled={loading || gigabytes <= 0 || months <= 0}

ui_src/src/components/profile.tsx

@@ -16,16 +16,23 @@ export default function Profile({
   const profile = useUserProfile(linkId);
   const s = size ?? 40;
   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
-        src={profile?.picture || '/default-avatar.svg'}
+        src={
-        alt={profile?.display_name || profile?.name || 'User avatar'}
+          profile?.picture ||
+          `https://nostr.api.v0l.io/api/v1/avatar/cyberpunks/${link.id}`
+        }
+        alt={profile?.display_name || profile?.name || "User avatar"}
         width={s}
         height={s}
-        className="rounded-full object-fit object-center"
+        className="rounded-full object-fit owbject-center"
         onError={(e) => {
           const target = e.target as HTMLImageElement;
-          target.src = '/default-avatar.svg';
+          target.src = `https://nostr.api.v0l.io/api/v1/avatar/cyberpunks/${link.id}`;
         }}
       />
       {(showName ?? true) && (

ui_src/src/upload/blossom.ts

@@ -18,7 +18,17 @@ export class Blossom {
     this.url = new URL(this.url).toString();
   }
 
-  async upload(file: File) {
+  async #handleError(rsp: Response) {
+    const reason = rsp.headers.get("X-Reason") || rsp.headers.get("x-reason");
+    if (reason) {
+      throw new Error(reason);
+    } else {
+      const text = await rsp.text();
+      throw new Error(text);
+    }
+  }
+
+  async upload(file: File): Promise<BlobDescriptor> {
     const hash = await window.crypto.subtle.digest(
       "SHA-256",
       await file.arrayBuffer(),
@@ -29,12 +39,12 @@ export class Blossom {
     if (rsp.ok) {
       return (await rsp.json()) as BlobDescriptor;
     } else {
-      const text = await rsp.text();
+      await this.#handleError(rsp);
-      throw new Error(text);
+      throw new Error("Should not reach here");
     }
   }
 
-  async media(file: File) {
+  async media(file: File): Promise<BlobDescriptor> {
     const hash = await window.crypto.subtle.digest(
       "SHA-256",
       await file.arrayBuffer(),
@@ -45,12 +55,12 @@ export class Blossom {
     if (rsp.ok) {
       return (await rsp.json()) as BlobDescriptor;
     } else {
-      const text = await rsp.text();
+      await this.#handleError(rsp);
-      throw new Error(text);
+      throw new Error("Should not reach here");
     }
   }
 
-  async mirror(url: string) {
+  async mirror(url: string): Promise<BlobDescriptor> {
     const rsp = await this.#req(
       "mirror",
       "PUT",
@@ -64,28 +74,28 @@ export class Blossom {
     if (rsp.ok) {
       return (await rsp.json()) as BlobDescriptor;
     } else {
-      const text = await rsp.text();
+      await this.#handleError(rsp);
-      throw new Error(text);
+      throw new Error("Should not reach here");
     }
   }
 
-  async list(pk: string) {
+  async list(pk: string): Promise<Array<BlobDescriptor>> {
     const rsp = await this.#req(`list/${pk}`, "GET", "list");
     if (rsp.ok) {
       return (await rsp.json()) as Array<BlobDescriptor>;
     } else {
-      const text = await rsp.text();
+      await this.#handleError(rsp);
-      throw new Error(text);
+      throw new Error("Should not reach here");
     }
   }
 
-  async delete(id: string) {
+  async delete(id: string): Promise<void> {
     const tags = [["x", id]];
 
     const rsp = await this.#req(id, "DELETE", "delete", undefined, tags);
     if (!rsp.ok) {
-      const text = await rsp.text();
+      await this.#handleError(rsp);
-      throw new Error(text);
+      throw new Error("Should not reach here");
     }
   }
 

ui_src/src/views/admin.tsx

@@ -26,7 +26,8 @@ export default function Admin() {
   const url =
     import.meta.env.VITE_API_URL || `${location.protocol}//${location.host}`;
 
-  const listAllUploads = useCallback(async (n: number) => {
+  const listAllUploads = useCallback(
+    async (n: number) => {
       if (!pub) return;
       try {
         setError(undefined);
@@ -42,9 +43,12 @@ export default function Admin() {
           setError("List files failed");
         }
       }
-  }, [pub, url, mimeFilter]);
+    },
+    [pub, url, mimeFilter],
+  );
 
-  const listReports = useCallback(async (n: number) => {
+  const listReports = useCallback(
+    async (n: number) => {
       if (!pub) return;
       try {
         setError(undefined);
@@ -61,7 +65,9 @@ export default function Admin() {
           setError("List reports failed");
         }
       }
-  }, [pub, url]);
+    },
+    [pub, url],
+  );
 
   async function acknowledgeReport(reportId: number) {
     if (!pub) return;
@@ -72,7 +78,9 @@ export default function Admin() {
       await listReports(reportPage);
     } catch (e) {
       if (e instanceof Error) {
-        setError(e.message.length > 0 ? e.message : "Acknowledge report failed");
+        setError(
+          e.message.length > 0 ? e.message : "Acknowledge report failed",
+        );
       } else if (typeof e === "string") {
         setError(e);
       } else {
@@ -101,10 +109,13 @@ export default function Admin() {
   useEffect(() => {
     if (pub && !self) {
       const r96 = new Route96(url, pub);
-      r96.getSelf().then((v) => {
+      r96
+        .getSelf()
+        .then((v) => {
           setSelf(v.data);
           setLoading(false);
-      }).catch(() => {
+        })
+        .catch(() => {
           setLoading(false);
         });
     }
@@ -134,7 +145,9 @@ export default function Admin() {
     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>
+        <p className="text-gray-400">
+          Please log in to access the admin panel.
+        </p>
       </div>
     );
   }
@@ -167,7 +180,7 @@ export default function Admin() {
               <select
                 className="input w-full"
                 value={mimeFilter || ""}
-                onChange={e => setMimeFilter(e.target.value || undefined)}
+                onChange={(e) => setMimeFilter(e.target.value || undefined)}
               >
                 <option value="">All Files</option>
                 <option value="image/webp">WebP Images</option>
@@ -192,10 +205,7 @@ export default function Admin() {
         <div className="card">
           <h2 className="text-xl font-semibold mb-6">Reports Management</h2>
 
-          <Button 
+          <Button onClick={() => listReports(0)} className="btn-primary w-full">
-            onClick={() => listReports(0)}
-            className="btn-primary w-full"
-          >
             Load Reports
           </Button>
         </div>

ui_src/src/views/files.tsx

@@ -86,7 +86,8 @@ export default function FileList({
               "rounded-l-md": x === start,
               "rounded-r-md": x + 1 === n,
               "bg-blue-600 text-white border-blue-600": page === x,
-              "bg-white text-gray-700 border-gray-300 hover:bg-gray-50": page !== x,
+              "bg-white text-gray-700 border-gray-300 hover:bg-gray-50":
+                page !== x,
             },
           )}
         >
@@ -124,7 +125,11 @@ export default function FileList({
                 </div>
                 <div className="text-gray-300 mb-2">{info.type}</div>
                 <div className="flex gap-2">
-                  <a href={info.url} className="bg-blue-600 hover:bg-blue-700 px-2 py-1 rounded text-xs" target="_blank">
+                  <a
+                    href={info.url}
+                    className="bg-blue-600 hover:bg-blue-700 px-2 py-1 rounded text-xs"
+                    target="_blank"
+                  >
                     View
                   </a>
                   {onDelete && (
@@ -141,7 +146,11 @@ export default function FileList({
                 </div>
                 {info.uploader &&
                   info.uploader.map((a, idx) => (
-                    <Profile key={idx} link={NostrLink.publicKey(a)} size={20} />
+                    <Profile
+                      key={idx}
+                      link={NostrLink.publicKey(a)}
+                      size={20}
+                    />
                   ))}
               </div>
               {renderInner(info)}
@@ -204,13 +213,21 @@ export default function FileList({
                   {info.uploader && (
                     <td className="px-4 py-3">
                       {info.uploader.map((a, idx) => (
-                        <Profile key={idx} link={NostrLink.publicKey(a)} size={20} />
+                        <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">
+                      <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>
                       {onDelete && (

ui_src/src/views/header.tsx

@@ -15,7 +15,8 @@ export default function Header() {
   const [self, setSelf] = useState<AdminSelf>();
 
   const url =
-    import.meta.env.VITE_API_URL || `${window.location.protocol}//${window.location.host}`;
+    import.meta.env.VITE_API_URL ||
+    `${window.location.protocol}//${window.location.host}`;
 
   async function tryLogin() {
     try {
@@ -33,13 +34,16 @@ export default function Header() {
   useEffect(() => {
     if (pub && !self) {
       const r96 = new Route96(url, pub);
-      r96.getSelf().then((v) => setSelf(v.data)).catch(() => {});
+      r96
+        .getSelf()
+        .then((v) => setSelf(v.data))
+        .catch(() => {});
     }
   }, [pub, self, url]);
 
   return (
-    <header className="border-b border-gray-700 bg-gray-800">
+    <header className="border-b border-gray-700 bg-gray-800 w-full">
-      <div className="flex justify-between items-center py-4">
+      <div className="px-4 sm:px-6 lg:px-8 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">

ui_src/src/views/reports.tsx

@@ -75,12 +75,24 @@ export default function ReportList({
       <table className="w-full border-collapse border border-neutral-500">
         <thead>
           <tr className="bg-neutral-700">
-            <th className="border border-neutral-500 py-2 px-4 text-left">Report ID</th>
+            <th className="border border-neutral-500 py-2 px-4 text-left">
-            <th className="border border-neutral-500 py-2 px-4 text-left">File ID</th>
+              Report ID
-            <th className="border border-neutral-500 py-2 px-4 text-left">Reporter</th>
+            </th>
-            <th className="border border-neutral-500 py-2 px-4 text-left">Reason</th>
+            <th className="border border-neutral-500 py-2 px-4 text-left">
-            <th className="border border-neutral-500 py-2 px-4 text-left">Created</th>
+              File ID
-            <th className="border border-neutral-500 py-2 px-4 text-left">Actions</th>
+            </th>
+            <th className="border border-neutral-500 py-2 px-4 text-left">
+              Reporter
+            </th>
+            <th className="border border-neutral-500 py-2 px-4 text-left">
+              Reason
+            </th>
+            <th className="border border-neutral-500 py-2 px-4 text-left">
+              Created
+            </th>
+            <th className="border border-neutral-500 py-2 px-4 text-left">
+              Actions
+            </th>
           </tr>
         </thead>
         <tbody>
@@ -90,13 +102,18 @@ export default function ReportList({
 
             return (
               <tr key={report.id} className="hover:bg-neutral-700">
-                <td className="border border-neutral-500 py-2 px-4">{report.id}</td>
+                <td className="border border-neutral-500 py-2 px-4">
+                  {report.id}
+                </td>
                 <td className="border border-neutral-500 py-2 px-4 font-mono text-sm">
                   {report.file_id.substring(0, 12)}...
                 </td>
                 <td className="border border-neutral-500 py-2 px-4">
                   {reporterPubkey ? (
-                    <Profile link={NostrLink.publicKey(reporterPubkey)} size={20} />
+                    <Profile
+                      link={NostrLink.publicKey(reporterPubkey)}
+                      size={20}
+                    />
                   ) : (
                     "Unknown"
                   )}

ui_src/src/views/upload.tsx

@@ -46,7 +46,7 @@ export default function Upload() {
       }
     } catch (e) {
       if (e instanceof Error) {
-        setError(e.message.length > 0 ? e.message : "Upload failed");
+        setError(e.message || "Upload failed - no error details provided");
       } else if (typeof e === "string") {
         setError(e);
       } else {
@@ -55,7 +55,8 @@ export default function Upload() {
     }
   }
 
-  const listUploads = useCallback(async (n: number) => {
+  const listUploads = useCallback(
+    async (n: number) => {
       if (!pub) return;
       try {
         setError(undefined);
@@ -65,15 +66,18 @@ export default function Upload() {
         setListedFiles(result);
       } catch (e) {
         if (e instanceof Error) {
-        setError(e.message.length > 0 ? e.message : "Upload failed");
+          setError(
+            e.message || "List files failed - no error details provided",
+          );
         } else if (typeof e === "string") {
           setError(e);
         } else {
           setError("List files failed");
         }
       }
-  }, [pub, url]);
+    },
-
+    [pub, url],
+  );
 
   async function deleteFile(id: string) {
     if (!pub) return;
@@ -83,11 +87,11 @@ export default function Upload() {
       await uploader.delete(id);
     } catch (e) {
       if (e instanceof Error) {
-        setError(e.message.length > 0 ? e.message : "Upload failed");
+        setError(e.message || "Delete failed - no error details provided");
       } else if (typeof e === "string") {
         setError(e);
       } else {
-        setError("List files failed");
+        setError("Delete failed");
       }
     }
   }
@@ -98,7 +102,6 @@ export default function Upload() {
     }
   }, [listedPage, pub, listUploads, listedFiles]);
 
-
   useEffect(() => {
     if (pub && !self) {
       const r96 = new Route96(url, pub);
@@ -109,21 +112,18 @@ export default function Upload() {
   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>
+        <h2 className="text-2xl font-semibold mb-4 text-gray-100">
-        <p className="text-gray-400 mb-6">Please log in to start uploading files to your storage.</p>
+          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="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>
-
       {error && (
         <div className="bg-red-900/20 border border-red-800 text-red-400 px-4 py-3 rounded-lg">
           {error}
@@ -146,7 +146,9 @@ export default function Upload() {
                   onChange={() => setType("blossom")}
                   className="mr-2"
                 />
-                <span className="text-sm font-medium text-gray-300">Blossom</span>
+                <span className="text-sm font-medium text-gray-300">
+                  Blossom
+                </span>
               </label>
               <label className="flex items-center cursor-pointer">
                 <input
@@ -155,7 +157,9 @@ export default function Upload() {
                   onChange={() => setType("nip96")}
                   className="mr-2"
                 />
-                <span className="text-sm font-medium text-gray-300">NIP-96</span>
+                <span className="text-sm font-medium text-gray-300">
+                  NIP-96
+                </span>
               </label>
             </div>
           </div>
@@ -168,7 +172,9 @@ export default function Upload() {
                 onChange={(e) => setNoCompress(e.target.checked)}
                 className="mr-2"
               />
-              <span className="text-sm font-medium text-gray-300">Disable Compression</span>
+              <span className="text-sm font-medium text-gray-300">
+                Disable Compression
+              </span>
             </label>
           </div>
 
@@ -200,54 +206,125 @@ export default function Upload() {
       </div>
 
       {self && (
-        <div className="grid gap-6 md:grid-cols-2">
+        <div className="card max-w-2xl mx-auto">
-          <div className="card">
+          <h3 className="text-lg font-semibold mb-4">Storage Quota</h3>
-            <h3 className="text-lg font-semibold mb-4">Storage Usage</h3>
+          <div className="space-y-4">
-            <div className="space-y-2">
+            {self.total_available_quota && self.total_available_quota > 0 && (
+              <>
+                {/* File Count */}
                 <div className="flex justify-between text-sm">
                   <span>Files:</span>
-                <span className="font-medium">{self.file_count.toLocaleString()}</span>
+                  <span className="font-medium">
+                    {self.file_count.toLocaleString()}
+                  </span>
                 </div>
+
+                {/* Progress Bar */}
+                <div className="space-y-2">
                   <div className="flex justify-between text-sm">
-                <span>Total Size:</span>
+                    <span>Used:</span>
-                <span className="font-medium">{FormatBytes(self.total_size)}</span>
+                    <span className="font-medium">
+                      {FormatBytes(self.total_size)} of{" "}
+                      {FormatBytes(self.total_available_quota)}
+                    </span>
                   </div>
+                  <div className="w-full bg-gray-700 rounded-full h-2.5">
+                    <div
+                      className={`h-2.5 rounded-full transition-all duration-300 ${
+                        self.total_size / self.total_available_quota > 0.8
+                          ? "bg-red-500"
+                          : self.total_size / self.total_available_quota > 0.6
+                            ? "bg-yellow-500"
+                            : "bg-green-500"
+                      }`}
+                      style={{
+                        width: `${Math.min(100, (self.total_size / self.total_available_quota) * 100)}%`,
+                      }}
+                    ></div>
+                  </div>
+                  <div className="flex justify-between text-xs text-gray-400">
+                    <span>
+                      {(
+                        (self.total_size / self.total_available_quota) *
+                        100
+                      ).toFixed(1)}
+                      % used
+                    </span>
+                    <span
+                      className={`${
+                        self.total_size / self.total_available_quota > 0.8
+                          ? "text-red-400"
+                          : self.total_size / self.total_available_quota > 0.6
+                            ? "text-yellow-400"
+                            : "text-green-400"
+                      }`}
+                    >
+                      {FormatBytes(
+                        Math.max(
+                          0,
+                          self.total_available_quota - self.total_size,
+                        ),
+                      )}{" "}
+                      remaining
+                    </span>
                   </div>
                 </div>
 
-          <div className="card">
+                {/* Quota Breakdown */}
-            <h3 className="text-lg font-semibold mb-4">Storage Quota</h3>
+                <div className="space-y-2 pt-2 border-t border-gray-700">
-            <div className="space-y-2">
+                  {self.free_quota && self.free_quota > 0 && (
-              {self.free_quota && (
                     <div className="flex justify-between text-sm">
                       <span>Free Quota:</span>
-                  <span className="font-medium">{FormatBytes(self.free_quota)}</span>
+                      <span className="font-medium">
-                </div>
+                        {FormatBytes(self.free_quota)}
-              )}
-              {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 && (
+                  {(self.quota ?? 0) > 0 && (
-                <div className="flex justify-between text-sm text-gray-400">
+                    <div className="flex justify-between text-sm">
-                  <span>Paid Until:</span>
+                      <span>Paid Quota:</span>
-                  <span>{new Date(self.paid_until * 1000).toLocaleDateString()}</span>
+                      <span className="font-medium">
+                        {FormatBytes(self.quota!)}
+                      </span>
+                    </div>
+                  )}
+                  {(self.paid_until ?? 0) > 0 && (
+                    <div className="flex justify-between text-sm">
+                      <span>Expires:</span>
+                      <div className="text-right">
+                        <div className="font-medium">
+                          {new Date(
+                            self.paid_until! * 1000,
+                          ).toLocaleDateString()}
+                        </div>
+                        <div className="text-xs text-gray-400">
+                          {(() => {
+                            const now = Date.now() / 1000;
+                            const daysLeft = Math.max(
+                              0,
+                              Math.ceil(
+                                (self.paid_until! - now) / (24 * 60 * 60),
+                              ),
+                            );
+                            return daysLeft > 0
+                              ? `${daysLeft} days left`
+                              : "Expired";
+                          })()}
+                        </div>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </>
+            )}
+
+            {(!self.total_available_quota ||
+              self.total_available_quota === 0) && (
+              <div className="text-center py-4 text-gray-400">
+                <p>No quota information available</p>
+                <p className="text-sm">
+                  Contact administrator for storage access
+                </p>
               </div>
             )}
           </div>
@@ -258,7 +335,6 @@ export default function Upload() {
             {showPaymentFlow ? "Hide" : "Show"} Payment Options
           </Button>
         </div>
-        </div>
       )}
 
       {showPaymentFlow && pub && (
@@ -268,6 +344,7 @@ export default function Upload() {
             onPaymentRequested={(pr) => {
               console.log("Payment requested:", pr);
             }}
+            userInfo={self}
           />
         </div>
       )}
@@ -299,9 +376,121 @@ export default function Upload() {
       {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">
+          <div className="space-y-4">
-            {JSON.stringify(results, undefined, 2)}
+            {results.map((result: any, index) => (
+              <div
+                key={index}
+                className="bg-gray-800 border border-gray-700 rounded-lg p-4"
+              >
+                <div className="flex items-start justify-between mb-3">
+                  <div className="flex-1">
+                    <h4 className="font-medium text-green-400 mb-1">
+                      ✅ Upload Successful
+                    </h4>
+                    <p className="text-sm text-gray-400">
+                      {new Date(
+                        (result.uploaded || Date.now() / 1000) * 1000,
+                      ).toLocaleString()}
+                    </p>
+                  </div>
+                  <div className="text-right">
+                    <span className="text-xs bg-blue-900/50 text-blue-300 px-2 py-1 rounded">
+                      {result.type || "Unknown type"}
+                    </span>
+                  </div>
+                </div>
+
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+                  <div>
+                    <p className="text-sm text-gray-400">File Size</p>
+                    <p className="font-medium">
+                      {FormatBytes(result.size || 0)}
+                    </p>
+                  </div>
+                  {result.nip94?.find((tag: any[]) => tag[0] === "dim") && (
+                    <div>
+                      <p className="text-sm text-gray-400">Dimensions</p>
+                      <p className="font-medium">
+                        {
+                          result.nip94.find(
+                            (tag: any[]) => tag[0] === "dim",
+                          )?.[1]
+                        }
+                      </p>
+                    </div>
+                  )}
+                </div>
+
+                <div className="space-y-2">
+                  <div>
+                    <p className="text-sm text-gray-400 mb-1">File URL</p>
+                    <div className="flex items-center gap-2">
+                      <code className="text-xs bg-gray-900 text-green-400 px-2 py-1 rounded flex-1 overflow-hidden">
+                        {result.url}
+                      </code>
+                      <button
+                        onClick={() =>
+                          navigator.clipboard.writeText(result.url)
+                        }
+                        className="text-xs bg-blue-600 hover:bg-blue-700 text-white px-2 py-1 rounded transition-colors"
+                        title="Copy URL"
+                      >
+                        Copy
+                      </button>
+                    </div>
+                  </div>
+
+                  {result.nip94?.find((tag: any[]) => tag[0] === "thumb") && (
+                    <div>
+                      <p className="text-sm text-gray-400 mb-1">
+                        Thumbnail URL
+                      </p>
+                      <div className="flex items-center gap-2">
+                        <code className="text-xs bg-gray-900 text-blue-400 px-2 py-1 rounded flex-1 overflow-hidden">
+                          {
+                            result.nip94.find(
+                              (tag: any[]) => tag[0] === "thumb",
+                            )?.[1]
+                          }
+                        </code>
+                        <button
+                          onClick={() =>
+                            navigator.clipboard.writeText(
+                              result.nip94.find(
+                                (tag: any[]) => tag[0] === "thumb",
+                              )?.[1],
+                            )
+                          }
+                          className="text-xs bg-blue-600 hover:bg-blue-700 text-white px-2 py-1 rounded transition-colors"
+                          title="Copy Thumbnail URL"
+                        >
+                          Copy
+                        </button>
+                      </div>
+                    </div>
+                  )}
+
+                  <div>
+                    <p className="text-sm text-gray-400 mb-1">
+                      File Hash (SHA256)
+                    </p>
+                    <code className="text-xs bg-gray-900 text-gray-400 px-2 py-1 rounded block overflow-hidden">
+                      {result.sha256}
+                    </code>
+                  </div>
+                </div>
+
+                <details className="mt-4">
+                  <summary className="text-sm text-gray-400 cursor-pointer hover:text-gray-300">
+                    Show raw JSON data
+                  </summary>
+                  <pre className="text-xs bg-gray-900 text-gray-300 p-3 rounded mt-2 overflow-auto">
+                    {JSON.stringify(result, undefined, 2)}
                   </pre>
+                </details>
+              </div>
+            ))}
+          </div>
         </div>
       )}
     </div>