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.
This commit is contained in:
Harlekin
@@ -0,0 +1,195 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { paletteText } from '@/lib/i18n/shell'
|
||||
import { stampColor } from '@/components/StampMark'
|
||||
|
||||
type Treffer = { href: string; primary: string; secondary?: string; classification?: number }
|
||||
|
||||
const SEITEN: Treffer[] = paletteText.pages.map((seite) => ({
|
||||
href: seite.href,
|
||||
primary: seite.label,
|
||||
}))
|
||||
|
||||
/**
|
||||
* Die Kommandopalette.
|
||||
*
|
||||
* Aktenzeichen eintippen und hinspringen, mehr will sie nicht. Die Treffer
|
||||
* kommen serverseitig gefiltert; was hier ankommt, darf der Nutzer sehen.
|
||||
*
|
||||
* Eine laufende Anfrage wird bei neuer Eingabe abgebrochen — sonst überholt
|
||||
* eine langsame Antwort eine schnellere und zeigt Treffer zu einem Begriff,
|
||||
* der nicht mehr im Feld steht. Siehe docs/09-performance-und-ux.md.
|
||||
*/
|
||||
export function CommandPalette({ onClose }: { onClose: () => void }) {
|
||||
const router = useRouter()
|
||||
const [text, setText] = useState('')
|
||||
const [treffer, setTreffer] = useState<{ label: string; eintraege: Treffer[] }[]>([])
|
||||
const [auswahl, setAuswahl] = useState(0)
|
||||
const [laeuft, setLaeuft] = useState(false)
|
||||
const feld = useRef<HTMLInputElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
feld.current?.focus()
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
const begriff = text.trim()
|
||||
const seiten = SEITEN.filter((seite) =>
|
||||
seite.primary.toLowerCase().includes(begriff.toLowerCase()),
|
||||
)
|
||||
|
||||
if (begriff.length < 2) {
|
||||
setTreffer([{ label: paletteText.sections.pages!, eintraege: SEITEN }])
|
||||
setAuswahl(0)
|
||||
return
|
||||
}
|
||||
|
||||
const controller = new AbortController()
|
||||
const timer = setTimeout(async () => {
|
||||
setLaeuft(true)
|
||||
try {
|
||||
const antwort = await fetch(`/api/search/quick?q=${encodeURIComponent(begriff)}`, {
|
||||
signal: controller.signal,
|
||||
})
|
||||
const daten = (await antwort.json()) as {
|
||||
cases: { id: string; caseNumber: string; title: string; classification: number }[]
|
||||
personnel: { id: string; displayName: string; rank: string | null; classification: number }[]
|
||||
}
|
||||
|
||||
const gruppen: { label: string; eintraege: Treffer[] }[] = []
|
||||
if (daten.cases.length > 0) {
|
||||
gruppen.push({
|
||||
label: paletteText.sections.cases!,
|
||||
eintraege: daten.cases.map((akte) => ({
|
||||
href: `/faelle/${akte.caseNumber}`,
|
||||
primary: akte.caseNumber,
|
||||
secondary: akte.title,
|
||||
classification: akte.classification,
|
||||
})),
|
||||
})
|
||||
}
|
||||
if (daten.personnel.length > 0) {
|
||||
gruppen.push({
|
||||
label: paletteText.sections.personnel!,
|
||||
eintraege: daten.personnel.map((person) => ({
|
||||
href: `/personalakten/${person.id}`,
|
||||
primary: person.displayName,
|
||||
secondary: person.rank ?? undefined,
|
||||
classification: person.classification,
|
||||
})),
|
||||
})
|
||||
}
|
||||
if (seiten.length > 0) {
|
||||
gruppen.push({ label: paletteText.sections.pages!, eintraege: seiten })
|
||||
}
|
||||
|
||||
setTreffer(gruppen)
|
||||
setAuswahl(0)
|
||||
} catch {
|
||||
// Abgebrochen oder Netz weg: die alten Treffer bleiben stehen.
|
||||
} finally {
|
||||
setLaeuft(false)
|
||||
}
|
||||
}, 150)
|
||||
|
||||
return () => {
|
||||
clearTimeout(timer)
|
||||
controller.abort()
|
||||
}
|
||||
}, [text])
|
||||
|
||||
const flach = treffer.flatMap((gruppe) => gruppe.eintraege)
|
||||
|
||||
function springen(ziel: Treffer | undefined) {
|
||||
if (!ziel) return
|
||||
onClose()
|
||||
router.push(ziel.href)
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label={paletteText.open}
|
||||
className="fixed inset-0 z-50 flex items-start justify-center bg-ink-900/70 pt-[12vh]"
|
||||
onClick={onClose}
|
||||
>
|
||||
<div
|
||||
className="w-full max-w-xl border border-line bg-raised"
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
>
|
||||
<input
|
||||
ref={feld}
|
||||
value={text}
|
||||
onChange={(event) => setText(event.target.value)}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key === 'Escape') onClose()
|
||||
if (event.key === 'ArrowDown') {
|
||||
event.preventDefault()
|
||||
setAuswahl((i) => Math.min(i + 1, flach.length - 1))
|
||||
}
|
||||
if (event.key === 'ArrowUp') {
|
||||
event.preventDefault()
|
||||
setAuswahl((i) => Math.max(i - 1, 0))
|
||||
}
|
||||
if (event.key === 'Enter') {
|
||||
event.preventDefault()
|
||||
springen(flach[auswahl])
|
||||
}
|
||||
}}
|
||||
placeholder={paletteText.placeholder}
|
||||
aria-label={paletteText.placeholder}
|
||||
className="w-full border-b border-line bg-transparent px-4 py-3 text-sm outline-none"
|
||||
/>
|
||||
|
||||
<div
|
||||
className="max-h-[50vh] overflow-y-auto"
|
||||
style={{ opacity: laeuft ? 0.5 : 1 }}
|
||||
>
|
||||
{flach.length === 0 ? (
|
||||
<p className="px-4 py-3 text-2xs text-text-dim">{paletteText.empty}</p>
|
||||
) : (
|
||||
treffer.map((gruppe) => (
|
||||
<div key={gruppe.label}>
|
||||
<p className="px-4 pt-3 pb-1 font-condensed text-2xs text-text-dim">
|
||||
{gruppe.label}
|
||||
</p>
|
||||
<ul>
|
||||
{gruppe.eintraege.map((eintrag) => {
|
||||
const index = flach.indexOf(eintrag)
|
||||
return (
|
||||
<li key={eintrag.href}>
|
||||
<button
|
||||
type="button"
|
||||
onMouseEnter={() => setAuswahl(index)}
|
||||
onClick={() => springen(eintrag)}
|
||||
className={`flex w-full items-baseline gap-3 px-4 py-2 text-left text-sm ${
|
||||
index === auswahl ? 'bg-ink-700' : ''
|
||||
}`}
|
||||
style={
|
||||
eintrag.classification !== undefined
|
||||
? {
|
||||
borderLeft: `var(--spacing-edge) solid ${stampColor(eintrag.classification)}`,
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
<span className="font-mono text-xs">{eintrag.primary}</span>
|
||||
{eintrag.secondary ? (
|
||||
<span className="grow text-text-dim">{eintrag.secondary}</span>
|
||||
) : null}
|
||||
</button>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
'use client'
|
||||
|
||||
import dynamic from 'next/dynamic'
|
||||
import { useEffect, useState } from 'react'
|
||||
|
||||
const CommandPalette = dynamic(
|
||||
() => import('./CommandPalette').then((modul) => modul.CommandPalette),
|
||||
{ ssr: false },
|
||||
)
|
||||
|
||||
/**
|
||||
* Strg+K.
|
||||
*
|
||||
* Absichtlich winzig: dieser Teil steckt in jeder Seite, und die Fallakte hat
|
||||
* kein Bündel übrig. Die Palette selbst wird erst geholt, wenn jemand sie
|
||||
* öffnet — vorher ist sie ein Tastaturereignis und sonst nichts.
|
||||
*/
|
||||
export function PaletteTrigger() {
|
||||
const [offen, setOffen] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
const handler = (event: KeyboardEvent) => {
|
||||
if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'k') {
|
||||
event.preventDefault()
|
||||
setOffen((vorher) => !vorher)
|
||||
}
|
||||
}
|
||||
window.addEventListener('keydown', handler)
|
||||
return () => window.removeEventListener('keydown', handler)
|
||||
}, [])
|
||||
|
||||
if (!offen) return null
|
||||
return <CommandPalette onClose={() => setOffen(false)} />
|
||||
}
|
||||
Reference in New Issue
Block a user