feat: calculate used storage

components/files/preview.tsx

@@ -1,5 +1,6 @@
 "use client"
 
+import { formatBytes } from "@/lib/utils"
 import { File } from "@prisma/client"
 import Image from "next/image"
 import Link from "next/link"
@@ -9,9 +10,7 @@ export function FilePreview({ file }: { file: File }) {
   const [isEnlarged, setIsEnlarged] = useState(false)
 
   const fileSize =
-    file.metadata && typeof file.metadata === "object" && "size" in file.metadata
-      ? Number(file.metadata.size) / 1024 / 1024
-      : 0
+    file.metadata && typeof file.metadata === "object" && "size" in file.metadata ? Number(file.metadata.size) : 0
 
   return (
     <>
@@ -45,7 +44,7 @@ export function FilePreview({ file }: { file: File }) {
             <strong>Uploaded:</strong> {format(file.createdAt, "MMM d, yyyy")}
           </p> */}
           <p className="text-sm">
-            <strong>Size:</strong> {fileSize < 1 ? (fileSize * 1024).toFixed(2) + " KB" : fileSize.toFixed(2) + " MB"}
+            <strong>Size:</strong> {formatBytes(fileSize)}
           </p>
         </div>
       </div>

components/sidebar/sidebar-user.tsx

@@ -10,7 +10,8 @@ import {
 import { SidebarMenuButton } from "@/components/ui/sidebar"
 import { UserProfile } from "@/lib/auth"
 import { authClient } from "@/lib/auth-client"
-import { LogOut, MoreVertical, User } from "lucide-react"
+import { formatBytes } from "@/lib/utils"
+import { HardDrive, LogOut, MoreVertical, User } from "lucide-react"
 import Link from "next/link"
 import { redirect } from "next/navigation"
 
@@ -59,6 +60,13 @@ export default function SidebarUser({ profile, isSelfHosted }: { profile: UserPr
               Your Subscription
             </Link>
           </DropdownMenuItem> */}
+
+          <DropdownMenuItem asChild>
+            <Link href="/settings/profile" className="flex items-center gap-2">
+              <HardDrive className="h-4 w-4" />
+              Storage: {profile.storageUsed ? formatBytes(profile.storageUsed) : "N/A"}
+            </Link>
+          </DropdownMenuItem>
         </DropdownMenuGroup>
         {!isSelfHosted && (
           <>