UX-MOBILE-1: FilterPanel — einklappbare Filter auf Mobil (390px)

Neues FilterPanel-Muster (src/components/FilterPanel.tsx + filterPanel.css): - Mobil (<768px): Suchfeld immer sichtbar; alle weiteren Filter hinter einem 'Filter (N)'-Button eingeklappt (Badge = Anzahl aktiver Nicht-Default-Filter). Tippen öffnet/schließt den Drawer. 'Filter zurücksetzen' im Drawer. - Desktop (>=768px): Toggle versteckt, Drawer als display:contents → alle Controls inline in der bestehenden .filters-Flexzeile, wie bisher. Auf GerbilsPage, WuerfeListPage und AnfragenPage ausgerollt. BeckenPage/KontaktePage nur ein Suchfeld → kein Panel nötig. e2e: filter-panel.spec.ts (8 Tests, phone+desktop); bestand/tiere/anfragen-Specs erhalten openFilterPanel-Aufruf vor Drawer-Controls; fixtures.ts +openFilterPanel(). Vitest 78 / e2e 102 grün. Mobil-Pass (390px, Durchsicht): Hauptproblem behoben. Beobachtete Restpunkte für god (nicht selbst gefixed): - .genotype-table in Genetik/Probeverpaarung: Genotyp-Strings können eng werden - Stammbaum (react-d3-tree SVG): kein explizites mobile Viewport-Handling - BreedingResultView Genotyp-Detail-Tabelle: ggf. horizontal scrollbar-los Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
2026-06-06 15:28:09 +02:00
parent 0a1e63bec6
commit 6eb82da90c
11 changed files with 254 additions and 21 deletions
--- a/gerbil-manager-web/src/components/FilterPanel.tsx
+++ b/gerbil-manager-web/src/components/FilterPanel.tsx
@@ -0,0 +1,52 @@
+import { useState, type ReactNode } from 'react'
+import { de } from '../strings/de'
+import './filterPanel.css'
+
+interface FilterPanelProps {
+  /** Always visible on mobile (typically the search text input). Optional. */
+  searchField?: ReactNode
+  /** Collapsible filters (hidden behind toggle on mobile; inline on desktop). */
+  children: ReactNode
+  /** Number of currently active (non-default) filter values. Shown as badge. */
+  activeCount: number
+  /** Called when the reset button is clicked. */
+  onReset: () => void
+}
+
+/**
+ * UX-MOBILE-1: wraps a set of filter controls so they collapse on mobile.
+ * Render inside the existing `.filters` div (or replace it entirely).
+ *
+ * Desktop (>=768px): renders all children inline, identical to today.
+ * Mobile (<768px): shows searchField + a "Filter (N)" toggle; tapping reveals
+ *   the rest of the controls in a column drawer + a reset button.
+ */
+export function FilterPanel({ searchField, children, activeCount, onReset }: FilterPanelProps) {
+  const [open, setOpen] = useState(false)
+  const t = de.filterPanel
+
+  const label = activeCount > 0 ? `${t.toggleButton} (${activeCount})` : t.toggleButton
+
+  return (
+    <div className={`filters filter-panel${open ? ' filter-panel--open' : ''}`}>
+      {searchField}
+      <button
+        type="button"
+        className="btn btn--ghost filter-panel__toggle"
+        onClick={() => setOpen((v) => !v)}
+        aria-expanded={open}
+        aria-label={label}
+      >
+        {label}
+      </button>
+      <div className="filter-panel__drawer">
+        {children}
+        {activeCount > 0 && (
+          <button type="button" className="btn btn--ghost filter-panel__reset-btn" onClick={onReset}>
+            {t.resetButton}
+          </button>
+        )}
+      </div>
+    </div>
+  )
+}
--- a/gerbil-manager-web/src/components/filterPanel.css
+++ b/gerbil-manager-web/src/components/filterPanel.css
@@ -0,0 +1,53 @@
+/*
+ * UX-MOBILE-1: FilterPanel — collapsible filter drawer on mobile.
+ *
+ * Desktop (>=768px): toggle hidden, drawer shows as display:contents so its
+ *   children participate directly in the parent .filters flex row.
+ * Mobile (<768px): searchField inline, then toggle button. Tap opens a full-
+ *   width drawer (flex column) with the remaining filters + reset button.
+ */
+
+/* ── Mobile default ── */
+.filter-panel__toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  white-space: nowrap;
+}
+
+.filter-panel__drawer {
+  display: none;
+  flex-direction: column;
+  gap: 0.75rem;
+  width: 100%;
+  padding-top: 0.25rem;
+}
+
+.filter-panel--open .filter-panel__drawer {
+  display: flex;
+}
+
+/* ── Desktop ── */
+@media (min-width: 768px) {
+  .filter-panel__toggle {
+    display: none;
+  }
+
+  .filter-panel__drawer {
+    /* Let children participate directly in the parent flex row. */
+    display: contents;
+  }
+
+  /* Reset button sits in the flex row on desktop when active filters exist. */
+  .filter-panel__reset-btn {
+    align-self: flex-end;
+  }
+}
+
+/* ── Mobile reset button ── */
+@media (max-width: 767px) {
+  .filter-panel__reset-btn {
+    align-self: flex-start;
+    margin-top: 0.25rem;
+  }
+}
--- a/gerbil-manager-web/src/pages/AnfragenPage.tsx
+++ b/gerbil-manager-web/src/pages/AnfragenPage.tsx
@@ -15,6 +15,7 @@ import {
 } from '../api/requests'
 import { useApi, useMutation } from '../hooks/useApi'
 import { formatDateTime } from '../format/labels'
