expo-dev-launcher 6.0.7 → 6.0.8

package/android/src/debug/java/expo/modules/devlauncher/compose/screens/BranchesScreen.kt

@@ -9,7 +9,6 @@ import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.lazy.rememberLazyListState
@@ -33,21 +32,23 @@ import androidx.compose.ui.unit.sp
 import com.composeunstyled.Icon
 import expo.modules.devlauncher.R
 import expo.modules.devlauncher.compose.Branch
-import expo.modules.devlauncher.compose.DefaultScreenContainer
 import expo.modules.devlauncher.compose.Update
 import expo.modules.devlauncher.compose.models.BranchesAction
 import expo.modules.devlauncher.compose.primitives.CircularProgressBar
 import expo.modules.devlauncher.compose.ui.ActionButton
 import expo.modules.devlauncher.compose.ui.AppHeader
+import expo.modules.devlauncher.compose.ui.DefaultScreenContainer
+import expo.modules.devlauncher.compose.ui.LauncherIcons
 import expo.modules.devlauncher.compose.utils.DateFormat
 import expo.modules.devmenu.compose.newtheme.NewAppTheme
 import expo.modules.devmenu.compose.primitives.NewText
 import expo.modules.devmenu.compose.primitives.RoundedSurface
 import expo.modules.devmenu.compose.primitives.Spacer
+import expo.modules.devmenu.compose.ui.MenuIcons
 import kotlin.time.ExperimentalTime
 
 @Composable
