SRC-06: facetten-ui-filter-chips

Facetten-Oberfläche mit Filter-Chips: aktive Filter sichtbar, einzeln entfernbar, Trefferzahl je Facettenwert live angezeigt. - app/api/facets/route.ts: neue Backend-for-Frontend-Route, spiegelt mail/internal/search/facets.go minimal (nur Trefferzahl je Facettenwert). - lib/manticoreQuery.ts: gemeinsamer statischer bool.must-Aufbau für Such- und Facetten-Route, kein Sprintf/Join-artiger Klauselbau. - app/api/search/route.ts (SRC-04): akzeptiert jetzt wiederholbare ?filter=feld:wert-Parameter. - app/FacetPanel.tsx: ActiveFilterChips (echte <button>-Elemente, nativ tastaturbedienbar) + FacetPanel (Klick fügt Filter hinzu) + "Alle Filter zurücksetzen". - lib/filterState.ts: reine Filterzustandsfunktionen, ohne React. Prüfungen (alle real durchgeführt, siehe mail/docs/SRC-06-PRUEFPROTOKOLL.md): 1. Manueller Test gegen echten next start + live Manticore auf 192.168.1.131: Filterkombination reduziert Treffer UND Facettenzählungen real konsistent von 2 auf 1. 2. @testing-library/user-event: echte Tastatursimulation (Enter) löst Chip-Entfernung real aus. 3. 20 gleichzeitig aktive Filter erzeugen real 20 einzelne, nicht zusammengefasste Chips, kein Absturz. Kein Umbau: mail/internal/*, web/shl, web/retention-admin unverändert, bestehendes SRC-04-Verhalten unverändert. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01HhgFcLS8tYMhDJpP74C6AQ
2026-08-31 23:18:08 +02:00
parent 0065b959b3
commit acc2b0c5dd
12 changed files with 563 additions and 30 deletions
@@ -3,6 +3,8 @@
 // externe Mail-API vom Client aus (Rolle: "Datenzugriff ausschließlich
 // über die bereitgestellte API").

+import type { FacetField } from "./facetFields";
+
 export class ApiError extends Error {}

 export interface SearchHit {
@@ -16,12 +18,21 @@ export interface SearchResponse {
  hits: SearchHit[];
 }

+export interface AppliedFilter {
+  field: FacetField;
+  value: string;
+}
+
+function filterParams(filters: AppliedFilter[]): [string, string][] {
+  return filters.map((f) => ["filter", `${f.field}:${f.value}`]);
+}
+
 // tenantSlug: bis zu einer zentralen Session-/IAM-Anbindung (Core-Board-
 // Scope, nicht Bestandteil dieser Kachel) wird der Mandant vom Aufrufer
 // mitgegeben. Die eigentliche Mandantentrennung passiert serverseitig in
 // mail/internal/search (SRC-01/SRC-03), nicht im Frontend.
-export async function search(tenantSlug: string, query: string): Promise<SearchResponse> {
-  const params = new URLSearchParams({ tenant: tenantSlug, q: query });
+export async function search(tenantSlug: string, query: string, filters: AppliedFilter[] = []): Promise<SearchResponse> {
+  const params = new URLSearchParams([["tenant", tenantSlug], ["q", query], ...filterParams(filters)]);
  const res = await fetch(`/api/search?${params.toString()}`);
  if (!res.ok) {
    const body = await res.json().catch(() => ({}));
@@ -29,3 +40,25 @@ export async function search(tenantSlug: string, query: string): Promise<SearchR
  }
  return res.json();
 }
+
+export interface FacetValue {
+  value: string;
+  count: number;
+}
+
+export interface FacetsResponse {
+  values: Record<string, FacetValue[]>;
+}
+
+// SRC-06: Facettenzählungen (Akzeptanzkriterium 2: Trefferzahl je
+// Facettenwert live aktualisiert) — läuft mit denselben Filtern wie
+// search, damit Zählungen und Trefferliste konsistent bleiben.
+export async function facets(tenantSlug: string, query: string, filters: AppliedFilter[] = []): Promise<FacetsResponse> {
+  const params = new URLSearchParams([["tenant", tenantSlug], ["q", query], ...filterParams(filters)]);
+  const res = await fetch(`/api/facets?${params.toString()}`);
+  if (!res.ok) {
+    const body = await res.json().catch(() => ({}));
+    throw new ApiError(body.error ?? `Facetten fehlgeschlagen (${res.status})`);
+  }
+  return res.json();
+}
@@ -0,0 +1,17 @@
+// SRC-06: statische Facettendimensionen-Whitelist, gespiegelt aus
+// mail/internal/search/fields.go (FacetFields, SRC-05) — nur diese
+// Feldnamen sind als Filterdimension zulässig, kein beliebiger
+// Client-Feldname.
+export const FACET_FIELDS = ["sender", "mailbox", "attachment_type", "tag"] as const;
+export type FacetField = (typeof FACET_FIELDS)[number];
+
+export function isFacetField(value: string): value is FacetField {
+  return (FACET_FIELDS as readonly string[]).includes(value);
+}
+
+export const FACET_FIELD_LABELS: Record<FacetField, string> = {
+  sender: "Absender",
+  mailbox: "Postfach",
+  attachment_type: "Anhangstyp",
+  tag: "Tag",
+};
@@ -0,0 +1,28 @@
+import { describe, expect, it } from "vitest";
+import { addFilter, isFilterActive, removeFilter } from "./filterState";
+
+describe("filterState", () => {
+  it("addFilter fügt hinzu, dedupliziert aber identische Filter", () => {
+    let filters = addFilter([], { field: "sender", value: "alice@example.com" });
+    expect(filters).toHaveLength(1);
+    filters = addFilter(filters, { field: "sender", value: "alice@example.com" });
+    expect(filters).toHaveLength(1);
+    filters = addFilter(filters, { field: "mailbox", value: "inbox" });
+    expect(filters).toHaveLength(2);
+  });
+
+  it("removeFilter entfernt nur genau den einen Filter", () => {
+    const filters = [
+      { field: "sender" as const, value: "alice@example.com" },
+      { field: "mailbox" as const, value: "inbox" },
+    ];
+    const result = removeFilter(filters, { field: "sender", value: "alice@example.com" });
+    expect(result).toEqual([{ field: "mailbox", value: "inbox" }]);
+  });
+
+  it("isFilterActive erkennt aktive Filter korrekt", () => {
+    const filters = [{ field: "tag" as const, value: "wichtig" }];
+    expect(isFilterActive(filters, "tag", "wichtig")).toBe(true);
+    expect(isFilterActive(filters, "tag", "unwichtig")).toBe(false);
+  });
+});
@@ -0,0 +1,18 @@
+// SRC-06: reine Zustandsfunktionen für aktive Filter — getrennt von der
+// Komponente testbar, keine React-Abhängigkeit.
+import type { AppliedFilter } from "./api";
+
+export function addFilter(filters: AppliedFilter[], next: AppliedFilter): AppliedFilter[] {
+  if (filters.some((f) => f.field === next.field && f.value === next.value)) {
+    return filters;
+  }
+  return [...filters, next];
+}
+
+export function removeFilter(filters: AppliedFilter[], target: AppliedFilter): AppliedFilter[] {
+  return filters.filter((f) => !(f.field === target.field && f.value === target.value));
+}
+
+export function isFilterActive(filters: AppliedFilter[], field: string, value: string): boolean {
+  return filters.some((f) => f.field === field && f.value === value);
+}
@@ -0,0 +1,36 @@
+// SRC-06: gemeinsamer Aufbau der bool.must-Liste für Such- und
+// Facetten-Route — statische Feldnamen, keine dynamische SQL-/Klausel-
+// Bildung (gleiche Konvention wie mail/internal/search/facets.go
+// buildFilteredMust).
+import { isFacetField } from "./facetFields";
+
+const FIELD_TENANT_SLUG = "tenant_slug";
+
+export interface AppliedFilter {
+  field: string;
+  value: string;
+}
+
+export function parseFilterParams(values: string[]): AppliedFilter[] {
+  const filters: AppliedFilter[] = [];
+  for (const raw of values) {
+    const sep = raw.indexOf(":");
+    if (sep <= 0) continue;
+    const field = raw.slice(0, sep);
+    const value = raw.slice(sep + 1);
+    if (!isFacetField(field) || value === "") continue;
+    filters.push({ field, value });
+  }
+  return filters;
+}
+
+export function buildMust(tenantSlug: string, query: string, filters: AppliedFilter[]): Record<string, unknown>[] {
+  const must: Record<string, unknown>[] = [{ equals: { [FIELD_TENANT_SLUG]: tenantSlug } }];
+  if (query) {
+    must.push({ query_string: query });
+  }
+  for (const f of filters) {
+    must.push({ equals: { [f.field]: f.value } });
+  }
+  return must;
+}