feat(android): implement android ui

src/app/_layout.tsx

@@ -21,6 +21,7 @@ import {
   AppState,
   AppStateStatus,
   Platform,
+  StatusBar,
   useColorScheme,
 } from "react-native";
 
@@ -65,6 +66,8 @@ function RootLayoutContent() {
 
   const theme = useTheme();
   const tabBarBackgroundColor = theme.background;
+  const statusBarStyle =
+    colorScheme === "dark" ? "light-content" : "dark-content";
 
   // Initialize notifications once at app startup, then start pending rollouts and poll for challenges
   useEffect(() => {
@@ -150,6 +153,7 @@ function RootLayoutContent() {
 
   return (
     <>
+      <StatusBar backgroundColor={theme.background} barStyle={statusBarStyle} />
       <Stack>
         <Stack.Screen
           name="index"

src/app/index.tsx

@@ -11,22 +11,27 @@ import { useTheme } from "@/hooks/use-theme";
 import { useToken } from "@/hooks/use-token";
 import type { PushToken } from "@/types/token";
 import { PushTokenRolloutState } from "@/types/token";
+import type { TokenAction } from "@/types/token-actions";
 import AddSymbol from "@expo/material-symbols/add.xml";
 import CodeSymbol from "@expo/material-symbols/code.xml";
 import { Button, Text as ExpoText, Host, Icon, Row } from "@expo/ui";
+import {
+  Host as AndroidHost,
+  Icon as AndroidIcon,
+  ExtendedFloatingActionButton,
+  Text,
+} from "@expo/ui/jetpack-compose";
 import { buttonStyle, controlSize } from "@expo/ui/swift-ui/modifiers";
 import { Trans, useLingui } from "@lingui/react/macro";
 import { isLiquidGlassAvailable } from "expo-glass-effect";
-import { Link, Stack, useLocalSearchParams, useRouter } from "expo-router";
+import { Stack, useLocalSearchParams, useRouter } from "expo-router";
 import { SymbolView } from "expo-symbols";
 import { useCallback, useMemo } from "react";
 import {
   Keyboard,
   Platform,
-  Pressable,
   RefreshControl,
   StyleSheet,
-  useColorScheme,
   useWindowDimensions,
   View,
 } from "react-native";
@@ -49,15 +54,16 @@ export default function Tokens() {
   } = useNotificationStatus();
   const { height, width } = useWindowDimensions();
   const { bottom, top } = useSafeAreaInsets();
-  const colorScheme = useColorScheme();
   const theme = useTheme();
   const backgroundColor = theme.background;
   const { t } = useLingui();
   const tabBarTintColor = theme.text;
   const transparentColor = theme.transparent;
   const tabBarBackgroundColor = theme.background;
-  const refreshControlTintColor =
-    colorScheme === "dark" ? StaticColors.white : StaticColors.black;
+  const refreshControlColor =
+    Platform.OS === "android" ? theme.branding : theme.text;
+  const refreshControlProgressBackgroundColor =
+    Platform.OS === "android" ? theme.backgroundSecondary : undefined;
 
   const params = useLocalSearchParams<{ q?: string }>();
 
@@ -98,64 +104,52 @@ export default function Tokens() {
 
   const renderItem = useCallback(
     ({ item }: { item: PushToken }) => {
+      const primaryTokenAction: TokenAction = PushTokenRolloutState.isFailed(
+        item.rolloutState,
+      )
+        ? {
+            iosIcon: "arrow.clockwise",
+            key: "refresh",
+            label: t`Retry Rollout`,
+            onPress: () => rolloutToken(item.id),
+          }
+        : {
+            iosIcon: "square.and.pencil",
+            key: "edit",
+            label: t`Edit`,
+            onPress: () => {
+              router.push({
+                pathname: "/token/[tokenId]",
+                params: { edit: "1", tokenId: item.id },
+              });
+            },
+          };
+      const tokenActions: TokenAction[] = [
+        primaryTokenAction,
+        {
+          destructive: true,
+          iosIcon: "trash",
+          key: "delete",
+          label: t`Delete`,
+          onPress: () => confirmDeleteToken(item.id),
+        },
+      ];
+      const isRolloutFinished = PushTokenRolloutState.isFinished(
+        item.rolloutState,
+      );
+
       return (
         <Animated.View
           key={item.id}
           entering={FadeIn}
           exiting={FadeOut}
           style={styles.tokenWrapper}
         >
-          <Link
-            push
-            key={item.id}
-            href={{
-              pathname: "/token/[tokenId]",
-              params: { tokenId: item.id },
-            }}
-            asChild
-          >
-            <Link.Trigger>
-              <Pressable
-                onLongPress={() => {}}
-                style={styles.tokenCard}
-                disabled={!PushTokenRolloutState.isFinished(item.rolloutState)}
-              >
-                <TokenListItem token={item} key={item.id} />
-              </Pressable>
-            </Link.Trigger>
-            <Link.Menu>
-              {!PushTokenRolloutState.isFailed(item.rolloutState) && (
-                <Link.MenuAction
-                  icon="square.and.pencil"
-                  onPress={() => {
-                    router.push({
-                      pathname: "/token/[tokenId]",
-                      params: { edit: "1", tokenId: item.id },
-                    });
-                  }}
-                >
-                  {t`Edit`}
-                </Link.MenuAction>
-              )}
-              {PushTokenRolloutState.isFailed(item.rolloutState) && (
-                <Link.MenuAction
-                  icon="arrow.clockwise"
-                  onPress={() => {
-                    rolloutToken(item.id);
-                  }}
-                >
-                  {t`Retry Rollout`}
-                </Link.MenuAction>
-              )}
-              <Link.MenuAction
-                icon="trash"
-                destructive
-                onPress={() => confirmDeleteToken(item.id)}
-              >
-                {t`Delete`}
-              </Link.MenuAction>
-            </Link.Menu>
-          </Link>
+          <TokenListItem
+            actions={tokenActions}
+            isRolloutFinished={isRolloutFinished}
+            token={item}
+          />
         </Animated.View>
       );
     },
@@ -246,6 +240,28 @@ export default function Tokens() {
     </Stack.Toolbar>
   ) : null;
 
+  const androidAddFab =
+    Platform.OS === "android" ? (
+      <AndroidHost
+        matchContents
+        style={[styles.fabHost, { bottom: bottom + Spacing.lg }]}
+      >
+        <ExtendedFloatingActionButton
+          expanded={tokens.length === 0}
+          onClick={() => {
+            router.navigate("/token/add");
+          }}
+        >
+          <ExtendedFloatingActionButton.Icon>
+            <AndroidIcon source={AddSymbol} />
+          </ExtendedFloatingActionButton.Icon>
+          <ExtendedFloatingActionButton.Text>
+            <Text style={styles.fabText}>{t`Add token`}</Text>
+          </ExtendedFloatingActionButton.Text>
+        </ExtendedFloatingActionButton>
+      </AndroidHost>
+    ) : null;
+
   if (!tokens.length) {
     return (
       <>
@@ -276,37 +292,40 @@ export default function Tokens() {
               device.
             </Trans>
           </ThemedText>
-          <Host
-            matchContents={{ vertical: true }}
-            style={[styles.noTokenButton, { width: emptyStateButtonWidth }]}
-          >
-            <Button
-              modifiers={[
-                controlSize("large"),
-                buttonStyle(
-                  isLiquidGlassAvailable()
-                    ? "glassProminent"
-                    : "borderedProminent",
-                ),
-              ]}
-              onPress={() => {
-                router.navigate("/token/add");
-              }}
-              style={{ width: emptyStateButtonWidth }}
+          {Platform.OS === "ios" && (
+            <Host
+              matchContents={{ vertical: true }}
+              style={[styles.noTokenButton, { width: emptyStateButtonWidth }]}
             >
-              <Row alignment="center" spacing={6}>
-                <Icon
-                  name={Icon.select({
-                    ios: "plus",
-                    android: AddSymbol,
-                  })}
-                  accessibilityLabel={t`Add token`}
-                />
-                <ExpoText numberOfLines={1}>{t`Add token`}</ExpoText>
-              </Row>
-            </Button>
-          </Host>
+              <Button
+                modifiers={[
+                  controlSize("large"),
+                  buttonStyle(
+                    isLiquidGlassAvailable()
+                      ? "glassProminent"
+                      : "borderedProminent",
+                  ),
+                ]}
+                onPress={() => {
+                  router.navigate("/token/add");
+                }}
+                style={{ width: emptyStateButtonWidth }}
+              >
+                <Row alignment="center" spacing={6}>
+                  <Icon
+                    name={Icon.select({
+                      ios: "plus",
+                      android: AddSymbol,
+                    })}
+                    accessibilityLabel={t`Add token`}
+                  />
+                  <ExpoText numberOfLines={1}>{t`Add token`}</ExpoText>
+                </Row>
+              </Button>
+            </Host>
+          )}
         </ThemedView>
+        {androidAddFab}
         {footer}
       </>
     );
@@ -361,12 +380,14 @@ export default function Tokens() {
             refreshing={isPolling}
             onRefresh={onRefresh}
             title={t`Refreshing...`}
-            tintColor={refreshControlTintColor}
-            titleColor={refreshControlTintColor}
-            colors={[refreshControlTintColor]}
+            tintColor={refreshControlColor}
+            titleColor={refreshControlColor}
+            colors={[refreshControlColor]}
+            progressBackgroundColor={refreshControlProgressBackgroundColor}
           />
         }
       />
+      {androidAddFab}
       {footer}
     </>
   );
@@ -376,6 +397,14 @@ export const styles = StyleSheet.create({
   contentContainer: {
     paddingHorizontal: Spacing.lg,
   },
+  fabHost: {
+    position: "absolute",
+    right: Spacing.lg,
+    zIndex: 10,
+  },
+  fabText: {
+    fontWeight: "bold",
+  },
   noResultsContainer: {
     padding: Spacing.xl,
   },
@@ -409,10 +438,6 @@ export const styles = StyleSheet.create({
   notificationNotice: {
     marginVertical: Spacing.sm,
   },
-  tokenCard: {
-    borderRadius: Radii.xl,
-    overflow: "hidden",
-  },
   tokenWrapper: {
     marginVertical: Spacing.sm,
   },

src/components/push-request-popup.tsx

@@ -272,6 +272,8 @@ function ActionButton({
   const theme = useTheme();
   const brandingColor = theme.branding;
   const backgroundColor = theme.fill;
+  const primaryButtonTextColor = theme.textOnBranding;
+  const secondaryButtonTextColor = theme.branding;
   const pressScale = useSharedValue(1);
   const primaryButtonStyle = useMemo(
     () => ({ backgroundColor: brandingColor }),
@@ -281,9 +283,13 @@ function ActionButton({
     () => ({ backgroundColor, borderColor: brandingColor }),
     [backgroundColor, brandingColor],
   );
+  const primaryButtonTextStyle = useMemo(
+    () => ({ color: primaryButtonTextColor }),
+    [primaryButtonTextColor],
+  );
   const secondaryButtonTextStyle = useMemo(
-    () => ({ color: brandingColor }),
-    [brandingColor],
+    () => ({ color: secondaryButtonTextColor }),
+    [secondaryButtonTextColor],
   );
 
   const animatedStyle = useAnimatedStyle(() => ({
@@ -320,7 +326,7 @@ function ActionButton({
         fontWeight="semiBold"
         style={[
           styles.buttonText,
-          isPrimary ? styles.buttonPrimaryText : secondaryButtonTextStyle,
+          isPrimary ? primaryButtonTextStyle : secondaryButtonTextStyle,
         ]}
       >
         {label}
@@ -346,9 +352,6 @@ const styles = StyleSheet.create({
   buttonDisabled: {
     opacity: 0.6,
   },
-  buttonPrimaryText: {
-    color: StaticColors.white,
-  },
   buttonSecondary: {
     borderWidth: 1,
   },