changed default hero to carousal

app.json

@@ -2,7 +2,7 @@
   "expo": {
     "name": "Nuvio",
     "slug": "nuvio",
-    "version": "0.6.0-beta.6",
+    "version": "0.6.0-beta.7",
     "orientation": "default",
     "icon": "./assets/ios/AppIcon.appiconset/Icon-App-60x60@3x.png",
     "userInterfaceStyle": "dark",
@@ -16,7 +16,7 @@
     "ios": {
       "supportsTablet": true,
       "icon": "./assets/ios/AppIcon.appiconset/Icon-App-60x60@3x.png",
-      "buildNumber": "6",
+      "buildNumber": "7",
       "infoPlist": {
         "NSAppTransportSecurity": {
           "NSAllowsArbitraryLoads": true
@@ -46,7 +46,7 @@
         "WAKE_LOCK"
       ],
       "package": "com.nuvio.app",
-      "versionCode": 6,
+      "versionCode": 7,
       "architectures": [
         "arm64-v8a",
         "armeabi-v7a",

src/components/home/HeroCarousel.tsx

@@ -19,7 +19,7 @@ interface HeroCarouselProps {
 const { width } = Dimensions.get('window');
 
 const CARD_WIDTH = Math.min(width * 0.8, 480);
-const CARD_HEIGHT = Math.round(CARD_WIDTH * 9 / 16) + 270; // further increased space for text/actions
+const CARD_HEIGHT = Math.round(CARD_WIDTH * 9 / 16) + 290; // slight increase for text/actions
 
 const HeroCarousel: React.FC<HeroCarouselProps> = ({ items, loading = false }) => {
   const navigation = useNavigation<NavigationProp<RootStackParamList>>();

src/hooks/useSettings.ts

@@ -81,7 +81,7 @@ export const DEFAULT_SETTINGS: AppSettings = {
   preferredPlayer: 'internal',
   showHeroSection: true,
   featuredContentSource: 'catalogs',
-  heroStyle: 'legacy',
+  heroStyle: 'carousel',
   selectedHeroCatalogs: [], // Empty array means all catalogs are selected
   logoSourcePreference: 'metahub', // Default to Metahub as first source
   tmdbLanguagePreference: 'en', // Default to English

src/screens/HomeScreenSettings.tsx

@@ -178,6 +178,44 @@ const HomeScreenSettings: React.FC = () => {
     </TouchableOpacity>
   );
 
+  // Compact segmented control for nicer toggles
+  const SegmentedControl = ({
+    options,
+    value,
+    onChange
+  }: {
+    options: { label: string; value: string }[];
+    value: string;
+    onChange: (val: string) => void;
+  }) => (
+    <View style={[styles.segmentContainer, { backgroundColor: isDarkMode ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.06)' }]}>
+      {options.map((opt, idx) => {
+        const selected = value === opt.value;
+        return (
+          <TouchableOpacity
+            key={opt.value}
+            onPress={() => onChange(opt.value)}
+            activeOpacity={0.85}
+            style={[
+              styles.segment,
+              idx === 0 && styles.segmentFirst,
+              idx === options.length - 1 && styles.segmentLast,
+              selected && { backgroundColor: colors.primary },
+            ]}
+          >
+            <Text style={{
+              color: selected ? colors.white : (isDarkMode ? colors.highEmphasis : colors.textDark),
+              fontWeight: '700',
+              fontSize: 13,
+            }}>
+              {opt.label}
+            </Text>
+          </TouchableOpacity>
+        );
+      })}
+    </View>
+  );
+
   // Format selected catalogs text
   const getSelectedCatalogsText = useCallback(() => {
     if (!settings.selectedHeroCatalogs || settings.selectedHeroCatalogs.length === 0) {
@@ -274,61 +312,33 @@ const HomeScreenSettings: React.FC = () => {
 
         {settings.showHeroSection && (
           <>
-            <View style={styles.radioCardContainer}>
+            <View style={styles.segmentCard}>
-              <RadioOption 
+              <Text style={[styles.segmentTitle, { color: isDarkMode ? colors.mediumEmphasis : colors.textMutedDark }]}>Hero Layout</Text>
-                selected={settings.heroStyle === 'legacy'}
+              <SegmentedControl
-                onPress={() => handleUpdateSetting('heroStyle', 'legacy')}
+                options={[{ label: 'Legacy', value: 'legacy' }, { label: 'Carousel', value: 'carousel' }]}
-                label="Legacy Hero (banner)"
+                value={settings.heroStyle}
+                onChange={(val) => handleUpdateSetting('heroStyle', val as any)}
               />
-              <View style={styles.radioDescription}>
+              <Text style={[styles.segmentHint, { color: isDarkMode ? colors.mediumEmphasis : colors.textMutedDark }]}>Full-width banner or swipeable cards</Text>
-                <Text style={[styles.radioDescriptionText, { color: isDarkMode ? colors.mediumEmphasis : colors.textMutedDark }]}>
-                  Original full-width banner with overlayed info and actions.
-                </Text>
-              </View>
             </View>
 
-            <View style={styles.radioCardContainer}>
+            <View style={styles.segmentCard}>
-              <RadioOption 
+              <Text style={[styles.segmentTitle, { color: isDarkMode ? colors.mediumEmphasis : colors.textMutedDark }]}>Featured Source</Text>
-                selected={settings.heroStyle === 'carousel'}
+              <SegmentedControl
-                onPress={() => handleUpdateSetting('heroStyle', 'carousel')}
+                options={[{ label: 'TMDB', value: 'tmdb' }, { label: 'Catalogs', value: 'catalogs' }]}
-                label="New Card Carousel"
+                value={settings.featuredContentSource}
+                onChange={(val) => handleUpdateSetting('featuredContentSource', val as any)}
               />
-              <View style={styles.radioDescription}>
+              {settings.featuredContentSource === 'catalogs' && (
-                <Text style={[styles.radioDescriptionText, { color: isDarkMode ? colors.mediumEmphasis : colors.textMutedDark }]}>
+                <TouchableOpacity
-                  A beautiful, swipeable carousel of featured cards with smooth animations.
+                  onPress={() => navigation.navigate('HeroCatalogs')}
-                </Text>
+                  style={[styles.manageLink, { backgroundColor: isDarkMode ? colors.elevation1 : 'rgba(0,0,0,0.04)' }]}
-              </View>
+                  activeOpacity={0.8}
-            </View>
+                >
-            <View style={styles.radioCardContainer}>
+                  <Text style={{ color: isDarkMode ? colors.highEmphasis : colors.textDark, fontWeight: '600' }}>Manage selected catalogs</Text>
-              <RadioOption 
+                  <MaterialIcons name="chevron-right" size={20} color={isDarkMode ? colors.mediumEmphasis : colors.textMutedDark} />
-                selected={settings.featuredContentSource === 'tmdb'}
+                </TouchableOpacity>
-                onPress={() => {
+              )}
-                  console.log('Selected TMDB source');
-                  handleUpdateSetting('featuredContentSource', 'tmdb');
-                }}
-                label="TMDB Trending Movies"
-              />
-              <View style={styles.radioDescription}>
-                <Text style={[styles.radioDescriptionText, { color: isDarkMode ? colors.mediumEmphasis : colors.textMutedDark }]}>
-                  Featured content will be sourced from TMDB's trending movies API. This provides a variety of popular and recent content, even if not available in your catalogs.
-                </Text>
-              </View>
-            </View>
-
-            <View style={styles.radioCardContainer}>
-              <RadioOption 
-                selected={settings.featuredContentSource === 'catalogs'}
-                onPress={() => {
-                  console.log('Selected Catalogs source');
-                  handleUpdateSetting('featuredContentSource', 'catalogs');
-                }}
-                label="Installed Catalogs"
-              />
-              <View style={styles.radioDescription}>
-                <Text style={[styles.radioDescriptionText, { color: isDarkMode ? colors.mediumEmphasis : colors.textMutedDark }]}>
-                  Featured content will be sourced from your enabled catalogs. This ensures that featured content is available to stream from your installed add-ons.
-                </Text>
-              </View>
             </View>
           </>
         )}
@@ -481,6 +491,51 @@ const styles = StyleSheet.create({
     fontSize: 14,
     lineHeight: 20,
   },
+  segmentContainer: {
+    flexDirection: 'row',
+    borderRadius: 10,
+    padding: 4,
+    gap: 6,
+    marginTop: 8,
+  },
+  segment: {
+    flex: 1,
+    borderRadius: 8,
+    paddingVertical: 10,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  segmentFirst: {
+  },
+  segmentLast: {
+  },
+  segmentCard: {
+    marginHorizontal: 16,
+    marginTop: 12,
+    padding: 16,
+    borderRadius: 12,
+    backgroundColor: 'rgba(255,255,255,0.05)'
+  },
+  segmentTitle: {
+    fontSize: 12,
+    fontWeight: '700',
+    letterSpacing: 0.6,
+    opacity: 0.9,
+  },
+  segmentHint: {
+    marginTop: 8,
+    fontSize: 12,
+    opacity: 0.7,
+  },
+  manageLink: {
+    marginTop: 10,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    borderRadius: 10,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
   savedIndicator: {
     position: 'absolute',
     top: Platform.OS === 'android' ? (StatusBar.currentHeight || 0) + 60 : 90,