Development

apps/expo/app/(app)/(drawer)/(tabs)/(stack)/destination/[destinationId].tsx

@@ -1,7 +1,6 @@
 import React from 'react';
+import { DestinationScreen } from 'app/modules/map/screens/DestinationScreen';
 import { Platform } from 'react-native';
-import { DestinationPage } from 'app/components/destination';
-// import DestinationPage from "../../components/destination";
 import { Stack } from 'expo-router';
 import Head from 'expo-router/head';
 
@@ -22,7 +21,7 @@ export default function Destination() {
           // https://reactnavigation.org/docs/headers#replacing-the-title-with-a-custom-component
         }}
       />
-      <DestinationPage />
+      <DestinationScreen />
     </>
   );
 }

apps/expo/app/(app)/(drawer)/(tabs)/(stack)/trip/[tripId].tsx

@@ -1,7 +1,6 @@
 import React from 'react';
-import PackContainer from 'app/components/pack/PackContainer';
-import { TripDetails } from 'app/screens/trip/TripDetails';
-import { DetailsComponent } from 'app/components/details';
+import EditTripScreen from 'app/screens/trip/editTrip';
+
 import { Platform } from 'react-native';
 import { Stack } from 'expo-router';
 import Head from 'expo-router/head';
@@ -24,7 +23,7 @@ export default function Trip() {
           // https://reactnavigation.org/docs/headers#replacing-the-title-with-a-custom-component
         }}
       />
-      <TripDetails />
+      <EditTripScreen />
     </>
   );
 }

apps/next/pages/destination/[destinationId].tsx

@@ -1,13 +1,12 @@
-import { DestinationPage } from 'app/components/destination';
+import { DestinationScreen } from 'app/modules/Map/screens/DestinationScreen';
 import { AuthWrapper } from 'app/modules/auth';
-// import DestinationPage from "../../components/destination";
 
 // export const runtime = 'experimental-edge';
 
 export default function Destination() {
   return (
     <>
-      <DestinationPage />
+      <DestinationScreen />
     </>
   );
 }

apps/next/pages/trip/[tripId].tsx

@@ -1,12 +1,12 @@
-import { TripDetails } from 'app/screens/trip/TripDetails';
+import EditTripScreen from 'app/screens/trip/editTrip';
 import { AuthWrapper } from 'app/modules/auth';
 
 // export const runtime = 'experimental-edge'
 
 export default function Trip() {
   return (
     <>
-      <TripDetails />
+      <EditTripScreen />
     </>
   );
 }

apps/tauri/src/routes/destination/query.lazy.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DestinationPage } from 'app/components/destination';
+import { DestinationScreen } from 'app/modules/Map/screens/DestinationScreen';
 import { AuthWrapper } from 'app/modules/auth';
 // import DestinationPage from "../../components/destination";
 import { createLazyFileRoute } from '@tanstack/react-router';
