From 5c2eaf49e459c968ae1d2db7a7ead966a8d0cee7 Mon Sep 17 00:00:00 2001
From: Elijah <elijah.kuntz@gmail.com>
Date: Sat, 23 May 2026 10:12:53 -0700
Subject: [PATCH] fix: resolve public share downloads and sort storage overview
 by size

---
 frontend/src/app/share/[id]/page.tsx         | 11 +++++++++--
 frontend/src/components/StorageDashboard.tsx |  6 ++++--
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/share/[id]/page.tsx b/frontend/src/app/share/[id]/page.tsx
index 74965e4..6af3e74 100644
--- a/frontend/src/app/share/[id]/page.tsx
+++ b/frontend/src/app/share/[id]/page.tsx
@@ -19,6 +19,7 @@ export default function PublicSharePage({ params }: { params: Promise<{ id: stri
   const [error, setError] = useState<string | null>(null);
   const [requirePassword, setRequirePassword] = useState(false);
   const [password, setPassword] = useState('');
+  const [token, setToken] = useState('');
   const [fileInfo, setFileInfo] = useState<FileInfo | null>(null);
   const [currentPath, setCurrentPath] = useState('');
 
@@ -36,6 +37,12 @@ export default function PublicSharePage({ params }: { params: Promise<{ id: stri
       } else {
         setRequirePassword(false);
         setFileInfo(data);
+        try {
+          const t = await api.createPublicShareToken(id, pwd);
+          setToken(t);
+        } catch (e) {
+          console.error("Failed to fetch token", e);
+        }
       }
     } catch (err: any) {
       if (err.require_password) {
@@ -55,7 +62,7 @@ export default function PublicSharePage({ params }: { params: Promise<{ id: stri
 
   function handleDownload(specificPath?: string) {
     const downloadPath = specificPath ? (currentPath ? `${currentPath}/${specificPath}` : specificPath) : currentPath;
-    const url = api.getPublicDownloadUrl(id, password, downloadPath);
+    const url = api.getPublicDownloadUrl(id, token, downloadPath);
     window.location.href = url;
   }
 
@@ -136,7 +143,7 @@ export default function PublicSharePage({ params }: { params: Promise<{ id: stri
   const isVideo = !fileInfo?.is_dir && fileInfo?.mime_type?.startsWith('video/');
   const isAudio = !fileInfo?.is_dir && fileInfo?.mime_type?.startsWith('audio/');
   const isPdf = !fileInfo?.is_dir && fileInfo?.mime_type === 'application/pdf';
-  const downloadUrl = fileInfo ? api.getPublicDownloadUrl(id, password, currentPath) : '';
+  const downloadUrl = fileInfo && token ? api.getPublicDownloadUrl(id, token, currentPath) : '';
 
   // Breadcrumbs
   const pathParts = currentPath.split('/').filter(Boolean);
diff --git a/frontend/src/components/StorageDashboard.tsx b/frontend/src/components/StorageDashboard.tsx
index e1c8734..d5b14be 100644
--- a/frontend/src/components/StorageDashboard.tsx
+++ b/frontend/src/components/StorageDashboard.tsx
@@ -63,6 +63,8 @@ export default function StorageDashboard() {
 
   const totalDriveSize = 100 * 1024 * 1024 * 1024; // Dummy 100GB capacity for visualization, could be dynamic
 
+  const sortedCategories = [...data.categories].sort((a, b) => b.size - a.size);
+
   return (
     <div className="flex-1 overflow-y-auto p-8 max-w-5xl mx-auto w-full">
       <div className="mb-8 flex items-center gap-4">
@@ -85,7 +87,7 @@ export default function StorageDashboard() {
 
         {/* Progress Bar */}
         <div className="h-4 w-full rounded-full overflow-hidden flex gap-0.5" style={{ backgroundColor: 'var(--color-bg-secondary)' }}>
-          {data.categories.map(cat => {
+          {sortedCategories.map(cat => {
             const pct = (cat.size / Math.max(data.total_size, 1)) * 100;
             if (pct === 0) return null;
             return (
@@ -104,7 +106,7 @@ export default function StorageDashboard() {
       </div>
 
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-        {data.categories.map((cat, idx) => {
+        {sortedCategories.map((cat, idx) => {
           const config = categoryConfig[cat.category] || categoryConfig.other;
           const Icon = config.icon;
           return (