fix: Listbox-Filter "Alle Quellen" zeigt nun korrekt alle Meldungen an

- Initialwert von sourceFilter auf "Alle Quellen" gesetzt
- Filterbedingung angepasst, um mit Listbox-Einträgen übereinzustimmen
- Dropdown-UX verbessert durch Icon und Scrollfunktion

components/main/reports/MeldungenView.tsx

@@ -6,6 +6,7 @@ import type { AppDispatch } from "@/redux/store";
 import type { RootState } from "@/redux/store";
 import DateRangePickerMeldungen from "./DateRangePickerMeldungen";
 import MeldungenTabelle from "./MeldungenTabelle";
+import { Listbox } from "@headlessui/react";
 
 type Meldung = {
   t: string;
@@ -20,7 +21,7 @@ export default function MeldungenView() {
   const dispatch = useDispatch<AppDispatch>();
   const messages = useSelector((state: RootState) => state.messages.data);
 
-  const [sourceFilter, setSourceFilter] = useState("Alle");
+  const [sourceFilter, setSourceFilter] = useState("Alle Quellen");
 
   const today = new Date();
   const prior30 = new Date();
@@ -36,13 +37,14 @@ export default function MeldungenView() {
   }, [dispatch, fromDate, toDate]);
 
   const filteredMessages =
-    sourceFilter === "Alle"
+    sourceFilter === "Alle Quellen"
       ? messages
       : messages.filter((m: Meldung) => m.i === sourceFilter);
 
   const allSources = Array.from(
     new Set(messages.map((m: Meldung) => m.i))
   ).sort();
+  const sources = ["Alle Quellen", ...allSources];
 
   return (
     <div className="flex flex-col gap-3 p-4 h-[calc(100vh-13vh-8vh)]">
@@ -61,18 +63,46 @@ export default function MeldungenView() {
         >
           Anzeigen
         </button>
-        <select
-          value={sourceFilter}
-          onChange={(e) => setSourceFilter(e.target.value)}
-          className="border px-4 py-3 rounded h-fit ml-6"
-        >
-          <option value="Alle">Alle Quellen</option>
-          {allSources.map((src) => (
-            <option key={String(src)} value={String(src)}>
-              {String(src)}
-            </option>
-          ))}
-        </select>
+
+        <Listbox value={sourceFilter} onChange={setSourceFilter}>
+          <div className="relative ml-6 w-64">
+            <Listbox.Button className="w-full border px-4 py-3 rounded text-left bg-white flex justify-between items-center">
+              <span>{sourceFilter}</span>
+              <svg
+                className="w-5 h-5 text-gray-400"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+              >
+                <path
+                  fillRule="evenodd"
+                  d="M5.23 7.21a.75.75 0 011.06.02L10 10.585l3.71-3.355a.75.75 0 111.02 1.1l-4.25 3.85a.75.75 0 01-1.02 0l-4.25-3.85a.75.75 0 01.02-1.06z"
+                  clipRule="evenodd"
+                />
+              </svg>
+            </Listbox.Button>
+            <Listbox.Options className="absolute z-50 mt-1 w-full border rounded bg-white shadow max-h-60 overflow-auto">
+              {sources.map((src) => (
+                <Listbox.Option
+                  key={src}
+                  value={src}
+                  className={({ selected, active }) =>
+                    `px-4 py-2 cursor-pointer ${
+                      selected
+                        ? "bg-littwin-blue text-white"
+                        : active
+                        ? "bg-blue-100"
+                        : ""
+                    }`
+                  }
+                >
+                  {src}
+                </Listbox.Option>
+              ))}
+            </Listbox.Options>
+          </div>
+        </Listbox>
       </div>
 
       <MeldungenTabelle messages={filteredMessages} />