added more screenshots

Reply/README.md

@@ -18,6 +18,7 @@ This sample showcases:
 ## Screenshots
 
 <img src="screenshots/reply.gif"/>
+<img src="screenshots/reply_medium_and_large_tablet.png">
 
 ## Features
 
@@ -31,28 +32,32 @@ real-time whenever fold state changes to help us adjust our UI accordingly.
 
 #### [Material 3 navigation components](app/src/main/java/com/example/reply/ui/navigation/ReplyNavigationComponents.kt)
 The sample provides usage of  material navigation components depending on screen size and states. These components also are part of material guidelines for canonical layouts to improve user experience and ergonomics.
-* [`BottomNavigationBar`](app/src/main/java/com/example/reply/ui/navigation/ReplyNavigationComponents.kt#162) for compact devices.
-* [`NavigationRail`](app/src/main/java/com/example/reply/ui/navigation/ReplyNavigationComponents.kt#70) for medium size devices. It is also used along with [`ModalNavigationDrawer`](app/src/main/java/com/example/reply/ui/ReplyApp.kt#73) when user want to see more content.
-* [`PermanentNavigationDrawer`](app/src/main/java/com/example/reply/ui/ReplyApp.kt#153) for large devices.
-* Depending upon the different size and state of device correct [navigation type](app/src/main/java/com/example/reply/ui/ReplyApp.kt#71) is chosen dynamically. 
+* [`BottomNavigationBar`](app/src/main/java/com/example/reply/ui/navigation/ReplyNavigationComponents.kt#162) is used for compact devices with maximum of 5 navigation destinations. 
+* [`NavigationRail`](app/src/main/java/com/example/reply/ui/navigation/ReplyNavigationComponents.kt#70) is used for medium size devices. It is also used along with [`ModalNavigationDrawer`](app/src/main/java/com/example/reply/ui/ReplyApp.kt#73) when user want to see more content.
+* [`PermanentNavigationDrawer`](app/src/main/java/com/example/reply/ui/ReplyApp.kt#153) is used for large devices or desktops when we have enough space to show navigation drawer content always.
+* Depending upon the different size and state of device correct [navigation type](app/src/main/java/com/example/reply/ui/ReplyApp.kt#71) is chosen dynamically.
+  <img src="screenshots/reply_3_screens.pmg">
 
 #### [Material 3 Theming](app/src/main/java/com/example/reply/ui/theme)
 Reply is using brand new Material 3 [colors](app/src/main/java/com/example/reply/ui/theme/Color.kt), [typography](app/src/main/java/com/example/reoly/ui/theme/Type.kt) and [theming](app/src/main/java/com/example/reply/ui/theme/Theme.kt). It also supports both [light and dark mode]((app/src/main/java/com/example/reply/ui/theme/Theme.kt#95)) depending on system settings.
 [Material Theme builder](https://material-foundation.github.io/material-theme-builder/#/custom) is used to create material 3 theme and directly export it for Compose.
 
 #### [Dynamic theming/Material You](app/src/main/java/com/example/reply/ui/theme/Theme.kt#100)
 On Android 12+ Reply supports Material You dynamic color, which extracts a custom color scheme from the device wallpaper. For older version of android it falls back to defined light and dark [color schemes](aapp/src/main/java/com/example/reply/ui/theme/Theme.kt#34)
+<img src="screenshots/dynamic_theming.pmg">
 
 #### [Inbox Screen](app/src/main/java/com/example/reply/ui/ReplyListContent.kt)
-Similar to navigation type, depending on device's size and state correct [content type](app/src/main/java/com/example/reply/ui/ReplyApp.kt#72) is chosen, we can have [Inbox only](app/src/main/java/com/example/reply/ui/ReplyListContent.kt#91) or [Inbox and thread detail](app/src/main/java/com/example/reply/ui/ReplyListContent.kt#83) together  
+Similar to navigation type, depending on device's size and state correct [content type](app/src/main/java/com/example/reply/ui/ReplyApp.kt#72) is chosen, we can have [Inbox only](app/src/main/java/com/example/reply/ui/ReplyListContent.kt#91) or [Inbox and thread detail](app/src/main/java/com/example/reply/ui/ReplyListContent.kt#83) together. The content in inbox screen
+is adaptive and is switched between list only or list and details page depending on the screen size available.
+<img src="screenshots/reply_small_and_large_tablet.pmg">
 
 #### [FAB & Material 3 components](app/src/main/java/com/example/reply/ui/ReplyListContent.kt)
 Reply is using all material 3 components including different type of FAB for different screen size and states.
 * [`LargeFloatingActionButton`](app/src/main/java/com/example/reply/ui/ReplyListContent.kt#100) is used along with bottom navigation ber.
 * [`FloatingActionButton`](app/src/main/java/com/example/reply/ui/navigation/ReplyNavigationComponents.kt#87) is used with Navigation rail for medium to large tablets.
 * [`ExtendedFloatingActionButton`](app/src/main/java/com/example/reply/ui/navigation/ReplyNavigationComponents.kt#214) is used in Navigation drawer for large devices.
 
-## [Data](app/src/main/java/com/example/reply/data)
+#### [Data](app/src/main/java/com/example/reply/data)
 Reply has static local data providers for [email](app/src/main/java/com/example/reply/data/local/LocalEmailsDataProvider.kt) and [account](app/src/main/java/com/example/reply/data/local/LocalAccountsDataProvider.kt) data. It is also using repository pattern where [EmailRepository](app/src/main/java/com/example/reply/data/EmailsRepository.kt) 
 emits the flow of email from local data that is used in [ReplyHomeViewModel](app/src/main/java/com/example/reply/ui/ReplyHomeViewModel.kt) to observe 
 it in view model scope. ViewModel expose this data to ReplyApp composable via [state flow](app/src/main/java/com/example/reply/ui/ReplyHomeViewModel.kt#34).

Reply/app/src/main/java/com/example/reply/ui/ReplyListContent.kt

@@ -51,6 +51,7 @@ import androidx.compose.material3.LargeFloatingActionButton
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
@@ -77,6 +78,20 @@ fun ReplyInboxScreen(
     closeDetailScreen: () -> Unit,
     navigateToDetail: (Long) -> Unit
 ) {
+    /**
+     * When moving from LIST page to LIST_AND_DETAIL page on screen expand, set first email selected as default
+     * When moving from LIST_AND_DETAIL page to LIST page clear the selection and user should see LIST screen.
+     */
+    LaunchedEffect(key1 = contentType) {
+        if (contentType == ReplyContentType.LIST_AND_DETAIL && replyHomeUIState.selectedEmail == null) {
+            replyHomeUIState.emails.firstOrNull()?.let { firstEmail ->
+                navigateToDetail.invoke(firstEmail.id)
+            }
+        } else {
+            closeDetailScreen.invoke()
+        }
+    }
+
     val emailLazyListState = rememberLazyListState()
 
     if (contentType == ReplyContentType.LIST_AND_DETAIL) {
@@ -168,7 +183,7 @@ fun ReplyListAndDetailContent(
             modifier = Modifier.weight(1f),
             isFullScreen = false,
             email = replyHomeUIState.selectedEmail ?: replyHomeUIState.emails.first()
-        ) {}
+        )
     }
 }
 
@@ -177,7 +192,7 @@ fun ReplyEmailDetail(
     email: Email,
     isFullScreen: Boolean = true,
     modifier: Modifier = Modifier.fillMaxSize(),
-    onBackPressed: () -> Unit
+    onBackPressed: () -> Unit = {}
 ) {
     LazyColumn(modifier = modifier.background(MaterialTheme.colorScheme.inverseOnSurface)) {
         item { EmailDetailAppBar(email, isFullScreen) {

Reply/app/src/main/java/com/example/reply/ui/components/ReplyAppBars.kt

@@ -124,7 +124,11 @@ fun EmailDetailAppBar(
         IconButton(
             onClick = { /*TODO*/ },
         ) {
-            Icon(imageVector = Icons.Default.MoreVert, contentDescription = stringResource(id = R.string.more_options_button))
+            Icon(
+                imageVector = Icons.Default.MoreVert,
+                contentDescription = stringResource(id = R.string.more_options_button),
+                tint = MaterialTheme.colorScheme.onSurfaceVariant
+            )
         }
     }
 }