Add folder size in tree view

RobiNN1 · RobiNN1 · commit 65ec2effd6bb · 2026-01-26T00:25:41.000+01:00
diff --git a/assets/css/styles.css b/assets/css/styles.css
@@ -520,6 +520,9 @@
   .py-\[0\.4rem\] {
     padding-block: 0.4rem;
   }
+  .pe-1 {
+    padding-inline-end: calc(0.25rem * 1);
+  }
   .pe-5 {
     padding-inline-end: calc(0.25rem * 5);
   }
diff --git a/assets/js/scripts.js b/assets/js/scripts.js
@@ -398,21 +398,48 @@ if (treeview) {
     init_expand_state();
 }
 
-function update_folder_counts() {
-    const folders = document.querySelectorAll('.tree-toggle[data-path]');
+function number_format(number, decimals = 0) {
+    let parts = parseFloat(number).toFixed(decimals).split('.');
+    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, thousandssep);
+    return parts.join(decimalsep);
+}
+
+function format_bytes(bytes, decimals = 2) {
+    if (bytes > 1048576) {
+        return number_format(bytes / 1048576, decimals) + 'MB';
+    }
+
+    if (bytes > 1024) {
+        return number_format(bytes / 1024, decimals) + 'KB';
+    }
 
-    folders.forEach(folder => {
-        const path = folder.getAttribute('data-path');
-        const tree_children = document.querySelector(`.tree-children[data-path="${path}"]`);
-        const children_count = tree_children ? tree_children.querySelectorAll('.keywrapper').length : 0;
-        const items_count = folder.parentElement.querySelector('.items-count');
+    return number_format(bytes, decimals) + 'B';
+}
 
-        if (items_count) {
-            items_count.textContent = `(${children_count})`;
+function update_folder_counts() {
+    document.querySelectorAll('.tree-toggle').forEach(folder => {
+        const children_wrapper = folder.closest('.tree-group').querySelector('.tree-children');
+
+        if (children_wrapper) {
+            const total_items = children_wrapper.querySelectorAll('.keywrapper').length;
+            let total_bytes = 0;
+            children_wrapper.querySelectorAll('.file-size').forEach(el => {
+                const bytes = parseFloat(el.getAttribute('data-bytes')) || 0;
+                total_bytes += bytes;
+            });
+
+            const items_count_span = folder.parentElement.querySelector('.items-count');
+            if (items_count_span) {
+                items_count_span.textContent = `(${total_items} items, ${format_bytes(total_bytes)})`;
+            }
         }
     });
 }
 
+document.addEventListener('DOMContentLoaded', () => {
+    update_folder_counts();
+});
+
 /**
  * Light / Dark mode
  */
diff --git a/templates/layout.twig b/templates/layout.twig
@@ -30,8 +30,9 @@
 
         const panels_refresh_interval = {{ config('panelrefresh', 30) * 1000 }};
         const ajax_panels = {{ ajax_panels is defined and ajax_panels == true ? 'true' : 'false' }};
-        const metrics_refresh_interval = {{ config('metricsrefresh', 60) * 1000 }};
         let metrics_active_filter = {{ config('metricstab', 1440) }};
+        const decimalsep = '{{ config('decimalsep', ',') }}';
+        const thousandssep = '{{ config('thousandssep', ' ') }}';
     </script>
 </head>
 <body class="flex flex-col min-h-screen text-gray-900 bg-gray-100 dark:text-gray-200 dark:bg-gray-900" data-dashboard="{{ current }}">
diff --git a/templates/partials/tree_view.twig b/templates/partials/tree_view.twig
@@ -6,7 +6,7 @@
         {% if item.type == 'folder' %}
             <div class="tree-group border-t border-gray-200 dark:border-gray-700" style="--level: {{ level }}">
                 <div class="flex gap-1 items-center py-1 px-6 hover:bg-gray-50 dark:hover:bg-white/5" style="padding-left: calc({{ level }} * 20px + 1.5rem)">
-                    <div>{{ components.checkbox('check-all') }}</div>
+                    <div class="pe-1" title="Check all">{{ components.checkbox('check-all') }}</div>
                     <button class="flex gap-1 items-center tree-toggle" data-path="{{ item.path }}">
                         {{ svg('down', 10, '-rotate-90') }}
                         <span class="tree">{{ item.name }}{{ separator }}*</span>
@@ -47,7 +47,7 @@
                             {% elseif item_key starts with 'timediff_' and kitem is not empty %}
                                 <span title="{{ kitem|time }}">{{- kitem|timediff -}}</span>
                             {% elseif item_key starts with 'bytes_' %}
-                                {{- kitem|bytes -}}
+                                <span class="file-size" data-bytes="{{ kitem }}">{{- kitem|bytes -}}</span>
                             {% else %}
                                 {{- kitem -}}
                             {% endif %}

Original file line number	Diff line number	Diff line change
`@@ -520,6 +520,9 @@`
`520`	`520`	`.py-\[0\.4rem\] {`
`521`	`521`	`padding-block: 0.4rem;`
`522`	`522`	`}`
	`523`	`+ .pe-1 {`
	`524`	`+ padding-inline-end: calc(0.25rem * 1);`
	`525`	`+ }`
`523`	`526`	`.pe-5 {`
`524`	`527`	`padding-inline-end: calc(0.25rem * 5);`
`525`	`528`	`}`