Add the sidebar for the module

module/apps/ArtSidebar.mjs

@@ -0,0 +1,58 @@
+import { api } from "../api.mjs";
+import { __ID__, filePath } from "../consts.mjs";
+
+const { HandlebarsApplicationMixin } = foundry.applications.api;
+const { AbstractSidebarTab } = foundry.applications.sidebar;
+
+export class ArtSidebar extends HandlebarsApplicationMixin(AbstractSidebarTab) {
+	// #region Options
+	static tabName = `art`;
+
+	static DEFAULT_OPTIONS = {
+		classes: [
+			__ID__,
+			`ArtSidebar`,
+		],
+		window: {},
+		actions: {
+			openApp: this.#openApp,
+		},
+	};
+
+	static PARTS = {
+		tokens: {
+			template: filePath(`templates/ArtSidebar/tokens.hbs`),
+		},
+		artists: {
+			template: filePath(`templates/ArtSidebar/artists.hbs`),
+		},
+	};
+	// #endregion Options
+
+	// #region Data Prep
+	_preparePartContext(partID, ctx) {
+		switch (partID) {
+		};
+
+		return ctx;
+	};
+
+	_prepareTokensContext(ctx) {};
+
+	_prepareArtistsContext(ctx) {};
+	// #endregion Data Prep
+
+	// #region Actions
+	static async #openApp(event, target) {
+		const { app: appKey, ...options } = target.dataset;
+		delete options.action;
+
+		if (appKey in api.Apps) {
+			const app = new api.Apps[appKey](options);
+			await app.render({ force: true });
+		} else {
+			console.error(`Failed to find app with key: ${appKey}`);
+		};
+	};
+	// #endregion Actions
+};

module/hooks/init.mjs

@@ -1,8 +1,22 @@
 import { api } from "../api.mjs";
+import { ArtSidebar } from "../apps/ArtSidebar.mjs";
 import helpers from "../handlebarsHelpers/_index.mjs";
 
 Hooks.on(`init`, () => {
 	globalThis.tb = api;
 
 	Handlebars.registerHelper(helpers);
+
+	// Art sidebar tab
+	CONFIG.ui.sidebar.TABS.art = {
+		active: false,
+		icon: `fa-solid fa-paintbrush`,
+		tooltip: `Art`,
+	};
+	CONFIG.ui.art = ArtSidebar;
+
+	// Inject the custom tab right before settings
+	const temp = CONFIG.ui.sidebar.TABS.settings;
+	delete CONFIG.ui.sidebar.TABS.settings;
+	CONFIG.ui.sidebar.TABS.settings = temp;
 });

styles/apps/ArtSidebar.css

@@ -0,0 +1,19 @@
+.token-browser.ArtSidebar {
+	flex-flow: column;
+	gap: 1.5rem;
+	padding: 1rem;
+
+	&.active {
+		display: flex;
+	}
+
+	> section {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+
+	h4 {
+		margin: 0;
+	}
+}

styles/main.css

@@ -12,4 +12,5 @@
 @import url("./apps/common.css") layer(apps);
 @import url("./apps/ArtBrowser.css") layer(apps);
 @import url("./apps/ArtistApp.css") layer(apps);
+@import url("./apps/ArtSidebar.css") layer(apps);
 @import url("./apps/ImageApp.css") layer(apps);

templates/ArtSidebar/artists.hbs

@@ -0,0 +1,17 @@
+<section>
+	<h4 class="divider">Artists</h4>
+	<button
+		type="button"
+		data-action="openApp"
+		data-app="ArtistList"
+	>
+		View All
+	</button>
+	<button
+		type="button"
+		data-action="openApp"
+		data-app="ArtistApp"
+	>
+		Add New
+	</button>
+</section>

templates/ArtSidebar/tokens.hbs

@@ -0,0 +1,18 @@
+<section>
+	<h4 class="divider">Tokens</h4>
+	<button
+		type="button"
+		data-action="openApp"
+		data-app="ArtBrowser"
+		data-select-mode="multi"
+	>
+		View All
+	</button>
+	<button
+		type="button"
+		data-action="openApp"
+		data-app="ImageApp"
+	>
+		Add New
+	</button>
+</section>