fix: storage calculation

refactor: improve UI

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();
@@ -36,10 +57,10 @@ export default function PaymentFlow({ route96, onPaymentRequested }: PaymentFlow
 
   async function requestPayment() {
     if (!paymentInfo) return;
-    
+
     setLoading(true);
     setError("");
-    
+
     try {
       const request: PaymentRequest = { units: gigabytes, quantity: months };
       const response = await route96.requestPayment(request);
@@ -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')) {
-      return 'GB';
+    if (
+      unit.toLowerCase().includes("gbspace") ||
+      unit.toLowerCase().includes("gb")
+    ) {
+      return "GB";
     }
     return unit;
   }
@@ -77,17 +101,18 @@ export default function PaymentFlow({ route96, onPaymentRequested }: PaymentFlow
   return (
     <div className="card">
       <h3 className="text-lg font-bold mb-4">Top Up Account</h3>
-      
+
       <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
           </div>
         </div>
-        
+
         <div className="grid grid-cols-2 gap-4">
           <div>
             <label className="block text-sm font-medium mb-2 text-gray-300">
@@ -102,7 +127,7 @@ export default function PaymentFlow({ route96, onPaymentRequested }: PaymentFlow
               className="input w-full text-center text-lg"
             />
           </div>
-          
+
           <div>
             <label className="block text-sm font-medium mb-2 text-gray-300">
               Duration (months)
@@ -119,7 +144,6 @@ export default function PaymentFlow({ route96, onPaymentRequested }: PaymentFlow
         </div>
       </div>
 
-
       <Button
         onClick={requestPayment}
         disabled={loading || gigabytes <= 0 || months <= 0}
@@ -143,4 +167,4 @@ export default function PaymentFlow({ route96, onPaymentRequested }: PaymentFlow
       )}
     </div>
   );
-}
+}

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'}
-        alt={profile?.display_name || profile?.name || 'User avatar'}
+        src={
+          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/hooks/publisher.ts

@@ -4,7 +4,7 @@ import useLogin from "./login";
 
 export default function usePublisher() {
   const login = useLogin();
-  
+
   return useMemo(() => {
     switch (login?.type) {
       case "nip7":

ui_src/src/upload/admin.ts

@@ -150,7 +150,7 @@ export class Route96 {
       accept: "application/json",
       authorization: await auth(u, method),
     };
-    
+
     if (body && method !== "GET") {
       headers["content-type"] = "application/json";
     }

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();
-      throw new Error(text);
+      await this.#handleError(rsp);
+      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();
-      throw new Error(text);
+      await this.#handleError(rsp);
+      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();
-      throw new Error(text);
+      await this.#handleError(rsp);
+      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();
-      throw new Error(text);
+      await this.#handleError(rsp);
+      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();
-      throw new Error(text);
+      await this.#handleError(rsp);
+      throw new Error("Should not reach here");
     }
   }
 

ui_src/src/views/admin.tsx

@@ -26,42 +26,48 @@ export default function Admin() {
   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");
+  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]);
+    },
+    [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");
+  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]);
+    },
+    [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,12 +109,15 @@ export default function Admin() {
   useEffect(() => {
     if (pub && !self) {
       const r96 = new Route96(url, pub);
-      r96.getSelf().then((v) => {
-        setSelf(v.data);
-        setLoading(false);
-      }).catch(() => {
-        setLoading(false);
-      });
+      r96
+        .getSelf()
+        .then((v) => {
+          setSelf(v.data);
+          setLoading(false);
+        })
+        .catch(() => {
+          setLoading(false);
+        });
     }
   }, [pub, self, url]);
 
@@ -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>
     );
   }
@@ -158,16 +171,16 @@ export default function Admin() {
       <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 
+              <select
                 className="input w-full"
-                value={mimeFilter || ""} 
-                onChange={e => setMimeFilter(e.target.value || undefined)}
+                value={mimeFilter || ""}
+                onChange={(e) => setMimeFilter(e.target.value || undefined)}
               >
                 <option value="">All Files</option>
                 <option value="image/webp">WebP Images</option>
@@ -179,8 +192,8 @@ export default function Admin() {
                 <option value="video/mov">MOV Videos</option>
               </select>
             </div>
-            
-            <Button 
+
+            <Button
               onClick={() => listAllUploads(0)}
               className="btn-primary w-full"
             >
@@ -191,11 +204,8 @@ export default function Admin() {
 
         <div className="card">
           <h2 className="text-xl font-semibold mb-6">Reports Management</h2>
-          
-          <Button 
-            onClick={() => listReports(0)}
-            className="btn-primary w-full"
-          >
+
+          <Button onClick={() => listReports(0)} className="btn-primary w-full">
             Load Reports
           </Button>
         </div>
@@ -235,4 +245,4 @@ export default function Admin() {
       )}
     </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 && (
@@ -242,8 +259,8 @@ export default function FileList({
           <button
             onClick={() => setViewType("grid")}
             className={`px-4 py-2 text-sm font-medium transition-colors ${
-              viewType === "grid" 
-                ? "bg-blue-600 text-white" 
+              viewType === "grid"
+                ? "bg-blue-600 text-white"
                 : "bg-white text-gray-700 hover:bg-gray-50"
             }`}
           >
@@ -252,8 +269,8 @@ export default function FileList({
           <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" 
+              viewType === "list"
+                ? "bg-blue-600 text-white"
                 : "bg-white text-gray-700 hover:bg-gray-50"
             }`}
           >
@@ -261,9 +278,9 @@ export default function FileList({
           </button>
         </div>
       </div>
-      
+
       {viewType === "grid" ? showGrid() : showList()}
-      
+
       {pages !== undefined && pages > 1 && (
         <div className="flex justify-center">
           <div className="flex rounded-lg border border-gray-300 overflow-hidden">

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,38 +34,41 @@ 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">
-      <div className="flex justify-between items-center py-4">
+    <header className="border-b border-gray-700 bg-gray-800 w-full">
+      <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">
               route96
             </div>
           </Link>
-          
+
           <nav className="flex space-x-6">
-            <Link 
-              to="/" 
+            <Link
+              to="/"
               className={`text-sm font-medium transition-colors ${
-                location.pathname === "/" 
-                  ? "text-blue-400 border-b-2 border-blue-400 pb-1" 
+                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" 
+              <Link
+                to="/admin"
                 className={`text-sm font-medium transition-colors ${
-                  location.pathname === "/admin" 
-                    ? "text-blue-400 border-b-2 border-blue-400 pb-1" 
+                  location.pathname === "/admin"
+                    ? "text-blue-400 border-b-2 border-blue-400 pb-1"
                     : "text-gray-300 hover:text-gray-100"
                 }`}
               >
@@ -78,7 +82,7 @@ export default function Header() {
           {login ? (
             <div className="flex items-center space-x-3">
               <Profile link={NostrLink.publicKey(login.pubkey)} />
-              <Button 
+              <Button
                 onClick={() => Login.logout()}
                 className="btn-secondary text-sm"
               >

ui_src/src/views/reports.tsx

@@ -75,28 +75,45 @@ 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">File ID</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>
+            <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">
+              File ID
+            </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>
           {reports.map((report) => {
             const reporterPubkey = getReporterPubkey(report.event_json);
             const reason = getReportReason(report.event_json);
-            
+
             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"
                   )}
@@ -128,7 +145,7 @@ export default function ReportList({
           })}
         </tbody>
       </table>
-      
+
       {pages !== undefined && (
         <>
           <div className="flex justify-center mt-4">
@@ -138,4 +155,4 @@ export default function ReportList({
       )}
     </>
   );
-}
+}

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,25 +55,29 @@ export default function Upload() {
     }
   }
 
-  const listUploads = useCallback(async (n: number) => {
-    if (!pub) return;
-    try {
-      setError(undefined);
-      const uploader = new Nip96(url, pub);
-      await uploader.loadInfo();
-      const result = await uploader.listFiles(n, 50);
-      setListedFiles(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");
+  const listUploads = useCallback(
+    async (n: number) => {
+      if (!pub) return;
+      try {
+        setError(undefined);
+        const uploader = new Nip96(url, pub);
+        await uploader.loadInfo();
+        const result = await uploader.listFiles(n, 50);
+        setListedFiles(result);
+      } catch (e) {
+        if (e instanceof Error) {
+          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>
-        <p className="text-gray-400 mb-6">Please log in to start uploading files to your storage.</p>
+        <h2 className="text-2xl font-semibold mb-4 text-gray-100">
+          Welcome to {window.location.hostname}
+        </h2>
+        <p className="text-gray-400 mb-6">
+          Please log in to start uploading files to your storage.
+        </p>
       </div>
     );
   }
 
   return (
     <div className="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}
@@ -132,7 +132,7 @@ export default function Upload() {
 
       <div className="card">
         <h2 className="text-xl font-semibold mb-6">Upload Settings</h2>
-        
+
         <div className="space-y-6">
           <div>
             <label className="block text-sm font-medium text-gray-300 mb-3">
@@ -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,74 +206,145 @@ export default function Upload() {
       </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="card max-w-2xl mx-auto">
+          <h3 className="text-lg font-semibold mb-4">Storage Quota</h3>
+          <div className="space-y-4">
+            {self.total_available_quota && self.total_available_quota > 0 && (
+              <>
+                {/* File Count */}
                 <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>Files:</span>
+                  <span className="font-medium">
+                    {self.file_count.toLocaleString()}
                   </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>
+
+                {/* Progress Bar */}
+                <div className="space-y-2">
+                  <div className="flex justify-between text-sm">
+                    <span>Used:</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>
-            <Button 
-              onClick={() => setShowPaymentFlow(!showPaymentFlow)} 
-              className="btn-primary w-full mt-4"
-            >
-              {showPaymentFlow ? "Hide" : "Show"} Payment Options
-            </Button>
+
+                {/* Quota Breakdown */}
+                <div className="space-y-2 pt-2 border-t border-gray-700">
+                  {self.free_quota && self.free_quota > 0 && (
+                    <div className="flex justify-between text-sm">
+                      <span>Free Quota:</span>
+                      <span className="font-medium">
+                        {FormatBytes(self.free_quota)}
+                      </span>
+                    </div>
+                  )}
+                  {(self.quota ?? 0) > 0 && (
+                    <div className="flex justify-between text-sm">
+                      <span>Paid Quota:</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>
+          <Button
+            onClick={() => setShowPaymentFlow(!showPaymentFlow)}
+            className="btn-primary w-full mt-4"
+          >
+            {showPaymentFlow ? "Hide" : "Show"} Payment Options
+          </Button>
         </div>
       )}
 
       {showPaymentFlow && pub && (
         <div className="card">
-          <PaymentFlow 
-            route96={new Route96(url, pub)} 
+          <PaymentFlow
+            route96={new Route96(url, pub)}
             onPaymentRequested={(pr) => {
               console.log("Payment requested:", pr);
             }}
+            userInfo={self}
           />
         </div>
       )}
@@ -281,7 +358,7 @@ export default function Upload() {
             </Button>
           )}
         </div>
-        
+
         {listedFiles && (
           <FileList
             files={listedFiles.files}
@@ -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">
-            {JSON.stringify(results, undefined, 2)}
-          </pre>
+          <div className="space-y-4">
+            {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>