add more shit

src-tauri/src/main.rs

···
 
 // Scans all files under the "Pictures/VRChat" path
 // then sends the list of photos to the frontend
+#[derive(Clone, serde::Serialize)]
+struct PhotosLoadedResponse{
+  photos: Vec<path::PathBuf>,
+  size: usize
+}
+
 #[tauri::command]
 fn load_photos(window: tauri::Window) {
   thread::spawn(move || {
     let base_dir = dirs::home_dir().unwrap().join("Pictures\\VRChat");
 
     let mut photos: Vec<path::PathBuf> = Vec::new();
+    let mut size: usize = 0;
 
     for folder in fs::read_dir(base_dir).unwrap() {
       let f = folder.unwrap();
···
               re2.is_match(p.file_name().to_str().unwrap())
             {
               let path = fname.to_path_buf().clone();
-              let path = path.strip_prefix(dirs::home_dir().unwrap().join("Pictures\\VRChat")).unwrap().to_path_buf();
+              let metadata = fs::metadata(&path).unwrap();
 
-              photos.push(path);
+              if metadata.is_file() {
+                size += metadata.len() as usize;
+
+                let path = path.strip_prefix(dirs::home_dir().unwrap().join("Pictures\\VRChat")).unwrap().to_path_buf();
+                photos.push(path);
+              }
             }
           }
         }
       }
     }
 
-    window.emit("photos_loaded", photos).unwrap();
+    window.emit("photos_loaded", PhotosLoadedResponse{ photos, size }).unwrap();
   });
 }
 

src/Components/App.tsx

···
   let [ confirmationBoxText, setConfirmationBoxText ] = createSignal<string>('');
   let confirmationBoxCallback = () => {}
 
+  let [ photoCount, setPhotoCount ] = createSignal(0);
+  let [ photoSize, setPhotoSize ] = createSignal(0);
+
   let setConfirmationBox = ( text: string, cb: () => void ) => {
     setConfirmationBoxText(text);
     confirmationBoxCallback = cb;
···
   return (
     <div class="container">
       <NavBar setLoadingType={setLoadingType} loggedIn={loggedIn} />
-      <PhotoList setCurrentPhotoView={setCurrentPhotoView} currentPhotoView={currentPhotoView} photoNavChoice={photoNavChoice} setPhotoNavChoice={setPhotoNavChoice} setConfirmationBox={setConfirmationBox} />
-      <PhotoViewer setPhotoNavChoice={setPhotoNavChoice} currentPhotoView={currentPhotoView} setCurrentPhotoView={setCurrentPhotoView} setConfirmationBox={setConfirmationBox} />
+      <PhotoList
+        setCurrentPhotoView={setCurrentPhotoView}
+        currentPhotoView={currentPhotoView}
+        photoNavChoice={photoNavChoice}
+        setPhotoNavChoice={setPhotoNavChoice}
+        setConfirmationBox={setConfirmationBox}
+        setPhotoCount={setPhotoCount}
+        setPhotoSize={setPhotoSize} />
 
-      <SettingsMenu />
+      <PhotoViewer
+        setPhotoNavChoice={setPhotoNavChoice}
+        currentPhotoView={currentPhotoView}
+        setCurrentPhotoView={setCurrentPhotoView}
+        setConfirmationBox={setConfirmationBox} />
+
+      <SettingsMenu
+        photoCount={photoCount}
+        photoSize={photoSize} />
 
       <div class="copy-notif">Image Copied!</div>
 

src/Components/PhotoList.tsx

···
 
 class PhotoListProps{
   setCurrentPhotoView!: ( view: any ) => any;
+  setPhotoCount!: ( value: any ) => any;
+  setPhotoSize!: ( value: any ) => any;
   currentPhotoView!: () => any;
   photoNavChoice!: () => string;
   setPhotoNavChoice!: ( view: any ) => any;
···
     invoke('load_photos')
 
     listen('photos_loaded', ( event: any ) => {
-      let photoPaths = event.payload.reverse();
+      let photoPaths = event.payload.photos.reverse();
+
+      props.setPhotoCount(photoPaths.length);
+      props.setPhotoSize(event.payload.size);
 
       photoPaths.forEach(( path: string ) => {
         let photo = new Photo(path);

src/Components/SettingsMenu.tsx

···
 import { onMount } from "solid-js";
+import { bytesToFormatted } from "../utils";
 import anime from "animejs";
 
-let SettingsMenu = () => {
+class SettingsMenuProps{
+  photoCount!: () => number;
+  photoSize!: () => number;
+}
+
+let SettingsMenu = ( props: SettingsMenuProps ) => {
   let sliderBar: HTMLElement;
   let settingsContainer: HTMLElement;
   let currentButton = 0;
···
     <div class="settings">
       <div class="settings-container" ref={( el ) => settingsContainer = el}>
         <div class="settings-block">
-          <h1>Program Settings</h1>
+          <h1>Storage Settings</h1>
+
+          <p>{ props.photoCount() } Photos ({ bytesToFormatted(props.photoSize(), 0) })</p>
         </div>
         <div class="settings-block">
           <h1>Account Settings</h1>

src/utils.ts

···
+let fileSize = [ 'B', 'KB', 'MB', 'GB', 'TB', 'PB' ];
+
+let bytesToFormatted = ( bytes: number, stage: number ): string => {
+  if(bytes >= 1000){
+    bytes = bytes / 1000;
+
+    if(fileSize[stage + 1])
+      return bytesToFormatted(bytes, stage + 1);
+    else
+      return bytes.toFixed(2) + fileSize[stage];
+  } else
+    return bytes.toFixed(2) + fileSize[stage];
+}
+
+export { bytesToFormatted };