Merge branch 'development' into fix-score-container

packages/app/components/Fab/FabWeb.tsx

@@ -46,12 +46,8 @@ const loadStyles = (theme) => {
       alignSelf: 'stretch',
       zIndex: 2,
     },
-    fabIcon: {
-      color: currentTheme.colors.tertiaryBlue,
-    },
     fabText: {
       fontSize: 17,
-      color: currentTheme.colors.tertiaryBlue,
       fontWeight: 'bold',
     },
   };

packages/app/components/LayoutCard/LayoutCard.tsx

@@ -21,7 +21,6 @@ export const LayoutCard: FC<LayoutCardProps> = ({
       style={[
         {
           backgroundColor: currentTheme.colors.card,
-          boxShadow: '0px 4px 8px rgba(0,0,0,0.1)',
           borderWidth: 1,
           borderColor: isDark ? '#424242' : '#e5e7eb',
           padding: 24,

packages/app/components/navigation/Navbar/Navbar.tsx

@@ -122,7 +122,8 @@ const loadStyles = (currentTheme, isScrolled, screenWidth) => {
     },
     container: {
       width: '100vw',
-      maxWidth: '100%', // Ensure container does not exceed the viewport width
+      maxWidth: 1440,
+      margin: 'auto',
       flex: 1, // Ensure container can grow to fit content
       backgroundColor,
       borderRadius: NavbarStyles.floatingRadius,

packages/app/hooks/common/usePreviewResourceState.ts

@@ -10,6 +10,7 @@ interface PreviewResourceState {
 export interface PreviewResourceStateWithData
   extends PreviewResourceState,
     Partial<PaginationReturn> {
+  resourceName: string;
   isPreviewLoading: boolean;
   previewData: any;
   isAllQueryLoading: boolean;

packages/app/hooks/offline/useOfflineQueue.ts

@@ -8,15 +8,7 @@ type Request = {
 };
 
 export const useOfflineQueue = () => {
-  const {
-    isConnected,
-    requests,
-    setRequests,
-  }: {
-    isConnected: boolean;
-    requests: Request[];
-    setRequests: React.Dispatch<React.SetStateAction<Request[]>>;
-  } = useOfflineStore();
+  const { connectionStatus, requests, setRequests } = useOfflineStore();
 
   const runQueryItem = useRunQueryItem();
   const processQueue = () => {
@@ -54,7 +46,7 @@ export const useOfflineQueue = () => {
   };
 
   return {
-    isConnected,
+    isConnected: connectionStatus === 'connected',
     addOfflineRequest: handleAddOfflineRequest,
     processQueue,
   };

packages/app/hooks/offline/useRunQueueItem.ts

@@ -1,12 +1,17 @@
 import { queryTrpc } from 'app/trpc';
 
 export const useRunQueryItem = () => {
+  const { mutateAsync: importItemsGlobal } =
+    queryTrpc.importItemsGlobal.useMutation();
   const { mutateAsync: addItem } = queryTrpc.addItemGlobal.useMutation();
   const { mutateAsync: editItem } = queryTrpc.editItem.useMutation();
   const { mutateAsync: deleteItem } = queryTrpc.deleteGlobalItem.useMutation();
 
   const runMutation = async (key, data) => {
     switch (key) {
+      case 'importItemsGlobal': {
+        return importItemsGlobal(data);
+      }
       case 'addItemGlobal': {
         return addItem(data);
       }

packages/app/hooks/singletrips/useUserTrips.ts

@@ -14,8 +14,6 @@ export const useUserTrips = (ownerId: string | undefined) => {
     },
   );
 
-  console.log('data', data);
-
   // Extract trips or set an empty array if data is undefined.
   // const trips = data?.trips || [];
 

packages/app/modules/dashboard/components/HeroSection/HeroSection.tsx

@@ -116,19 +116,20 @@ const loadStyles = (theme: any) => {
     },
     stack: {
       width: '100%',
-      alignItems: 'flex-start', // Align items to the start (left)
+      alignItems: 'flex-start',
+      paddingTop: Platform.OS === 'web' ? 24 : 16,
     },
     title: {
       fontSize: 24,
       fontWeight: 'bold',
       marginBottom: 20,
-      color: currentTheme.colors.tertiaryBlue,
       textAlign: 'left', // Align text to the left
       width: '100%', // Ensure it takes full width for left alignment
     },
     searchContainer: {
       width: '100%',
       alignItems: 'flex-start',
+      padding: 2,
     },
     searchBar: {
       width: '100%',

packages/app/modules/dashboard/components/SectionHeader/SectionHeader.tsx

@@ -8,14 +8,9 @@ import useCustomStyles from 'app/hooks/useCustomStyles';
 interface SectionHeaderProps {
   iconName: keyof typeof Ionicons.glyphMap;
   text: string;
-  textStyle: any;
 }
 
-export const SectionHeader = ({
-  iconName,
-  text,
-  textStyle,
-}: SectionHeaderProps) => {
+export const SectionHeader = ({ iconName, text }: SectionHeaderProps) => {
   const styles = useCustomStyles(loadStyles);
   const navigate = useNavigate();
 
@@ -40,8 +35,7 @@ const loadStyles = (theme: any) => {
       width: '100%',
     },
     text: {
-      color: currentTheme.colors.tertiaryBlue,
-      fontSize: 25,
+      fontSize: 24,
       fontWeight: 'bold',
     },
     icon: {

packages/app/modules/dashboard/screens/DashboardScreen/DashboardScreen.tsx

@@ -4,7 +4,6 @@ import { RStack, RScrollView } from '@packrat/ui';
 import { HeroSection, Section, SectionHeader } from '../../components';
 import useCustomStyles from 'app/hooks/useCustomStyles';
 import Layout from 'app/components/layout/Layout';
-import { SCREEN_WIDTH } from 'app/constants/breakpoint';
 import { useScreenWidth } from 'app/hooks/common';
 import FAB from 'app/components/Fab/Fab';
 import { FeedPreview } from 'app/modules/feed';
@@ -32,7 +31,7 @@ export const DashboardScreen = () => {
                   flexDirection: 'row',
                   alignItems: 'center',
                   alignSelf: 'flex-end',
-                  paddingRight: 16,
+                  marginTop: 16,
                   gap: 8,
                 }}
               >
@@ -49,11 +48,7 @@ export const DashboardScreen = () => {
             <View style={styles.gridContainer}>
               <View style={styles.gridItem}>
                 <Section>
-                  <SectionHeader
-                    iconName="newspaper-outline"
-                    text="Feed"
-                    textStyle={styles.sectionHeaderText}
-                  />
+                  <SectionHeader iconName="newspaper-outline" text="Feed" />
                   <FeedPreview feedType="public" />
                 </Section>
               </View>
@@ -85,15 +80,13 @@ const loadStyles = (theme) => {
     },
     gridContainer: {
       flexDirection: 'row',
+      marginTop: 32,
       flexWrap: 'wrap',
       justifyContent: 'space-between',
     },
     gridItem: {
       flexBasis: '100%',
       backgroundColor: currentTheme.colors.background,
     },
-    sectionHeaderText: {
-      color: currentTheme.colors.text,
-    },
   };
 };

packages/app/modules/feed/hooks/useFetchUserFavorites.ts

@@ -12,7 +12,7 @@ import {
 
 export const useFetchUserFavorites = (
   userId: string,
-  { queryEnabled = true, isPreview = false, searchTerm = '' } = {},
+  { queryEnabled = true, isPreview = false, searchTerm = '', isPublic } = {},
 ) => {
   const enabled = !!userId && queryEnabled;
   const [pagination, setPagination] = useState<PaginationParams>(
@@ -21,7 +21,7 @@ export const useFetchUserFavorites = (
 
   const { data, error, isLoading, refetch } =
     queryTrpc.getUserFavorites.useQuery(
-      { userId, pagination, isPreview, searchTerm },
+      { userId, pagination, isPreview, searchTerm, isPublic },
       {
         enabled,
         refetchOnWindowFocus: false,
@@ -64,11 +64,12 @@ interface FetchUserFavoritesReturn extends PreviewResourceStateWithData {
 export const useFetchUserFavoritesWithPreview = (
   userId: string,
   searchTerm: string,
+  isPublic?: boolean,
 ): FetchUserFavoritesReturn => {
   const { isAllQueryEnabled, ...previewResourceState } =
     usePreviewResourceState();
   const { data: previewData, isLoading: isPreviewLoading } =
-    useFetchUserFavorites(userId, { isPreview: true });
+    useFetchUserFavorites(userId, { isPreview: true, isPublic });
 
   const {
     data: allQueryData,
@@ -87,6 +88,7 @@ export const useFetchUserFavoritesWithPreview = (
 
   return {
     ...previewResourceState,
+    resourceName: 'Favorites',
     isAllQueryEnabled,
     previewData,
     isPreviewLoading,

packages/app/modules/item/hooks/useImportItem.ts

@@ -36,7 +36,7 @@ export const useImportItem = () => {
         });
       }
 
-      addOfflineRequest('addItemGlobal', newItem);
+      addOfflineRequest('importItemsGlobal', newItem);
 
       // Optionally, handle offline case here if needed
     },

packages/app/modules/item/screens/ItemDetailsScreen.tsx

@@ -9,6 +9,7 @@ import useCustomStyles from 'app/hooks/useCustomStyles';
 import { TouchableOpacity, Platform } from 'react-native';
 import { useRouter } from 'app/hooks/router';
 import RLink from '@packrat/ui/src/RLink';
+import Layout from 'app/components/layout/Layout';
 
 export function ItemDetailsScreen() {
   const { currentTheme } = useTheme();
@@ -22,13 +23,7 @@ export function ItemDetailsScreen() {
   }
 
   return (
-    <RScrollView
-      style={{
-        marginBottom: 40,
-        flex: 1,
-        backgroundColor: currentTheme.colors.background,
-      }}
-    >
+    <Layout>
       <RStack style={{ padding: 10, width: '100%', paddingBottom: 50 }}>
         <RStack style={styles.breadcrumbContainer}>
           {Platform.OS === 'web' ? (
@@ -80,7 +75,7 @@ export function ItemDetailsScreen() {
         </RH3>
         <FeedPreview feedType="similarItems" id={itemId} />
       </LargeCard>
-    </RScrollView>
+    </Layout>
   );
 }
 

packages/app/modules/pack/hooks/useUserPacks.ts

@@ -8,7 +8,7 @@ import {
   type PreviewResourceStateWithData,
   usePreviewResourceState,
 } from 'app/hooks/common';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 interface QueryOptions {
   isPublic?: boolean;
@@ -29,25 +29,26 @@ export const useUserPacks = (
   );
   const utils = queryTrpc.useContext();
   const enabled = queryEnabled && !!ownerId;
+  const queryParams = useMemo(
+    () => ({
+      ownerId,
+      isPublic,
+      queryBy: queryString,
+      pagination,
+      searchTerm,
+      isPreview,
+      itemId,
+    }),
+    [isPublic, isPreview, searchTerm, pagination, ownerId, itemId, queryString],
+  );
   const { data, error, isLoading, refetch } =
-    queryTrpc.getUserPacksFeed.useQuery(
-      {
-        ownerId,
-        isPublic,
-        queryBy: queryString,
-        pagination,
-        searchTerm,
-        isPreview,
-        itemId,
-      },
-      {
-        enabled,
-        refetchOnWindowFocus: false,
-        staleTime: 5 * 60,
-        cacheTime: 60 * 60 * 24,
-        networkMode: 'offlineFirst',
-      },
-    );
+    queryTrpc.getUserPacksFeed.useQuery(queryParams, {
+      enabled,
+      refetchOnWindowFocus: false,
+      staleTime: 5 * 60,
+      cacheTime: 60 * 60 * 24,
+      networkMode: 'offlineFirst',
+    });
   utils.getPacks.setData({
     ownerId: ownerId || '',
     queryBy: queryString,
@@ -92,12 +93,13 @@ interface FetchUserPacksPreviewReturn extends PreviewResourceStateWithData {
 export const useUserPacksWithPreview = (
   userId: string,
   searchTerm: string,
+  isPublic?: boolean,
 ): FetchUserPacksPreviewReturn => {
   const { isAllQueryEnabled, ...previewResourceState } =
     usePreviewResourceState();
   const { data: previewData, isLoading: isPreviewLoading } = useUserPacks(
     userId,
-    { isPublic: true, isPreview: true },
+    { isPreview: true, isPublic },
     'Most Recent',
     true,
   );
@@ -112,10 +114,11 @@ export const useUserPacksWithPreview = (
     hasNextPage,
     currentPage,
     totalPages,
-  } = useUserPacks(userId, { isPublic: true, searchTerm }, 'Most Recent', true);
+  } = useUserPacks(userId, { isPublic, searchTerm }, 'Most Recent', true);
 
   return {
     ...previewResourceState,
+    resourceName: 'Packs',
     isAllQueryEnabled,
     previewData,
     isPreviewLoading,