✨ Disk space bar under filesystem display

src/assets/css/filesystem.css

@@ -30,8 +30,6 @@ div#fs_disp_container {
     grid-template-columns: repeat(auto-fill, minmax(8.5vh, 1fr));
     grid-auto-rows: 8.5vh;
     grid-gap: 1vh;
-
-    border-bottom: 2.3vh solid red; /* Placeholder for the disk space bar */
 }
 
 div#fs_disp_container > * {
@@ -80,3 +78,52 @@ div.fs_disp_symlink > h3 {
 div.fs_disp_other > h3 {
     font-style: italic;
 }
+
+div#fs_space_bar {
+    position: relative;
+    top: 1.5vh;
+    left: .15vw;
+}
+
+div#fs_space_bar > h3 {
+    width: 30%;
+    margin: 0;
+    display: inline-block;
+    font-size: 1.4vh;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    bottom: .4vh;
+}
+
+div#fs_space_bar > progress {
+    width: 70%;
+    height: 2.2vh;
+    padding-top: .5vh;
+    -webkit-appearance: none;
+}
+
+div#fs_space_bar > progress::after {
+    content: "";
+    position: absolute;
+    right: -.1vh;
+    top: .45vh;
+    width: .1vh;
+    height: 1.7vh;
+    background: rgba(var(--color_r), var(--color_g), var(--color_b), 0.8);
+}
+
+div#fs_space_bar > progress::-webkit-progress-bar {
+    background: rgba(var(--color_r), var(--color_g), var(--color_b), 0.4);
+    height: .7vh;
+    position: relative;
+    top: .7vh;
+}
+
+div#fs_space_bar > progress::-webkit-progress-value {
+    background: rgb(var(--color_r), var(--color_g), var(--color_b));
+    height: .7vh;
+    position: relative;
+    bottom: .7vh;
+    transition: width .5s cubic-bezier(0.4, 0, 1, 1);
+}

src/classes/filesystem.class.js

@@ -4,6 +4,7 @@ class FilesystemDisplay {
 
         const fs = require("fs");
         const path = require("path");
+        const si = require("systeminformation");
         this.cwd = [];
         this.iconcolor = `rgb(${window.theme.r}, ${window.theme.g}, ${window.theme.b})`;
         this.icons = {
@@ -18,8 +19,16 @@ class FilesystemDisplay {
         container.innerHTML = `
             <h3 class="title"><p>FILESYSTEM</p><p id="fs_disp_title_dir"></p></h3>
             <div id="fs_disp_container">
+            </div>
+            <div id="fs_space_bar">
+                <h3>Calculating available space...</h3><progress value="100" max="100"></progress>
             </div>`;
         this.filesContainer = document.getElementById("fs_disp_container");
+        this.space_bar = {
+            text: document.querySelector("#fs_space_bar > h3"),
+            bar: document.querySelector("#fs_space_bar > progress")
+        };
+        this.fsBlock = {};
         this.failed = false;
         this._runNextTick = false;
 
@@ -112,7 +121,15 @@ class FilesystemDisplay {
                                     });
                                 });
 
-                                this.render();
+                                si.fsSize(d => {
+                                    d.forEach(fsBlock => {
+                                        if (window.term.cwd.startsWith(fsBlock.mount)) {
+                                            this.fsBlock = fsBlock;
+                                        }
+                                    });
+
+                                    this.render();
+                                });
                             }
                         });
                     });
@@ -159,17 +176,19 @@ class FilesystemDisplay {
                             </div>`;
             });
             this.filesContainer.innerHTML = filesDOM;
-        };
 
-        this._escapeHtml = (text) => {
-            let map = {
-                '&': '&amp;',
-                '<': '&lt;',
-                '>': '&gt;',
-                '"': '&quot;',
-                "'": '&#039;'
-            };
-            return text.replace(/[&<>"']/g, m => {return map[m];});
+            this.space_bar.text.innerHTML = `Mount <strong>${this.fsBlock.mount}</strong> used <strong>${Math.round(this.fsBlock.use)}%</strong>`;
+            this.space_bar.bar.value = Math.round(this.fsBlock.use);
+        };
+    }
+    _escapeHtml(text) {
+        let map = {
+            '&': '&amp;',
+            '<': '&lt;',
+            '>': '&gt;',
+            '"': '&quot;',
+            "'": '&#039;'
         };
+        return text.replace(/[&<>"']/g, m => {return map[m];});
     }
 }