UI changes

src/components/ProfileIcon.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { View } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+
+interface ProfileIconProps {
+  size?: number;
+  color?: string;
+}
+
+const ProfileIcon: React.FC<ProfileIconProps> = ({ size = 24, color = '#FFFFFF' }) => {
+  return (
+    <View style={{ width: size, height: size }}>
+      <Svg
+        width={size}
+        height={size}
+        viewBox="0 0 32 32"
+      >
+        <Path
+          d="M12 14c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7zm0-12C9.243 2 7 4.243 7 7s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5zM19.942 32H4.058A4.062 4.062 0 0 1 0 27.942c0-6.616 5.383-12 12-12s12 5.384 12 12A4.062 4.062 0 0 1 19.942 32zM12 17.942c-5.514 0-10 4.486-10 10A2.06 2.06 0 0 0 4.058 30h15.884A2.06 2.06 0 0 0 22 27.942c0-5.514-4.486-10-10-10z"
+          fill={color}
+        />
+        <Path
+          d="M20 16.942c-1.413 0-2.759.276-4 .762 4.095 1.601 7 5.576 7 10.238A3.058 3.058 0 0 1 19.942 31h8A3.058 3.058 0 0 0 31 27.942c0-6.075-4.925-11-11-11zM20 1a5.97 5.97 0 0 0-4 1.537 5.978 5.978 0 0 1 0 8.926A5.97 5.97 0 0 0 20 13a6 6 0 1 0 0-12z"
+          fill={color}
+        />
+        <Path
+          d="M27.942 32h-8a1 1 0 1 1 0-2A2.06 2.06 0 0 0 22 27.942c0-4.142-2.498-7.795-6.364-9.307a1 1 0 0 1 0-1.863c1.408-.55 2.877-.83 4.364-.83 6.617 0 12 5.384 12 12A4.062 4.062 0 0 1 27.942 32zm-4.504-2h4.504A2.06 2.06 0 0 0 30 27.942c0-5.514-4.486-10-10-10-.419 0-.836.027-1.251.08C22.004 20.22 24 23.886 24 27.942c0 .75-.205 1.454-.562 2.058zM20 14a6.984 6.984 0 0 1-4.667-1.792.999.999 0 0 1-.001-1.489C16.392 9.77 17 8.413 17 7s-.607-2.768-1.668-3.72a1.002 1.002 0 0 1 .001-1.488A6.984 6.984 0 0 1 20 0c3.86 0 7 3.14 7 7s-3.14 7-7 7zm-2.503-2.677c.758.44 1.62.677 2.503.677 2.757 0 5-2.243 5-5s-2.243-5-5-5c-.884 0-1.745.236-2.503.677C18.463 3.903 19 5.426 19 7s-.537 3.097-1.503 4.323z"
+          fill={color}
+        />
+      </Svg>
+    </View>
+  );
+};
+
+export default ProfileIcon;

src/components/icons/TraktIcon.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { View } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+
+interface TraktIconProps {
+  size?: number;
+  color?: string;
+}
+
+const TraktIcon: React.FC<TraktIconProps> = ({ size = 24, color = '#ed2224' }) => {
+  return (
+    <View style={{ width: size, height: size }}>
+      <Svg
+        width={size}
+        height={size}
+        viewBox="0 0 144.8 144.8"
+      >
+        <Path
+          d="m29.5 111.8c10.6 11.6 25.9 18.8 42.9 18.8 8.7 0 16.9-1.9 24.3-5.3l-40.4-40.3z"
+          fill={color}
+        />
+        <Path
+          d="m56.1 60.6-30.6 30.5-4.1-4.1 32.2-32.2 37.6-37.6c-5.9-2-12.2-3.1-18.8-3.1-32.2 0-58.3 26.1-58.3 58.3 0 13.1 4.3 25.2 11.7 35l30.5-30.5 2.1 2 43.7 43.7c.9-.5 1.7-1 2.5-1.6l-48.3-48.3-29.3 29.3-4.1-4.1 33.4-33.4 2.1 2 51 50.9c.8-.6 1.5-1.3 2.2-1.9l-55-55z"
+          fill={color}
+        />
+        <Path
+          d="m115.7 111.4c9.3-10.3 15-24 15-39 0-23.4-13.8-43.5-33.6-52.8l-36.7 36.6zm-41.2-44.6-4.1-4.1 28.9-28.9 4.1 4.1zm27.4-39.7-33.3 33.3-4.1-4.1 33.3-33.3z"
+          fill={color}
+        />
+        <Path
+          d="m72.4 144.8c-39.9 0-72.4-32.5-72.4-72.4s32.5-72.4 72.4-72.4 72.4 32.5 72.4 72.4-32.5 72.4-72.4 72.4zm0-137.5c-35.9 0-65.1 29.2-65.1 65.1s29.2 65.1 65.1 65.1 65.1-29.2 65.1-65.1-29.2-65.1-65.1-65.1z"
+          fill={color}
+        />
+      </Svg>
+    </View>
+  );
+};
+
+export default TraktIcon;

