From f3938e5aa5e8dcdf8c91bdfa76722e0d2bad2efc Mon Sep 17 00:00:00 2001
From: Prozilla <business@prozilla.dev>
Date: Tue, 8 Aug 2023 19:10:41 +0200
Subject: [PATCH] Added progress bar

---
 package.json                                  |  3 +++
 .../applications/settings/Settings.jsx        |  2 ++
 .../applications/settings/Settings.module.css |  6 +++++-
 .../applications/terminal/Terminal.module.css |  4 ++++
 src/components/utils/ProgressBar.jsx          | 21 +++++++++++++++++++
 src/components/utils/ProgressBar.module.css   | 18 ++++++++++++++++
 src/features/math/clamp.js                    | 15 +++++++++++++
 src/styles/global.css                         |  4 ++++
 8 files changed, 72 insertions(+), 1 deletion(-)
 create mode 100644 src/components/utils/ProgressBar.jsx
 create mode 100644 src/components/utils/ProgressBar.module.css
 create mode 100644 src/features/math/clamp.js

diff --git a/package.json b/package.json
index 1513d1b..974ecfc 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/applications/settings/Settings.jsx b/src/components/applications/settings/Settings.jsx
index 9ee2cc3..527720a 100644
--- a/src/components/applications/settings/Settings.jsx
+++ b/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"]}>
diff --git a/src/components/applications/settings/Settings.module.css b/src/components/applications/settings/Settings.module.css
index 348e332..47eccc0 100644
--- a/src/components/applications/settings/Settings.module.css
+++ b/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;
 }
\ No newline at end of file
diff --git a/src/components/applications/terminal/Terminal.module.css b/src/components/applications/terminal/Terminal.module.css
index ff5ca12..acc0867 100644
--- a/src/components/applications/terminal/Terminal.module.css
+++ b/src/components/applications/terminal/Terminal.module.css
@@ -29,6 +29,10 @@
 	text-align: start;
 }
 
+.Input {
+	height: 1.25rem;
+}
+
 .Input input {
 	width: 100%;
 	height: 100%;
diff --git a/src/components/utils/ProgressBar.jsx b/src/components/utils/ProgressBar.jsx
new file mode 100644
index 0000000..c7fd3c9
--- /dev/null
+++ b/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>
+	);
+}
\ No newline at end of file
diff --git a/src/components/utils/ProgressBar.module.css b/src/components/utils/ProgressBar.module.css
new file mode 100644
index 0000000..490ed15
--- /dev/null
+++ b/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);
+}
\ No newline at end of file
diff --git a/src/features/math/clamp.js b/src/features/math/clamp.js
new file mode 100644
index 0000000..f50371a
--- /dev/null
+++ b/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;
+	}
+}
\ No newline at end of file
diff --git a/src/styles/global.css b/src/styles/global.css
index 9019ce7..2d3d8d7 100644
--- a/src/styles/global.css
+++ b/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%);