From 9203f79ad28bfb08391b74135ccb98a86b6565e2 Mon Sep 17 00:00:00 2001
From: Sam Chau <schau22@pm.me>
Date: Thu, 15 Jan 2026 00:38:10 +1030
Subject: [PATCH] style: colored icons for entity type, reorder action bar
 buttons to actually make sense

---
 .../entity-testing/[databaseId]/+page.svelte  | 25 ++++++++++++++++---
 .../components/EntityTable.svelte             | 11 +++-----
 2 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/src/routes/quality-profiles/entity-testing/[databaseId]/+page.svelte b/src/routes/quality-profiles/entity-testing/[databaseId]/+page.svelte
index 941d705..c9345c1 100644
--- a/src/routes/quality-profiles/entity-testing/[databaseId]/+page.svelte
+++ b/src/routes/quality-profiles/entity-testing/[databaseId]/+page.svelte
@@ -273,6 +273,7 @@
 	<!-- Actions Bar -->
 	<ActionsBar>
 		<SearchAction searchStore={search} placeholder={searchPlaceholder} />
+		<ActionButton icon={Plus} on:click={() => (showAddModal = true)} />
 		<ActionButton icon={Sliders} hasDropdown={true} dropdownPosition="right" square={!selectedProfile}>
 			{#if selectedProfile}
 				<span class="ml-2 text-sm text-neutral-700 dark:text-neutral-300">{selectedProfile.name}</span>
@@ -309,7 +310,6 @@
 			</Dropdown>
 		</ActionButton>
 		<ActionButton icon={Info} on:click={() => (showInfoModal = true)} />
-		<ActionButton icon={Plus} on:click={() => (showAddModal = true)} />
 	</ActionsBar>
 
 	<!-- Entity Testing Content -->
@@ -356,10 +356,27 @@
 <InfoModal bind:open={showInfoModal} header="How Entity Testing Works">
 	<div class="space-y-4 text-sm text-neutral-600 dark:text-neutral-400">
 		<div>
-			<div class="font-medium text-neutral-900 dark:text-neutral-100">Test Quality Profiles</div>
+			<div class="font-medium text-neutral-900 dark:text-neutral-100">Adding Entities</div>
 			<p class="mt-1">
-				Entity testing allows you to test your quality profiles against sample media to see how they
-				would score and match.
+				Add movies or TV series from TMDB to use as test cases. These represent the media you want to simulate release matching for.
+			</p>
+		</div>
+		<div>
+			<div class="font-medium text-neutral-900 dark:text-neutral-100">Test Releases</div>
+			<p class="mt-1">
+				For each entity, add test releases with realistic release titles (e.g., "Movie.2024.1080p.BluRay.REMUX-GROUP"). You can also specify size, languages, indexers, and flags.
+			</p>
+		</div>
+		<div>
+			<div class="font-medium text-neutral-900 dark:text-neutral-100">Quality Profile Scoring</div>
+			<p class="mt-1">
+				Select a quality profile from the dropdown to see how each release would score. The score is calculated by matching custom formats and summing their configured point values.
+			</p>
+		</div>
+		<div>
+			<div class="font-medium text-neutral-900 dark:text-neutral-100">Custom Format Matching</div>
+			<p class="mt-1">
+				Expand a release row to see parsed metadata and which custom formats matched. Each matched format shows its score contribution, helping you understand why a release scored the way it did.
 			</p>
 		</div>
 	</div>
diff --git a/src/routes/quality-profiles/entity-testing/[databaseId]/components/EntityTable.svelte b/src/routes/quality-profiles/entity-testing/[databaseId]/components/EntityTable.svelte
index 5c588b1..4807695 100644
--- a/src/routes/quality-profiles/entity-testing/[databaseId]/components/EntityTable.svelte
+++ b/src/routes/quality-profiles/entity-testing/[databaseId]/components/EntityTable.svelte
@@ -93,17 +93,12 @@
 				{/if}
 			</div>
 		{:else if column.key === 'type'}
-			<span
-				class="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium {row.type ===
-				'movie'
-					? 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400'
-					: 'bg-cyan-100 text-cyan-700 dark:bg-cyan-900/30 dark:text-cyan-400'}"
-			>
+			<span class="inline-flex items-center gap-1.5 rounded-full bg-neutral-100 px-2 py-0.5 text-xs font-medium text-neutral-600 dark:bg-neutral-800 dark:text-neutral-400">
 				{#if row.type === 'movie'}
-					<Film size={12} />
+					<Film size={12} class="text-amber-500" />
 					Movie
 				{:else}
-					<Tv size={12} />
+					<Tv size={12} class="text-cyan-500" />
 					Series
 				{/if}
 			</span>