search/download shortcuts in setup

lukesthl · Jan 4, 2024 · b797080 · b797080
1 parent de04970
commit b797080
Show file tree

Hide file tree

Showing 19 changed files with 636 additions and 493 deletions.
diff --git a/apps/expo/app.config.ts b/apps/expo/app.config.ts
@@ -19,12 +19,6 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
     supportsTablet: true,
     bundleIdentifier: "com.lukesthl.digitalbreak",
   },
-  android: {
-    adaptiveIcon: {
-      foregroundImage: "./assets/images/adaptive-icon.png",
-      backgroundColor: "#ffffff",
-    },
-  },
   web: {
     bundler: "metro",
     // output: 'static',

diff --git a/apps/expo/app/[...missing].tsx → apps/expo/app/[...unmatched].tsx b/apps/expo/app/[...missing].tsx → apps/expo/app/[...unmatched].tsx
diff --git a/apps/expo/app/_layout.tsx b/apps/expo/app/_layout.tsx
@@ -25,7 +25,6 @@ export default function RootLayout() {
     SatoshiBlack: require("../assets/fonts/satoshi/Satoshi-Black.otf"),
   });
 
-  // Expo Router uses Error Boundaries to catch errors in the navigation tree.
   useEffect(() => {
     if (error) throw error;
   }, [error]);

diff --git a/apps/expo/app/break/[appShortcutName].tsx b/apps/expo/app/break/[appShortcutName].tsx
@@ -5,7 +5,7 @@ import { router, useLocalSearchParams } from "expo-router";
 import type { AnimationObject } from "lottie-react-native";
 import LottieView from "lottie-react-native";
 import { observer } from "mobx-react-lite";
-import { Button, H3, Paragraph, View, YStack } from "tamagui";
+import { AlertDialog, Button, H3, Paragraph, View, XStack, YStack } from "tamagui";
 
 import { Container } from "../../components/container";
 import { BreakStore } from "../../data/break.store";
