:api added explore auto-complete feature

app/(tabs)/explore.tsx

@@ -1,11 +1,118 @@
 import styles from "@/app/tabStyles/indexStyles";
 import React from "react";
-import { Text, View } from "react-native";
+import {
+  Text,
+  View,
+  TextInput,
+  FlatList,
+  TouchableOpacity,
+  Keyboard,
+  TouchableWithoutFeedback,
+} from "react-native";
+import Feather from "@expo/vector-icons/Feather";
+import { useDiscoveryContext } from "@/contexts/DiscoveryContext";
+import { useShowContext } from "@/contexts/ShowContext";
 
 export default function TabTwoScreen() {
+  const { query, setQuery, suggestions, loading, error, clear } =
+    useDiscoveryContext();
+
+  const { shows } = useShowContext();
+
+  const personSuggestions = React.useMemo(
+    () => suggestions.filter((s) => s.type === "PERSON"),
+    [suggestions]
+  );
+
+  const showSuggestions = React.useMemo(
+    () => suggestions.filter((s) => s.type === "SHOW"),
+    [suggestions]
+  );
+
+  const [tag, setTag] = React.useState<string | null>(null);
   return (
-    <View style={styles.mainContainer}>
-      <Text>Explore Screen</Text>
-    </View>
+    <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+      <View style={styles.mainContainer}>
+        <View style={styles.header}>
+          <Text style={[styles.title, { fontSize: 28 }]}>Durchsuchen</Text>
+        </View>
+
+        <View style={styles.searchContainer}>
+          <TextInput
+            value={query}
+            onChangeText={setQuery}
+            placeholder="Wonach suchst du?"
+            placeholderTextColor=""
+            style={{
+              fontSize: 18,
+              fontWeight: "500",
+              color: "hsl(221, 39%, 80%)",
+            }}
+            returnKeyType="search"
+            onSubmitEditing={() => {
+              console.log("Search:", query);
+            }}
+            autoCapitalize="none"
+          />
+
+          {query.length === 0 ? (
+            <Feather name="search" size={24} color="hsl(221, 39%, 80%)" />
+          ) : (
+            <Feather
+              name="x"
+              size={24}
+              color="hsl(221, 39%, 80%)"
+              onPress={() => setQuery("")}
+            />
+          )}
+        </View>
+
+        {tag && (
+          <View style={styles.tagContainer}>
+            <Text style={styles.tagLabel}>{tag}</Text>
+            <Feather
+              name="x"
+              size={18}
+              color="hsl(221, 39%, 80%)"
+              onPress={() => setTag(null)}
+              style={{ marginLeft: "auto", marginRight: 10 }}
+            />
+          </View>
+        )}
+
+        {query.length > 0 && (
+          <>
+            <View style={styles.suggestionsSection}>
+              <Text style={styles.suggestionTitle}>Suchvorschläge</Text>
+
+              {showSuggestions.map((suggestion, idx) => (
+                <TouchableOpacity
+                  key={suggestion.text + "_" + idx}
+                  style={styles.suggestionContainer}
+                  onPress={() => {
+                    setTag(suggestion.text);
+                  }}
+                >
+                  <View style={styles.imageContainer}></View>
+                  <Text style={styles.suggestionLabel}>{suggestion.text}</Text>
+                </TouchableOpacity>
+              ))}
+              {personSuggestions.map((suggestion, idx) => (
+                <TouchableOpacity
+                  key={suggestion.text + "_" + idx}
+                  style={styles.suggestionContainer}
+                  onPress={() => {
+                    setTag(suggestion.text);
+                  }}
+                >
+                  <View style={styles.imageContainer}></View>
+                  <Text style={styles.suggestionLabel}>{suggestion.text}</Text>
+                </TouchableOpacity>
+              ))}
+            </View>
+          </>
+        )}
+      </View>
+    </TouchableWithoutFeedback>
   );
 }

app/(tabs)/index.tsx

@@ -87,6 +87,7 @@ export default function HomeScreen() {
                 alignItems: "center",
                 paddingHorizontal: 10,
                 gap: 10,
+                marginLeft: 10,
               }}
             >
               {uniqueStreamingServices.map((serviceName) => {