src/components/cards/CardsOverview.svelte

@@ -7,6 +7,7 @@
   import CardsEmptyState from "./CardsEmptyState.svelte";
   import CardDetailModal from "./CardDetailModal.svelte";
   import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
+  import ThFilterGroup from "./ThFilterGroup.svelte";
   export let edit_modal_open = false;
   export let runner = {};
   export let editable = {};
@@ -99,7 +100,7 @@
               <th />
               <ThFilter {handler} filterBy="code" />
               <ThFilter {handler} filterBy="runner" />
-              <ThFilter {handler} filterBy="status" />
+              <ThFilterGroup {handler} />
               <th />
             </tr>
           </thead>

src/components/cards/ThFilterGroup.svelte

@@ -0,0 +1,32 @@
+<script>
+  import { _ } from "svelte-i18n";
+  export let handler;
+  let selected = "all";
+</script>
+
+<th>
+  <select
+    on:input={() => {
+      setTimeout(() => {
+        if (`${selected}`.trim()) {
+          const value = selected;
+          handler.filter(value, (card) => {
+            if (
+              card.enabled === value ||
+              value === "all"
+            )
+              return card;
+            return "";
+          });
+        }
+      }, 50);
+    }}
+    bind:value={selected}
+    name="statusfilter"
+    id="statusfilter"
+  >
+    <option value="all">Alle</option>
+    <option value={true}>{$_("enabled")}</option>
+    <option value={false}>{$_("disabled")}</option>
+  </select>
+</th>