Phase 7 abgeschlossen: Suche mit gestuftem Index, Facetten, Palette

Der bisherige Suchvektor enthielt nur, was jeder sehen darf. Das war
leck-sicher und unbrauchbar zugleich: ab Stufe 1 fand die Suche nichts von
dem, was einen Fall ausmacht.

SearchIndex hält jetzt sechs Zeilen je Ziel, eine pro Freigabestufe. Die Zeile
zur Stufe N enthält alles, was ein Leser dieser Stufe sehen darf. Eine Suche
nimmt genau diese eine Zeile und kann deshalb nichts finden, was sie nicht
lesen darf - auch keinen höher eingestuften Eintrag in einer sichtbaren Akte.

Schwärzungen werden dabei stufenweise aufgelöst: strip_redactions_above
entfernt nur, was über der Stufe liegt. Sonst fände ein Leser der Stufe 4
einen Namen nicht, den er auf der Seite im Klartext sieht, und ein Leser der
Stufe 1 einen, den er dort nur als Balken sieht.

Die Suchbedingung ist nicht die Zugriffsprüfung: der Volltext liefert
Kandidaten, die Sichtbarkeit kommt aus visibleCaseWhere - derselben Funktion
wie in der Fallliste, und Treffer, Trefferzahl und Facettenzähler entstehen
gemeinsam in einer Abfrage. Eine in SQL nachgebaute Sichtbarkeitsregel wäre
die Sorte Duplikat, die auseinanderläuft.

Filter stehen in der Adresse. Damit ist jeder Zustand teilbar, der
Zurück-Knopf tut das Richtige, und eine gespeicherte Ansicht ist ein
Lesezeichen. Die mitgelieferten Ansichten stehen im Programm, weil sie von der
Gegenwart abhängen.

Strg+K öffnet die Kommandopalette. Im Grundgerüst steckt nur das
Tastaturereignis, die Palette selbst wird beim Öffnen geholt - das kostet die
anderen Seiten rund hundert Byte.

Offen geblieben: "Zuletzt geöffnet" als Ansicht. Dafür müsste jeder Aufruf
jeder Akte mitgeschrieben werden; das wäre eine Überwachungsfunktion, die
niemand bestellt hat. In TASKS vermerkt.

165 Tests im Web-Paket, 17 in der Datenbank, 7 im Worker, 34 e2e.
Grösste Route bei 119,7 kB gegen 120 erlaubte.

web/app/(app)/layout.tsx

@@ -2,6 +2,7 @@ import Link from 'next/link'
 import { signOut } from '@/auth'
 import { requireUser } from '@/lib/auth/current'
 import { de } from '@/lib/i18n/de'
