Startseite: fast ferting

2025-10-29 01:05:32 +00:00 · 2025-02-20 15:43:09 +01:00
parent cbbbec9273
commit 37a65ec902
12 changed files with 308 additions and 121 deletions
--- a/scratchpad.md
+++ b/scratchpad.md
@@ -27,3 +27,20 @@ Modelle umwandeln (zzt RecordProxy)
 - Abfragen Person
 - Ersellen & Abfragen FTS5-Tabellen
 - Erstellen Textseiten
+
+
+- Man kann auf der Startseit nach Almanach-Nummern suchen
+- Überall werden die Almanachnummer und Inhaltsnummer angezeigt
+- Die URL referenziert die Almanachnummern, nicht mher die DB-IDs
+
+- In der Almanach-Ansicht werden die Abkürzungen erklärt
+- In der Almanach-Ansicht können die Beiträge nach Sammlungen gruppiert werden
+- In der Almanach-Ansicht kann nach Inhalten frei gefiltert werden, oder nach Typ
+
+- Es gibt neue URLs sowohl für die einzelne Reihe, als auch für den einzelnen Beitrag
+
+- Die Suche ist klar nach Typ unterteilt
+- Zusätzlich zur jetzigen Suchfunktion gibt es für jeden Typ noch eine Detailsuche
+- Suchergebnisse können nach Typ, Person, Jahr gefiltert werden
+- Suchergebnisse könnnen nach Jahr und Band, nach Band und Jahr (nach Personen) sortiert werden
+- Jede Suche hat eine eindeutige URL
--- a/views/assets/js/mark.min.js
+++ b/views/assets/js/mark.min.js
--- a/views/assets/scripts.js
+++ b/views/assets/scripts.js
@@ -1,48 +1,48 @@
-var p = (r) => {
-  throw TypeError(r);
+var _ = (i) => {
+  throw TypeError(i);
 };
-var L = (r, i, t) => i.has(r) || p("Cannot " + t);
-var u = (r, i, t) => (L(r, i, "read from private field"), t ? t.call(r) : i.get(r)), o = (r, i, t) => i.has(r) ? p("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(r) : i.set(r, t), h = (r, i, t, e) => (L(r, i, "write to private field"), e ? e.call(r, t) : i.set(r, t), t), f = (r, i, t) => (L(r, i, "access private method"), t);
-const v = "script[xslt-onload]", g = "xslt-template", w = "xslt-transformed", A = "filter-list";
-var a, c, T;
-class S {
+var g = (i, r, t) => r.has(i) || _("Cannot " + t);
+var c = (i, r, t) => (g(i, r, "read from private field"), t ? t.call(i) : r.get(i)), a = (i, r, t) => r.has(i) ? _("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(i) : r.set(i, t), o = (i, r, t, e) => (g(i, r, "write to private field"), e ? e.call(i, t) : r.set(i, t), t), f = (i, r, t) => (g(i, r, "access private method"), t);
+const v = "script[xslt-onload]", m = "xslt-template", A = "xslt-transformed", F = "filter-list", d = "filter-list-list", I = "filter-list-item", w = "filter-list-input", E = "filter-list-searchable";
+var l, p, x;
+class $ {
  constructor() {
-    o(this, c);
-    o(this, a);
-    h(this, a, /* @__PURE__ */ new Map());
+    a(this, p);
+    a(this, l);
+    o(this, l, /* @__PURE__ */ new Map());
  }
  setup() {
-    let i = htmx.findAll(v);
-    for (let t of i)
-      f(this, c, T).call(this, t);
+    let r = htmx.findAll(v);
+    for (let t of r)
+      f(this, p, x).call(this, t);
  }
  hookupHTMX() {
-    htmx.on("htmx:load", (i) => {
+    htmx.on("htmx:load", (r) => {
      this.setup();
    });
  }
 }
-a = new WeakMap(), c = new WeakSet(), T = function(i) {
-  if (i.getAttribute(w) === "true" || !i.hasAttribute(g))
+l = new WeakMap(), p = new WeakSet(), x = function(r) {
+  if (r.getAttribute(A) === "true" || !r.hasAttribute(m))
    return;
-  let t = "#" + i.getAttribute(g), e = u(this, a).get(t);
+  let t = "#" + r.getAttribute(m), e = c(this, l).get(t);
  if (!e) {
-    let d = htmx.find(t);
-    if (d) {
-      let E = d.innerHTML ? new DOMParser().parseFromString(d.innerHTML, "application/xml") : d.contentDocument;
-      e = new XSLTProcessor(), e.importStylesheet(E), u(this, a).set(t, e);
+    let u = htmx.find(t);
+    if (u) {
+      let b = u.innerHTML ? new DOMParser().parseFromString(u.innerHTML, "application/xml") : u.contentDocument;
+      e = new XSLTProcessor(), e.importStylesheet(b), c(this, l).set(t, e);
    } else
      throw new Error("Unknown XSLT template: " + t);
  }
-  let s = new DOMParser().parseFromString(i.innerHTML, "application/xml"), b = e.transformToFragment(s, document), x = new XMLSerializer().serializeToString(b);
-  i.outerHTML = x;
+  let s = new DOMParser().parseFromString(r.innerHTML, "application/xml"), L = e.transformToFragment(s, document), S = new XMLSerializer().serializeToString(L);
+  r.outerHTML = S;
 };
-var n, l, _, m;
+var n, h, T;
 class k extends HTMLElement {
  constructor() {
    super();
-    o(this, l);
-    o(this, n, !1);
+    a(this, h);
+    a(this, n, !1);
    this._items = [], this._url = "", this._filterstart = !1, this._placeholder = "Liste filtern...", this.render();
  }
  static get observedAttributes() {
@@ -55,7 +55,7 @@ class k extends HTMLElement {
    return this._items;
  }
  connectedCallback() {
-    this._url = this.getAttribute("data-url") || "./", this._filterstart = this.getAttribute("data-filterstart") === "true", this._placeholder = this.getAttribute("data-placeholder") || "Liste filtern...", this._filterstart && h(this, n, !0), this.addEventListener("input", this.onInput.bind(this)), this.addEventListener("keydown", this.onEnter.bind(this)), this.addEventListener("focusin", this.onGainFocus.bind(this)), this.addEventListener("focusout", this.onLoseFocus.bind(this));
+    this._url = this.getAttribute("data-url") || "./", this._filterstart = this.getAttribute("data-filterstart") === "true", this._placeholder = this.getAttribute("data-placeholder") || "Liste filtern...", this._filterstart && o(this, n, !0), this.addEventListener("input", this.onInput.bind(this)), this.addEventListener("keydown", this.onEnter.bind(this)), this.addEventListener("focusin", this.onGainFocus.bind(this)), this.addEventListener("focusout", this.onLoseFocus.bind(this));
  }
  attributeChangedCallback(t, e, s) {
    t === "data-url" && e !== s && (this._url = s, this.render()), t === "data-filterstart" && e !== s && (this._filterstart = s === "true", this.render()), t === "data-placeholder" && e !== s && (this._placeholder = s, this.render());
@@ -64,10 +64,15 @@ class k extends HTMLElement {
    t.target && t.target.tagName.toLowerCase() === "input" && (this._filter = t.target.value, this.renderList());
  }
  onGainFocus(t) {
-    t.target && t.target.tagName.toLowerCase() === "input" && (h(this, n, !1), this.renderList());
+    t.target && t.target.tagName.toLowerCase() === "input" && (o(this, n, !1), this.renderList());
  }
  onLoseFocus(t) {
-    t.target && t.target.tagName.toLowerCase() === "input" && (t.target.value = "", this._filter = "", this._filterstart && h(this, n, !0), this.renderList());
+    let e = this.querySelector("input");
+    if (t.target && t.target === e) {
+      if (relatedElement = t.relatedTarget, relatedElement && this.contains(relatedElement))
+        return;
+      e.value = "", this._filter = "", this._filterstart && o(this, n, !0), this.renderList();
+    }
  }
  onEnter(t) {
    if (t.target && t.target.tagName.toLowerCase() === "input" && t.key === "Enter") {
@@ -76,12 +81,33 @@ class k extends HTMLElement {
      e && e.click();
    }
  }
+  mark() {
+    if (typeof Mark != "function")
+      return;
+    let t = this.querySelector("#" + d);
+    if (!t)
+      return;
+    let e = new Mark(t.querySelectorAll("." + E));
+    this._filter && e.mark(this._filter, {
+      separateWordSearch: !0
+    });
+  }
+  // INFO: allows for setting a custom HREF of the list item
+  // The function takes the item as parameter fn(item) and should return a string.
  setHREFFunc(t) {
    this.getHREF = t, this.render();
  }
+  // INFO: allows for setting a custom link text of the list item
+  // The function takes the item as parameter fn(item) and should return a string or
+  // an HTML template literal.
  setLinkTextFunc(t) {
    this.getLinkText = t, this.render();
  }
+  // INFO: allows for setting the text that will be filtered for.
+  // The function takes the item as parameter fn(item) and should return a string.
+  setSearchTextFunc(t) {
+    this.getSearchText = t, this.render();
+  }
  getHREF(t) {
    if (t) {
      if (!t.id)
@@ -89,66 +115,83 @@ class k extends HTMLElement {
    } else return "";
    return t.id;
  }
-  getLinkText(t) {
+  getSearchText(t) {
    if (t) {
      if (!t.name)
        return "";
    } else return "";
    return t.name;
  }
+  getLinkText(t) {
+    let e = this.getSearchText(t);
+    return e === "" ? "" : `<span class="${E}">${e}</span>`;
+  }
  renderList() {
-    let t = this.querySelector("#list");
-    t && (t.outerHTML = this.List());
+    let t = this.querySelector("#" + d);
+    t && (t.outerHTML = this.List()), this.mark();
  }
  render() {
    this.innerHTML = `
-            <div class="p-4 font-serif text-base">
+            <div class="font-serif text-base">
 							${this.Input()}
 							${this.List()}
            </div>
        `;
  }
+  ActiveDot(t) {
+    return f(this, h, T).call(this, t), "";
+  }
+  NoItems(t) {
+    return t.length === 0 ? '<div class="px-2 py-0.5 italic text-gray-500">Keine Einträge gefunden</div>' : "";
+  }
  Input() {
    return `
-			<div class="flex w-full pb-0.5 border-b border-zinc-600">
-						<i class="ri-arrow-right-s-line mr-1"></i>
+			<div class="flex w-full py-0.5 border-b border-zinc-600 bg-stone-50">
+						<i class="ri-arrow-right-s-line mr-1 pl-2"></i>
 						<div class="grow">
 						<input
 								type="text"
 								placeholder="${this._placeholder}"
-								class="w-full placeholder:italic px-2 " />
+								class="${w} w-full placeholder:italic px-2 py-0.5" />
 						</div>
 				</div>
 				`;
  }
  List() {
    let t = this._items;
-    return this._filter && (this._filterstart ? t = this._items.filter((e) => this.getLinkText(e).toLowerCase().startsWith(this._filter.toLowerCase())) : t = this._items.filter((e) => this.getLinkText(e).toLowerCase().includes(this._filter.toLowerCase()))), `
-							<div id="list" class="links min-h-72 max-h-60 overflow-auto border-b border-zinc-300 ${f(this, l, m).call(this)}">
+    if (this._filter)
+      if (this._filterstart)
+        t = this._items.filter((e) => this.getSearchText(e).toLowerCase().startsWith(this._filter.toLowerCase()));
+      else {
+        let e = this._filter.split(" ");
+        t = this._items.filter((s) => e.every((L) => this.getSearchText(s).toLowerCase().includes(L.toLowerCase())));
+      }
+    return `
+							<div id="${d}" class="${d} pt-1 min-h-72 max-h-60 overflow-auto border-b border-zinc-300 bg-stone-50 ${c(this, n) ? "hidden" : ""}">
 								${t.map(
      (e, s) => `
 									<a
 										href="${this._url}${this.getHREF(e)}"
-										class="block px-2.5 py-0.5 hover:bg-slate-200 no-underline ${s % 2 === 0 ? "bg-stone-100" : "bg-stone-50"}"
-										${f(this, l, _).call(this, e)}>
+										class="${I} block px-2.5 py-0.5 hover:bg-slate-200 no-underline ${s % 2 === 0 ? "bg-stone-100" : "bg-stone-50"}"
+										${f(this, h, T).call(this, e) ? 'aria-current="page"' : ""}>
+										${this.ActiveDot(e)}
 										${this.getLinkText(e)}
 									</a>
 								`
    ).join("")}
+								${this.NoItems(t)}
 							</div>
 				`;
  }
 }
-n = new WeakMap(), l = new WeakSet(), _ = function(t) {
+n = new WeakMap(), h = new WeakSet(), T = function(t) {
  if (!t)
-    return "";
+    return !1;
  let e = this.getHREF(t);
-  return e === "" || !window.location.href.endsWith(e) ? "" : "aria-current='page'";
-}, m = function() {
-  return u(this, n) ? "hidden" : "";
+  return !(e === "" || !window.location.href.endsWith(e));
 };
-customElements.define(A, k);
+customElements.define(F, k);
 export {
  k as FilterList,
-  S as XSLTParseProcess
+  $ as XSLTParseProcess
 };
--- a/views/assets/style.css
+++ b/views/assets/style.css
--- a/views/layouts/default/root.gohtml
+++ b/views/layouts/default/root.gohtml
@@ -19,6 +19,7 @@
 		<script src="/assets/js/htmx.min.js" defer></script>
 		<script src="/assets/js/htmx-response-targets.js" defer></script>
 		<script src="/assets/js/client-side-templates.js" defer></script>
+		<script src="/assets/js/mark.min.js" defer></script>

 		<script type="module" src="/assets/scripts.js"></script>

--- a/views/public/js/mark.min.js
+++ b/views/public/js/mark.min.js
--- a/views/routes/components/_alphabet.gohtml
+++ b/views/routes/components/_alphabet.gohtml
@@ -4,7 +4,7 @@
 	<div
 		class="flex flex-row border-b px-3 border-zinc-300 items-end min-h-14"
 		x-data="{ search : '{{ $model.search }}' }">
-		<div id="alphabet" class="alphabet flex flex-row items-end">
+		<div id="alphabet" class="alphabet flex flex-row items-end text-xl">
 			{{ range $id, $r := .letters }}
 				<a
 					class="odd:bg-stone-100 even:bg-zinc-100 mr-1 border-zinc-300 border-x border-t [&>a[aria-current='page']]:font-bold
@@ -37,7 +37,7 @@
 					name="search"
 					value="{{ $model.search }}"
 					x-model="search"
-					placeholder="Band-ID od. Suchbegriff"
+					placeholder="Almanach-Nr od. Suchbegriff"
 					hx-get=""
 					hx-trigger="input changed delay:=200ms, keyup[key=='Enter']"
 					hx-select="#searchcontent"
--- a/views/routes/components/_reihe.gohtml
+++ b/views/routes/components/_reihe.gohtml
@@ -2,20 +2,39 @@
 {{ $r := index . 1 }}


-<a href="/reihe/{{ $r.MusenalmID }}">{{ $r.Title }}</a>
-<div>
-	{{ Safe $r.Annotation }}
-</div>
-<div>
-	{{ $bds := index $model.relations $r.Id }}
-	{{ if $bds }}
-		{{ range $_, $rel := $bds }}
-			{{ $bd := index $model.entries $rel.Entry }}
-			{{ if $bd }}
-				<div>
-					<a href="/almanach/{{ $bd.MusenalmID }}">{{ $bd.Year }}</a>
-				</div>
-			{{ end }}
+<div class="flex flex-row mb-1.5">
+	<div class="grow-0 shrink-0 w-[12rem] flex flex-col">
+		{{ if $r.References }}
+			<div class="text-sm font-sans px-2 py-1 bg-stone-100">{{ $r.References }}</div>
 		{{ end }}
-	{{ end }}
+		<div class="font-sans py-0.5 text-xs">
+			<a href="/reihe/?={{ $r.Id }}" class="no-underline rounded bg-stone-100 px-1.5">
+				<i class="ri-links-line"></i> Permalink
+			</a>
+		</div>
+	</div>
+	<div class="grow-0 ml-8 -indent-3">
+		<span class="font-bold">{{ $r.Title }}</span>
+		{{ if $r.Annotation }}
+			<span>&ensp;&middot;&ensp;</span>
+			<span class="">{{ Safe $r.Annotation }}</span>
+		{{ end }}
+		<div class="ml-3">
+			{{ $bds := index $model.relations $r.Id }}
+			{{ if $bds }}
+				{{ range $_, $rel := $bds }}
+					{{ $bd := index $model.entries $rel.Entry }}
+					{{ if $bd }}
+						<a href="/almanach/{{ $bd.MusenalmID }}">
+							{{ if ne $bd.Year 0 }}
+								{{ $bd.Year }}
+							{{ else }}
+								[o.J.]
+							{{ end }} </a
+						>&ensp;
+					{{ end }}
+				{{ end }}
+			{{ end }}
+		</div>
+	</div>
 </div>
--- a/views/routes/components/_reihenfilter.gohtml
+++ b/views/routes/components/_reihenfilter.gohtml
@@ -1,23 +1,42 @@
 {{ $model := . }}
-<div class="min-w-96 max-w-96 float-right flex flex-col gap-y-4">
+<div
+	class="min-w-[32rem] max-w-[32rem] float-right ml-6 flex flex-col gap-y-8 [&>*]:py-12
+	[&>*]:px-12 -mr-36 [&>*]:bg-slate-100">
 	{{ if .agents }}
-		<filter-list
-			id="agent-list"
-			data-url="/reihen/?agent="
-			data-placeholder="Personen und Körperschaften filtern..."></filter-list>
-
+		<div class="">
+			<filter-list
+				id="agent-list"
+				data-url="/reihen/?agent="
+				data-placeholder="Personen und Körperschaften filtern..."></filter-list>
+		</div>
 	<script type="module">
 		let agentList = document.getElementById("agent-list");
-		if (agentList) agentList.items = {{ .agents }};
+		if (agentList) {
+			agentList.items = {{ .agents }};
+
+			agentList.setSearchTextFunc((item) => {
+				return item.name;
+			});
+
+			agentList.setLinkTextFunc((item) => {
+				return `
+						<span class="filter-list-searchable">${item.name}</span>
+						<span class="text-xs text-stone-500 whitespace-nowrap">
+							${item.corporate_body ? "Verlag/Druck/Vertrieb" : item.biographical_data}
+						</span>
+						`;
+			});
+		}
 	</script>
 	{{ end }}

 	{{ if .places }}
-		<filter-list
-			id="place-list"
-			data-url="/reihen/?place="
-			data-placeholder="Erscheinungsorte filtern..."></filter-list>
-
+		<div>
+			<filter-list
+				id="place-list"
+				data-url="/reihen/?place="
+				data-placeholder="Erscheinungsorte filtern..."></filter-list>
+		</div>
 	<script type="module">
 		let placeList = document.getElementById("place-list");
 		if (placeList) placeList.items = {{ .places }};
@@ -25,20 +44,20 @@
 	{{ end }}

 	{{ if .years }}
-		<filter-list
-			id="year-list"
-			data-url="/reihen/?year="
-			data-filterstart="true"
-			data-placeholder="Erscheinungsjahr filtern..."></filter-list>
-
+		<div>
+			<filter-list
+				id="year-list"
+				data-url="/reihen/?year="
+				data-filterstart="true"
+				data-placeholder="Erscheinungsjahr filtern..."></filter-list>
+		</div>
 	<script type="module">
 		let yearList = document.getElementById("year-list");
 		if (yearList) {
 			yearList.items = {{ .years }};

 			yearList.setHREFFunc((item) => {
-				if (item === 0) return "/reihen?year=0";
-				return `/reihen?year=${item}`;
+				return String(item);
 			});

 			yearList.setLinkTextFunc((item) => {
--- a/views/routes/reihen/body.gohtml
+++ b/views/routes/reihen/body.gohtml
@@ -8,24 +8,24 @@
 	</div>
 </div>

-<div class="mt-3">
+<div class="mt-6">
 	{{ template "_reihenfilter" . }}
 </div>

-<div id="searchcontent" class="pt-4 font-serif">
+<div id="searchcontent" class="font-serif">
+	<div class="-ml-16">
 	{{ if or .series .altseries }}
-		{{ range $id, $r := .series }}
-			<div class="mb-1.5">
+		<div class="mb-1 max-w-[60rem] hyphens-auto">
+			{{ range $id, $r := .series }}
 				{{ template "_reihe" (Arr $model $r) }}
-			</div>
-		{{ end }}
+			{{ end }}
+		</div>
+		</div>

 		{{ if .search }}
-			<div class="mt-8">
+			<div class="mt-8 max-w-96">
 				{{ range $id, $r := .altseries }}
-					<div class="mb-1.5">
 						{{ template "_reihe" (Arr $model $r) }}
-					</div>
 				{{ end }}
 			</div>
 		{{ end }}
--- a/views/transform/main.js
+++ b/views/transform/main.js
@@ -5,6 +5,10 @@ const ATTR_XSLT_ONLOAD = "script[xslt-onload]";
 const ATTR_XSLT_TEMPLATE = "xslt-template";
 const ATTR_XSLT_STATE = "xslt-transformed";
 const FILTER_LIST_ELEMENT = "filter-list";
+const FILTER_LIST_LIST = "filter-list-list";
+const FILTER_LIST_ITEM = "filter-list-item";
+const FILTER_LIST_INPUT = "filter-list-input";
+const FILTER_LIST_SEARCHABLE = "filter-list-searchable";

 class XSLTParseProcess {
 	#processors;
@@ -166,8 +170,14 @@ class FilterList extends HTMLElement {
 	}

 	onLoseFocus(e) {
-		if (e.target && e.target.tagName.toLowerCase() === "input") {
-			e.target.value = "";
+		let input = this.querySelector("input");
+		if (e.target && e.target === input) {
+			relatedElement = e.relatedTarget;
+			if (relatedElement && this.contains(relatedElement)) {
+				return;
+			}
+
+			input.value = "";
 			this._filter = "";
 			if (this._filterstart) {
 				this.#hiddenlist = true;
@@ -186,16 +196,46 @@ class FilterList extends HTMLElement {
 		}
 	}

+	mark() {
+		if (typeof Mark !== "function") {
+			return;
+		}
+
+		let list = this.querySelector("#" + FILTER_LIST_LIST);
+		if (!list) {
+			return;
+		}
+
+		let instance = new Mark(list.querySelectorAll("." + FILTER_LIST_SEARCHABLE));
+		if (this._filter) {
+			instance.mark(this._filter, {
+				separateWordSearch: true,
+			});
+		}
+	}
+
+	// INFO: allows for setting a custom HREF of the list item
+	// The function takes the item as parameter fn(item) and should return a string.
 	setHREFFunc(fn) {
 		this.getHREF = fn;
 		this.render();
 	}

+	// INFO: allows for setting a custom link text of the list item
+	// The function takes the item as parameter fn(item) and should return a string or
+	// an HTML template literal.
 	setLinkTextFunc(fn) {
 		this.getLinkText = fn;
 		this.render();
 	}

+	// INFO: allows for setting the text that will be filtered for.
+	// The function takes the item as parameter fn(item) and should return a string.
+	setSearchTextFunc(fn) {
+		this.getSearchText = fn;
+		this.render();
+	}
+
 	getHREF(item) {
 		if (!item) {
 			return "";
@@ -205,7 +245,7 @@ class FilterList extends HTMLElement {
 		return item.id;
 	}

-	getLinkText(item) {
+	getSearchText(item) {
 		if (!item) {
 			return "";
 		} else if (!item.name) {
@@ -216,53 +256,65 @@ class FilterList extends HTMLElement {

 	#isActive(item) {
 		if (!item) {
-			return "";
+			return false;
 		}

 		let href = this.getHREF(item);
-		if (href === "") {
-			return "";
+		if (href === "" || !window.location.href.endsWith(href)) {
+			return false;
 		}

-		if (!window.location.href.endsWith(href)) {
-			return "";
-		}
-
-		return "aria-current='page'";
+		return true;
 	}

-	#hiddenList() {
-		if (this.#hiddenlist) {
-			return "hidden";
+	getLinkText(item) {
+		let text = this.getSearchText(item);
+		if (text === "") {
+			return ``;
 		}
-		return "";
+		return `<span class="${FILTER_LIST_SEARCHABLE}">${text}</span>`;
 	}

 	renderList() {
-		let list = this.querySelector("#list");
+		let list = this.querySelector("#" + FILTER_LIST_LIST);
 		if (list) {
 			list.outerHTML = this.List();
 		}
+		this.mark();
 	}

 	render() {
 		this.innerHTML = `
-            <div class="p-4 font-serif text-base">
+            <div class="font-serif text-base">
 							${this.Input()}
 							${this.List()}
            </div>
        `;
 	}

+	ActiveDot(item) {
+		if (this.#isActive(item)) {
+			return ``;
+		}
+		return "";
+	}
+
+	NoItems(items) {
+		if (items.length === 0) {
+			return `<div class="px-2 py-0.5 italic text-gray-500">Keine Einträge gefunden</div>`;
+		}
+		return "";
+	}
+
 	Input() {
 		return `
-			<div class="flex w-full pb-0.5 border-b border-zinc-600">
-						<i class="ri-arrow-right-s-line mr-1"></i>
+			<div class="flex w-full py-0.5 border-b border-zinc-600 bg-stone-50">
+						<i class="ri-arrow-right-s-line mr-1 pl-2"></i>
 						<div class="grow">
 						<input
 								type="text"
 								placeholder="${this._placeholder}"
-								class="w-full placeholder:italic px-2 " />
+								class="${FILTER_LIST_INPUT} w-full placeholder:italic px-2 py-0.5" />
 						</div>
 				</div>
 				`;
@@ -271,32 +323,38 @@ class FilterList extends HTMLElement {
 	List() {
 		let filtereditems = this._items;
 		if (this._filter) {
-			if (!this._filterstart)
+			if (!this._filterstart) {
+				let joins = this._filter.split(" ");
 				filtereditems = this._items.filter((item) => {
-					return this.getLinkText(item).toLowerCase().includes(this._filter.toLowerCase());
+					return joins.every((join) => {
+						return this.getSearchText(item).toLowerCase().includes(join.toLowerCase());
+					});
 				});
-			else
+			} else {
 				filtereditems = this._items.filter((item) => {
-					return this.getLinkText(item).toLowerCase().startsWith(this._filter.toLowerCase());
+					return this.getSearchText(item).toLowerCase().startsWith(this._filter.toLowerCase());
 				});
+			}
 		}

 		return `
-							<div id="list" class="links min-h-72 max-h-60 overflow-auto border-b border-zinc-300 ${this.#hiddenList()}">
+							<div id="${FILTER_LIST_LIST}" class="${FILTER_LIST_LIST} pt-1 min-h-72 max-h-60 overflow-auto border-b border-zinc-300 bg-stone-50 ${this.#hiddenlist ? "hidden" : ""}">
 								${filtereditems
 									.map(
 										(item, index) => `
 									<a
 										href="${this._url}${this.getHREF(item)}"
-										class="block px-2.5 py-0.5 hover:bg-slate-200 no-underline ${
+										class="${FILTER_LIST_ITEM} block px-2.5 py-0.5 hover:bg-slate-200 no-underline ${
 											index % 2 === 0 ? "bg-stone-100" : "bg-stone-50"
 										}"
-										${this.#isActive(item)}>
+										${this.#isActive(item) ? 'aria-current="page"' : ""}>
+										${this.ActiveDot(item)}
 										${this.getLinkText(item)}
 									</a>
 								`,
 									)
 									.join("")}
+								${this.NoItems(filtereditems)}
 							</div>
 				`;
 	}
--- a/views/transform/site.css
+++ b/views/transform/site.css
@@ -119,4 +119,8 @@
 	.headingcontainer h1 {
 		@apply text-3xl font-bold px-3 bg-stone-50 relative -translate-y-[50%] w-min whitespace-nowrap mx-auto;
 	}
+
+	.filter-list-list .filter-list-item[aria-current="page"] {
+		@apply border-l-4 border-zinc-300 font-bold;
+	}
 }