style: colored icons for entity type, reorder action bar buttons to actually make sense

This commit is contained in:
Sam Chau
2026-01-15 00:38:10 +10:30
parent 9517832129
commit 9203f79ad2
2 changed files with 24 additions and 12 deletions

View File

@@ -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>

View File

@@ -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>