11<script setup lang="ts">
22import { invoke } from ' @tauri-apps/api/core' ;
3+ import { join } from ' @tauri-apps/api/path' ;
34import { computed , onMounted , ref , watch } from ' vue' ;
45
5- interface ListDisplayInfo {
6- canonInfo: CanonInfo ;
7- instance? : Instance ;
8- children? : ListDisplayInfo [];
9- }
6+ import type { ListDisplayInfo } from ' @core/instances' ;
7+ import { formatSize } from ' @core/utils' ;
108
119const props = defineProps <{
1210 instanceData: ListDisplayInfo ;
1311}>();
1412
1513const totalBytes = ref <number | null >(null );
14+ const modsTotalBytes = ref <number | null >(null );
1615const isLoading = ref (true );
1716const hasError = ref (false );
1817
19- function formatSize(bytes : number ): string {
20- if (bytes < 1024 ) return ` ${bytes } B ` ;
21- if (bytes < 1024 * 1024 ) return ` ${(bytes / 1024 ).toFixed (1 )} KB ` ;
22- if (bytes < 1024 * 1024 * 1024 ) return ` ${(bytes / (1024 * 1024 )).toFixed (1 )} MB ` ;
23- return ` ${(bytes / (1024 * 1024 * 1024 )).toFixed (2 )} GB ` ;
24- }
25-
2618const totalFileSize = computed (() => {
2719 if (isLoading .value ) return ' ...' ;
2820 if (hasError .value || totalBytes .value === null ) return ' N/A' ;
2921 return formatSize (totalBytes .value );
3022});
3123
24+ const modsFileSize = computed (() => {
25+ if (isLoading .value ) return ' ...' ;
26+ if (hasError .value || modsTotalBytes .value === null ) return ' N/A' ;
27+ return formatSize (modsTotalBytes .value );
28+ });
29+
3230const modsCount = computed (() => {
3331 if (props .instanceData .canonInfo .kind === ' engine' ) {
3432 return props .instanceData .canonInfo .softcode_list .length ;
@@ -42,24 +40,25 @@ async function computeSize() {
4240 hasError .value = false ;
4341
4442 try {
45- if (props .instanceData .canonInfo .kind === ' engine' ) {
46- // scan the engines mods/ folder directly on the rust side.
47- // ts includes ALL mods regardless of whether they have valid modpack.ini,
48- // so the count is always accurate even when some mods fail to parse.
43+ totalBytes .value = await invoke <number >(' get_dir_size' , {
44+ folderPath: props .instanceData .canonInfo .folder_path ,
45+ });
4946
50- // in summary: bypass everything and just get the folder size
51- const size = await invoke <number >(' get_engine_mods_size' , {
52- engineFolderPath: props .instanceData .canonInfo .folder_path ,
53- });
54- totalBytes .value = size ;
55- } else {
56- const size = await invoke <number >(' get_dir_size' , {
57- folderPath: props .instanceData .canonInfo .folder_path ,
47+ // If it's an engine that has mods, check the size of the mods folder as well
48+ if (
49+ props .instanceData .canonInfo .kind === ' engine' &&
50+ modsCount .value &&
51+ modsCount .value > 0
52+ ) {
53+ modsTotalBytes .value = await invoke <number >(' get_dir_size' , {
54+ folderPath: await join (
55+ props .instanceData .canonInfo .folder_path ,
56+ ' mods' ,
57+ ), // FIXME: mods folder could possibly be named differently (looking at you, Nightmarevision). Should account for that
5858 });
59- totalBytes .value = size ;
6059 }
6160 } catch (e ) {
62- console .error (' [ModFriend] Failed to compute size:' , e );
61+ console .error (' Failed to compute size:' , e );
6362 hasError .value = true ;
6463 } finally {
6564 isLoading .value = false ;
@@ -74,14 +73,19 @@ onMounted(computeSize);
7473 <div id =" widget" class =" ml-6 mr-6 text-wrap" >
7574 <!-- Engine view -->
7675 <template v-if =" instanceData .canonInfo .kind === ' engine' " >
77- <div class =" infobar-item" >
76+ <div class =" infobar-item" v-if = " modsCount " >
7877 <span class =" key" >Mods Count</span >
7978 <span class =" value" >{{ modsCount }}</span >
8079 </div >
80+ <div class =" infobar-item" v-if =" modsCount && modsTotalBytes !== null" >
81+ <span class =" key" >Mods Size</span >
82+ <span class =" value" >{{ modsFileSize }}</span >
83+ </div >
8184 <div class =" infobar-item" >
8285 <span class =" key" >Total Size</span >
8386 <span class =" value" >{{ totalFileSize }}</span >
8487 </div >
88+
8589 <div class =" infobar-item" >
8690 <span class =" key" >Engine Type</span >
8791 <span class =" value" >{{ instanceData.canonInfo.engine_kind }}</span >
@@ -96,7 +100,9 @@ onMounted(computeSize);
96100 </div >
97101 <div class =" infobar-item" >
98102 <span class =" key" >Version</span >
99- <span class =" value" >{{ instanceData.canonInfo.canonical_version || 'N/A' }}</span >
103+ <span class =" value" >{{
104+ instanceData.canonInfo.canonical_version || 'N/A'
105+ }}</span >
100106 </div >
101107 <div class =" infobar-item" >
102108 <span class =" key" >Mod Kind</span >
@@ -107,15 +113,15 @@ onMounted(computeSize);
107113</template >
108114
109115<style scoped lang="css">
110- @reference "maincss";
116+ @reference "maincss";
111117
112- .infobar-item {
113- @apply flex flex-col gap- 0.5 text-xs h-full ;
114- > .key {
115- @apply text-modfriend- 300 uppercase ;
116- }
117- > .value {
118- @apply text-modfriend- 100;
119- }
118+ .infobar-item {
119+ @apply flex flex-col gap- 0.5 text-xs h-full ;
120+ > .key {
121+ @apply text-modfriend- 300 uppercase ;
122+ }
123+ > .value {
124+ @apply text-modfriend- 100;
120125 }
126+ }
121127 </style >
0 commit comments