Show storage usage.

Author: soup-bowl

frontend/src/modal/Settings.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react"
+import { useEffect, useState } from "react"
 import {
 	IonModal,
 	IonHeader,
@@ -12,9 +12,11 @@ import {
 	IonNote,
 	IonList,
 	IonInputPasswordToggle,
+	IonLabel,
 } from "@ionic/react"
 import { useQueryClient } from "@tanstack/react-query"
 import { useAuth } from "../hooks"
+import { formatBytes } from "../utils"
 
 interface Props {
 	open: boolean
@@ -27,6 +29,17 @@ const Settings: React.FC<Props> = ({ open, onClose, onSave }) => {
 	const [{ username, token }, saveAuth, clearAuth] = useAuth()
 	const [newUsername, setNewUsername] = useState<string>(username ?? "")
 	const [newPassword, setNewPassword] = useState<string>(token ?? "")
+	const [storageInfo, setStorageInfo] = useState<{ usage: string; quota: string } | undefined>()
+
+	useEffect(() => {
+		if ("storage" in navigator && "estimate" in navigator.storage) {
+			navigator.storage.estimate().then(({ usage, quota }) => {
+				if (usage && quota) {
+					setStorageInfo({ usage: formatBytes(usage), quota: formatBytes(quota) })
+				}
+			})
+		}
+	}, [])
 
 	const handleSave = () => {
 		saveAuth(newUsername, newPassword)
@@ -74,6 +87,14 @@ const Settings: React.FC<Props> = ({ open, onClose, onSave }) => {
 					<a href="https://www.discogs.com/settings/developers">visit the Developer page</a> and copy your
 					token, or click Generate if you do not have one.
 				</IonNote>
+				<IonList inset={true}>
+					<IonItem>
+						<IonLabel>Storage Used</IonLabel>
+						<IonLabel slot="end">
+							{storageInfo?.usage ?? "Unknown"} of {storageInfo?.quota ?? "Unknown"}
+						</IonLabel>
+					</IonItem>
+				</IonList>
 			</IonContent>
 		</IonModal>
 	)

frontend/src/utils/index.ts

@@ -1,2 +1,27 @@
 export { splitRecordsByYear, splitRecordsByLabel, splitRecordsByArtist } from "./collectionSort"
 export { findLocalImageById } from "./search"
+
+/**
+ * Formats a number of bytes as a human-readable string, with the size unit automatically selected based on the size of the number.
+ *
+ * Copied from https://github.com/soup-bowl/libwhatsthis/blob/main/src/string/index.ts
+ *
+ * @param bytes - The number of bytes to format.
+ * @param decimals - The number of decimal places to include in the formatted string. Defaults to 2.
+ * @returns A human-readable string representing the given number of bytes.
+ *
+ * @example
+ * const fileSize = formatBytes(1024);
+ * console.log(fileSize); // '1.00 KB'
+ */
+export const formatBytes = (bytes: number, decimals: number = 2): string => {
+	if (bytes === 0) return "0 Bytes"
+
+	const k = 1024
+	const dm = decimals < 0 ? 0 : decimals
+	const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"]
+
+	const i = Math.floor(Math.log(bytes) / Math.log(k))
+
+	return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i]
+}