make rewirte start

backend/static/index.html

@@ -67,6 +67,20 @@
       <button id="lock-btn" type="button">Sperren</button>
     </div>
 
+    <div class="filters">
+      <input id="filter-text" type="search"
+             placeholder="Suchen … (z. B. „Andrea“ oder „Kaffee“)"
+             aria-label="Datensätze durchsuchen" />
+      <select id="filter-person" aria-label="Nach Person filtern">
+        <option value="">Alle Personen</option>
+      </select>
+      <select id="filter-action" aria-label="Nach Aktion filtern">
+        <option value="">Alle Aktionen</option>
+      </select>
+      <button id="filter-reset" type="button" class="secondary">Filter zurücksetzen</button>
+      <span id="filter-count" class="filter-count"></span>
+    </div>
+
     <table id="records">
       <thead>
         <tr>
@@ -89,10 +103,12 @@
     <form id="editor" autocomplete="off">
       <h2 id="editor-title">Neuer Datensatz</h2>
       <label>Person A
-        <input id="f-persona" type="text" required maxlength="120" />
+        <input id="f-persona" type="text" required maxlength="120"
+               list="dl-person" placeholder="wählen oder neu tippen …" />
       </label>
       <label>Person B
-        <input id="f-personb" type="text" required maxlength="120" />
+        <input id="f-personb" type="text" required maxlength="120"
+               list="dl-person" placeholder="wählen oder neu tippen …" />
       </label>
       <label>Start (optional, beliebiger Text)
         <input id="f-tsstart" type="text" maxlength="120"
@@ -111,7 +127,8 @@
                placeholder="warum es endete, z. B. zurückgezahlt, abgelaufen …" />
       </label>
       <label>Aktion
-        <input id="f-action" type="text" required maxlength="500" />
+        <input id="f-action" type="text" required maxlength="500"
+               list="dl-action" placeholder="wählen oder neu tippen …" />
       </label>
       <div class="actions">
         <button type="submit">Speichern</button>
@@ -120,6 +137,10 @@
     </form>
   </div>
 
+  <!-- suggestion lists for the editor's dropdown inputs (filled by ui.js) -->
+  <datalist id="dl-person"></datalist>
+  <datalist id="dl-action"></datalist>
+
   <script type="module" src="/static/ui.js"></script>
 </body>
 </html>