Claude Opus 4.8
03e72242d3
All checks were successful
CD / Build and push images (push) Successful in 2m53s
CI / Lint, typecheck, test (push) Successful in 2m8s
CI / Auth e2e pack (push) Successful in 2m31s
CI / Build container images (push) Has been skipped
CD / Deploy to Test (push) Successful in 9s
CD / Smoke tests against Test (push) Successful in 1m13s
CD / Promote to Int (push) Successful in 11s
Build the M4 label experience on top of the #43 label API. - shared: `flattenLabelTree` (tree → depth-first list) for chip lookup, filtering, and the picker; `PageListItemView` adds each page's `labelIds` to the sidebar list response. - api: `GET /ponds/:id/pages` now includes `labelIds` per page (one grouped query), so the sidebar can render chips and filter without extra calls. - web: - Pond settings page (`/p/:pondSlug/settings`) with a `LabelManager` tree: inline create, rename, recolour (`<input type=color>`), move via a parent picker that excludes the label's own subtree, and delete that confirms then force-detaches assigned pages. Every control is a native button/input/select — the tree is fully keyboard-operable. - `LabelPicker` panel on the page editor: searchable, hierarchy-indented multi-select that assigns/unassigns immediately and refreshes the page's labels and the sidebar. - Sidebar: colored label chips on page entries (readable text via a luminance-based contrast helper) and a descendant-inclusive label filter (selecting a parent matches pages tagged with its children, via the shared `collectSubtreeIds`). Owner link to pond settings. - i18n `labels` namespace (de + en). - e2e `labels.spec.ts` (new CI pack): full lifecycle from the settings UI and picker-assign + parent-filter-includes-child. Selectors are language-independent because the UI language follows the user's locale. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PGdhRiwU1WRL4XxJfZYipY
38 lines
1.1 KiB
TypeScript
38 lines
1.1 KiB
TypeScript
import type { LabelView } from '@dorfteich/shared';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
import { contrastingTextColor } from './label-color';
|
|
|
|
/**
|
|
* Colored label chips for a page (issue #44). Labels are looked up by id in the
|
|
* pond's label tree, so a chip renders only for a label still present. Purely
|
|
* presentational — used on sidebar page entries.
|
|
*/
|
|
export function LabelChips({
|
|
labelIds,
|
|
byId,
|
|
}: {
|
|
labelIds: string[];
|
|
byId: Map<string, LabelView>;
|
|
}): React.JSX.Element | null {
|
|
const { t } = useTranslation('labels');
|
|
const labels = labelIds.map((id) => byId.get(id)).filter((l): l is LabelView => Boolean(l));
|
|
if (labels.length === 0) return null;
|
|
|
|
return (
|
|
<span className="label-chips">
|
|
{labels.map((label) => (
|
|
<span
|
|
key={label.id}
|
|
className="label-chip"
|
|
style={{ backgroundColor: label.color, color: contrastingTextColor(label.color) }}
|
|
title={label.name}
|
|
aria-label={t('chip.ariaLabel', { name: label.name })}
|
|
>
|
|
{label.name}
|
|
</span>
|
|
))}
|
|
</span>
|
|
);
|
|
}
|