working prototype

app/(auth)/(tabs)/(home)/_layout.tsx

@@ -18,18 +18,6 @@ export default function IndexLayout() {
           headerBlurEffect: "prominent",
           headerTransparent: Platform.OS === "ios" ? true : false,
           headerShadowVisible: false,
-          headerLeft: () => (
-            <TouchableOpacity
-              style={{
-                marginRight: Platform.OS === "android" ? 17 : 0,
-              }}
-              onPress={() => {
-                router.push("/(auth)/downloads");
-              }}
-            >
-              <Feather name="download" color={"white"} size={22} />
-            </TouchableOpacity>
-          ),
           headerRight: () => (
             <View className="flex flex-row items-center space-x-2">
               <Chromecast />

app/(auth)/(tabs)/(home)/index.tsx

@@ -6,7 +6,7 @@ import { Loader } from "@/components/Loader";
 import { MediaListSection } from "@/components/medialists/MediaListSection";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
-import { Ionicons } from "@expo/vector-icons";
+import { Feather, Ionicons } from "@expo/vector-icons";
 import { Api } from "@jellyfin/sdk";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import {
@@ -16,16 +16,19 @@ import {
   getUserLibraryApi,
   getUserViewsApi,
 } from "@jellyfin/sdk/lib/utils/api";
+import AsyncStorage from "@react-native-async-storage/async-storage";
 import NetInfo from "@react-native-community/netinfo";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { useRouter } from "expo-router";
+import { useNavigation, useRouter } from "expo-router";
 import { useAtom } from "jotai";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import {
   ActivityIndicator,
+  Platform,
   RefreshControl,
   SafeAreaView,
   ScrollView,
+  TouchableOpacity,
   View,
 } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
@@ -60,6 +63,7 @@ export default function index() {
 
   const [isConnected, setIsConnected] = useState<boolean | null>(null);
   const [loadingRetry, setLoadingRetry] = useState(false);
+  const navigation = useNavigation();
 
   const checkConnection = useCallback(async () => {
     setLoadingRetry(true);
@@ -68,6 +72,56 @@ export default function index() {
     setLoadingRetry(false);
   }, []);
 
+  useEffect(() => {
+    try {
+      // we check for downloaded files and turn the downloads button green if there are downloads
+      AsyncStorage.getItem("downloaded_files").then((value) => {
+        let downloadButtonColor = "white";
+        if (value) {
+          const files = JSON.parse(value) as BaseItemDto[];
+          if (files.length > 0) {
+            downloadButtonColor = "green";
+          } else {
+            downloadButtonColor = "white";
+          }
+        } else {
+          downloadButtonColor = "white";
+        }
+        console.log("color: ", downloadButtonColor);
+        navigation.setOptions({
+          headerLeft: () => (
+            <TouchableOpacity
+              style={{
+                marginRight: Platform.OS === "android" ? 17 : 0,
+              }}
+              onPress={() => {
+                router.push("/(auth)/downloads");
+              }}
+            >
+              <Feather name="download" color={downloadButtonColor} size={22} />
+            </TouchableOpacity>
+          ),
+        });
+      });
+    } catch (error) {
+      console.log(error);
+      navigation.setOptions({
+        headerLeft: () => (
+          <TouchableOpacity
+            style={{
+              marginRight: Platform.OS === "android" ? 17 : 0,
+            }}
+            onPress={() => {
+              router.push("/(auth)/downloads");
+            }}
+          >
+            <Feather name="download" color={"white"} size={22} />
+          </TouchableOpacity>
+        ),
+      });
+    }
+  }, [navigation.getState()]);
+
   useEffect(() => {
     const unsubscribe = NetInfo.addEventListener((state) => {
       if (state.isConnected == false || state.isInternetReachable === false)