From a28af7fe5159c80f8a9ce144caac0f888542228c Mon Sep 17 00:00:00 2001
From: James Prevett <jp@jamespre.dev>
Date: Sun, 13 Oct 2024 16:08:52 -0500
Subject: [PATCH] Added file size formatting

---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 src/explorer.ts   | 7 +++++--
 src/styles.css    | 1 +
 4 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 01903f0..bc28f13 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,7 +19,7 @@
 				"@zenfs/zip": "^0.5.1",
 				"chalk": "^5.3.0",
 				"jquery": "^3.7.1",
-				"utilium": "^0.8.3"
+				"utilium": "^0.8.4"
 			},
 			"devDependencies": {
 				"@eslint/js": "^9.12.0",
@@ -2958,9 +2958,9 @@
 			}
 		},
 		"node_modules/utilium": {
-			"version": "0.8.3",
-			"resolved": "https://registry.npmjs.org/utilium/-/utilium-0.8.3.tgz",
-			"integrity": "sha512-oeXt8a/wBNYOfdn/uI7GGv2yeKbe+r5LXOKtRS4UFtAloZFsUFHgYhH3moX7MCQjvEI2pvuL9O0u03dHzbudow==",
+			"version": "0.8.4",
+			"resolved": "https://registry.npmjs.org/utilium/-/utilium-0.8.4.tgz",
+			"integrity": "sha512-mcwD6VHhVTXoGx7JP6QU14OA4PyfDhJGn9FALTEgbZEiKkPVpSNxAcSYNH3lsXp2MT5WeFodd+A0vz0qfP6Jsw==",
 			"license": "MIT",
 			"dependencies": {
 				"eventemitter3": "^5.0.1"
diff --git a/package.json b/package.json
index b8b2729..4c858ed 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,7 @@
 		"@zenfs/zip": "^0.5.1",
 		"chalk": "^5.3.0",
 		"jquery": "^3.7.1",
-		"utilium": "^0.8.3"
+		"utilium": "^0.8.4"
 	},
 	"devDependencies": {
 		"@eslint/js": "^9.12.0",
diff --git a/src/explorer.ts b/src/explorer.ts
index 4391ca1..b950dcf 100644
--- a/src/explorer.ts
+++ b/src/explorer.ts
@@ -1,17 +1,20 @@
 import { fs } from '@zenfs/core';
 import { cwd, join } from '@zenfs/core/emulation/path.js';
 import $ from 'jquery';
+import { formatCompact } from 'utilium';
 import { cloneTemplate } from 'utilium/dom.js';
 
+const endsWithLetter = /[^\d]$/;
+
 function createEntry(name: string) {
 	const stats = fs.statSync(join(cwd, name));
 
 	const li = $(cloneTemplate('#entry')).find('li');
 
+	const size = formatCompact(stats.size);
 	li.find('.name').text(name);
-	li.find('.size').text(stats.size);
+	li.find('.size').text(size + (endsWithLetter.test(size) ? 'B' : ' bytes'));
 	li.find('.mtime').text(stats.mtime.toLocaleString());
-
 	li.appendTo('#explorer');
 }
 
diff --git a/src/styles.css b/src/styles.css
index dcfb9c4..f5e68d6 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -111,6 +111,7 @@ select {
 		display: flex;
 		align-items: center;
 		gap: 1em;
+		margin-bottom: 0.25em;
 
 		p {
 			white-space: nowrap;