Add show all intensities toggle on packs page

apps/mobile/app/(app)/packs/questions.tsx

@@ -1,4 +1,4 @@
-import { View, Text, StyleSheet, RefreshControl, Platform, Alert, Pressable } from "react-native";
+import { View, Text, StyleSheet, RefreshControl, Platform, Alert, Pressable, Switch } from "react-native";
 import { usePacksStore, useAuthStore, useSubscriptionStore } from "../../../src/store";
 import { Ionicons } from "@expo/vector-icons";
 import { router } from "expo-router";
@@ -258,7 +258,7 @@ function CategorySection({
 }
 
 export default function QuestionPacksScreen() {
-    const { packs, categories, enabledPackIds, togglePack, isLoading, fetchPacks } = usePacksStore();
+    const { packs, categories, enabledPackIds, togglePack, isLoading, fetchPacks, showAllIntensities, setShowAllIntensities } = usePacksStore();
     const { user, partner } = useAuthStore();
     const { subscription } = useSubscriptionStore();
 
@@ -335,6 +335,10 @@ export default function QuestionPacksScreen() {
         setTeaserPack(null);
     }, []);
 
+    const handleToggleComfortZone = useCallback((value: boolean) => {
+        setShowAllIntensities(value);
+    }, [setShowAllIntensities]);
+
     const enabledPackCount = enabledPackIds.length;
     const totalQuestions = packs
         .filter(p => enabledPackIds.includes(p.id))
@@ -442,6 +446,32 @@ export default function QuestionPacksScreen() {
                                 {totalQuestions} {totalQuestions === 1 ? "question" : "questions"} from {enabledPackCount} {enabledPackCount === 1 ? "pack" : "packs"}
                             </Text>
                         </View>
+
+                        <Pressable
+                            style={styles.comfortZoneToggle}
+                            onPress={() => handleToggleComfortZone(!showAllIntensities)}
+                        >
+                            <View style={styles.comfortZoneToggleLeft}>
+                                <Ionicons
+                                    name={showAllIntensities ? "flame" : "flame-outline"}
+                                    size={16}
+                                    color={showAllIntensities ? colors.primary : colors.textSecondary}
+                                />
+                                <Text style={styles.comfortZoneToggleText}>
+                                    Show all intensities
+                                </Text>
+                            </View>
+                            <Switch
+                                value={showAllIntensities}
+                                onValueChange={handleToggleComfortZone}
+                                trackColor={{
+                                    false: "rgba(255, 255, 255, 0.1)",
+                                    true: "rgba(233, 69, 96, 0.4)"
+                                }}
+                                thumbColor={showAllIntensities ? colors.primary : colors.textTertiary}
+                                ios_backgroundColor="rgba(255, 255, 255, 0.1)"
+                            />
+                        </Pressable>
                     </Animated.View>
 
                     {/* Categories */}
@@ -610,6 +640,30 @@ const styles = StyleSheet.create({
         color: colors.textSecondary,
         fontWeight: "500",
     },
+    comfortZoneToggle: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        backgroundColor: "rgba(255, 255, 255, 0.05)",
+        paddingHorizontal: spacing.md,
+        paddingVertical: spacing.sm,
+        borderRadius: radius.md,
+        borderWidth: 1,
+        borderColor: colors.glass.border,
+        marginTop: spacing.md,
+        width: "100%",
+        maxWidth: 280,
+    },
+    comfortZoneToggleLeft: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: spacing.sm,
+    },
+    comfortZoneToggleText: {
+        ...typography.subhead,
+        color: colors.textSecondary,
+        fontWeight: "500",
+    },
 
     // Scroll Content
     scrollContent: {

apps/mobile/src/store/packsStore.ts

@@ -25,10 +25,12 @@ interface PacksState {
     categories: Category[];
     enabledPackIds: string[];
     isLoading: boolean;
+    showAllIntensities: boolean;
     fetchPacks: () => Promise<void>;
     fetchEnabledPacks: () => Promise<void>;
     ensureEnabledPacksLoaded: () => Promise<void>;
     togglePack: (packId: string) => Promise<{ success: boolean; reason?: string }>;
+    setShowAllIntensities: (value: boolean) => void;
     clearPacks: () => void;
 }
 
@@ -37,12 +39,14 @@ export const usePacksStore = create<PacksState>((set, get) => ({
     categories: [],
     enabledPackIds: [],
     isLoading: false,
+    showAllIntensities: false,
 
     fetchPacks: async () => {
         set({ isLoading: true });
 
         // Get user's max intensity preference
         const maxIntensity = getUserMaxIntensity();
+        const showAllIntensities = get().showAllIntensities;
 
 
         // Fetch categories
@@ -62,8 +66,8 @@ export const usePacksStore = create<PacksState>((set, get) => ({
             .eq("is_public", true)
             .order("sort_order");
 
-        // Filter out packs above user's intensity preference
-        if (maxIntensity < 5) {
+        // Filter out packs above user's intensity preference (unless showing all)
+        if (maxIntensity < 5 && !showAllIntensities) {
             query = query.or(`max_intensity.is.null,max_intensity.lte.${maxIntensity}`);
         }
 
@@ -155,6 +159,12 @@ export const usePacksStore = create<PacksState>((set, get) => ({
         return { success: true };
     },
 
+    setShowAllIntensities: (value: boolean) => {
+        set({ showAllIntensities: value });
+        // Refetch packs with new filter setting
+        get().fetchPacks();
+    },
+
     clearPacks: () => {
         set({ enabledPackIds: [] });
     },