[feat] Add file sizes+oversize warning

assets/jsons/translations/de.json

@@ -143,6 +143,7 @@
                 "mods-grid": {
                     "header-bar": {
                         "name": "Name",
+                        "size": "Größe",
                         "installed": "Installiert",
                         "latest": "Neueste",
                         "description": "Beschreibung",

assets/jsons/translations/en.json

@@ -143,6 +143,7 @@
                 "mods-grid": {
                     "header-bar": {
                         "name": "Name",
+                        "size": "Size",
                         "installed": "Installed",
                         "latest": "Latest",
                         "description": "Description",

assets/jsons/translations/es.json

@@ -143,6 +143,7 @@
                 "mods-grid": {
                     "header-bar": {
                         "name": "Nombre",
+                        "size": "Tamaño",
                         "installed": "Instalado",
                         "latest": "Último",
                         "description": "Descripción",

assets/jsons/translations/fr.json

@@ -143,6 +143,7 @@
                 "mods-grid": {
                     "header-bar": {
                         "name": "Nom",
+                        "size": "Taille",
                         "installed": "Installé",
                         "latest": "Récent",
                         "description": "Description",

assets/jsons/translations/it.json

@@ -143,6 +143,7 @@
                 "mods-grid": {
                     "header-bar": {
                         "name": "Nome",
+                        "size": "Dimensione",
                         "installed": "Installata",
                         "latest": "Ultima Versione",
                         "description": "Descrizione",

assets/jsons/translations/ja.json

@@ -143,6 +143,7 @@
                 "mods-grid": {
                     "header-bar": {
                         "name": "名前",
+                        "size": "サイズ",
                         "installed": "インストール済み",
                         "latest": "最新",
                         "description": "說明",

assets/jsons/translations/ko.json

@@ -143,6 +143,7 @@
                 "mods-grid": {
                     "header-bar": {
                         "name": "이름",
+                        "size": "크기",
                         "installed": "설치됨",
                         "latest": "최신",
                         "description": "설명",

assets/jsons/translations/pt-br.json

@@ -143,6 +143,7 @@
                 "mods-grid": {
                     "header-bar": {
                         "name": "Nome",
+                        "size": "tamanho",
                         "installed": "Instalado",
                         "latest": "Mais recente",
                         "description": "Descrição",

assets/jsons/translations/ru.json

@@ -143,6 +143,7 @@
                 "mods-grid": {
                     "header-bar": {
                         "name": "Имя",
+                        "size": "Размер",
                         "installed": "Установлено",
                         "latest": "Latest",
                         "description": "Описание",

assets/jsons/translations/zh-tw.json

@@ -143,6 +143,7 @@
                 "mods-grid": {
                     "header-bar": {
                         "name": "名稱",
+                        "size": "大小",
                         "installed": "已安裝",
                         "latest": "最新",
                         "description": "描述",

assets/jsons/translations/zh.json

@@ -143,6 +143,7 @@
                 "mods-grid": {
                     "header-bar": {
                         "name": "名称",
+                        "size": "大小",
                         "installed": "已安装",
                         "latest": "最新",
                         "description": "描述",

src/renderer/components/version-viewer/slides/mods/mod-item.component.tsx

@@ -7,6 +7,7 @@ import useDoubleClick from "use-double-click";
 import { useOnUpdate } from "renderer/hooks/use-on-update.hook";
 import striptags from "striptags";
 import { safeGt } from "shared/helpers/semver.helpers";
+import Tippy from "@tippyjs/react";
 
 type Props = {
     className?: string;
@@ -21,6 +22,42 @@ type Props = {
     onUninstall?: () => void;
 };
 
+type FileSizeProps = {
+    fileSize?: number;
+    wantInfoStyle: CSSProperties;
+};
+
+function FileSizeText({ fileSize, wantInfoStyle }: FileSizeProps) {
+
+    const verifyFileSize = fileSize !== undefined;
+
+    const isMediumMod = verifyFileSize && fileSize > 1024 * 1024 * 50; // 50MB
+
+    const isLargeMod = verifyFileSize && fileSize > 1024 * 1024 * 100; // 100MB
+
+    const getFormattedSize = () : string => {
+        if (!verifyFileSize)
+            return `-`;
+        if (fileSize < 1024 * 1024)
+            return `${(fileSize/1024).toFixed(2)}KB`;
+        return `${(fileSize/1024/1024).toFixed(2)}MB`;
+    };
+
+    return (
+
+        <Tippy
+            content={(isLargeMod ? `This is a very large mod!` : (isMediumMod ? `This is a large mod!` : "") || "")}
+            placement="left"
+            theme={`${(isLargeMod ? `red` : (isMediumMod ? `yellow` : "") || "")}`}
+            className={`${isLargeMod || isMediumMod ? `` : `opacity-0`}`}
+            delay={[50, 0]} >
+                <span className={`min-w-0 text-center bg-inherit py-2 px-1 text-sm border-t-2 border-b-2 group-hover:brightness-90 ${(isLargeMod ? "text-red-400" : (isMediumMod ? "text-yellow-400" : "") || "")}`} style={wantInfoStyle}>
+                    {getFormattedSize()}
+                </span>
+        </Tippy>
+    );
+}
+
 export function ModItem({ className, mod, installedVersion, isDependency, isSelected, onChange, wantInfo, onWantInfo, disabled, onUninstall }: Props) {
 
     const themeColor = useThemeColor("second-color");
@@ -65,6 +102,7 @@ export function ModItem({ className, mod, installedVersion, isDependency, isSele
             <span className="min-w-0 text-center bg-inherit py-2 px-1 text-sm border-t-2 border-b-2 group-hover:brightness-90" style={wantInfoStyle}>
                 {mod.version.modVersion}
             </span>
+            <FileSizeText fileSize={mod.version.fileSize} wantInfoStyle={wantInfoStyle} />
             <span title={striptags(mod.mod?.description ?? "", { tagReplacementText: " " })} className="px-3 bg-inherit whitespace-nowrap text-ellipsis overflow-hidden py-2 text-sm border-t-2 border-b-2 group-hover:brightness-90" style={wantInfoStyle}>
                 {striptags(mod.mod?.summary ?? "", { tagReplacementText: " " })}
             </span>

src/renderer/components/version-viewer/slides/mods/mods-grid.component.tsx

@@ -58,14 +58,15 @@ export function ModsGrid({ modsMap, installed, modsSelected, onModChange, moreIn
 
     return (
         modsMap && (
-            <div className="grid gap-y-1 grid-cols-[40px_min-content_min-content_min-content_1fr_min-content] bg-light-main-color-2 dark:bg-main-color-2 text-main-color-1 dark:text-light-main-color-1">
+            <div className="grid gap-y-1 grid-cols-[40px_min-content_min-content_min-content_min-content_1fr_min-content] bg-light-main-color-2 dark:bg-main-color-2 text-main-color-1 dark:text-light-main-color-1">
                 <span className="absolute z-10 top-0 w-full h-8 bg-inherit rounded-tl-md" />
                 <span className="z-10 sticky flex items-center justify-end top-0 bg-inherit border-b-2 border-main-color-1 rounded-tl-md">
                     <BsmButton className="rounded-full h-6 w-6 p-[2px]" withBar={false} icon="search" onClick={handleToogleFilter} />
                 </span>
-                <span className="z-10 sticky top-0 flex items-center bg-inherit border-main-color-1 border-b-2 h-8 px-1 whitespace-nowrap">{filterEnabled ? <motion.input autoFocus className="bg-light-main-color-1 dark:bg-main-color-1 rounded-md h-6 px-2" initial={{ width: 0 }} animate={{ width: "250px" }} transition={{ ease: "easeInOut", duration: 0.15 }} onChange={e => handleInput(e.target.value)} /> : <span className="w-full text-center">{t("pages.version-viewer.mods.mods-grid.header-bar.name")}</span>}</span>
+                <span className="z-10 sticky top-0 flex items-center bg-inherit border-main-color-1 border-b-2 h-8 px-1 whitespace-nowrap">{filterEnabled ? <motion.input autoFocus className="bg-light-main-color-1 dark:bg-main-color-1 rounded-md h-6 px-2" initial={{ width: 0 }} animate={{ width: "200px" }} transition={{ ease: "easeInOut", duration: 0.15 }} onChange={e => handleInput(e.target.value)} /> : <span className="w-full text-center">{t("pages.version-viewer.mods.mods-grid.header-bar.name")}</span>}</span>
                 <span className="z-10 sticky flex items-center justify-center top-0 bg-inherit border-b-2 border-main-color-1 h-8 px-2 whitespace-nowrap">{t("pages.version-viewer.mods.mods-grid.header-bar.installed")}</span>
                 <span className="z-10 sticky flex items-center justify-center top-0 bg-inherit border-b-2 border-main-color-1 h-8 px-2 whitespace-nowrap">{t("pages.version-viewer.mods.mods-grid.header-bar.latest")}</span>
+                <span className="z-10 sticky flex items-center justify-center top-0 bg-inherit border-b-2 border-main-color-1 h-8 px-2 whitespace-nowrap">{t("pages.version-viewer.mods.mods-grid.header-bar.size")}</span>
                 <span className="z-10 sticky flex items-center justify-center top-0 bg-inherit border-b-2 border-main-color-1 h-8 whitespace-nowrap">{t("pages.version-viewer.mods.mods-grid.header-bar.description")}</span>
                 <span className="z-10 sticky top-0 bg-inherit border-b-2 border-main-color-1 h-8 flex justify-start items-center py-1 pl-[3px] min-w-[50px]">
                     <BsmDropdownButton className="h-full aspect-square relative rounded-full bg-light-main-color-1 dark:bg-main-color-3" withBar={false} icon="three-dots" buttonClassName="!rounded-full !p-[2px] !bg-light-main-color-2 dark:!bg-main-color-2 hover:!bg-light-main-color-1 dark:hover:!bg-main-color-3" menuTranslationY="5px" items={[

src/renderer/index.css

@@ -114,6 +114,22 @@
     @apply border-r-neutral-900;
 }
 
+.tippy-box[data-theme~='red'] {
+    @apply bg-neutral-900;
+    @apply text-red-400;
+}
+.tippy-box[data-theme~='red'][data-placement^='left'] > .tippy-arrow::before {
+    @apply border-l-neutral-900;
+}
+
+.tippy-box[data-theme~='yellow'] {
+    @apply bg-neutral-900;
+    @apply text-yellow-400;
+}
+.tippy-box[data-theme~='yellow'][data-placement^='left'] > .tippy-arrow::before {
+    @apply border-l-neutral-900;
+}
+
 .bg-theme-1 { @apply bg-light-main-color-1 dark:bg-main-color-1; }
 .bg-theme-2 { @apply bg-light-main-color-2 dark:bg-main-color-2; }
 .bg-theme-3 { @apply bg-light-main-color-3 dark:bg-main-color-3; }

src/shared/models/mods/mod.interface.ts

@@ -42,6 +42,7 @@ export interface BbmModVersion {
     downloadCount: number;
     lastApprovedById?: number;
     lastUpdatedById?: number;
+    fileSize?: number;
     createdAt?: Date;
     updatedAt?: Date;
 }