frontend: improvements

4 files changed, 39 insertions, 74 deletions

diff --git a/frontend/components/drive/DriveDirectoryClient.tsx b/frontend/components/drive/DriveDirectoryClient.tsx
index f523e4f..d238065 100644
--- a/frontend/components/drive/DriveDirectoryClient.tsx
+++ b/frontend/components/drive/DriveDirectoryClient.tsx
@@ -32,18 +32,10 @@ import { Checkbox } from "@/components/ui/checkbox"
 import { toast } from "@/hooks/use-toast"
 import { DriveLsEntry } from "@/lib/drive_types"
 import { UPLOAD_MAX_FILE_SIZE, UPLOAD_MAX_FILES } from "@/lib/constants"
+import { formatFileSize } from "@/lib/utils"
 import { DriveMoveDialog } from "./DriveMoveDialog"
 import { StorageUsage } from "./StorageUsage"
 import type { StorageData } from "@/lib/storage"
-import type { UserAuth } from "@/lib/auth_types"
-
-function formatFileSize(bytes: number): string {
-  if (bytes === 0) return "0 Bytes"
-  const k = 1024
-  const sizes = ["Bytes", "KB", "MB", "GB"]
-  const i = Math.floor(Math.log(bytes) / Math.log(k))
-  return Number.parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i]
-}
 
 function formatDate(timestamp: number): string {
   return new Date(timestamp * 1000).toISOString().split('T')[0]
@@ -52,9 +44,9 @@ function formatDate(timestamp: number): string {
 function formatDateTime(timestamp: number): string {
   const date = new Date(timestamp * 1000)
   const dateStr = date.toISOString().split('T')[0]
-  const timeStr = date.toLocaleTimeString('en-US', { 
-    hour12: false, 
-    hour: '2-digit', 
+  const timeStr = date.toLocaleTimeString('en-US', {
+    hour12: false,
+    hour: '2-digit',
     minute: '2-digit',
     second: '2-digit'
   })
@@ -72,10 +64,9 @@ interface DriveDirectoryClientProps {
   files: DriveLsEntry[]
   breadcrumbs: Breadcrumb[]
   storageData: StorageData
-  user: UserAuth
 }
 
-export function DriveDirectoryClient({ path, files, breadcrumbs, storageData, user }: DriveDirectoryClientProps) {
+export function DriveDirectoryClient({ path, files, breadcrumbs, storageData }: DriveDirectoryClientProps) {
   const [selectedFiles, setSelectedFiles] = useState<Set<string>>(new Set())
   const [renameDialogOpen, setRenameDialogOpen] = useState(false)
   const [infoDialogOpen, setInfoDialogOpen] = useState(false)
@@ -98,10 +89,6 @@ export function DriveDirectoryClient({ path, files, breadcrumbs, storageData, us
     setSelectedFiles(newSelected)
   }
 
-  const selectAll = () => {
-    setSelectedFiles(new Set(files.map(file => file.path)))
-  }
-
   const deselectAll = () => {
     setSelectedFiles(new Set())
   }
@@ -130,7 +117,7 @@ export function DriveDirectoryClient({ path, files, breadcrumbs, storageData, us
       })
       return
     }
-    
+
     const filename = item.path.split('/').pop() || 'download'
     const permalink = `${window.location.origin}/blob/${item.blob}?filename=${encodeURIComponent(filename)}`
     navigator.clipboard.writeText(permalink).then(() => {
@@ -171,8 +158,7 @@ export function DriveDirectoryClient({ path, files, breadcrumbs, storageData, us
           title: "Renamed successfully",
           description: result.message,
         })
-        
-        // Refresh page to show changes
+
         window.location.reload()
       } else {
         throw new Error(result.error || `Rename failed with status ${response.status}`)
@@ -222,7 +208,7 @@ export function DriveDirectoryClient({ path, files, breadcrumbs, storageData, us
         try {
           const formData = new FormData()
           formData.append('file', file)
-          
+
           // Use the new simple upload endpoint with path as query parameter
           const response = await fetch(`/api/upload?path=${encodeURIComponent(path)}`, {
             method: 'POST',
@@ -247,8 +233,7 @@ export function DriveDirectoryClient({ path, files, breadcrumbs, storageData, us
           title: "Upload successful",
           description: `${successCount} file(s) uploaded successfully${errorCount > 0 ? `, ${errorCount} failed` : ''}`
         })
-        
-        // Refresh page to show changes
+
         window.location.reload()
       }
 
@@ -292,8 +277,7 @@ export function DriveDirectoryClient({ path, files, breadcrumbs, storageData, us
           title: "Deleted successfully",
           description: result.message,
         })
-        
-        // Refresh page to show changes
+
         window.location.reload()
       } else {
         throw new Error(result.error || `Delete failed with status ${response.status}`)
@@ -322,7 +306,7 @@ export function DriveDirectoryClient({ path, files, breadcrumbs, storageData, us
           // Extract filename from the full path
           const fileName = filePath.split('/').pop() || ''
           // Construct new path: destination + filename
-          const newPath = destinationPath.endsWith('/') 
+          const newPath = destinationPath.endsWith('/')
             ? `${destinationPath}${fileName}`
             : `${destinationPath}/${fileName}`
 
@@ -360,14 +344,13 @@ export function DriveDirectoryClient({ path, files, breadcrumbs, storageData, us
           title: "Move completed",
           description: `${successCount} item(s) moved successfully${errorCount > 0 ? `, ${errorCount} failed` : ''}`,
         })
-        
-        // Refresh page to show changes
+
         window.location.reload()
       }
 
       if (errorCount > 0 && successCount === 0) {
         toast({
-          title: "Move failed", 
+          title: "Move failed",
           description: `All ${errorCount} item(s) failed to move. ${errors[0] || ''}`,
           variant: "destructive"
         })
@@ -416,8 +399,7 @@ export function DriveDirectoryClient({ path, files, breadcrumbs, storageData, us
           title: "Folder created",
           description: result.message,
         })
-        
-        // Refresh page to show changes
+
         window.location.reload()
       } else {
         throw new Error(result.error || `Failed to create folder`)
@@ -447,7 +429,7 @@ export function DriveDirectoryClient({ path, files, breadcrumbs, storageData, us
               {index === breadcrumbs.length - 1 ? (
                 <span className="text-foreground font-medium">{crumb.name}</span>
               ) : (
-                <Link 
+                <Link
                   href={crumb.path}
                   className="hover:text-foreground transition-colors"
                 >
@@ -457,9 +439,9 @@ export function DriveDirectoryClient({ path, files, breadcrumbs, storageData, us
             </div>
           ))}
         </nav>
-        
+
         <div className="flex items-center gap-2 sm:gap-2">
-          <Button 
+          <Button
             variant="secondary"
             onClick={() => setCreateFolderDialogOpen(true)}
             className="flex-1 sm:flex-none"
@@ -467,7 +449,7 @@ export function DriveDirectoryClient({ path, files, breadcrumbs, storageData, us
             <FolderPlus className="mr-2 h-4 w-4" />
             Create Folder
           </Button>
-          <Button 
+          <Button
             onClick={() => fileInputRef.current?.click()}
             disabled={uploading}
             className="flex-1 sm:flex-none"
@@ -534,16 +516,16 @@ export function DriveDirectoryClient({ path, files, breadcrumbs, storageData, us
               files.map((file) => {
                 const isSelected = selectedFiles.has(file.path)
                 const fileName = file.path.split('/').pop() || file.path
-                
+
                 return (
-                  <TableRow 
-                    key={file.path} 
+                  <TableRow
+                    key={file.path}
                     className={`hover:bg-muted/50 ${isSelected ? "bg-muted/30" : ""}`}
                   >
                     <TableCell className="w-[40px]" onClick={(e) => e.stopPropagation()}>
-                      <Checkbox 
-                        checked={isSelected} 
-                        onCheckedChange={() => toggleFileSelection(file.path)} 
+                      <Checkbox
+                        checked={isSelected}
+                        onCheckedChange={() => toggleFileSelection(file.path)}
                       />
                     </TableCell>
                     <TableCell className="font-medium">
@@ -552,7 +534,7 @@ export function DriveDirectoryClient({ path, files, breadcrumbs, storageData, us
                           <>
                             <Folder className="h-4 w-4 text-blue-500 flex-shrink-0" />
                             <div className="min-w-0 max-w-[60vw]">
-                              <Link 
+                              <Link
                                 href={`/drive${file.path}`}
                                 className="text-blue-600 hover:text-blue-800 hover:underline cursor-pointer block truncate"
                                 title={fileName}
@@ -606,8 +588,8 @@ export function DriveDirectoryClient({ path, files, breadcrumbs, storageData, us
                             Info
                           </DropdownMenuItem>
                           <DropdownMenuSeparator />
-                          <DropdownMenuItem 
-                            onClick={() => handleDelete([file.path])} 
+                          <DropdownMenuItem
+                            onClick={() => handleDelete([file.path])}
                             className="text-red-600"
                           >
                             <Trash2 className="mr-2 h-4 w-4" />
@@ -695,7 +677,7 @@ export function DriveDirectoryClient({ path, files, breadcrumbs, storageData, us
                 </div>
                 <div>
                   <Label className="text-sm font-medium text-muted-foreground">Path</Label>
-                  <p className="text-sm font-mono text-xs">{currentItem.path}</p>
+                  <p className="font-mono text-xs">{currentItem.path}</p>
                 </div>
               </div>
               <div className="flex justify-end">
@@ -749,13 +731,13 @@ export function DriveDirectoryClient({ path, files, breadcrumbs, storageData, us
         </DialogContent>
       </Dialog>
 
-      <input 
-        ref={fileInputRef} 
-        type="file" 
-        multiple 
-        className="hidden" 
-        onChange={handleFileUpload} 
+      <input
+        ref={fileInputRef}
+        type="file"
+        multiple
+        className="hidden"
+        onChange={handleFileUpload}
       />
     </div>
   )
-}
\ No newline at end of file
+}
diff --git a/frontend/components/drive/DriveDirectoryView.tsx b/frontend/components/drive/DriveDirectoryView.tsx
index d2f30ee..de9d70a 100644
--- a/frontend/components/drive/DriveDirectoryView.tsx
+++ b/frontend/components/drive/DriveDirectoryView.tsx
@@ -2,7 +2,6 @@ import { DriveLsEntry } from "@/lib/drive_types"
 import { DriveDirectoryClient } from "./DriveDirectoryClient"
 import { DriveHeader } from "./DriveHeader"
 import type { StorageData } from "@/lib/storage"
-import { Auth_get_user } from "@/lib/auth"
 
 interface DriveDirectoryViewProps {
   path: string
@@ -20,7 +19,7 @@ function generateBreadcrumbs(currentPath: string) {
   const breadcrumbs = [{ name: 'Root', path: '/drive' }]
   
   let accumulatedPath = ''
-  parts.forEach((part, index) => {
+  parts.forEach((part, _index) => {
     accumulatedPath += '/' + part
     breadcrumbs.push({
       name: decodeURIComponent(part), // Decode URL encoded characters
@@ -48,7 +47,6 @@ function sortFiles(files: DriveLsEntry[]): DriveLsEntry[] {
 export async function DriveDirectoryView({ path, files, storageData }: DriveDirectoryViewProps) {
   const sortedFiles = sortFiles(files)
   const breadcrumbs = generateBreadcrumbs(path)
-  const user = await Auth_get_user()
   
   return (
     <div className="container mx-auto p-6 space-y-6">
@@ -58,8 +56,7 @@ export async function DriveDirectoryView({ path, files, storageData }: DriveDire
         files={sortedFiles} 
         breadcrumbs={breadcrumbs}
         storageData={storageData}
-        user={user}
       />
     </div>
   )
-}
\ No newline at end of file
+}
diff --git a/frontend/components/drive/StorageUsage.tsx b/frontend/components/drive/StorageUsage.tsx
index 2cb5d5d..39be4ba 100644
--- a/frontend/components/drive/StorageUsage.tsx
+++ b/frontend/components/drive/StorageUsage.tsx
@@ -1,17 +1,10 @@
 import type { StorageData } from "@/lib/storage"
+import { formatFileSize } from "@/lib/utils"
 
 interface StorageUsageProps {
   data: StorageData
 }
 
-function formatFileSize(bytes: number): string {
-  if (bytes === 0) return "0 Bytes"
-  const k = 1024
-  const sizes = ["Bytes", "KB", "MB", "GB", "TB"]
-  const i = Math.floor(Math.log(bytes) / Math.log(k))
-  return Number.parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i]
-}
-
 export function StorageUsage({ data }: StorageUsageProps) {
   // Safety check for undefined data
   if (!data) {
diff --git a/frontend/components/history/HistoryView.tsx b/frontend/components/history/HistoryView.tsx
index c459275..e6d1cd1 100644
--- a/frontend/components/history/HistoryView.tsx
+++ b/frontend/components/history/HistoryView.tsx
@@ -3,6 +3,7 @@ import { DriveHeader } from "@/components/drive/DriveHeader"
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
 import { Button } from "@/components/ui/button"
 import { ChevronLeft, ChevronRight } from "lucide-react"
+import { formatFileSize } from "@/lib/utils"
 import Link from "next/link"
 
 interface HistoryViewProps {
@@ -13,14 +14,6 @@ interface HistoryViewProps {
   totalEntries: number
 }
 
-function formatFileSize(bytes: number): string {
-  if (bytes === 0) return "0 Bytes"
-  const k = 1024
-  const sizes = ["Bytes", "KB", "MB", "GB"]
-  const i = Math.floor(Math.log(bytes) / Math.log(k))
-  return Number.parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i]
-}
-
 function formatDateTime(timestamp: number): string {
   return new Date(timestamp * 1000).toLocaleString()
 }