+import { PaletteTrigger } from '@/components/palette/PaletteTrigger'
 
 export default async function AppLayout({ children }: { children: React.ReactNode }) {
   const user = await requireUser()
@@ -13,6 +14,8 @@ export default async function AppLayout({ children }: { children: React.ReactNod
 
   return (
     <div className="min-h-dvh">
+      {/* Strg+K. Winzig; die Palette selbst wird erst beim Öffnen geholt. */}
+      <PaletteTrigger />
       <header className="border-b border-line">
         <div className="mx-auto flex max-w-5xl flex-wrap items-center gap-x-6 gap-y-2 px-6 py-3">
           <Link href="/uebersicht" className="font-condensed text-text no-underline">
@@ -25,6 +28,7 @@ export default async function AppLayout({ children }: { children: React.ReactNod
             {user.permissions.isAdmin || user.permissions.permissions.has('personnel.read') ? (
               <Link href="/personalakten">{de.nav.personnel}</Link>
             ) : null}
+            <Link href="/suche">{de.nav.search}</Link>
             <Link href="/kanaele">{de.channel.heading}</Link>
             <Link href="/einstellungen">{de.notify.heading}</Link>
             {user.permissions.isAdmin || user.permissions.permissions.has('roles.manage') ? (

web/app/(app)/suche/SavedViews.tsx

@@ -0,0 +1,106 @@
+'use client'
+
+import { useState, useTransition } from 'react'
+import Link from 'next/link'
+import { searchText } from '@/lib/i18n/shell'
+import { commonText } from '@/lib/i18n/common'
+import { deleteViewAction, saveViewAction } from './actions'
+
+/**
+ * Ansichten: die mitgelieferten und die eigenen.
+ *
+ * Beide sind dasselbe — eine Suchadresse. Die mitgelieferten stehen im
+ * Programm, weil sie von der Gegenwart abhängen („diese Woche"), die eigenen
+ * in der Datenbank.
+ */
+export function SavedViews({
+  builtins,
+  saved,
+  currentQuery,
+}: {
+  builtins: { key: string; params: string }[]
+  saved: { id: string; name: string; query: string }[]
+  currentQuery: string
+}) {
+  const [name, setName] = useState('')
+  const [offen, setOffen] = useState(false)
+  const [fehler, setFehler] = useState<string | null>(null)
+  const [pending, startTransition] = useTransition()
+
+  return (
+    <div className="mt-4 flex flex-wrap items-center gap-x-4 gap-y-2 text-2xs">
+      <span className="font-condensed text-text-dim">{searchText.views}</span>
+
+      {builtins.map((view) => (
+        <Link key={view.key} href={`/suche?${view.params}`} className="font-condensed">
+          {searchText.builtin[view.key] ?? view.key}
+        </Link>
+      ))}
+
+      {saved.map((view) => (
+        <span key={view.id} className="inline-flex items-baseline gap-1">
+          <Link href={`/suche?${view.query}`} className="font-condensed">
+            {view.name}
+          </Link>
+          <button
+            type="button"
+            disabled={pending}
+            title={searchText.deleteView}
+            onClick={() => startTransition(async () => void (await deleteViewAction({ id: view.id })))}
+            className="text-text-dim"
+          >
+            ×
+          </button>
+        </span>
+      ))}
+
+      {offen ? (
+        <span className="inline-flex items-center gap-2">
+          <input
+            value={name}
+            onChange={(event) => setName(event.target.value)}
+            placeholder={searchText.saveViewName}
+            aria-label={searchText.saveViewName}
+            maxLength={60}
+            className="border border-line bg-raised px-2 py-1"
+          />
+          <button
+            type="button"
+            disabled={pending || name.trim() === ''}
+            onClick={() =>
+              startTransition(async () => {
+                const ergebnis = await saveViewAction({ name, query: currentQuery })
+                if (ergebnis.ok) {
+                  setName('')
+                  setOffen(false)
+                } else {
+                  setFehler(ergebnis.error)
+                }
+              })
+            }
+            className="border border-line bg-raised px-2 py-1 font-condensed text-accent disabled:text-text-dim"
+          >
+            {commonText.save}
+          </button>
+          <button
+            type="button"
+            onClick={() => setOffen(false)}
+            className="font-condensed text-text-dim"
+          >
+            {commonText.cancel}
+          </button>
+        </span>
+      ) : (
+        <button
+          type="button"
+          onClick={() => setOffen(true)}
+          className="ml-auto font-condensed text-text-dim"
+        >
+          {searchText.saveView}
+        </button>
+      )}
+
+      {fehler ? <span className="font-condensed text-stamp-4">{fehler}</span> : null}
+    </div>
+  )
+}

web/app/(app)/suche/SearchBox.tsx

@@ -0,0 +1,57 @@
+'use client'
+
+import { useEffect, useRef, useState, useTransition } from 'react'
+import { useRouter } from 'next/navigation'
+import { searchText } from '@/lib/i18n/shell'
+import { toSearchParams, type SearchFilters } from '@/lib/search/query'
+
+const DEBOUNCE_MS = 250
+
+/**
+ * Das Suchfeld.
+ *
+ * Tippen schreibt in die Adresse, mit 250 ms Verzögerung — dadurch ist jeder
+ * Zustand teilbar und der Zurück-Knopf tut das Richtige. Während die neue
+ * Seite lädt, bleiben die alten Treffer stehen und werden gedimmt, statt zu
+ * verschwinden. Siehe docs/09-performance-und-ux.md.
+ *
+ * Einen `AbortController` braucht es hier nicht: der Router verwirft eine
+ * überholte Navigation von selbst, und `useTransition` sagt uns, ob noch eine
+ * läuft.
+ */
+export function SearchBox({ filters }: { filters: SearchFilters }) {
+  const router = useRouter()
+  const [text, setText] = useState(filters.q)
+  const [pending, startTransition] = useTransition()
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  // Kommt der Begriff von aussen (Zurück-Knopf, gespeicherte Ansicht), muss
+  // das Feld mitgehen.
+  useEffect(() => {
+    setText(filters.q)
+  }, [filters.q])
+
+  function suchen(wert: string) {
+    setText(wert)
+    if (timer.current) clearTimeout(timer.current)
+    timer.current = setTimeout(() => {
+      startTransition(() => {
+        router.replace(`/suche?${toSearchParams({ ...filters, q: wert, cursor: undefined })}`)
+      })
+    }, DEBOUNCE_MS)
+  }
+
+  return (
+    <div className="mt-4" data-pending={pending ? '' : undefined}>
+      <input
+        type="search"
+        value={text}
+        onChange={(event) => suchen(event.target.value)}
+        placeholder={searchText.placeholder}
+        aria-label={searchText.placeholder}
+        autoFocus
+        className="w-full max-w-xl border border-line bg-raised px-3 py-2 text-sm"
+      />
+    </div>
+  )
+}

web/app/(app)/suche/actions.ts

@@ -0,0 +1,48 @@
+'use server'
+
+import { revalidatePath } from 'next/cache'
+import { z } from 'zod'
+import { db } from '@/lib/db'
+import { requireUser } from '@/lib/auth/current'
+import { de } from '@/lib/i18n/de'
+
+export type ActionResult = { ok: true } | { ok: false; error: string }
+
+const saveSchema = z.object({
+  name: z.string().min(1).max(60),
+  query: z.string().max(500),
+})
+
+/** Eine gespeicherte Ansicht ist ein Lesezeichen auf eine Suchadresse. */
+export async function saveViewAction(input: unknown): Promise<ActionResult> {
+  const user = await requireUser()
+  const parsed = saveSchema.safeParse(input)
+  if (!parsed.success) return { ok: false, error: de.actionErrors.default! }
+
+  const anzahl = await db.savedView.count({ where: { userId: user.id } })
+  if (anzahl >= 30) return { ok: false, error: de.actionErrors['too-many-views']! }
+
+  await db.savedView.create({
+    data: {
+      userId: user.id,
+      name: parsed.data.name.trim(),
+      query: parsed.data.query,
+      sortOrder: anzahl,
+    },
+  })
+  revalidatePath('/suche')
+  return { ok: true }
+}
+
+const idSchema = z.object({ id: z.string().min(1) })
+
+export async function deleteViewAction(input: unknown): Promise<ActionResult> {
+  const user = await requireUser()
+  const parsed = idSchema.safeParse(input)
+  if (!parsed.success) return { ok: false, error: de.actionErrors.default! }
+
+  // Nur die eigenen: die Kennung allein reicht nicht als Berechtigung.
+  await db.savedView.deleteMany({ where: { id: parsed.data.id, userId: user.id } })
+  revalidatePath('/suche')
+  return { ok: true }
+}

web/app/(app)/suche/page.tsx

@@ -0,0 +1,240 @@
+import type { Metadata } from 'next'
+import Link from 'next/link'
+import { db } from '@/lib/db'
+import { requireUser } from '@/lib/auth/current'
+import { parseFilters, toSearchParams, SEARCH_KINDS } from '@/lib/search/query'
+import { searchCases, searchDocuments, searchPersonnel } from '@/lib/search/service'
+import { builtinViews } from '@/lib/search/views'
+import { de } from '@/lib/i18n/de'
+import { StampMark, classificationEdgeStyle } from '@/components/StampMark'
+import { StatusTags } from '@/components/StatusTags'
+import { SearchBox } from './SearchBox'
+import { SavedViews } from './SavedViews'
+
+export const metadata: Metadata = { title: de.search.heading }
+export const dynamic = 'force-dynamic'
+
+/**
+ * Suchseite.
+ *
+ * Alles läuft über Adressparameter: das macht jeden Zustand teilbar, den
+ * Zurück-Knopf richtig und eine gespeicherte Ansicht zu dem, was sie ist —
+ * ein Lesezeichen. Siehe lib/search/query.ts.
+ */
+export default async function SearchPage({
+  searchParams,
+}: {
+  searchParams: Promise<Record<string, string | string[] | undefined>>
+}) {
+  const user = await requireUser()
+  const roh = await searchParams
+  const filters = parseFilters(
+    Object.fromEntries(
+      Object.entries(roh).map(([k, v]) => [k, Array.isArray(v) ? v[0] : v]),
+    ),
+  )
+
+  const [levels, gespeichert] = await Promise.all([
+    db.clearanceLevelConfig.findMany({ orderBy: { level: 'asc' } }),
+    db.savedView.findMany({
+      where: { userId: user.id },
+      orderBy: [{ sortOrder: 'asc' }, { createdAt: 'asc' }],
+      select: { id: true, name: true, query: true },
+    }),
+  ])
+  const levelName = new Map(levels.map((l) => [l.level, l.name]))
+
+  const ergebnis =
+    filters.kind === 'document'
+      ? await searchDocuments(user.permissions, filters)
+      : filters.kind === 'personnel'
+        ? await searchPersonnel(user.permissions, filters)
+        : await searchCases(user.permissions, filters)
+
+  const statusTags = filters.kind === 'personnel' ? await listStatusTags() : []
+
+  return (
+    <main className="mx-auto max-w-5xl px-6 py-10">
+      <div className="flex flex-wrap items-baseline justify-between gap-4">
+        <h1 className="font-condensed">{de.search.heading}</h1>
+        <span className="font-mono text-xs text-text-dim">
+          {de.search.countLabel(ergebnis.total)}
+        </span>
+      </div>
+
+      <SearchBox filters={filters} />
+
+      <nav className="mt-4 flex flex-wrap gap-4 font-condensed text-xs">
+        {SEARCH_KINDS.map((kind) => (
+          <Link
+            key={kind}
+            href={`/suche?${toSearchParams({ ...filters, kind, cursor: undefined })}`}
+            className={kind === filters.kind ? 'text-accent' : undefined}
+          >
+            {de.search.kinds[kind]}
+          </Link>
+        ))}
+      </nav>
+
+      <SavedViews
+        builtins={builtinViews()}
+        saved={gespeichert}
+        currentQuery={toSearchParams({ ...filters, cursor: undefined })}
+      />
+
+      {'facets' in ergebnis ? (
+        <div className="mt-6 flex flex-wrap gap-x-8 gap-y-3 border-t border-line pt-4 text-2xs">
+          <Facette
+            label={de.case.status}
+            werte={ergebnis.facets.status.map((f) => ({
+              ...f,
+              label: de.case.statusNames[f.value] ?? f.value,
+            }))}
+            param="status"
+            filters={filters}
+          />
+          <Facette
+            label={de.case.type}
+            werte={ergebnis.facets.templateKey.map((f) => ({ ...f, label: f.value }))}
+            param="templateKey"
+            filters={filters}
+          />
+          <Facette
+            label={de.clearance.classification}
+            werte={ergebnis.facets.classification.map((f) => ({
+              ...f,
+              label: `${f.value} · ${levelName.get(Number(f.value)) ?? ''}`,
+            }))}
+            param="classification"
+            filters={filters}
+          />
+        </div>
+      ) : null}
+
+      {ergebnis.truncated ? (
+        <p className="mt-4 text-2xs text-stamp-3">{de.search.truncated}</p>
+      ) : null}
+
+      {ergebnis.hits.length === 0 ? (
+        <p className="mt-10 text-text-dim">
+          {filters.q ? de.search.empty : de.search.emptyNoQuery}
+        </p>
+      ) : (
+        <ul className="mt-6 border-t border-line">
+          {ergebnis.hits.map((treffer) => (
+            <li key={treffer.id} className="border-b border-line">
+              {'caseNumber' in treffer ? (
+                <Link
+                  href={`/faelle/${treffer.caseNumber}`}
+                  prefetch
+                  className="flex flex-wrap items-baseline gap-x-4 gap-y-1 py-3 pl-3 text-text no-underline"
+                  style={classificationEdgeStyle(treffer.classification)}
+                >
+                  <span className="font-mono text-xs text-text-dim">{treffer.caseNumber}</span>
+                  <span className="grow">{treffer.title}</span>
+                  <span className="font-condensed text-2xs text-text-dim">
+                    {de.case.statusNames[treffer.status] ?? treffer.status}
+                  </span>
+                  <StampMark
+                    level={treffer.classification}
+                    name={levelName.get(treffer.classification) ?? de.common.unknown}
+                  />
+                </Link>
+              ) : 'documentNumber' in treffer ? (
+                <Link
+                  href={`/dokumente/${treffer.documentNumber}`}
+                  prefetch
+                  className="flex flex-wrap items-baseline gap-x-4 gap-y-1 py-3 pl-3 text-text no-underline"
+                  style={classificationEdgeStyle(treffer.classification)}
+                >
+                  <span className="font-mono text-xs text-text-dim">
+                    {treffer.documentNumber}
+                  </span>
+                  <span className="grow">{treffer.title}</span>
+                  <span className="font-condensed text-2xs text-text-dim">
+                    {de.document.statusNames[treffer.status] ?? treffer.status}
+                  </span>
+                </Link>
+              ) : (
+                <Link
+                  href={`/personalakten/${treffer.id}`}
+                  prefetch
+                  className="flex flex-wrap items-baseline gap-x-4 gap-y-1 py-3 pl-3 text-text no-underline"
+                  style={classificationEdgeStyle(treffer.classification)}
+                >
+                  <span className="grow">{treffer.displayName}</span>
+                  {treffer.rank ? (
+                    <span className="font-condensed text-2xs text-text-dim">{treffer.rank}</span>
+                  ) : null}
+                  <StatusTags tags={treffer.statusTags} known={statusTags} />
+                </Link>
+              )}
+            </li>
+          ))}
+        </ul>
+      )}
+
+      {'cursor' in ergebnis && ergebnis.cursor ? (
+        <p className="mt-6">
+          <Link
+            href={`/suche?${toSearchParams({ ...filters, cursor: ergebnis.cursor })}`}
+            className="font-condensed text-xs"
+          >
+            {de.search.more}
+          </Link>
+        </p>
+      ) : null}
+    </main>
+  )
+}
+
+async function listStatusTags() {
+  return db.personnelStatusTag.findMany({
+    where: { isActive: true },
+    orderBy: { sortOrder: 'asc' },
+    select: { key: true, name: true, colorToken: true },
+  })
+}
+
+/**
+ * Eine Facette. Die Zahlen stammen aus derselben Abfrage wie die Liste — ein
+ * Zähler, der mehr zählt als die Liste zeigt, wäre selbst eine Information.
+ */
+function Facette({
+  label,
+  werte,
+  param,
+  filters,
+}: {
+  label: string
+  werte: { value: string; label: string; count: number }[]
+  param: 'status' | 'templateKey' | 'classification'
+  filters: ReturnType<typeof parseFilters>
+}) {
+  if (werte.length === 0) return null
+
+  return (
+    <div>
+      <p className="font-condensed text-text-dim">{label}</p>
+      <ul className="mt-1 space-y-0.5">
+        {werte.slice(0, 6).map((wert) => {
+          const aktiv = String(filters[param] ?? '') === wert.value
+          return (
+            <li key={wert.value}>
+              <Link
+                href={`/suche?${toSearchParams({
+                  ...filters,
+                  [param]: aktiv ? undefined : wert.value,
+                  cursor: undefined,
+                })}`}
+                className={aktiv ? 'text-accent' : 'text-text'}
+              >
+                {wert.label} <span className="font-mono text-text-dim">{wert.count}</span>
+              </Link>
+            </li>
+          )
+        })}
+      </ul>
+    </div>
+  )
+}