feat: added filter live and all sorted ps alphabetically

app/showDetails.tsx

@@ -4,7 +4,7 @@ import ShowInfo from "@/components/ui/ShowInfo";
 import ParticipantDetails from "@/components/ParticipantDeatails";
 import React from "react";
 import { useSeasonContext } from "@/contexts/SeasonContext";
-import { getShowColors } from "@/constants/colors";
+
 import {
   Dimensions,
   Image,
@@ -39,7 +39,13 @@ export default function ShowDetails() {
   const [pLoading, setPLoading] = React.useState(false);
   const [pError, setPError] = React.useState<string | null>(null);
 
-  const { tabColor, seasonColor } = getShowColors(Number(id));
+  const sortedParticipants = React.useMemo(
+    () =>
+      [...participants].sort((a, b) =>
+        a.name.localeCompare(b.name, "de", { sensitivity: "base" })
+      ),
+    [participants]
+  );
 
   React.useEffect(() => {
     if (!showId) return;
@@ -109,7 +115,7 @@ export default function ShowDetails() {
                 styles.infoLabel,
                 {
                   fontWeight: selectedParticipants ? "bold" : "normal",
-                  color: selectedParticipants ? tabColor : "hsl(0, 0%, 65%)",
+                  color: selectedParticipants ? "#199edb" : "hsl(0, 0%, 65%)",
                 },
               ]}
             >
@@ -148,7 +154,7 @@ export default function ShowDetails() {
                         {
                           backgroundColor:
                             selectedSeason === season
-                              ? seasonColor
+                              ? "#199edb"
                               : "hsl(0, 0%, 20%)",
                         },
                       ]}
@@ -175,12 +181,12 @@ export default function ShowDetails() {
               {!pLoading && !pError && participants.length === 0 && (
                 <Text style={{ color: "gray" }}>Keine Teilnehmer.</Text>
               )}
-              {participants.map((p) => (
+              {sortedParticipants.map((p) => (
                 <TouchableOpacity
                   key={p.id}
                   style={[
                     styles.participantContainer,
-                    { backgroundColor: tabColor },
+                    { backgroundColor: "hsl(336, 79%, 63%)" },
                   ]}
                   onPress={() =>
                     router.push({