@@ -11,7 +11,7 @@ export const Route = createLazyFileRoute('/destination/query')({
 export default function Destination() {
   return (
     <AuthWrapper>
-      <DestinationPage />
+      <DestinationScreen />
     </AuthWrapper>
   );
 }

apps/tauri/src/routes/trip/$tripId.lazy.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TripDetails } from 'app/screens/trip/TripDetails';
+import EditTripScreen from 'app/screens/trip/editTrip';
 import { AuthWrapper } from 'app/modules/auth';
 import { createLazyFileRoute } from '@tanstack/react-router';
 
@@ -10,7 +10,7 @@ export const Route = createLazyFileRoute('/trip/$tripId')({
 export default function Trip() {
   return (
     <AuthWrapper>
-      <TripDetails />
+      <EditTripScreen />
     </AuthWrapper>
   );
 }

apps/vite/src/routes/__root.tsx

@@ -11,10 +11,8 @@ import Footer from 'app/components/footer/Footer';
 const ThemedMainContentWeb = () => {
   const { isDark } = useContext(ThemeContext);
 
-  const backgroundColor = isDark ? '#000000' : '#F5F5F5';
-
   return (
-    <MainContentWeb style={{ backgroundColor, paddingTop: 80 }}>
+    <MainContentWeb isDark={!!isDark}>
       <Navbar />
       <Outlet />
       <Footer />

apps/vite/src/routes/destination/query.lazy.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
-import { DestinationPage } from 'app/components/destination';
+import { DestinationScreen } from 'app/modules/map/screens/DestinationScreen/DestinationScreen';
 import { AuthWrapper } from 'app/modules/auth';
-// import DestinationPage from "../../components/destination";
 import { createLazyFileRoute } from '@tanstack/react-router';
 
 export const Route = createLazyFileRoute('/destination/query')({
@@ -11,7 +10,7 @@ export const Route = createLazyFileRoute('/destination/query')({
 export default function Destination() {
   return (
     <AuthWrapper>
-      <DestinationPage />
+      <DestinationScreen />
     </AuthWrapper>
   );
 }

apps/vite/src/routes/trip/$tripId.lazy.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TripDetails } from 'app/screens/trip/TripDetails';
+import EditTripScreen from 'app/screens/trip/editTrip';
 import { AuthWrapper } from 'app/modules/auth';
 import { createLazyFileRoute } from '@tanstack/react-router';
 
@@ -8,9 +8,10 @@ export const Route = createLazyFileRoute('/trip/$tripId')({
 });
 
 export default function Trip() {
+  const { tripId } = Route.useParams();
   return (
     <AuthWrapper>
-      <TripDetails />
+      <EditTripScreen tripId={tripId} />
     </AuthWrapper>
   );
 }

package.json

@@ -107,8 +107,7 @@
   },
   "lint-staged": {
     "server/**/*.{js,ts}": [
-      "cd server && yarn run lint",
-      "prettier --write"
+      "yarn workspace server run lint"
     ],
     "**/*.{js,jsx,ts,tsx}": [
       "prettier --write"

packages/app/components/AsyncView/AsyncView.tsx

@@ -0,0 +1,35 @@
+import { RSkeleton } from '@packrat/ui';
+import { ErrorCard } from 'app/components/ErrorCard';
+import { type ErrorCardProps } from 'app/components/ErrorCard/ErrorCard';
+import React, { type ReactNode, type FC } from 'react';
+
+interface AsyncViewProps {
+  isLoading: boolean;
+  isError: boolean;
+  loadingComponentProps?: { style: any };
+  errorComponentProps?: ErrorCardProps;
+  loadingComponent?: ReactNode;
+  errorComponent?: ReactNode;
+  children: ReactNode;
+}
+
+export const AsyncView: FC<AsyncViewProps> = ({
+  isLoading,
+  isError,
+  children,
+  loadingComponentProps = { style: { width: '100%', height: 30 } },
+  errorComponentProps,
+  loadingComponent: LoadingComponent,
+  errorComponent: ErrorComponent,
+}) => {
+  if (isLoading) {
+    return <>{LoadingComponent || <RSkeleton {...loadingComponentProps} />}</>;
+  }
+
+  if (isError) {
+    if (!errorComponentProps) return null;
+    return <>{ErrorComponent || <ErrorCard {...errorComponentProps} />}</>;
+  }
+
+  return <>{children}</>;
+};

packages/app/components/AsyncView/index.tsx

@@ -0,0 +1 @@
+export * from './AsyncView';

packages/app/components/ErrorCard/ErrorCard.tsx

@@ -0,0 +1,68 @@
+import React, { type FC } from 'react';
+import { RButton, RText, XStack, YStack } from '@packrat/ui';
+import { XCircle } from '@tamagui/lucide-icons';
+import useTheme from 'app/hooks/useTheme';
+import { View } from 'react-native';
+
+export interface ErrorCardProps {
+  title?: string;
+  message: string;
+
+  onRetry?: () => void;
+}
+
+export const ErrorCard: FC<ErrorCardProps> = ({
+  message,
+  title = 'Server error',
+  onRetry,
+}) => {
+  const { currentTheme } = useTheme();
+
+  return (
+    <YStack
+      style={{
+        borderColor: currentTheme.colors.error,
+        backgroundColor: `${currentTheme.colors.error}70`,
+        borderWidth: 1,
+        borderRadius: 8,
+        gap: 16,
+        padding: 16,
+      }}
+    >
+      <XStack gap={8} style={{ alignItems: 'flex-start', width: 320 }}>
+        <XCircle
+          size={20}
+          style={{ color: currentTheme.colors.error, marginTop: 4 }}
+        />
+        <View style={{ flex: 1 }}>
+          <RText style={{ color: currentTheme.colors.error, fontWeight: 600 }}>
+            {title}
+          </RText>
+          <RText
+            style={{
+              color: currentTheme.colors.error,
+              paddingTop: 8,
+            }}
+          >
+            {message}
+          </RText>
+        </View>
+      </XStack>
+      {typeof onRetry === 'function' && (
+        <RButton
+          style={{
+            padding: 0,
+            width: 72,
+            marginTop: 8,
+            backgroundColor: 'white',
+            color: currentTheme.colors.error,
+            fontWeight: 600,
+          }}
+          onPress={onRetry}
+        >
+          Retry
+        </RButton>
+      )}
+    </YStack>
+  );
+};

packages/app/components/ErrorCard/index.ts

@@ -0,0 +1 @@
+export { ErrorCard } from './ErrorCard';

packages/app/components/Fab/Fab.tsx

@@ -18,6 +18,7 @@ const FAB = () => {
     <FABWeb
       showQuickActions={showQuickActions}
       toggleQuickActions={toggleQuickActions}
+      closeQuickActions={closeQuickActions}
     />
   ) : (
     <FABNative

packages/app/components/Fab/FabNative.tsx

@@ -1,62 +1,68 @@
 import React from 'react';
-import { TouchableOpacity, View } from 'react-native';
+import { Popover, YStack } from 'tamagui';
 import { MaterialIcons } from '@expo/vector-icons';
-import useCustomStyles from 'app/hooks/useCustomStyles';
-import { QuickActionsSection } from '../../modules/dashboard';
+import { useQuickActions } from 'app/modules/dashboard';
+import useTheme from 'app/hooks/useTheme';
+import { QuickActionButton } from 'app/modules/dashboard/components/QuickActionButton/QuickActionButton';
+import { RButton } from '@packrat/ui';
 
-const FABNative = ({
-  showQuickActions,
-  toggleQuickActions,
-  closeQuickActions,
-}) => {
-  const styles = useCustomStyles(loadStyles);
+const FABNative = () => {
+  const { handleActionSelect, quickActionData } = useQuickActions();
+  const { currentTheme } = useTheme();
 
   return (
-    <>
-      {showQuickActions && (
-        <View style={styles.quickActionsContainer}>
-          <QuickActionsSection closeQuickActions={closeQuickActions} />
-        </View>
-      )}
-      <TouchableOpacity style={styles.fab} onPress={toggleQuickActions}>
-        <MaterialIcons name="add" size={40} style={styles.fabIcon} />
-      </TouchableOpacity>
-    </>
+    <Popover>
+      <Popover.Trigger asChild>
+        <RButton
+          style={{
+            position: 'absolute',
+            width: 55,
+            height: 55,
+            backgroundColor: currentTheme.colors.card,
+            borderRadius: 28,
+            justifyContent: 'center',
+            alignItems: 'center',
+            zIndex: 2,
+            elevation: 2,
+            bottom: 20,
+            alignSelf: 'center',
+          }}
+        >
+          <MaterialIcons
+            name="add"
+            size={20}
+            color={currentTheme.colors.text}
+          />
+        </RButton>
+      </Popover.Trigger>
+      <Popover.Content
+        elevate
+        bordered
+        size="$1"
+        style={{
+          bottom: 158,
+          height: 120,
+          width: 150,
+          borderRadius: 5,
+          justifyContent: 'center',
+          alignItems: 'center',
+          backgroundColor: currentTheme.colors.background,
+        }}
+      >
+        <YStack space="$1">
+          {quickActionData.map((action) => (
+            <QuickActionButton
+              key={action.action}
+              onPress={() => handleActionSelect(action.action)}
+              iconName={action.iconName}
+              text={action.text}
+            />
+          ))}
+        </YStack>
+        <Popover.Arrow />
+      </Popover.Content>
+    </Popover>
   );
 };
 
-const loadStyles = (theme) => {
-  const { currentTheme } = theme;
-
-  return {
-    quickActionsContainer: {
-      position: 'absolute',
-      bottom: 70,
-      right: 40,
-      zIndex: 1,
-      height: 54,
-      width: 150,
-      borderRadius: 5,
-      justifyContent: 'center',
-      alignItems: 'center',
-    },
-    fab: {
-      position: 'absolute',
-      width: 55,
-      height: 55,
-      backgroundColor: currentTheme.colors.card,
-      borderRadius: 28,
-      justifyContent: 'center',
-      alignItems: 'center',
-      zIndex: 2,
-      elevation: 2,
-      bottom: 20,
-      alignSelf: 'center',
-    },
-    fabIcon: {
-      color: currentTheme.colors.tertiaryBlue,
-    },
-  };
-};
-
 export default FABNative;