fix: storage calculation

refactor: improve UI

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>