add lottie animation and icon

apps/expo/app.config.ts

@@ -28,7 +28,6 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
   web: {
     bundler: "metro",
     // output: 'static',
-    favicon: "./assets/images/favicon.png",
   },
   plugins: [
     "expo-router",

apps/expo/app/break/[appShortcutName].tsx

@@ -1,7 +1,9 @@
 import { useEffect, useState } from "react";
 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, H2, View } from "tamagui";
+import { Button, View, YStack } from "tamagui";
 
 import { Container } from "../../components/container";
 import { BreakStore } from "../../data/break.store";
@@ -16,29 +18,45 @@ const Break = observer(() => {
     });
   }, [loaded, searchParams.appShortcutName]);
   return (
-    <Container scrollEnabled={false} backgroundColor={"$background2"} flex={1}>
-      <View backgroundColor={"red"} flex={1} flexDirection="column" justifyContent="center">
-        <H2>Take a break</H2>
+    <Container scroll={false} flex={1} paddingBottom={0}>
+      <View flex={1}>
+        <LottieView
+          autoPlay
+          loop
+          // eslint-disable-next-line @typescript-eslint/no-var-requires, @typescript-eslint/no-unsafe-assignment
+          source={require("../../assets/water-drop-animation.json") as AnimationObject}
+        />
       </View>
-      <View flex={1} flexDirection="column" justifyContent="center">
-        <Button onPress={() => router.replace("/overview/")}>Reset</Button>
-      </View>
-      <View flex={1} flexDirection="column" justifyContent="center">
+      <YStack space="$2">
+        {process.env.NODE_ENV === "development" && (
+          <>
+            <Button onPress={() => router.replace("/overview/")}>Reset</Button>
+            <Button
+              onPress={() => {
+                router.replace("/overview/");
+                router.replace(`/break/${BreakStore.app?.name}`);
+              }}
+            >
+              Restart
+            </Button>
+          </>
+        )}
         <Button
           onPress={() => {
-            void BreakStore.openApp();
+            void BreakStore.exitApp();
           }}
         >
-          Open {BreakStore.app?.name}
+          I don&apos;t want to open this app
         </Button>
         <Button
           onPress={() => {
-            void BreakStore.exitApp();
+            void BreakStore.openApp();
           }}
+          variant="outlined"
         >
-          I don&apos;t want to open this app
+          {`Open ${BreakStore.app?.name}`}
         </Button>
-      </View>
+      </YStack>
     </Container>
   );
 });

apps/expo/app/settings/app-icon.tsx

@@ -7,7 +7,7 @@ import { Image, ListItem, View, YGroup, YStack } from "tamagui";
 
 import { Container } from "../../components/container";
 
-const DarkIcon = require("../../assets/images/default.png") as ImageURISource;
+const DarkIcon = require("../../assets/images/dark.png") as ImageURISource;
 const DefaultIcon = require("../../assets/images/default.png") as ImageURISource;
 const LightIcon = require("../../assets/images/light.png") as ImageURISource;
 

apps/expo/app/settings/index.tsx

@@ -1,4 +1,5 @@
 import { Share } from "react-native";
