Convert the third one too

web/apps/photos/src/components/PhotoList/dedupe.tsx

@@ -19,7 +19,7 @@ import {
 } from "react-window";
 import { Duplicate } from "services/deduplicationService";
 import { EnteFile } from "types/file";
-import { formattedBytes } from "utils/units";
+import { formattedByteSize } from "utils/units";
 
 export enum ITEM_TYPE {
     TIME = "TIME",
@@ -310,7 +310,7 @@ export function DedupePhotoList({
                       */
                     <SizeAndCountContainer span={columns}>
                         {listItem.fileCount} {t("FILES")},{" "}
-                        {formattedBytes(listItem.fileSize || 0)} {t("EACH")}
+                        {formattedByteSize(listItem.fileSize || 0)} {t("EACH")}
                     </SizeAndCountContainer>
                 );
             case ITEM_TYPE.FILE: {

web/apps/photos/src/components/PhotoList/index.tsx

@@ -24,7 +24,7 @@ import {
 import { EnteFile } from "types/file";
 import { handleSelectCreator } from "utils/photoFrame";
 import { PublicCollectionGalleryContext } from "utils/publicCollectionGallery";
-import { formattedBytes } from "utils/units";
+import { formattedByteSize } from "utils/units";
 
 const A_DAY = 24 * 60 * 60 * 1000;
 const FOOTER_HEIGHT = 90;
@@ -829,7 +829,7 @@ export function PhotoList({
                 return (
                     <SizeAndCountContainer span={columns}>
                         {listItem.fileCount} {t("FILES")},{" "}
-                        {formattedBytes(listItem.fileSize || 0)} {t("EACH")}
+                        {formattedByteSize(listItem.fileSize || 0)} {t("EACH")}
                     </SizeAndCountContainer>
                 );
             case ITEM_TYPE.FILE: {

web/apps/photos/src/components/PhotoViewer/FileInfo/RenderFileName.tsx

@@ -8,7 +8,7 @@ import Box from "@mui/material/Box";
 import { useEffect, useState } from "react";
 import { EnteFile } from "types/file";
 import { changeFileName, updateExistingFilePubMetadata } from "utils/file";
-import { formattedBytes } from "utils/units";
+import { formattedByteSize } from "utils/units";
 import { FileNameEditDialog } from "./FileNameEditDialog";
 import InfoItem from "./InfoItem";
 
@@ -33,7 +33,7 @@ const getCaption = (file: EnteFile, parsedExifData) => {
         captionParts.push(resolution);
     }
     if (fileSize) {
-        captionParts.push(formattedBytes(fileSize));
+        captionParts.push(formattedByteSize(fileSize));
     }
     return (
         <FlexWrapper gap={1}>

web/apps/photos/src/components/Sidebar/SubscriptionCard/contentOverlay/individual/usageSection.tsx

@@ -1,7 +1,7 @@
 import { SpaceBetweenFlex } from "@ente/shared/components/Container";
 import { Box, Typography } from "@mui/material";
 import { t } from "i18next";
-import { makeHumanReadableStorage } from "utils/units";
+import { formattedStorageByteSize } from "utils/units";
 
 import { Progressbar } from "../../styledComponents";
 
@@ -19,7 +19,7 @@ export function IndividualUsageSection({ usage, storage, fileCount }: Iprops) {
                     marginTop: 1.5,
                 }}
             >
-                <Typography variant="mini">{`${makeHumanReadableStorage(
+                <Typography variant="mini">{`${formattedStorageByteSize(
                     storage - usage,
                 )} ${t("FREE")}`}</Typography>
                 <Typography variant="mini" fontWeight={"bold"}>

web/apps/photos/src/components/Sidebar/SubscriptionCard/contentOverlay/storageSection.tsx

@@ -1,6 +1,6 @@
 import { Box, styled, Typography } from "@mui/material";
 import { t } from "i18next";
-import { bytesInGB, makeHumanReadableStorage } from "utils/units";
+import { bytesInGB, formattedStorageByteSize } from "utils/units";
 
 const MobileSmallBox = styled(Box)`
     display: none;
@@ -30,9 +30,9 @@ export default function StorageSection({ usage, storage }: Iprops) {
                     fontWeight={"bold"}
                     sx={{ fontSize: "24px", lineHeight: "30px" }}
                 >
-                    {`${makeHumanReadableStorage(usage, { roundUp: true })} ${t(
+                    {`${formattedStorageByteSize(usage, { round: true })} ${t(
                         "OF",
-                    )} ${makeHumanReadableStorage(storage)} ${t("USED")}`}
+                    )} ${formattedStorageByteSize(storage)} ${t("USED")}`}
                 </Typography>
             </DefaultBox>
             <MobileSmallBox>

web/apps/photos/src/components/pages/gallery/PlanSelector/plans/BfAddOnRow.tsx

@@ -2,7 +2,7 @@ import { SpaceBetweenFlex } from "@ente/shared/components/Container";
 import { Box, styled, Typography } from "@mui/material";
 
 import { Trans } from "react-i18next";
-import { makeHumanReadableStorage } from "utils/units";
+import { formattedStorageByteSize } from "utils/units";
 
 const RowContainer = styled(SpaceBetweenFlex)(({ theme }) => ({
     // gap: theme.spacing(1.5),
@@ -24,7 +24,7 @@ export function BFAddOnRow({ bonusData, closeModal }) {
                                     <Trans
                                         i18nKey={"ADD_ON_AVAILABLE_TILL"}
                                         values={{
-                                            storage: makeHumanReadableStorage(
+                                            storage: formattedStorageByteSize(
                                                 bonus.storage,
                                             ),
                                             date: bonus.validTill,

web/apps/photos/src/utils/units.ts

@@ -2,13 +2,11 @@ import { t } from "i18next";
 
 const StorageUnits = ["B", "KB", "MB", "GB", "TB"];
 
-const ONE_GB = 1024 * 1024 * 1024;
-
 /**
  * Convert the given number of {@link bytes} to their equivalent GB string with
  * {@link precision}.
  *
- * The returned string does not have the GB prefix.
+ * The returned string does not have the GB suffix.
  */
 export const bytesInGB = (bytes: number, precision = 0): string =>
     (bytes / (1024 * 1024 * 1024)).toFixed(precision);
@@ -22,7 +20,7 @@ export const bytesInGB = (bytes: number, precision = 0): string =>
  * @param precision Modify the number of digits after the decimal point.
  * Defaults to 2.
  */
-export function formattedBytes(bytes: number, precision = 2): string {
+export function formattedByteSize(bytes: number, precision = 2): string {
     if (bytes === 0 || isNaN(bytes)) {
         return "0 MB";
     }
@@ -32,10 +30,34 @@ export function formattedBytes(bytes: number, precision = 2): string {
     return (bytes / Math.pow(1024, i)).toFixed(precision) + " " + sizes[i];
 }
 
-export function makeHumanReadableStorage(
+interface FormattedStorageByteSizeOptions {
+    /**
+     * If `true` then round up the fractional quantity we obtain when dividing
+     * the number of bytes by the number of bytes in the unit that got chosen.
+     *
+     * The default behaviour is to take the ceiling.
+     */
+    round?: boolean;
+}
+
+/**
+ * Convert the given number of storage {@link bytes} to a user visible string in
+ * an appropriately sized unit.
+ *
+ * This differs from {@link formattedByteSize} in that while
+ * {@link formattedByteSize} is meant for arbitrary byte sizes, this function
+ * has a few additional beautification heuristics that we want to apply when
+ * displaying the "storage size" (in different contexts) as opposed to, say, a
+ * generic "file size".
+ *
+ * @param options
+ *
+ * @return A user visible string, including the localized unit suffix.
+ */
+export const formattedStorageByteSize = (
     bytes: number,
-    { roundUp } = { roundUp: false },
-): string {
+    options?: FormattedStorageByteSizeOptions,
+): string => {
     if (bytes <= 0) {
         return `0 ${t("STORAGE_UNITS.MB")}`;
     }
@@ -51,8 +73,8 @@ export function makeHumanReadableStorage(
 
     quantity = Number(quantity.toFixed(1));
 
-    if (bytes >= 10 * ONE_GB) {
-        if (roundUp) {
+    if (bytes >= 10 * 1024 * 1024 * 1024 /* 10 GB */) {
+        if (options?.round) {
             quantity = Math.ceil(quantity);
         } else {
             quantity = Math.round(quantity);
@@ -60,4 +82,4 @@ export function makeHumanReadableStorage(
     }
 
     return `${quantity} ${t(`STORAGE_UNITS.${unit}`)}`;
-}
+};