Genericize the paginated data browser to allow working with artists easier

module/apps/ArtBrowser.mjs

@@ -16,6 +16,7 @@ export class ArtBrowser extends HandlebarsApplicationMixin(ApplicationV2) {
 		classes: [
 			__ID__,
 			`ArtBrowser`,
+			`data-browser`,
 		],
 		position: {},
 		window: {},
@@ -56,6 +57,10 @@ export class ArtBrowser extends HandlebarsApplicationMixin(ApplicationV2) {
 		this.#onSubmit = onSubmit;
 	};
 
+	get page() {
+		return this.#page;
+	};
+
 	async setPage(page) {
 		if (this.#page == page) { return };
 		this.#page = page;
@@ -215,7 +220,6 @@ export class ArtBrowser extends HandlebarsApplicationMixin(ApplicationV2) {
 	};
 
 	_prepareImagesContext(ctx) {
-		ctx.images = [];
 		const allImages = Object.entries(deepClone(this.#imagesDB.data));
 
 		const images = [];

styles/apps/ArtBrowser.css

@@ -1,41 +1,9 @@
 .image-tagger.ArtBrowser {
-	> .window-content {
-		display: grid;
-		grid-template-columns: 175px auto;
-		gap: 0;
-	}
-
-	form {
-		--spacing: 12px;
-		border-right: var(--sidebar-separator);
-		margin-right: var(--spacing);
-		padding-right: var(--spacing);
-	}
-
-	.image-list {
-		--size: 100px;
-		list-style-type: none;
-		display: grid;
-		grid-template-columns: repeat(4, var(--size));
-		gap: 8px;
-		padding: 0;
-		margin: 0;
-		max-height: 450px;
-		overflow-y: auto;
-	}
-
 	.image {
 		display: flex;
 		flex-direction: column;
 		gap: 8px;
-		border-radius: 4px;
-		overflow: hidden;
 		position: relative;
-		transition: all 100ms ease-in-out;
-
-		&:hover, &:has(input[type="checkbox"]:checked) {
-			background: var(--color-warm-3);
-		}
 
 		img {
 			width: 100%;
@@ -59,14 +27,4 @@
 			position: absolute;
 		}
 	}
-
-	.paginated {
-		display: flex;
-		flex-direction: column;
-		gap: 6px; /* Due to the grow element, this actually means 12px */
-	}
-
-	.page-nav {
-		justify-content: center;
-	}
 }

styles/apps/data-browser.css

@@ -0,0 +1,58 @@
+.image-tagger.data-browser {
+	min-height: 350px;
+	min-width: 630px;
+
+	> .window-content {
+		display: grid;
+		grid-template-columns: 175px auto;
+		gap: 0;
+	}
+
+	.filters {
+		--spacing: 12px;
+		border-right: var(--sidebar-separator);
+		margin-right: var(--spacing);
+		padding-right: var(--spacing);
+	}
+
+	.entry-list {
+		--size: 100px;
+		list-style-type: none;
+		gap: 8px;
+		padding: 0;
+		margin: 0;
+		max-height: 450px;
+		overflow-y: auto;
+
+		&.grid {
+			display: grid;
+			grid-template-columns: repeat(4, var(--size));
+		};
+
+		&.list {
+			display: flex;
+			flex-direction: column;
+		}
+	}
+
+	.entry {
+		transition: all 100ms ease-in-out;
+		border-radius: 4px;
+
+		&:hover,
+		&[data-selected="true"]
+		&:has(input[type="checkbox"]:checked) {
+			background: var(--color-warm-3);
+		}
+	}
+
+	.paginated {
+		display: flex;
+		flex-direction: column;
+		gap: 6px; /* Due to the grow element, this actually means 12px */
+	}
+
+	.page-nav {
+		justify-content: center;
+	}
+}

styles/main.css

@@ -11,6 +11,7 @@
 
 /* Apps */
 @import url("./apps/common.css") layer(apps);
+@import url("./apps/data-browser.css") layer(apps);
 @import url("./apps/ArtBrowser.css") layer(apps);
 @import url("./apps/ArtistApp.css") layer(apps);
 @import url("./apps/ArtSidebar.css") layer(apps);

templates/ArtBrowser/image/grid.hbs

@@ -1,5 +1,5 @@
 <li
-	class="image grid"
+	class="entry image grid"
 	data-image-id="{{image.id}}"
 >
 	<img

templates/ArtBrowser/images.hbs

@@ -9,7 +9,7 @@
 		{{/if}}
 	</div>
 	{{#if images}}
-		<ul class="image-list image-list--{{listLayout}}">
+		<ul class="entry-list grid">
 			{{#each images as | image |}}
 				{{>
 					(it-filePath "templates/ArtBrowser/image/grid.hbs")