+import { FilterPanel } from '../components/FilterPanel'
 import './anfragen.css'

 const PAGE_SIZE = 20
@@ -75,7 +76,10 @@ export default function AnfragenPage() {
      {sync.error && <div className="alert alert--error">{sync.error}</div>}

      {/* Status-Filter */}
-      <div className="filters">
+      <FilterPanel
+        activeCount={status !== '' ? 1 : 0}
+        onReset={() => { setStatus(''); setPage(1) }}
+      >
        <label className="field">
          <span>{t.detail.statusLabel}</span>
          <select
@@ -93,7 +97,7 @@ export default function AnfragenPage() {
            ))}
          </select>
        </label>
-      </div>
+      </FilterPanel>

      {requests.loading && <p className="muted">{de.common.loading}</p>}
      {requests.error && (
--- a/gerbil-manager-web/src/pages/GerbilsPage.tsx
+++ b/gerbil-manager-web/src/pages/GerbilsPage.tsx
@@ -7,6 +7,7 @@ import { andFilter, condition, type GridifyQuery } from '../api/gridify'
 import { GENDERS, GERBIL_STATUSES, type Gender, type GerbilStatus } from '../api/types'
 import { useApi, useMutation } from '../hooks/useApi'
 import { formatDate, genderLabel, statusLabel } from '../format/labels'
+import { FilterPanel } from '../components/FilterPanel'
 import './gerbils.css'

 const PAGE_SIZE = 20
@@ -82,6 +83,14 @@ export default function GerbilsPage() {
  const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE))
  const items = gerbils.data?.items ?? []

+  // UX-MOBILE-1: count non-default filter values for the badge.
+  const activeFilterCount =
+    (status !== 'Active' ? 1 : 0) +
+    (gender !== '' ? 1 : 0) +
+    (colorVarietyId !== '' ? 1 : 0) +
+    (originBreeder !== '' ? 1 : 0) +
+    (showExternal ? 1 : 0)
+
  // Multi-select bulk "Zur Abgabe stellen".
  const [selected, setSelected] = useState<Set<string>>(new Set())
  const toggleSelect = (id: string) =>
@@ -118,15 +127,20 @@ export default function GerbilsPage() {
        </Link>
      </header>

-      <div className="filters">
-        <input
-          type="search"
-          className="input"
-          placeholder={t.searchPlaceholder}
-          value={search}
-          onChange={(e) => onFilterChange(setSearch)(e.target.value)}
-          aria-label={t.fields.name}
-        />
+      <FilterPanel
+        searchField={
+          <input
+            type="search"
+            className="input"
+            placeholder={t.searchPlaceholder}
+            value={search}
+            onChange={(e) => onFilterChange(setSearch)(e.target.value)}
+            aria-label={t.fields.name}
+          />
+        }
+        activeCount={activeFilterCount}
+        onReset={resetFilters}
+      >
        <label className="field">
          <span>{t.filters.status}</span>
          <select
@@ -200,10 +214,7 @@ export default function GerbilsPage() {
            onChange={(e) => onFilterChange(setShowExternal)(e.target.checked)}
          />
        </label>
-        <button type="button" className="btn" onClick={resetFilters}>
-          {t.filters.reset}
-        </button>
-      </div>
+      </FilterPanel>

      {gerbils.loading && <p className="muted">{de.common.loading}</p>}
      {gerbils.error && (
--- a/gerbil-manager-web/src/pages/WuerfeListPage.tsx
+++ b/gerbil-manager-web/src/pages/WuerfeListPage.tsx
@@ -7,6 +7,7 @@ import { andFilter, condition, type GridifyQuery } from '../api/gridify'
 import type { Litter } from '../api/types'
 import { useApi } from '../hooks/useApi'
 import { formatDate } from '../format/labels'
+import { FilterPanel } from '../components/FilterPanel'

 const PAGE_SIZE = 20

@@ -111,7 +112,10 @@ export default function WuerfeListPage() {

      {tab === 'litters' && (
        <>
-          <div className="filters">
+          <FilterPanel
+            activeCount={year !== '' ? 1 : 0}
+            onReset={() => { setYear(''); setSort('dateDesc'); setPage(1) }}
+          >
            <label className="field">
              <span>{t.filterYear}</span>
              <select
@@ -136,7 +140,7 @@ export default function WuerfeListPage() {
                <option value="dateAsc">{t.sort.dateAsc}</option>
              </select>
            </label>
-          </div>
+          </FilterPanel>

          {litters.loading && <p className="muted">{de.common.loading}</p>}
          {litters.error && (
--- a/gerbil-manager-web/src/strings/de.ts
+++ b/gerbil-manager-web/src/strings/de.ts
@@ -807,6 +807,12 @@ export const de = {
      { key: 'schreckhaft', label: 'schreckhaft' },
    ],
  },
+  // ── UX-MOBILE-1 (Kevin): FilterPanel — einklappbare Filter auf Mobil ──
+  filterPanel: {
+    toggleButton: 'Filter',
+    resetButton: 'Filter zurücksetzen',
+    closeButton: 'Schließen',
+  },
 } as const

 export type Strings = typeof de