-fun BranchBadge(
+private fun BranchBadge(
   name: String
 ) {
   val backgroundColor = NewAppTheme.colors.background.info
@@ -61,11 +62,9 @@ fun BranchBadge(
       .background(backgroundColor)
       .padding(NewAppTheme.spacing.`2`)
   ) {
-    Icon(
-      painter = painterResource(R.drawable.branch_icon),
-      contentDescription = "Branch Icon",
-      tint = textColor,
-      modifier = Modifier.size(16.dp)
+    LauncherIcons.Branch(
+      size = 16.dp,
+      tint = textColor
     )
 
     NewText(
@@ -80,7 +79,7 @@ fun BranchBadge(
 }
 
 @Composable
-fun NeedToSingInComponent(
+private fun NeedToSingInComponent(
   onProfileClick: () -> Unit = {}
 ) {
   Box(
@@ -203,11 +202,9 @@ fun BranchesScreen(
               ) {
                 BranchBadge(branch.name)
 
-                Icon(
-                  painter = painterResource(R.drawable.chevron_right),
-                  contentDescription = "Chevron Icon",
-                  tint = NewAppTheme.colors.icon.quaternary,
-                  modifier = Modifier.size(20.dp)
+                LauncherIcons.Chevron(
+                  size = 20.dp,
+                  tint = NewAppTheme.colors.icon.quaternary
                 )
               }
 
@@ -222,11 +219,9 @@ fun BranchesScreen(
                     .background(NewAppTheme.colors.background.warning)
                     .padding(NewAppTheme.spacing.`2`)
                 ) {
-                  Icon(
-                    painter = painterResource(expo.modules.devmenu.R.drawable.alert),
-                    contentDescription = "Warning Icon",
-                    tint = NewAppTheme.colors.icon.warning,
-                    modifier = Modifier.size(20.dp)
+                  MenuIcons.Warning(
+                    size = 20.dp,
+                    tint = NewAppTheme.colors.icon.warning
                   )
 
                   NewText(
@@ -244,11 +239,9 @@ fun BranchesScreen(
                   verticalAlignment = Alignment.CenterVertically,
                   horizontalArrangement = Arrangement.spacedBy(NewAppTheme.spacing.`2`)
                 ) {
-                  Icon(
-                    painter = painterResource(R.drawable.update_icon),
-                    contentDescription = "Update Icon",
-                    tint = NewAppTheme.colors.icon.quaternary,
-                    modifier = Modifier.size(20.dp)
+                  LauncherIcons.Updates(
+                    size = 20.dp,
+                    tint = NewAppTheme.colors.icon.quaternary
                   )
 
                   Column(

package/android/src/debug/java/expo/modules/devlauncher/compose/screens/CrashReportScreen.kt

@@ -1,29 +1,17 @@
 package expo.modules.devlauncher.compose.screens
 
-import androidx.compose.foundation.ScrollState
-import androidx.compose.foundation.horizontalScroll
 import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.safeDrawingPadding
-import androidx.compose.foundation.rememberScrollState
-import androidx.compose.foundation.verticalScroll
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.drawWithContent
-import androidx.compose.ui.geometry.Offset
-import androidx.compose.ui.geometry.Size
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
-import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.Dp
-import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
-import expo.modules.devlauncher.compose.DefaultScreenContainer
+import expo.modules.devlauncher.compose.ui.DefaultScreenContainer
 import expo.modules.devlauncher.compose.ui.ActionButton
+import expo.modules.devlauncher.compose.ui.StackTrace
 import expo.modules.devmenu.compose.newtheme.NewAppTheme
 import expo.modules.devmenu.compose.primitives.NewText
 import expo.modules.devmenu.compose.utils.copyToClipboard
@@ -31,94 +19,6 @@ import org.json.JSONObject
 import java.text.SimpleDateFormat
 import java.util.Date
 
-@Composable
-fun Modifier.verticalScrollbar(
-  scrollState: ScrollState,
-  width: Dp = 6.dp,
-  scrollBarColor: Color = Color.LightGray,
-  endPadding: Float = 12f
-): Modifier {
-  return drawWithContent {
-    drawContent()
-
-    val viewportHeight = this.size.height
-    val totalContentHeight = scrollState.maxValue.toFloat() + viewportHeight
-    val scrollValue = scrollState.value.toFloat()
-
-    val scrollBarHeight =
-      (viewportHeight / totalContentHeight) * viewportHeight
-    val scrollBarStartOffset =
-      (scrollValue / totalContentHeight) * viewportHeight
-
-    drawRoundRect(
-      color = scrollBarColor,
-      topLeft = Offset(this.size.width - endPadding, scrollBarStartOffset),
-      size = Size(width.toPx(), scrollBarHeight)
-    )
-  }
-}
-
-@Composable
-fun Modifier.horizontalScrollbar(
-  scrollState: ScrollState,
-  width: Dp = 6.dp,
-  scrollBarColor: Color = Color.LightGray,
-  endPadding: Float = 12f
-): Modifier {
-  return drawWithContent {
-    drawContent()
-
-    val viewportWidth = this.size.width
-    val totalContentWidth = scrollState.maxValue.toFloat() + viewportWidth
-    val scrollValue = scrollState.value.toFloat()
-
-    val scrollBarHeight =
-      (viewportWidth / totalContentWidth) * viewportWidth
-    val scrollBarStartOffset =
-      (scrollValue / totalContentWidth) * viewportWidth
-
-    drawRoundRect(
-      color = scrollBarColor,
-      topLeft = Offset(scrollBarStartOffset, this.size.height - endPadding),
-      size = Size(scrollBarHeight, width.toPx())
-    )
-  }
-}
-
-@Composable
-fun StackTrace(
-  stack: String,
-  modifier: Modifier = Modifier
-) {
-  val verticalScrollState = rememberScrollState()
-  val horizontalScrollState = rememberScrollState()
-  Box(
-    modifier = Modifier
-      .verticalScrollbar(verticalScrollState)
-      .horizontalScrollbar(horizontalScrollState)
-      .then(modifier)
-  ) {
-    Box(
-      Modifier
-        .verticalScroll(verticalScrollState)
-        .horizontalScroll(horizontalScrollState)
-
-    ) {
-      Box(modifier = Modifier.padding(horizontal = NewAppTheme.spacing.`4`)) {
-        NewText(
-          stack,
-          style = TextStyle.Default.merge(
-            lineHeight = 16.sp,
-            fontSize = 10.sp,
-            fontFamily = NewAppTheme.font.mono,
-            fontWeight = FontWeight.Light
-          )
-        )
-      }
-    }
-  }
-}
-
 @Composable
 fun CrashReportScreen(
   timestamp: Long,
@@ -159,35 +59,15 @@ fun CrashReportScreen(
         }
       )
 
-      Column(verticalArrangement = Arrangement.spacedBy(NewAppTheme.spacing.`1`)) {
-        NewText(
-          "Occurred:",
-          style = NewAppTheme.font.lg.merge(
-            fontWeight = FontWeight.Medium
-          )
-        )
-
-        NewText(
-          SimpleDateFormat.getDateTimeInstance().format(Date(timestamp)).toString(),
-          style = NewAppTheme.font.md,
-          color = NewAppTheme.colors.text.secondary
-        )
-      }
-
-      Column(verticalArrangement = Arrangement.spacedBy(NewAppTheme.spacing.`1`)) {
-        NewText(
-          "Reason:",
-          style = NewAppTheme.font.lg.merge(
-            fontWeight = FontWeight.Medium
-          )
-        )
+      KeyValueRow(
+        "Occurred:",
+        SimpleDateFormat.getDateTimeInstance().format(Date(timestamp)).toString()
+      )
 
-        NewText(
-          message,
-          style = NewAppTheme.font.md,
-          color = NewAppTheme.colors.text.secondary
-        )
-      }
+      KeyValueRow(
+        "Reason:",
+        message
+      )
     }
 
     Column(
@@ -207,6 +87,24 @@ fun CrashReportScreen(
   }
 }
 
+@Composable
+private fun KeyValueRow(text: String, value: String) {
+  Column(verticalArrangement = Arrangement.spacedBy(NewAppTheme.spacing.`1`)) {
+    NewText(
+      text,
+      style = NewAppTheme.font.lg.merge(
+        fontWeight = FontWeight.Medium
+      )
+    )
+
+    NewText(
+      value,
+      style = NewAppTheme.font.md,
+      color = NewAppTheme.colors.text.secondary
+    )
+  }
+}
+
 @Composable
 @Preview(showBackground = true)
 fun CrashReportScreenPreview() {

package/android/src/debug/java/expo/modules/devlauncher/compose/screens/ErrorScreen.kt

@@ -1,6 +1,7 @@
 package expo.modules.devlauncher.compose.screens
 
 import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.navigationBarsPadding
@@ -12,9 +13,9 @@ import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
 import expo.modules.devlauncher.compose.models.ErrorAction
 import expo.modules.devlauncher.compose.ui.ActionButton
+import expo.modules.devlauncher.compose.ui.StackTrace
 import expo.modules.devmenu.compose.newtheme.NewAppTheme
 import expo.modules.devmenu.compose.primitives.NewText
-import expo.modules.devmenu.compose.primitives.Spacer
 
 @Composable
 fun ErrorScreen(
@@ -27,8 +28,14 @@ fun ErrorScreen(
       .fillMaxSize()
       .statusBarsPadding()
   ) {
-    Column(modifier = Modifier.padding(horizontal = NewAppTheme.spacing.`2`)) {
-      Spacer(NewAppTheme.spacing.`3`)
+    Column(
+      verticalArrangement = Arrangement.spacedBy(NewAppTheme.spacing.`3`),
+      modifier = Modifier
+        .padding(
+          horizontal = NewAppTheme.spacing.`2`,
+          vertical = NewAppTheme.spacing.`3`
+        )
+    ) {
       NewText(
         "There was a problem loading the project.",
         style = NewAppTheme.font.lg.merge(
@@ -36,10 +43,7 @@ fun ErrorScreen(
         )
       )
 
-      Spacer(NewAppTheme.spacing.`3`)
       NewText("This development build encountered the following error.")
-
-      Spacer(NewAppTheme.spacing.`3`)
     }
 
     StackTrace(
@@ -49,6 +53,7 @@ fun ErrorScreen(
     )
 
     Column(
+      verticalArrangement = Arrangement.spacedBy(NewAppTheme.spacing.`2`),
       modifier = Modifier
         .background(NewAppTheme.colors.background.default)
         .padding(NewAppTheme.spacing.`3`)
@@ -64,8 +69,6 @@ fun ErrorScreen(
         }
       )
 
-      Spacer(NewAppTheme.spacing.`2`)
-
       ActionButton(
         "Go To Home",
         foreground = NewAppTheme.colors.buttons.secondary.foreground,

package/android/src/debug/java/expo/modules/devlauncher/compose/screens/HomeScreen.kt

@@ -8,12 +8,10 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
-import com.composables.core.rememberDialogState
 import com.composeunstyled.Button
-import expo.modules.devlauncher.compose.DefaultScreenContainer
+import expo.modules.devlauncher.compose.ui.DefaultScreenContainer
 import expo.modules.devlauncher.compose.models.HomeAction
 import expo.modules.devlauncher.compose.models.HomeState
 import expo.modules.devlauncher.compose.primitives.Accordion
@@ -22,6 +20,7 @@ import expo.modules.devlauncher.compose.ui.AppLoadingErrorDialog
 import expo.modules.devlauncher.compose.ui.DevelopmentSessionActions
 import expo.modules.devlauncher.compose.ui.DevelopmentSessionSection
 import expo.modules.devlauncher.compose.ui.RunningAppCard
+import expo.modules.devlauncher.compose.ui.rememberAppLoadingErrorDialogState
 import expo.modules.devlauncher.launcher.DevLauncherAppEntry
 import expo.modules.devlauncher.launcher.errors.DevLauncherErrorInstance
 import expo.modules.devlauncher.services.PackagerInfo
@@ -59,21 +58,8 @@ fun HomeScreen(
   onProfileClick: () -> Unit,
   onDevServersClick: () -> Unit
 ) {
-  val hasPackager = state.runningPackagers.isNotEmpty()
-  val errorDialogState = rememberDialogState(initiallyVisible = false)
   val scrollState = rememberScrollState()
-
-  LaunchedEffect(state.loadingError) {
-    if (state.loadingError != null) {
-      errorDialogState.visible = true
-    }
-  }
-
-  LaunchedEffect(errorDialogState.visible) {
-    if (!errorDialogState.visible) {
-      onAction(HomeAction.ClearLoadingError)
-    }
-  }
+  val errorDialogState = rememberAppLoadingErrorDialogState(state, onAction)
 
   AppLoadingErrorDialog(
     errorDialogState,
@@ -112,59 +98,90 @@ fun HomeScreen(
 
       Spacer(NewAppTheme.spacing.`3`)
 
-      if (hasPackager) {
-        Column(
-          verticalArrangement = Arrangement.spacedBy(NewAppTheme.spacing.`2`)
-        ) {
-          for (packager in state.runningPackagers) {
-            RunningAppCard(
-              appIp = packager.url,
-              appName = packager.description
-            ) {
-              onAction(HomeAction.OpenApp(packager.url))
-            }
-          }
-        }
+      val runningPackagers = state.runningPackagers
+      if (runningPackagers.isNotEmpty()) {
+        LocalPackagers(
+          state.isFetchingPackagers,
+          runningPackagers,
+          onAction
+        )
+      } else {
+        DevelopmentSessionSection(state.isFetchingPackagers, onAction)
+      }
+
+      Spacer(NewAppTheme.spacing.`6`)
 
-        Spacer(NewAppTheme.spacing.`2`)
+      RecentlyOpenedApps(
+        state.recentlyOpenedApps,
+        onAction
+      )
+    }
+  }
+}
 
-        Accordion(
-          "New development server",
-          initialState = false,
-          modifier = Modifier
-            .fillMaxWidth()
+@Composable
+private fun LocalPackagers(
+  isFetchingPackagers: Boolean,
+  runningPackagers: Set<PackagerInfo>,
+  onAction: (HomeAction) -> Unit
+) {
+  Column(
+    verticalArrangement = Arrangement.spacedBy(NewAppTheme.spacing.`2`)
+  ) {
+    Column(
+      verticalArrangement = Arrangement.spacedBy(NewAppTheme.spacing.`2`)
+    ) {
+      for (packager in runningPackagers) {
+        RunningAppCard(
+          appIp = packager.url,
+          appName = packager.description
         ) {
-          DevelopmentSessionActions(state.isFetchingPackagers, onAction)
+          onAction(HomeAction.OpenApp(packager.url))
         }
-      } else {
-        DevelopmentSessionSection(state.isFetchingPackagers, onAction)
       }
+    }
 
-      if (state.recentlyOpenedApps.isNotEmpty()) {
-        Spacer(NewAppTheme.spacing.`6`)
+    Accordion(
+      "New development server",
+      initialState = false,
+      modifier = Modifier
+        .fillMaxWidth()
+    ) {
+      DevelopmentSessionActions(isFetchingPackagers, onAction)
+    }
+  }
+}
 
-        Row(
-          horizontalArrangement = Arrangement.SpaceBetween,
-          modifier = Modifier.fillMaxWidth()
-        ) {
-          Section.Header("RECENTLY OPENED")
+@Composable
+private fun RecentlyOpenedApps(
+  recentlyOpenedApps: List<DevLauncherAppEntry>,
+  onAction: (HomeAction) -> Unit
+) {
+  if (recentlyOpenedApps.isEmpty()) {
+    return
+  }
 
-          Section.Button("RESET", { onAction(HomeAction.ResetRecentlyOpenedApps) })
-        }
+  Column(
+    verticalArrangement = Arrangement.spacedBy(NewAppTheme.spacing.`3`)
+  ) {
+    Row(
+      horizontalArrangement = Arrangement.SpaceBetween,
+      modifier = Modifier.fillMaxWidth()
+    ) {
+      Section.Header("RECENTLY OPENED")
 
-        Spacer(NewAppTheme.spacing.`3`)
+      Section.Button("RESET", { onAction(HomeAction.ResetRecentlyOpenedApps) })
+    }
 
-        Column(
-          verticalArrangement = Arrangement.spacedBy(NewAppTheme.spacing.`1`)
+    Column(
+      verticalArrangement = Arrangement.spacedBy(NewAppTheme.spacing.`1`)
+    ) {
+      for (packager in recentlyOpenedApps) {
+        RunningAppCard(
+          appIp = packager.url,
+          appName = packager.name
         ) {
-          for (packager in state.recentlyOpenedApps) {
-            RunningAppCard(
-              appIp = packager.url,
-              appName = packager.name
-            ) {
-              onAction(HomeAction.OpenApp(packager.url))
-            }
-          }
+          onAction(HomeAction.OpenApp(packager.url))
         }
       }
     }
@@ -190,6 +207,14 @@ fun HomeScreenPreview() {
           )
         ),
         recentlyOpenedApps = listOf(
+          DevLauncherAppEntry(
+            timestamp = 1752249592809L,
+            name = "BareExpo",
+            url = "http://10.0.2.2:8081",
+            isEASUpdate = false,
+            updateMessage = null,
+            branchName = null
+          ),
           DevLauncherAppEntry(
             timestamp = 1752249592809L,
             name = "BareExpo",

package/android/src/debug/java/expo/modules/devlauncher/compose/screens/NoUpdatesScreen.kt

@@ -22,7 +22,7 @@ import androidx.compose.ui.text.withLink
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import expo.modules.devlauncher.R
-import expo.modules.devlauncher.compose.DefaultScreenContainer
+import expo.modules.devlauncher.compose.ui.DefaultScreenContainer
 import expo.modules.devlauncher.compose.ui.AppHeader
 import expo.modules.devmenu.compose.newtheme.NewAppTheme
 import expo.modules.devmenu.compose.primitives.NewText