@cosmicdrift/kumiko-bundled-features 0.97.1 → 0.100.0

package/src/tags/web/client-plugin.tsx

@@ -1,15 +1,34 @@
 // @runtime client
 
 import type { ClientFeatureDefinition } from "@cosmicdrift/kumiko-renderer-web";
-import { TAGS_FEATURE_NAME, TAGS_SECTION_EXTENSION_NAME } from "../constants";
+import {
+  TAGS_COLUMN_RENDERER_NAME,
+  TAGS_FEATURE_NAME,
+  TAGS_FILTER_EXTENSION_NAME,
+  TAGS_SCREEN_ID,
+  TAGS_SECTION_EXTENSION_NAME,
+} from "../constants";
 import { defaultTranslations } from "./i18n";
+import { TagFilter } from "./tag-filter";
+import { TagManager } from "./tag-manager";
 import { TagSection } from "./tag-section";
+import { TagsCell } from "./tags-cell";
 
 export function tagsClient(): ClientFeatureDefinition {
   return {
     name: TAGS_FEATURE_NAME,
     extensionSectionComponents: {
       [TAGS_SECTION_EXTENSION_NAME]: TagSection,
+      // Header-slot tag filter for any entityList toolbar.
+      [TAGS_FILTER_EXTENSION_NAME]: TagFilter,
+    },
+    // Inline tag chips on any entityList row, via a labeled virtual column.
+    columnRenderers: {
+      [TAGS_COLUMN_RENDERER_NAME]: TagsCell,
+    },
+    // Standalone Tags management screen (custom screen → TagManager).
+    components: {
+      [TAGS_SCREEN_ID]: TagManager,
     },
     translations: defaultTranslations,
   };

package/src/tags/web/entity-tags.tsx

@@ -0,0 +1,47 @@
+// @runtime client
+// EntityTags — read-only colored tag row for ANY entity. Drop it on a card or
+// detail view: <EntityTags entityName="note" entityId={id} />. Loads the
+// catalog (for name+color) and the entity's assignments, renders a TagChip per
+// assigned tag. Renders nothing when the entity has no tags.
+
+import { useQuery } from "@cosmicdrift/kumiko-renderer";
+import type { ReactNode } from "react";
+import { TagsQueries } from "../constants";
+import { TagChip } from "./tag-chip";
+
+type TagRow = { readonly id: string; readonly name: string; readonly color?: string | null };
+type AssignmentRow = {
+  readonly tagId: string;
+  readonly entityType: string;
+  readonly entityId: string;
+};
+
+export function EntityTags({
+  entityName,
+  entityId,
+}: {
+  readonly entityName: string;
+  readonly entityId: string | null;
+}): ReactNode {
+  const enabled = entityId !== null;
+  const catalog = useQuery<{ rows: readonly TagRow[] }>(TagsQueries.tagList, {}, { enabled });
+  const assignments = useQuery<{ rows: readonly AssignmentRow[] }>(
+    TagsQueries.assignmentList,
+    { filter: { field: "entityId", op: "eq", value: entityId } },
+    { enabled },
+  );
+
+  if (entityId === null) return null;
+  const byId = new Map((catalog.data?.rows ?? []).map((t) => [t.id, t]));
+  const assigned = (assignments.data?.rows ?? []).filter((r) => r.entityType === entityName);
+  if (assigned.length === 0) return null;
+
+  return (
+    <div data-testid="entity-tags" className="flex flex-wrap gap-1">
+      {assigned.map((a) => {
+        const tag = byId.get(a.tagId);
+        return <TagChip key={a.tagId} name={tag?.name ?? a.tagId} color={tag?.color} />;
+      })}
+    </div>
+  );
+}

package/src/tags/web/i18n.ts

@@ -9,21 +9,52 @@ export const defaultTranslations: TranslationsByLocale = {
   de: {
     "tags.section.createMode": "Speichere zuerst den Eintrag, um Tags zu setzen.",
     "tags.section.loading": "Lädt…",
-    "tags.section.label": "Tags",
-    "tags.section.placeholder": "Tags auswählen…",
     "tags.section.empty": "Keine Tags gefunden.",
-    "tags.section.newLabel": "Neuer Tag",
-    "tags.section.create": "Tag anlegen & zuweisen",
     "tags.section.working": "Speichert…",
+    "tags.section.none": "Keine Tags",
+    "tags.section.edit": "Tags bearbeiten",
+    "tags.manage.newLabel": "Neuer Tag",
+    "tags.manage.namePlaceholder": "Tag-Name",
+    "tags.manage.scopeLabel": "Geltungsbereich (Entity-Typ, leer = global)",
+    "tags.manage.scopePlaceholder": "z. B. note (leer = überall)",
+    "tags.manage.create": "Tag anlegen",
+    "tags.manage.edit": "Bearbeiten",
+    "tags.manage.save": "Speichern",
+    "tags.manage.cancel": "Abbrechen",
+    "tags.manage.delete": "Löschen",
+    "tags.manage.toggle": "Tag umschalten",
+    "tags.manage.usage": "{count}×",
+    "tags.manage.deleteConfirmTitle": "Tag „{name}“ löschen?",
+    "tags.manage.deleteConfirmDesc":
+      "Entfernt ihn von {count} Objekten. Das lässt sich nicht rückgängig machen.",
+    "tags.picker.title": "Tags",
+    "tags.picker.done": "Fertig",
+    "tags.filter.label": "Nach Tag filtern",
+    "tags.filter.clear": "Filter zurücksetzen",
   },
   en: {
     "tags.section.createMode": "Save the entity first to add tags.",
     "tags.section.loading": "Loading…",
-    "tags.section.label": "Tags",
-    "tags.section.placeholder": "Select tags…",
     "tags.section.empty": "No tags found.",
-    "tags.section.newLabel": "New tag",
-    "tags.section.create": "Create & attach tag",
     "tags.section.working": "Saving…",
+    "tags.section.none": "No tags",
+    "tags.section.edit": "Edit tags",
+    "tags.manage.newLabel": "New label",
+    "tags.manage.namePlaceholder": "Label name",
+    "tags.manage.scopeLabel": "Scope (entity type, empty = global)",
+    "tags.manage.scopePlaceholder": "e.g. note (empty = everywhere)",
+    "tags.manage.create": "Create label",
+    "tags.manage.edit": "Edit",
+    "tags.manage.save": "Save",
+    "tags.manage.cancel": "Cancel",
+    "tags.manage.delete": "Delete",
+    "tags.manage.toggle": "Toggle label",
+    "tags.manage.usage": "{count}×",
+    "tags.manage.deleteConfirmTitle": "Delete label “{name}”?",
+    "tags.manage.deleteConfirmDesc": "Removes it from {count} objects. This can't be undone.",
+    "tags.picker.title": "Tags",
+    "tags.picker.done": "Done",
+    "tags.filter.label": "Filter by tag",
+    "tags.filter.clear": "Clear",
   },
 };

package/src/tags/web/index.ts

@@ -1,4 +1,17 @@
 // @runtime client
-export { TAGS_SECTION_EXTENSION_NAME, TagsHandlers, TagsQueries } from "../constants";
+export {
+  TAGS_COLUMN_RENDERER_NAME,
+  TAGS_FILTER_EXTENSION_NAME,
+  TAGS_SCREEN_ID,
+  TAGS_SECTION_EXTENSION_NAME,
+  TagsHandlers,
+  TagsQueries,
+} from "../constants";
 export { tagsClient } from "./client-plugin";
+export { EntityTags } from "./entity-tags";
+export { contrastText, TagChip } from "./tag-chip";
+export { TagFilter } from "./tag-filter";
+export { TagManager } from "./tag-manager";
+export { TagPicker } from "./tag-picker";
 export { TagSection } from "./tag-section";
+export { TagsCell } from "./tags-cell";

package/src/tags/web/tag-chip.tsx

@@ -0,0 +1,63 @@
+// @runtime client
+// TagChip — read-only colored label pill, GitLab-labels style. The tag's `color`
+// (a hex like "#22cc88") drives the background; the text color is chosen for
+// contrast (YIQ luminance) so light and dark labels both stay legible. A tag
+// with no usable color falls back to a neutral chip. Self-contained inline
+// styles (pattern from config-source-badge.tsx) so it renders the same in the
+// picker, on cards and in screenshots without depending on Tailwind tokens.
+
+import type { CSSProperties, ReactNode } from "react";
+
+// YIQ perceived brightness → black text on light backgrounds, white on dark.
+// Returns null for anything that isn't a #rgb/#rrggbb hex so the caller can use
+// its neutral fallback (color is a free-text UI hint, never validated).
+export function contrastText(color: string): "#000000" | "#ffffff" | null {
+  const rgb = hexToRgb(color);
+  if (rgb === null) return null;
+  const yiq = (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000;
+  return yiq >= 128 ? "#000000" : "#ffffff";
+}
+
+function hexToRgb(color: string): { r: number; g: number; b: number } | null {
+  const match = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.exec(color.trim());
+  if (match === null) return null;
+  const short = match[1] as string;
+  const hex =
+    short.length === 3
+      ? `${short[0]}${short[0]}${short[1]}${short[1]}${short[2]}${short[2]}`
+      : short;
+  return {
+    r: Number.parseInt(hex.slice(0, 2), 16),
+    g: Number.parseInt(hex.slice(2, 4), 16),
+    b: Number.parseInt(hex.slice(4, 6), 16),
+  };
+}
+
+const BASE_STYLE: CSSProperties = {
+  display: "inline-flex",
+  alignItems: "center",
+  padding: "0 8px",
+  fontSize: "12px",
+  fontWeight: 500,
+  lineHeight: "20px",
+  borderRadius: "9999px",
+  whiteSpace: "nowrap",
+};
+
+const NEUTRAL = { backgroundColor: "#e5e7eb", color: "#374151" } as const;
+
+export function TagChip({
+  name,
+  color,
+}: {
+  readonly name: string;
+  readonly color?: string | null;
+}): ReactNode {
+  const fg = color != null && color !== "" ? contrastText(color) : null;
+  const palette = fg !== null && color != null ? { backgroundColor: color, color: fg } : NEUTRAL;
+  return (
+    <span data-testid="tag-chip" style={{ ...BASE_STYLE, ...palette }}>
+      {name}
+    </span>
+  );
+}

package/src/tags/web/tag-filter.tsx

@@ -0,0 +1,100 @@
+// @runtime client
+// TagFilter — a drop-in tag filter for ANY entityList toolbar. Register it as
+// the list's header slot (`screen.slots.header`); the renderer passes it the
+// list's screenId, and picking tags resolves the matching row ids and narrows
+// the list via an id-set URL filter (`<screenId>.f.id=…`, applied as
+// `{ field: "id", op: "in" }`). No host schema change: any list gets
+// tag-filtering by mounting this in its header.
+//
+// The active selection is shown inline as colored chips next to the button, with
+// a clear affordance — so the filter is visible, not hidden behind a count.
+//
+// ponytail: resolves ids from the assignment list (first 500 rows) + an id-IN
+// URL filter — fine for typical tag volumes. For huge assignment sets add a
+// server-side `entitiesByTag` query + a server-side join filter instead.
+
+import {
+  useListUrlState,
+  usePrimitives,
+  useQuery,
+  useTranslation,
+} from "@cosmicdrift/kumiko-renderer";
+import { type ReactNode, useState } from "react";
+import { TagsQueries } from "../constants";
+import { TagChip } from "./tag-chip";
+import { TagPicker } from "./tag-picker";
+
+// Tags chosen but zero matching entities → filter to a value that matches no row
+// (so the list shows empty), instead of clearing the filter (which shows all).
+const NO_MATCH = "__tags_no_match__";
+
+type AssignmentRow = {
+  readonly tagId: string;
+  readonly entityType: string;
+  readonly entityId: string;
+};
+type TagRow = { readonly id: string; readonly name: string; readonly color?: string | null };
+
+export function TagFilter({
+  entityName,
+  screenId,
+}: {
+  readonly entityName: string;
+  readonly entityId?: string | null;
+  readonly screenId?: string;
+}): ReactNode {
+  const { Button } = usePrimitives();
+  const t = useTranslation();
+  const [open, setOpen] = useState(false);
+  const [selected, setSelected] = useState<readonly string[]>([]);
+  const catalog = useQuery<{ rows: readonly TagRow[] }>(TagsQueries.tagList, {});
+  const assignments = useQuery<{ rows: readonly AssignmentRow[] }>(TagsQueries.assignmentList, {
+    limit: 500,
+  });
+  // Unconditional (Rules of Hooks). The renderer always passes a screenId in the
+  // header slot; the fallback namespace is inert if it ever runs standalone.
+  const urlState = useListUrlState(screenId ?? "__tag-filter__");
+
+  const applyFilter = (tagIds: readonly string[]): void => {
+    setSelected(tagIds);
+    if (tagIds.length === 0) {
+      urlState.setFilter("id", []);
+      return;
+    }
+    const wanted = new Set(tagIds);
+    const ids = [
+      ...new Set(
+        (assignments.data?.rows ?? [])
+          .filter((a) => a.entityType === entityName && wanted.has(a.tagId))
+          .map((a) => a.entityId),
+      ),
+    ];
+    urlState.setFilter("id", ids.length > 0 ? ids : [NO_MATCH]);
+  };
+
+  const byId = new Map((catalog.data?.rows ?? []).map((tg) => [tg.id, tg]));
+
+  return (
+    <div className="flex flex-wrap items-center gap-1">
+      <Button variant="secondary" onClick={() => setOpen(true)} testId="tag-filter-open">
+        {t("tags.filter.label")}
+      </Button>
+      {selected.map((id) => {
+        const tag = byId.get(id);
+        return <TagChip key={id} name={tag?.name ?? id} color={tag?.color} />;
+      })}
+      {selected.length > 0 && (
+        <Button variant="secondary" onClick={() => applyFilter([])} testId="tag-filter-clear">
+          {t("tags.filter.clear")}
+        </Button>
+      )}
+      <TagPicker
+        entityType={entityName}
+        value={selected}
+        onChange={applyFilter}
+        open={open}
+        onOpenChange={setOpen}
+      />
+    </div>
+  );
+}