dtoro/mule-image
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web: 8-color label palette + VIDEO badge in carousel

Browse Source 
Expand color labels from the 4-swatch Lightroom culling palette to 8
neutral colors (red/orange/yellow/green/teal/blue/purple/pink) with no
attached semantics, rendered as outlines that fill in when picked.
Carousel tiles now show a VIDEO badge, and the folder row in the right
sidebar always renders ("/" for root) instead of disappearing.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
authentik Default Admin
2026-05-20 09:56:05 +02:00
parent fc5f30fad1
commit ea1803ec2f
5 changed files with 70 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
web/src/lib/components/sidebar/BulkMetadataSidebar.svelte
View File

@@ -18,6 +18,7 @@
type UpdatePhotoBody
} from '$lib/services/photoprism';
import { patchTargets } from '$lib/services/bulk';
import { COLOR_SWATCHES } from '$lib/utils/tagGroups';
const qc = useQueryClient();
@@ -119,13 +120,6 @@
colorDraft = null;
}
const COLOR_SWATCHES: { key: string; bg: string; title: string }[] = [
{ key: 'red', bg: 'bg-red-500', title: 'Red — reject' },
{ key: 'orange', bg: 'bg-orange-500', title: 'Orange — review' },
{ key: 'yellow', bg: 'bg-yellow-400', title: 'Yellow — pick' },
{ key: 'green', bg: 'bg-green-500', title: 'Green — keep' }
];
async function applyKeyword() {
if (busy) return;
const kw = keywordDraft.trim().replace(/,/g, '');
@@ -270,16 +264,18 @@
</button>
</section>
<!-- Color label — same pattern as Score. -->
<!-- Colors — same pattern as Score. -->
<section class="space-y-1">
<div class="text-[10px] uppercase tracking-wide text-muted-foreground">Color label</div>
<div class="flex items-center gap-1" role="group" aria-label="Color label">
<div class="text-[10px] uppercase tracking-wide text-muted-foreground">Colors</div>
<div class="flex flex-wrap items-center gap-1.5" role="group" aria-label="Colors">
{#each COLOR_SWATCHES as c (c.key)}
{@const picked = colorDraft === c.key}
<button
type="button"
class="h-4 w-4 rounded-full ring-2 transition-all disabled:opacity-50 {c.bg}"
class:ring-foreground={colorDraft === c.key}
class:ring-transparent={colorDraft !== c.key}
class="h-4 w-4 rounded-full border-2 transition-all disabled:opacity-50 {c.border} {picked
? c.bg
: 'bg-transparent'}"
aria-pressed={picked}
disabled={busy}
onclick={() => (colorDraft = c.key)}
title={`Pick ${c.title}`}