Genericize the paginated data browser to allow working with artists easier

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;
+	}
+}