fux

src-next/components/Tree/index.tsx

@@ -1,63 +1,73 @@
-"use client"
-
-import React, {useEffect} from 'react';
-import TreeNode from '../TreeNode';
-import {  } from "@tauri-apps/api";
-import {invoke} from "@tauri-apps/api/core";
-import { listen } from '@tauri-apps/api/event';
+"use client";
 
+import React, { useEffect } from "react";
+import TreeNode from "../TreeNode";
+import { invoke } from "@tauri-apps/api/core";
+import { listen } from "@tauri-apps/api/event";
 
 interface TreeNodeData {
   name: string;
   path: string;
-  type: "folder" | "file"; // Enforce specific values for 'type'
+  type: "folder" | "file"; // Specific values for 'type'
   totalSize: number;
   subfolderCount: number;
   fileCount: number;
   children?: TreeNodeData[];
 }
 
-
 interface TreeProps {
   data: TreeNodeData[];
 }
 
-
 const Tree: React.FC<TreeProps> = () => {
-  const [folders, setFolders] = React.useState<TreeNodeData>();
+  const [rootNode, setRootNode] = React.useState<TreeNodeData | null>(null);
 
-  function countTotalFolderChildren(root: TreeNodeData): number {
-    let count = 0;
+  // Helper function to recursively render TreeNodeData
+  const renderTreeNode = (node: TreeNodeData, rootSize: number) => {
+    return (
+        <TreeNode key={node.path} node={node} rootSize={rootSize}>
+          {node.children &&
+              node.children.map((child) => renderTreeNode(child, rootSize))}
+        </TreeNode>
+    );
+  };
+
+  const countTotalSizeFolderChildren = (root: TreeNodeData): number => {
+    let size = 0;
 
     if (root.children && root.children.length > 0) {
       for (const child of root.children) {
-        if (child.type === 'folder') {
-          count += child.subfolderCount + countTotalFolderChildren(child);
+        if (child.type === "folder") {
+          size += child.totalSize;
         }
       }
     }
 
-    return count;
-  }
+    return size;
+  };
 
   useEffect(() => {
-    listen<any>('folders-loaded', (event) => {
-      setFolders(event.payload)
+    listen<any>("folders-loaded", (event) => {
+      setRootNode(event.payload);
     });
 
     setInterval(async () => {
-      invoke('load_folders')
+      invoke("load_folders")
           .then(() => console.log("Folders loaded"))
-          .catch(console.error)
-    }, 5000)
-  }, [])
+          .catch(console.error);
+    }, 5000);
+  }, []);
+
+  if (!rootNode) {
+    return <div>Loading...</div>;
+  }
+
+  const rootSize = countTotalSizeFolderChildren(rootNode);
 
   return (
-    <div className="tree">
-      {folders.map((node) => (
-        <TreeNode key={node.path} node={node} rootSize={countTotalFolderChildren(folders)} />
-      ))}
-    </div>
+      <div className="tree">
+        {renderTreeNode(rootNode, rootSize)}
+      </div>
   );
 };
 

src-next/components/TreeNode/index.tsx

@@ -3,13 +3,13 @@
 import React, { useState } from 'react';
 
 interface TreeNodeData {
-  name: string;
-  type: string;
-  path: string;
-  subfolders: number;
-  size: number;
-  files: number;
-  children?: TreeNodeData[];
+    name: string;
+    path: string;
+    type: "folder" | "file"; // Specific values for 'type'
+    totalSize: number;
+    subfolderCount: number;
+    fileCount: number;
+    children?: TreeNodeData[];
 }
 
 interface TreeNodeProps {
@@ -17,6 +17,16 @@ interface TreeNodeProps {
   rootSize: number;
 }
 
+function beautifyBytes(bytes: number): string {
+    if (bytes === 0) return "0 Bytes";
+
+    const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(1024));
+    const readableSize = (bytes / Math.pow(1024, i)).toFixed(2);
+
+    return `${readableSize} ${sizes[i]}`;
+}
+
 const TreeNode: React.FC<TreeNodeProps> = ({ node, rootSize }) => {
   const [isExpanded, setIsExpanded] = useState(false);
 
@@ -24,14 +34,15 @@ const TreeNode: React.FC<TreeNodeProps> = ({ node, rootSize }) => {
     setIsExpanded(!isExpanded);
   };
 
-  const percentage = (node.size / rootSize) * 100;
+  const percentage = (node.totalSize / rootSize) * 100;
 
   return (
     <div className="treeNode">
       <div className="nodeHeader" onClick={toggleExpand}>
-        <span className="nodeName">{node.name}</span>
-                <span className="subfolderBadge">Subfolders: {node.subfolders}</span>
-                <span className="fileBadge">Files: {node.files}</span>
+            <span className="nodeName">{node.name}</span>
+              <span className="subfolderBadge">Subfolders: {node.subfolderCount}</span>
+              <span className="fileBadge">Files: {node.fileCount}</span>
+              <span className="fileBadge">Size: {beautifyBytes(node.totalSize)}</span>
               </div>
               <div className="progressBarContainer">
                 <div

src-next/css/index.css

@@ -89,4 +89,4 @@ body {
 
 .children {
   margin-left: 10px;
-}
+}

src-tauri/src/folder_crawler/mod.rs

@@ -35,6 +35,10 @@ pub fn load_folder(path : PathBuf) -> FolderData {
         }
     }
 
+    for child in &children {
+        total_size += child.total_size;
+    }
+
     FolderData {
         name: path.file_name().unwrap().to_str().unwrap().to_string(),
         path: path.to_str().unwrap().to_string(),

src-tauri/src/main.rs

@@ -4,7 +4,7 @@
 )]
 use std::path::PathBuf;
 mod folder_crawler;
-use tauri::{AppHandle, Emitter, EventTarget};
+use tauri::{AppHandle, Emitter};
 
 fn main() {
     tauri::Builder::default()