Release v2.0.17

apps/expo/app.config.ts

@@ -37,7 +37,7 @@ export default (): ExpoConfig =>
     {
       name: getAppName(),
       slug: 'packrat',
-      version: '2.0.16',
+      version: '2.0.17',
       scheme: 'packrat',
       web: {
         bundler: 'metro',

apps/expo/app/(app)/(tabs)/profile/index.tsx

@@ -26,7 +26,7 @@ import { cn } from 'expo-app/lib/cn';
 import { hasUnsyncedChanges } from 'expo-app/lib/hasUnsyncedChanges';
 import { useTranslation } from 'expo-app/lib/hooks/useTranslation';
 import { buildPackTemplateItemImageUrl } from 'expo-app/lib/utils/buildPackTemplateItemImageUrl';
-import * as FileSystem from 'expo-file-system';
+import * as FileSystem from 'expo-file-system/legacy';
 import { router, Stack } from 'expo-router';
 import * as Updates from 'expo-updates';
 import { useRef, useState } from 'react';

apps/expo/app/(app)/(tabs)/profile/notifications.tsx

@@ -1,9 +1,10 @@
 import { Button, Form, FormItem, FormSection, Text, Toggle } from '@packrat/ui/nativewindui';
+import { Icon } from '@roninoss/icons';
 import { cn } from 'expo-app/lib/cn';
 import { useTranslation } from 'expo-app/lib/hooks/useTranslation';
 import { router, Stack } from 'expo-router';
 import * as React from 'react';
-import { Platform, ScrollView, View } from 'react-native';
+import { Platform, Pressable, ScrollView, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 export default function NotificationsScreen() {
@@ -12,9 +13,10 @@ export default function NotificationsScreen() {
   const [notifications, setNotifications] = React.useState({
     push: true,
     email: false,
+    weatherAlerts: true,
   });
 
-  function onValueChange(type: 'push' | 'email') {
+  function onValueChange(type: 'push' | 'email' | 'weatherAlerts') {
     return (value: boolean) => {
       setNotifications((prev) => ({ ...prev, [type]: value }));
     };
@@ -68,6 +70,44 @@ export default function NotificationsScreen() {
               <Toggle value={notifications.email} onValueChange={onValueChange('email')} />
             </FormItem>
           </FormSection>
+
+          <FormSection
+            materialIconProps={{ name: 'weather-cloudy-alert' }}
+            title={t('profile.weatherAlerts')}
+          >
+            <FormItem className="ios:px-4 ios:pb-2 ios:pt-2 flex-row items-center justify-between px-2 pb-4">
+              <View className="flex-1 flex-row items-center gap-2">
+                <View className="h-8 w-8 items-center justify-center rounded-lg bg-amber-500">
+                  <Icon name="weather-rainy" size={18} color="white" />
+                </View>
+                <View className="flex-1">
+                  <Text className="font-medium">{t('profile.weatherAlerts')}</Text>
+                  <Text variant="caption1" className="text-muted-foreground">
+                    {t('profile.weatherAlertsNotif')}
+                  </Text>
+                </View>
+              </View>
+              <Toggle
+                value={notifications.weatherAlerts}
+                onValueChange={onValueChange('weatherAlerts')}
+              />
+            </FormItem>
+            <FormItem className="ios:px-4 ios:pb-2 ios:pt-2 px-2 pb-4">
+              <Pressable
+                className="flex-row items-center justify-between"
+                onPress={() => router.push('/weather-alert-preferences')}
+              >
+                <View className="flex-1 flex-row items-center gap-2">
+                  <View className="h-8 w-8 items-center justify-center rounded-lg bg-blue-500">
+                    <Icon name="tune-vertical-variant" size={18} color="white" />
+                  </View>
+                  <Text className="font-medium">{t('profile.configureAlertTypes')}</Text>
+                </View>
+                <Icon name="chevron-right" size={17} color="#8E8E93" />
+              </Pressable>
+            </FormItem>
+          </FormSection>
+
           {Platform.OS !== 'ios' && (
             <View className="items-end">
               <Button

apps/expo/app/(app)/_layout.tsx

@@ -128,6 +128,14 @@ export default function AppLayout() {
         />
         <Stack.Screen
           name="weather-alerts"
+          options={{
+            headerShown: false,
+            presentation: 'card',
+            animation: 'slide_from_bottom',
+          }}
+        />
+        <Stack.Screen
+          name="weather-alert-preferences"
           options={{
             headerShown: false,
             presentation: 'modal',

apps/expo/app/(app)/current-pack/[id].tsx

@@ -16,7 +16,7 @@ import type { PackItem } from 'expo-app/types';
 import { useLocalSearchParams } from 'expo-router';
 import type React from 'react';
 import { ScrollView, View } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
+import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
 
 function WeightCard({
   title,
@@ -132,16 +132,17 @@ export default function CurrentPackScreen() {
 
   const pack = usePackDetailsFromStore(params.id as string);
   const uniqueCategories = computeCategorySummaries(pack);
+  const insets = useSafeAreaInsets();
 
   return (
-    <SafeAreaView className="flex-1">
+    <SafeAreaView className="flex-1" style={{ paddingTop: insets.top }}>
       <LargeTitleHeader title={t('packs.currentPack')} />
       <ScrollView
         className="flex-1"
         contentContainerStyle={{ paddingBottom: 32 }}
         removeClippedSubviews={false}
       >
-        <View className="flex-row items-center p-4">
+        <View className="flex-row items-center p-4" style={{ paddingTop: insets.top }}>
           <Avatar className="mr-4 h-16 w-16" alt="">
             <AvatarImage source={{ uri: pack.image }} />
             <AvatarFallback>

apps/expo/app/(app)/pack-categories/[id].tsx

@@ -80,7 +80,7 @@ export default function PackCategoriesScreen() {
         </ScrollView>
       ) : (
         <View className="flex-1 items-center justify-center">
-          <Text>{t('packs.noCategorizedItems')}</Text>
+          <Text className="text-center">{t('packs.noCategorizedItems')}</Text>
         </View>
       )}
     </>

apps/expo/app/(app)/weather-alert-preferences.tsx

@@ -0,0 +1,161 @@
+import {
+  Form,
+  FormItem,
+  FormSection,
+  LargeTitleHeader,
+  Text,
+  Toggle,
+} from '@packrat/ui/nativewindui';
+import { Icon } from '@roninoss/icons';
+import { useColorScheme } from 'expo-app/lib/hooks/useColorScheme';
+import { useTranslation } from 'expo-app/lib/hooks/useTranslation';
+import * as React from 'react';
+import { ScrollView, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+type AlertPreferences = {
+  weatherNotifications: boolean;
+  locationMonitoring: boolean;
+  severeStorms: boolean;
+  tornadoWarnings: boolean;
+  floodAlerts: boolean;
+  fireDanger: boolean;
+  winterWeather: boolean;
+  extremeTemperature: boolean;
+  highWinds: boolean;
+  fogAlerts: boolean;
+};
+
+type AlertTypeConfig = {
+  key: keyof Omit<AlertPreferences, 'weatherNotifications' | 'locationMonitoring'>;
+  iconName: string;
+  iconColor: string;
+};
+
+const ALERT_TYPE_CONFIGS: AlertTypeConfig[] = [
+  { key: 'severeStorms', iconName: 'weather-lightning-rainy', iconColor: '#FFCE56' },
+  { key: 'tornadoWarnings', iconName: 'weather-tornado', iconColor: '#FF6384' },
+  { key: 'floodAlerts', iconName: 'waves', iconColor: '#36A2EB' },
+  { key: 'fireDanger', iconName: 'fire', iconColor: '#FF5722' },
+  { key: 'winterWeather', iconName: 'weather-snowy-heavy', iconColor: '#90CAF9' },
+  { key: 'extremeTemperature', iconName: 'thermometer-alert', iconColor: '#EF5350' },
+  { key: 'highWinds', iconName: 'weather-windy', iconColor: '#4BC0C0' },
+  { key: 'fogAlerts', iconName: 'weather-fog', iconColor: '#B0BEC5' },
+];
+
+export default function WeatherAlertPreferencesScreen() {
+  const insets = useSafeAreaInsets();
+  const { colors } = useColorScheme();
+  const { t } = useTranslation();
+
+  const [preferences, setPreferences] = React.useState<AlertPreferences>({
+    weatherNotifications: true,
+    locationMonitoring: true,
+    severeStorms: true,
+    tornadoWarnings: true,
+    floodAlerts: true,
+    fireDanger: true,
+    winterWeather: true,
+    extremeTemperature: true,
+    highWinds: false,
+    fogAlerts: false,
+  });
+
+  function onToggle(key: keyof AlertPreferences) {
+    return (value: boolean) => {
+      setPreferences((prev) => ({ ...prev, [key]: value }));
+    };
+  }
+
+  const alertTypesDisabled = !preferences.weatherNotifications;
+
+  return (
+    <>
+      <LargeTitleHeader title={t('weather.alertPreferencesTitle')} />
+      <ScrollView
+        contentInsetAdjustmentBehavior="automatic"
+        contentContainerStyle={{ paddingBottom: insets.bottom + 16 }}
+      >
+        <Form className="gap-5 px-4 pt-4">
+          <FormSection
+            materialIconProps={{ name: 'bell-outline' }}
+            footnote={t('weather.alertPreferencesDesc')}
+          >
+            <FormItem className="ios:px-4 ios:pb-2 ios:pt-2 flex-row items-center justify-between px-2 pb-4">
+              <View className="flex-1 flex-row items-center gap-3">
+                <View className="h-8 w-8 items-center justify-center rounded-lg bg-amber-500">
+                  <Icon name="bell-ring-outline" size={18} color="white" />
+                </View>
+                <View className="flex-1">
+                  <Text className="font-medium">{t('weather.weatherNotifications')}</Text>
+                  <Text variant="caption1" className="text-muted-foreground">
+                    {t('weather.weatherNotificationsDesc')}
+                  </Text>
+                </View>
+              </View>
+              <Toggle
+                value={preferences.weatherNotifications}
+                onValueChange={onToggle('weatherNotifications')}
+              />
+            </FormItem>
+            <FormItem className="ios:px-4 ios:pb-2 ios:pt-2 flex-row items-center justify-between px-2 pb-4">
+              <View className="flex-1 flex-row items-center gap-3">
+                <View className="h-8 w-8 items-center justify-center rounded-lg bg-blue-500">
+                  <Icon name="map-marker-radius-outline" size={18} color="white" />
+                </View>
+                <View className="flex-1">
+                  <Text className="font-medium">{t('weather.locationMonitoring')}</Text>
+                  <Text variant="caption1" className="text-muted-foreground">
+                    {t('weather.locationMonitoringDesc')}
+                  </Text>
+                </View>
+              </View>
+              <Toggle
+                value={preferences.locationMonitoring}
+                onValueChange={onToggle('locationMonitoring')}
+              />
+            </FormItem>
+          </FormSection>
+
+          <FormSection
+            ios={{ title: t('weather.alertTypes') }}
+            materialIconProps={{ name: 'alert-outline' }}
+            footnote={alertTypesDisabled ? t('weather.weatherNotificationsDesc') : undefined}
+          >
+            {ALERT_TYPE_CONFIGS.map(({ key, iconName, iconColor }) => (
+              <View
+                key={key}
+                style={{ opacity: alertTypesDisabled ? 0.5 : 1 }}
+                pointerEvents={alertTypesDisabled ? 'none' : 'auto'}
+              >
+                <FormItem className="ios:px-4 ios:pb-2 ios:pt-2 flex-row items-center justify-between px-2 pb-4">
+                  <View className="flex-1 flex-row items-center gap-3">
+                    <View
+                      className="h-8 w-8 items-center justify-center rounded-lg"
+                      style={{ backgroundColor: alertTypesDisabled ? colors.grey3 : iconColor }}
+                    >
+                      <Icon name={iconName as never} size={18} color="white" />
+                    </View>
+                    <View className="flex-1">
+                      <Text
+                        className={
+                          alertTypesDisabled ? 'font-medium text-muted-foreground' : 'font-medium'
+                        }
+                      >
+                        {t(`weather.${key}` as never)}
+                      </Text>
+                      <Text variant="caption1" className="text-muted-foreground">
+                        {t(`weather.${key}Desc` as never)}
+                      </Text>
+                    </View>
+                  </View>
+                  <Toggle value={preferences[key]} onValueChange={onToggle(key)} />
+                </FormItem>
+              </View>
+            ))}
+          </FormSection>
+        </Form>
+      </ScrollView>
+    </>
+  );
+}