Add the ability to add/remove a chat background (Closes #1)

langs/en-ca.json

@@ -4,6 +4,10 @@
 			"startSidebarExpanded": {
 				"name": "Start Sidebar Expanded",
 				"hint": "(v13+) Starts the right-hand sidebar expanded when logging in."
+			},
+			"chatSidebarBackground": {
+				"name": "Chat Background",
+				"hint": "(v13+) Adds a background to the chat tab of the right-hand sidebar."
 			}
 		}
 	}

module/consts.mjs

@@ -1,5 +1,5 @@
 export const __ID = `oft`;
 
 export function inDev() {
-	return game.modules.get(__ID).flags.inDev;
+	return game.modules.get(__ID).flags.inDev ?? false;
 };

module/hooks/init.mjs

@@ -1,8 +1,10 @@
 import { __ID } from "../consts.mjs";
+import { chatSidebarBackground } from "../settings/chatSidebarBackground.mjs";
 import { startSidebarExpanded } from "../settings/startSidebarExpanded.mjs";
 
 Hooks.once(`init`, () => {
 	console.log(`${__ID} | Initializing`);
 
 	startSidebarExpanded.register();
+	chatSidebarBackground.register();
 });

module/hooks/renderSidebar.mjs

@@ -1,9 +1,15 @@
+import { __ID, inDev } from "../consts.mjs";
 import { startSidebarExpanded } from "../settings/startSidebarExpanded.mjs";
 
-Hooks.once(`renderSidebar`, (app, _element, _context, _options) => {
+// #region Once
+Hooks.once(`renderSidebar`, (app) => {
 
 	// MARK: Sidebar Expansion
 	if (startSidebarExpanded.value()) {
-		app.toggleExpanded(true);
+		if (inDev()) {
+			console.log(`${__ID} | setting:startSidebarExpanded | Expanding Sidebar`);
 		}
+		app.toggleExpanded(true);
+	};
 });
+// #endregion Once

module/settings/chatSidebarBackground.mjs

@@ -0,0 +1,35 @@
+import { __ID, inDev } from "../consts.mjs";
+
+const key = `chatSidebarBackground`;
+
+const config = {
+	name: `OFT.setting.${key}.name`,
+	hint: `OFT.setting.${key}.hint`,
+	scope: `user`,
+	type: Boolean,
+	default: true,
+	config: true,
+	requiresReload: false,
+	onChange: (newValue) => {
+		if (inDev()) {
+			console.log(`${__ID} | setting:${key} | Setting to: ${newValue}`);
+		};
+		document.body.classList.toggle(`oft-${key}`, newValue);
+	},
+};
+
+export const chatSidebarBackground = {
+	value() {
+		return game.settings.get(__ID, key);
+	},
+	register() {
+		game.settings.register(__ID, key, config);
+
+		if (this.value()) {
+			if (inDev()) {
+				console.log(`${__ID} | setting:${key} | Adding chat background`);
+			};
+			document.body.classList.add(`oft-${key}`);
+		};
+	},
+};

styles/chatSidebarBackground.css

@@ -0,0 +1,6 @@
+.oft-chatSidebarBackground {
+	.chat-sidebar:not(.sidebar-popout) {
+		background: var(--sidebar-background, var(--color-cool-5-90));
+		pointer-events: all; /* prevent click-throughs */
+	}
+}

styles/main.css

@@ -0,0 +1,4 @@
+@import url("./chatSidebarBackground.css");
+
+/* Make the chat sidebar the same width as all the other tabs */
+.chat-sidebar:not(.sidebar-popout) { width: unset; }