src/components/metadata/SeriesContent.tsx

@@ -62,24 +62,22 @@ export const SeriesContent: React.FC<SeriesContentProps> = ({
   const episodeScrollViewRef = useRef<FlashListRef<Episode>>(null);
   const horizontalEpisodeScrollViewRef = useRef<FlatList<Episode>>(null);
 
-  // Load saved view mode preference when component mounts or show changes
+  // Load saved global view mode preference when component mounts
   useEffect(() => {
     const loadViewModePreference = async () => {
-      if (metadata?.id) {
+      try {
-        try {
+        const savedMode = await AsyncStorage.getItem('global_season_view_mode');
-          const savedMode = await AsyncStorage.getItem(`season_view_mode_${metadata.id}`);
+        if (savedMode === 'text' || savedMode === 'posters') {
-          if (savedMode === 'text' || savedMode === 'posters') {
+          setSeasonViewMode(savedMode);
-            setSeasonViewMode(savedMode);
+          if (__DEV__) console.log('[SeriesContent] Loaded global view mode:', savedMode);
-            if (__DEV__) console.log('[SeriesContent] Loaded saved view mode:', savedMode, 'for show:', metadata.id);
-          }
-        } catch (error) {
-          if (__DEV__) console.log('[SeriesContent] Error loading view mode preference:', error);
         }
+      } catch (error) {
+        if (__DEV__) console.log('[SeriesContent] Error loading global view mode preference:', error);
       }
     };
     
     loadViewModePreference();
-  }, [metadata?.id]);
+  }, []);
 
   // Initialize view mode visibility based on current view mode
   useEffect(() => {
@@ -97,11 +95,9 @@ export const SeriesContent: React.FC<SeriesContentProps> = ({
   // Update view mode without animations
   const updateViewMode = (newMode: 'posters' | 'text') => {
     setSeasonViewMode(newMode);
-    if (metadata?.id) {
+    AsyncStorage.setItem('global_season_view_mode', newMode).catch(error => {
-      AsyncStorage.setItem(`season_view_mode_${metadata.id}`, newMode).catch(error => {
+      if (__DEV__) console.log('[SeriesContent] Error saving global view mode preference:', error);
-        if (__DEV__) console.log('[SeriesContent] Error saving view mode preference:', error);
+    });
-      });
-    }
   };
   
   // Add refs for the scroll views

src/screens/SettingsScreen.tsx

@@ -33,6 +33,7 @@ import * as Sentry from '@sentry/react-native';
 import CustomAlert from '../components/CustomAlert';
 import ProfileIcon from '../components/icons/ProfileIcon';
 import PluginIcon from '../components/icons/PluginIcon';
+import TraktIcon from '../components/icons/TraktIcon';
 
 const { width, height } = Dimensions.get('window');
 const isTablet = width >= 768;
@@ -462,7 +463,7 @@ const SettingsScreen: React.FC = () => {
             <SettingItem
               title="Trakt"
               description={isAuthenticated ? `@${userProfile?.username || 'User'}` : "Sign in to sync"}
-              icon="person"
+              customIcon={<TraktIcon size={isTablet ? 24 : 20} color={currentTheme.colors.primary} />}
               renderControl={ChevronRight}
               onPress={() => navigation.navigate('TraktSettings')}
               isLast={true}