Add the database sizes into the sidebar (closes #21)

langs/en-ca.json

@@ -1,6 +1,8 @@
 {
 	"IT": {
 		"common": {
+			"artists": "Artists",
+			"images": "Images",
 			"unsaved": "This change hasn't been saved, if you close without saving it will be undone."
 		},
 		"apps": {
@@ -22,6 +24,11 @@
 				},
 				"add-link": "Add New Link"
 			},
+			"ArtSidebar": {
+				"view": "View All",
+				"add-new": "Add New",
+				"db-size": "Database Size: {size}"
+			},
 			"ImageApp": {
 				"title": {
 					"upload": "Upload New Image",

module/apps/ArtSidebar.mjs

@@ -1,8 +1,10 @@
 import { api } from "../api.mjs";
 import { __ID__, filePath } from "../consts.mjs";
+import { getFileSize } from "../utils/fs.mjs";
 
 const { HandlebarsApplicationMixin } = foundry.applications.api;
 const { AbstractSidebarTab } = foundry.applications.sidebar;
+const { deepClone } = foundry.utils;
 
 export class ArtSidebar extends HandlebarsApplicationMixin(AbstractSidebarTab) {
 	// #region Options
@@ -30,16 +32,32 @@ export class ArtSidebar extends HandlebarsApplicationMixin(AbstractSidebarTab) {
 	// #endregion Options
 
 	// #region Data Prep
-	_preparePartContext(partID, ctx) {
+	async _preparePartContext(partID, ctx) {
+		ctx = deepClone(ctx);
+
 		switch (partID) {
+			case `tokens`: {
+				await this._prepareTokensContext(ctx);
+				break;
+			};
+			case `artists`: {
+				await this._prepareArtistsContext(ctx);
+				break;
+			};
 		};
 
 		return ctx;
 	};
 
-	_prepareTokensContext(ctx) {};
+	async _prepareTokensContext(ctx) {
+		const size = await getFileSize(filePath(`storage/db/images.json`));
+		ctx.size = size.friendly;
+	};
 
-	_prepareArtistsContext(ctx) {};
+	async _prepareArtistsContext(ctx) {
+		const size = await getFileSize(filePath(`storage/db/artists.json`));
+		ctx.size = size.friendly;
+	};
 	// #endregion Data Prep
 
 	// #region Actions

module/utils/fs.mjs

@@ -37,6 +37,30 @@ export async function lastModifiedAt(path) {
 	};
 };
 
+export async function getFileSize(path) {
+	try {
+		const response = await fetch(filePath(path), { method: `HEAD` });
+		const bytes = response.headers.get(`Content-Length`);
+		if (!bytes) { return null }
+
+		// round the non-bytes to 2 decimal places
+		const kilobytes = Math.floor(bytes / 10) / 100;
+		const megabytes = Math.floor(bytes / 10_000) / 100;
+
+		// determine the most appropriate unit to use
+		let friendly = `${bytes} bytes`;
+		if (megabytes > 0.25) {
+			friendly = `${megabytes}MB`;
+		} else if (kilobytes > 0) {
+			friendly = `${kilobytes}KB`;
+		};
+
+		return { bytes, kilobytes, megabytes, friendly };
+	} catch {
+		return null;
+	};
+};
+
 export async function getFile(path) {
 	try {
 		return fetchJsonWithTimeout(filePath(path));

styles/apps/ArtSidebar.css

@@ -16,4 +16,11 @@
 	h4 {
 		margin: 0;
 	}
+
+	.subtitle {
+		margin: 0;
+		text-align: center;
+		font-size: 0.75rem;
+		color: var(--color-text-subtitle);
+	}
 }

templates/ArtSidebar/artists.hbs

@@ -1,17 +1,22 @@
 <section>
-	<h4 class="divider">Artists</h4>
+	<div>
+		<h4 class="divider">{{ localize "IT.common.artists" }}</h4>
+		<p class="subtitle">
+			{{ localize "IT.apps.ArtSidebar.db-size" size=size }}
+		</p>
+	</div>
 	<button
 		type="button"
 		data-action="openApp"
 		data-app="ArtistBrowser"
 	>
-		View All
+		{{ localize "IT.apps.ArtSidebar.view" }}
 	</button>
 	<button
 		type="button"
 		data-action="openApp"
 		data-app="ArtistApp"
 	>
-		Add New
+		{{ localize "IT.apps.ArtSidebar.add-new" }}
 	</button>
 </section>

templates/ArtSidebar/tokens.hbs

@@ -1,17 +1,22 @@
 <section>
-	<h4 class="divider">Tokens</h4>
+	<div>
+		<h4 class="divider">{{ localize "IT.common.images" }}</h4>
+		<p class="subtitle">
+			{{ localize "IT.apps.ArtSidebar.db-size" size=size }}
+		</p>
+	</div>
 	<button
 		type="button"
 		data-action="openApp"
 		data-app="ArtBrowser"
 	>
-		View All
+		{{ localize "IT.apps.ArtSidebar.view" }}
 	</button>
 	<button
 		type="button"
 		data-action="openApp"
 		data-app="ImageApp"
 	>
-		Add New
+		{{ localize "IT.apps.ArtSidebar.add-new" }}
 	</button>
 </section>