Added progress bar

package.json

@@ -42,6 +42,9 @@
 		"rules": {
 			"indent": ["error", "tab", { "SwitchCase": 1 }],
 			"semi": "error",
+			"no-var": "error",
+			"prefer-const": "error",
+			"quotes": ["error", "double"],
 
 			"jsdoc/no-undefined-types": "warn",
 			"jsdoc/require-param": "warn",

src/components/applications/settings/Settings.jsx

@@ -9,6 +9,7 @@ import { VirtualRoot } from "../../../features/virtual-drive/virtual-root.js";
 import { StorageManager } from "../../../features/storage/storage.js";
 import { round } from "../../../features/math/round.js";
 import { Button } from "../../utils/Button.jsx";
+import { ProgressBar } from "../../utils/ProgressBar.jsx";
 
 /**
  * @param {object} props 
@@ -58,6 +59,7 @@ function StorageTab({ virtualRoot }) {
 	return (<>
 		<div className={styles["Option"]}>
 			<p className={styles["Label"]}>Virtual Drive ({round(maxKB, 1)} KB)</p>
+			<ProgressBar fillPercentage={usedKB / maxKB * 100} className={styles["Progress-bar"]}/>
 			<p>{round(usedKB, 1)} KB used - {round(freeKB, 1)} KB free</p>
 		</div>
 		<div className={styles["Option"]}>

src/components/applications/settings/Settings.module.css

@@ -17,7 +17,7 @@
 	height: 100%;
 	max-width: 50%;
 	padding: 0.5rem;
-	background-color: var(--background-color-b);
+	background-color: var(--background-color-ba);
 	resize: horizontal;
 	overflow: hidden;
 }
@@ -128,4 +128,8 @@
 
 	color: var(--background-color-a);
 	background-color: var(--red-a);
+}
+
+.Progress-bar {
+	width: 15rem;
 }

src/components/applications/terminal/Terminal.module.css

@@ -29,6 +29,10 @@
 	text-align: start;
 }
 
+.Input {
+	height: 1.25rem;
+}
+
 .Input input {
 	width: 100%;
 	height: 100%;

src/components/utils/ProgressBar.jsx

@@ -0,0 +1,21 @@
+import { clamp } from "../../features/math/clamp.js";
+import styles from "./ProgressBar.module.css";
+
+/**
+ * @param {object} props 
+ * @param {number} props.fillPercentage 
+ * @param {string} props.fillColor 
+ * @param {string} props.backgroundColor 
+ * @param {string} props.align
+ * @param {string} props.className
+ */
+export function ProgressBar({ fillPercentage, fillColor, backgroundColor, align = "left", className = "" }) {
+	return (
+		<div className={`${styles.Container} ${className}`} style={{ backgroundColor: backgroundColor }}>
+			<div
+				className={`${styles.Fill} ${align}`}
+				style={{ backgroundColor: fillColor, "--fill": `${clamp(fillPercentage, 0.1, 100)}%` }}
+			/>
+		</div>
+	);
+}

src/components/utils/ProgressBar.module.css

@@ -0,0 +1,18 @@
+.Container {
+	position: relative;
+	width: 100%;
+	min-height: 2rem;
+	max-height: 100%;
+	background-color: var(--background-color-d);
+}
+
+.Fill {
+	--fill: 0%;
+
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: var(--fill);
+	height: 100%;
+	background-color: var(--blue-a);
+}

src/features/math/clamp.js

@@ -0,0 +1,15 @@
+/**
+ * @param {number} value 
+ * @param {number} min 
+ * @param {number} max 
+ * @returns {number}
+ */
+export function clamp(value, min, max) {
+	if (value < min) {
+		return min;
+	} else if (value > max) {
+		return max;
+	} else {
+		return value;
+	}
+}

src/styles/global.css

@@ -20,7 +20,9 @@
 	--dark-grey-a: hsl(211, 14%, 40%);
 	--dark-grey-b: hsl(212, 29%, 19%);
 	--dark-grey-c: hsl(212, 29%, 15%);
+	--dark-grey-ca: hsl(212, 27%, 12%);
 	--dark-grey-d: hsl(212, 14%, 10%);
+	--dark-grey-e: hsl(212, 12%, 8%);
 
 	--foreground-color-a: #fff;
 	--foreground-color-b: var(--grey-a);
@@ -28,7 +30,9 @@
 
 	--background-color-a: var(--dark-grey-b);
 	--background-color-b: var(--dark-grey-c);
+	--background-color-ba: var(--dark-grey-ca);
 	--background-color-c: var(--dark-grey-d);
+	--background-color-d: var(--dark-grey-e);
 
 	--scrollbar-color: hsla(211, 29%, 40%, 25%);