+import * as Linking from "expo-linking";
 import { router } from "expo-router";
 import * as Sharing from "expo-sharing";
 import {
@@ -227,6 +228,9 @@ const Settings = () => (
               </View>
             }
             iconAfter={ExternalLink}
+            onPress={() => {
+              void Linking.openURL("https://github.com/lukesthl/digital-break-app");
+            }}
           >
             <ListItem.Text>{"Constribute to Digital Break"}</ListItem.Text>
           </ListItem>
@@ -241,6 +245,9 @@ const Settings = () => (
               </View>
             }
             iconAfter={ExternalLink}
+            onPress={() => {
+              void Linking.openURL("mailto:luke@lukestahl.de");
+            }}
           >
             <ListItem.Text>{"Support"}</ListItem.Text>
           </ListItem>

apps/expo/components/container.tsx

@@ -5,21 +5,35 @@ import { ScrollView, View } from "tamagui";
 
 export const Container = ({
   children,
+  scroll = true,
   ...viewProps
-}: { children: React.ReactNode } & React.ComponentProps<typeof ScrollView>) => {
+}: { children: React.ReactNode } & React.ComponentProps<typeof View> & { scroll?: boolean }) => {
   const insets = useSafeAreaInsets();
 
   const tabBarHeight = useContext(BottomTabBarHeightContext);
-  return (
+  return scroll ? (
     <ScrollView
       paddingHorizontal="$4"
       paddingTop={insets.top}
       paddingBottom={tabBarHeight ?? insets.bottom}
-      {...viewProps}
+      flex={1}
+      {...(viewProps as React.ComponentProps<typeof ScrollView>)}
     >
       <View flex={1} paddingBottom={tabBarHeight ?? insets.bottom}>
         {children}
       </View>
     </ScrollView>
+  ) : (
+    <View
+      paddingHorizontal="$4"
+      paddingTop={insets.top}
+      paddingBottom={tabBarHeight ?? insets.bottom}
+      flex={1}
+      {...viewProps}
+    >
+      <View flex={1} paddingBottom={tabBarHeight ?? insets.bottom}>
+        {children}
+      </View>
+    </View>
   );
 };

apps/expo/components/header.tsx

@@ -1,6 +1,7 @@
+import type { ImageSourcePropType } from "react-native";
 import { router } from "expo-router";
-import { Coffee, Cog } from "@tamagui/lucide-icons";
-import { Button, Heading, XStack } from "tamagui";
+import { Cog } from "@tamagui/lucide-icons";
+import { Button, Heading, Image, XStack } from "tamagui";
 
 export const Header = () => (
   <XStack alignItems="center" justifyContent="space-between">
@@ -15,8 +16,18 @@ export const Header = () => (
         height={36}
         backgroundColor={"rgba(0,0,0,0.05)"}
         borderRadius="$3"
+        disabled
       >
-        <Coffee color="$text11" size={24} />
+        <Image
+          // eslint-disable-next-line @typescript-eslint/no-var-requires
+          source={require("../assets/images/digital-break-hourglass-icon.png") as ImageSourcePropType}
+          //source={require("../assets/images/default.png") as any}
+          width={26}
+          height={26}
+          resizeMode="contain"
+        />
+        {/* <Coffee color="$text11" size={24} /> */}
+        {/* <Hourglass color="$text11" size={24} strokeWidth={2} /> */}
       </Button>
       <Heading color="$text11">Digital Break</Heading>
     </XStack>

apps/expo/ios/Podfile.lock

@@ -124,6 +124,10 @@ PODS:
     - hermes-engine/Pre-built (= 0.72.7)
   - hermes-engine/Pre-built (0.72.7)
   - libevent (2.1.12)
+  - lottie-ios (3.4.4)
+  - lottie-react-native (5.1.6):
+    - lottie-ios (~> 3.4.0)
+    - React-Core
   - RCT-Folly (2021.07.22.00):
     - boost
     - DoubleConversion
@@ -595,6 +599,7 @@ DEPENDENCIES:
   - glog (from `../../../node_modules/react-native/third-party-podspecs/glog.podspec`)
   - hermes-engine (from `../../../node_modules/react-native/sdks/hermes-engine/hermes-engine.podspec`)
   - libevent (~> 2.1.12)
+  - lottie-react-native (from `../../../node_modules/lottie-react-native`)
   - RCT-Folly (from `../../../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec`)
   - RCTRequired (from `../../../node_modules/react-native/Libraries/RCTRequired`)
   - RCTTypeSafety (from `../../../node_modules/react-native/Libraries/TypeSafety`)
@@ -642,6 +647,7 @@ SPEC REPOS:
   trunk:
     - fmt
     - libevent
+    - lottie-ios
     - SocketRocket
 
 EXTERNAL SOURCES:
@@ -712,6 +718,8 @@ EXTERNAL SOURCES:
   hermes-engine:
     :podspec: "../../../node_modules/react-native/sdks/hermes-engine/hermes-engine.podspec"
     :tag: hermes-2023-08-07-RNv0.72.4-813b2def12bc9df02654b3e3653ae4a68d0572e0
+  lottie-react-native:
+    :path: "../../../node_modules/lottie-react-native"
   RCT-Folly:
     :podspec: "../../../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec"
   RCTRequired:
@@ -831,6 +839,8 @@ SPEC CHECKSUMS:
   glog: 04b94705f318337d7ead9e6d17c019bd9b1f6b1b
   hermes-engine: 9180d43df05c1ed658a87cc733dc3044cf90c00a
   libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
+  lottie-ios: 8f97d3271e155c2d688875c29cd3c74908aef5f8
+  lottie-react-native: 8f9d4be452e23f6e5ca0fdc11669dc99ab52be81
   RCT-Folly: 424b8c9a7a0b9ab2886ffe9c3b041ef628fd4fb1
   RCTRequired: 83bca1c184feb4d2e51c72c8369b83d641443f95
   RCTTypeSafety: 13c4a87a16d7db6cd66006ce9759f073402ef85b