From 7514bc2c2c4bf32b23d4fa27879bccd6ffc6cd24 Mon Sep 17 00:00:00 2001
From: Fredrik Burmester <fredrik.burmester@gmail.com>
Date: Fri, 9 Jan 2026 15:44:10 +0100
Subject: [PATCH] fix: redirect when intro modal first time

---
 app/(auth)/(tabs)/_layout.tsx  | 22 +---------------------
 app/(auth)/(tabs)/index.tsx    |  5 -----
 components/IntroSheet.tsx      |  5 ++---
 components/home/Home.tsx       | 17 +++++++++++++++++
 providers/JellyfinProvider.tsx |  2 --
 5 files changed, 20 insertions(+), 31 deletions(-)
 delete mode 100644 app/(auth)/(tabs)/index.tsx

diff --git a/app/(auth)/(tabs)/_layout.tsx b/app/(auth)/(tabs)/_layout.tsx
index f48a973b..8e3f9350 100644
--- a/app/(auth)/(tabs)/_layout.tsx
+++ b/app/(auth)/(tabs)/_layout.tsx
@@ -7,18 +7,15 @@ import type {
   ParamListBase,
   TabNavigationState,
 } from "@react-navigation/native";
-import { useFocusEffect, withLayoutContext } from "expo-router";
-import { useCallback } from "react";
+import { withLayoutContext } from "expo-router";
 import { useTranslation } from "react-i18next";
 import { Platform, View } from "react-native";
 import { SystemBars } from "react-native-edge-to-edge";
 import { MiniPlayerBar } from "@/components/music/MiniPlayerBar";
 import { MusicPlaybackEngine } from "@/components/music/MusicPlaybackEngine";
 import { Colors } from "@/constants/Colors";
-import { useIntroSheet } from "@/providers/IntroSheetProvider";
 import { useSettings } from "@/utils/atoms/settings";
 import { eventBus } from "@/utils/eventBus";
-import { storage } from "@/utils/mmkv";
 
 const { Navigator } = createNativeBottomTabNavigator();
 
@@ -32,22 +29,6 @@ export const NativeTabs = withLayoutContext<
 export default function TabLayout() {
   const { settings } = useSettings();
   const { t } = useTranslation();
-  const { showIntro } = useIntroSheet();
-
-  useFocusEffect(
-    useCallback(() => {
-      const hasShownIntro = storage.getBoolean("hasShownIntro");
-      if (!hasShownIntro) {
-        const timer = setTimeout(() => {
-          showIntro();
-        }, 1000);
-
-        return () => {
-          clearTimeout(timer);
-        };
-      }
-    }, [showIntro]),
-  );
 
   return (
     <View style={{ flex: 1 }}>
@@ -61,7 +42,6 @@ export default function TabLayout() {
         activeIndicatorColor={"#392c3b"}
         scrollEdgeAppearance='default'
       >
-        <NativeTabs.Screen redirect name='index' />
         <NativeTabs.Screen
           listeners={(_e) => ({
             tabPress: (_e) => {
diff --git a/app/(auth)/(tabs)/index.tsx b/app/(auth)/(tabs)/index.tsx
deleted file mode 100644
index a89bbdc9..00000000
--- a/app/(auth)/(tabs)/index.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-const Index = () => {
-  return null;
-};
-
-export default Index;
diff --git a/components/IntroSheet.tsx b/components/IntroSheet.tsx
index 6cd77a7b..4e9b7dc0 100644
--- a/components/IntroSheet.tsx
+++ b/components/IntroSheet.tsx
@@ -6,7 +6,7 @@ import {
   BottomSheetScrollView,
 } from "@gorhom/bottom-sheet";
 import { Image } from "expo-image";
-import { useRouter } from "expo-router";
+import { router } from "expo-router";
 import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { Linking, Platform, TouchableOpacity, View } from "react-native";
@@ -22,7 +22,6 @@ export interface IntroSheetRef {
 
 export const IntroSheet = forwardRef<IntroSheetRef>((_, ref) => {
   const bottomSheetRef = useRef<BottomSheetModal>(null);
-  const router = useRouter();
   const { t } = useTranslation();
   const insets = useSafeAreaInsets();
 
@@ -54,7 +53,7 @@ export const IntroSheet = forwardRef<IntroSheetRef>((_, ref) => {
   const handleGoToSettings = useCallback(() => {
     bottomSheetRef.current?.dismiss();
     router.push("/settings");
-  }, [router]);
+  }, []);
 
   return (
     <BottomSheetModal
diff --git a/components/home/Home.tsx b/components/home/Home.tsx
index ef7a1e9a..4da125c2 100644
--- a/components/home/Home.tsx
+++ b/components/home/Home.tsx
@@ -36,9 +36,11 @@ import { Colors } from "@/constants/Colors";
 import { useNetworkStatus } from "@/hooks/useNetworkStatus";
 import { useInvalidatePlaybackProgressCache } from "@/hooks/useRevalidatePlaybackProgressCache";
 import { useDownload } from "@/providers/DownloadProvider";
+import { useIntroSheet } from "@/providers/IntroSheetProvider";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
 import { eventBus } from "@/utils/eventBus";
+import { storage } from "@/utils/mmkv";
 
 type InfiniteScrollingCollectionListSection = {
   type: "InfiniteScrollingCollectionList";
@@ -79,6 +81,21 @@ export const Home = () => {
   } = useNetworkStatus();
   const invalidateCache = useInvalidatePlaybackProgressCache();
   const [loadedSections, setLoadedSections] = useState<Set<string>>(new Set());
+  const { showIntro } = useIntroSheet();
+
+  // Show intro modal on first launch
+  useEffect(() => {
+    const hasShownIntro = storage.getBoolean("hasShownIntro");
+    if (!hasShownIntro) {
+      const timer = setTimeout(() => {
+        showIntro();
+      }, 1000);
+
+      return () => {
+        clearTimeout(timer);
+      };
+    }
+  }, [showIntro]);
 
   useEffect(() => {
     if (isConnected && !prevIsConnected.current) {
diff --git a/providers/JellyfinProvider.tsx b/providers/JellyfinProvider.tsx
index b98702f4..e12829af 100644
--- a/providers/JellyfinProvider.tsx
+++ b/providers/JellyfinProvider.tsx
@@ -574,10 +574,8 @@ function useProtectedRoute(user: UserDto | null, loaded = false) {
     const inAuthGroup = segments.length > 1 && segments[0] === "(auth)";
 
     if (!user?.Id && inAuthGroup) {
-      console.log("Redirected to login");
       router.replace("/login");
     } else if (user?.Id && !inAuthGroup) {
-      console.log("Redirected to home");
       router.replace("/(auth)/(tabs)/(home)/");
     }
   }, [user, segments, loaded]);