feat: added filter live and all sorted ps alphabetically

app/(tabs)/index.tsx

@@ -20,12 +20,14 @@ export default function HomeScreen() {
   const { shows, error, loading } = useShowContext();
   const { streamingServices } = useStreamingServiceContext();
   const [filteredShows, setFilteredShows] = React.useState(shows);
+  const [activeFilter, setActiveFilter] = React.useState<string>("all");
 
   React.useEffect(() => {
     setFilteredShows(shows);
   }, [shows]);
 
   const handleFilter = (type: string) => {
+    setActiveFilter(type);
     if (type === "all") {
       setFilteredShows(shows);
       return;
@@ -90,6 +92,38 @@ export default function HomeScreen() {
                 marginLeft: 10,
               }}
             >
+              {activeFilter !== "all" && (
+                <TouchableOpacity
+                  style={{
+                    padding: 2,
+                    height: 50,
+                    width: 50,
+                    alignItems: "center",
+                    justifyContent: "center",
+                    backgroundColor: "hsl(221, 39%, 80%)",
+                    borderRadius: 50,
+                  }}
+                  onPress={() => handleFilter("all")}
+                >
+                  <Text>ALLE</Text>
+                </TouchableOpacity>
+              )}
+
+              <TouchableOpacity
+                style={{
+                  padding: 2,
+                  height: 50,
+                  width: 50,
+                  alignItems: "center",
+                  justifyContent: "center",
+                  backgroundColor: "hsl(221, 39%, 80%)",
+                  borderRadius: 50,
+                }}
+                onPress={() => handleFilter("live")}
+              >
+                <Text>LIVE</Text>
+              </TouchableOpacity>
+
               {uniqueStreamingServices.map((serviceName) => {
                 const streamingService =
                   streamingServices[

app/participant.tsx

@@ -85,13 +85,6 @@ export default function ParticipantScreen() {
         >
           <Ionicons name="close-circle-outline" size={38} color="white" />
         </TouchableOpacity>
-        <View style={styles.participantInfoSection}>
-          <Text style={styles.participantInfo}>Single</Text>
-          <View style={styles.dot} />
-          <Text style={styles.participantInfo}>24 Jahre</Text>
-          <View style={styles.dot} />
-          <Text style={styles.participantInfo}>Köln</Text>
-        </View>
 
         <View style={styles.performedShowsSection}>
           <Text style={styles.performedShowsTitle}>Auftritte:</Text>

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({

app/stackStyles/participantStyles.tsx

@@ -8,8 +8,8 @@ const styles = StyleSheet.create({
   },
   closeIcon: {
     position: "absolute",
-    top: Dimensions.get("window").height * 0.077,
-    right: 30,
+    top: Dimensions.get("window").height * 0.07,
+    right: 15,
   },
   participantName: {
     color: "white",
@@ -50,10 +50,11 @@ const styles = StyleSheet.create({
   },
   performedShowsSection: {
     width: "100%",
-    height: "100%",
+    height: 500,
     paddingLeft: 15,
     paddingBottom: 20,
     backgroundColor: "hsl(221, 39%, 0%)",
+    marginTop: 15,
   },
   performedShowsTitle: {
     fontSize: 16,

app/tabStyles/indexStyles.tsx

@@ -136,8 +136,8 @@ export default StyleSheet.create({
     marginTop: 5,
   },
   tagLabel: {
-    color: "white", 
-    marginRight: 5
+    color: "white",
+    marginRight: 5,
   },
   tagContainer: {
     width: "100%",