@@ -19,6 +19,7 @@ const floatingProgress = 0.75;
 
 const Break = observer(() => {
   const [loaded, setLoaded] = useState(false);
+  const [error, setError] = useState<string | null>(null);
   const [breakStatus, setBreakStatus] = useState<"running" | "finished">("finished");
   const searchParams = useLocalSearchParams<{ appShortcutName: string; timestamp: string }>();
   useEffect(() => {
@@ -73,92 +74,127 @@ const Break = observer(() => {
     return null;
   }
   return (
-    <Container scroll={false} flex={1} paddingBottom={0}>
-      <View flex={1} marginBottom={"$12"} justifyContent="center" alignItems="center">
-        <AnimatedLottieView
-          progress={animationProgress.current}
-          // eslint-disable-next-line @typescript-eslint/no-var-requires
-          source={require("../../assets/water-drop-animation.json") as AnimationObject}
-          style={{
-            height: 300,
-            marginBottom: -50,
-          }}
-        />
-        <H3
-          animation={"fadeIn"}
-          enterStyle={{
-            opacity: 0,
-          }}
-          marginTop="$5"
-          opacity={1}
-        >
-          {breakStatus === "running" ? (
-            BreakStore.getRandomBreakMessage()
-          ) : (
-            <YStack space="$1">
-              <H3 textAlign="center">{selectedApp.name}</H3>
-              <Paragraph
-                size="$5"
-                textAlign="center"
-                fontWeight={"bold"}
-                color="#797979"
-              >{`Don't break your streak!`}</Paragraph>
-              {OverviewStore.preventedByApp(selectedApp) > 0 && (
+    <>
+      <Container scroll={false} flex={1} paddingBottom={0}>
+        <View flex={1} marginBottom={"$12"} justifyContent="center" alignItems="center">
+          <AnimatedLottieView
+            progress={animationProgress.current}
+            // eslint-disable-next-line @typescript-eslint/no-var-requires
+            source={require("../../assets/water-drop-animation.json") as AnimationObject}
+            style={{
+              height: 300,
+              marginBottom: -50,
+            }}
+          />
+          <H3
+            animation={"fadeIn"}
+            enterStyle={{
+              opacity: 0,
+            }}
+            marginTop="$5"
+            opacity={1}
+          >
+            {breakStatus === "running" ? (
+              BreakStore.getRandomBreakMessage()
+            ) : (
+              <YStack space="$1">
+                <H3 textAlign="center">{selectedApp.name}</H3>
                 <Paragraph
                   size="$5"
+                  textAlign="center"
                   fontWeight={"bold"}
                   color="#797979"
-                  textAlign="center"
-                >{`You have prevented yourself from opening this app ${OverviewStore.preventedByApp(
-                  selectedApp
-                )}x`}</Paragraph>
-              )}
-            </YStack>
-          )}
-        </H3>
-      </View>
-      {breakStatus === "finished" && (
-        <YStack
-          space="$2"
-          marginTop="$6"
-          animation={"fadeIn"}
-          enterStyle={{
-            opacity: 0,
-          }}
-          opacity={1}
-        >
-          {process.env.NODE_ENV === "development" && (
-            <YStack space="$2">
-              <Button onPress={() => router.replace("/overview/")}>Reset</Button>
-              <Button
-                onPress={() => {
-                  router.replace("/overview/");
-                  router.replace(`/break/${selectedApp.name}`);
-                }}
-              >
-                Restart
-              </Button>
-            </YStack>
-          )}
-          <Button
-            onPress={() => {
-              void BreakStore.exitApp();
-            }}
-          >
-            {`I don't want to open ${selectedApp.name}`}
-          </Button>
-          <Button
-            onPress={() => {
-              void BreakStore.openApp();
+                >{`Don't break your streak!`}</Paragraph>
+                {OverviewStore.preventedByApp(selectedApp) > 0 && (
+                  <Paragraph
+                    size="$5"
+                    fontWeight={"bold"}
+                    color="#797979"
+                    textAlign="center"
+                  >{`You have prevented yourself from opening this app ${OverviewStore.preventedByApp(
+                    selectedApp
+                  )}x`}</Paragraph>
+                )}
+              </YStack>
+            )}
+          </H3>
+        </View>
+        {breakStatus === "finished" && (
+          <YStack
+            space="$2"
+            marginTop="$6"
+            animation={"fadeIn"}
+            enterStyle={{
+              opacity: 0,
             }}
-            variant="outlined"
-            color="$text11"
+            opacity={1}
           >
-            {`Open ${selectedApp.name}`}
-          </Button>
-        </YStack>
-      )}
-    </Container>
+            {process.env.NODE_ENV === "development" && (
+              <YStack space="$2">
+                <Button onPress={() => router.replace("/overview/")}>Reset</Button>
+                <Button
+                  onPress={() => {
+                    router.replace("/overview/");
+                    router.replace(`/break/${selectedApp.name}`);
+                  }}
+                >
+                  Restart
+                </Button>
+              </YStack>
+            )}
+            <Button
+              onPress={() => {
+                void BreakStore.exitApp();
+              }}
+            >
+              {`I don't want to open ${selectedApp.name}`}
+            </Button>
+            <Button
+              onPress={async () => {
+                try {
+                  await BreakStore.openApp();
+                } catch (error) {
+                  console.log(error);
+                  if (error instanceof Error) {
+                    setError(error.message);
+                  } else {
+                    setError(JSON.stringify(error));
+                  }
+                }
+              }}
+              variant="outlined"
+              color="$text11"
+            >
+              {`Open ${selectedApp.name}`}
+            </Button>
+          </YStack>
+        )}
+      </Container>
+      <AlertDialog open={!!error}>
+        <AlertDialog.Portal>
+          <AlertDialog.Overlay key="overlay" />
+          <AlertDialog.Content bordered elevate key="content">
+            <YStack space>
+              <AlertDialog.Title>Error</AlertDialog.Title>
+              <AlertDialog.Description>{error}</AlertDialog.Description>
+
+              <XStack space="$3" justifyContent="flex-end">
+                <AlertDialog.Cancel>
+                  <Button
+                    onPress={() => {
+                      setError(null);
+                      router.replace("/");
+                    }}
+                  >
+                    Back
+                  </Button>
+                </AlertDialog.Cancel>
+              </XStack>
+            </YStack>
+          </AlertDialog.Content>
+        </AlertDialog.Portal>
+      </AlertDialog>
+    </>
   );
 });
 

diff --git a/apps/expo/app/settings/app-icon.tsx b/apps/expo/app/settings/app-icon.tsx
@@ -48,7 +48,7 @@ const AppIcon = () => {
                 pressTheme
                 icon={
                   <View backgroundColor="$gray5" borderRadius={"$3"} padding="$2">
-                    <Image source={icon.source} style={{ width: 36, height: 36 }} />
+                    <Image source={icon.source} style={{ width: 36, height: 36 }} borderRadius={"$3"} />
                   </View>
                 }
                 onPress={() => {

diff --git a/apps/expo/app/setup/_layout.tsx b/apps/expo/app/setup/_layout.tsx
@@ -11,9 +11,34 @@ const BreakLayout = observer(() => {
     <Stack>
       <Stack.Screen
         name="index"
+        options={{
+          title: "Select App",
+          headerRight: () => {
+            return (
+              <Button
+                pressStyle={{
+                  backgroundColor: "transparent",
+                  borderWidth: 0,
+                }}
+                onPress={() => {
+                  router.back();
+                }}
+                borderWidth={0}
+                size="$4"
+                backgroundColor={"transparent"}
+              >
+                <SizableText color="$text11" size="$4">
+                  Skip
+                </SizableText>
+              </Button>
+            );
+          },
+        }}
+      />
+      <Stack.Screen
+        name="steps"
         options={{
           title: "Instructions",
-          presentation: "modal",
           headerRight: () => {
             return (
               <Button
@@ -23,6 +48,7 @@ const BreakLayout = observer(() => {
                 }}
                 onPress={() => {
                   router.back();
+                  router.back();
                 }}
                 borderWidth={0}
                 size="$4"