Add modifier parameter to composables

For context, see:
https://android.googlesource.com/platform/frameworks/support/+/androidx-main/compose/docs/compose-api-guidelines.md#elements-accept-and-respect-a-modifier-parameter

> Element functions MUST accept a parameter of type Modifier.
> This parameter MUST be named modifier and MUST appear as the
> first optional parameter in the element function's parameter list

app/src/main/java/dev/lonami/talaria/TalariaApp.kt

@@ -1,13 +1,19 @@
 package dev.lonami.talaria
 
 import androidx.annotation.StringRes
-import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.*
 import androidx.compose.material.*
 import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.ArrowBack
+import androidx.compose.material.icons.filled.*
 import androidx.compose.runtime.*
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
 import androidx.navigation.compose.NavHost
 import androidx.navigation.compose.composable
 import androidx.navigation.compose.currentBackStackEntryAsState
@@ -16,6 +22,7 @@ import dev.lonami.talaria.bindings.Native
 import dev.lonami.talaria.ui.screens.ChatScreen
 import dev.lonami.talaria.ui.screens.DialogScreen
 import dev.lonami.talaria.ui.screens.LoginScreen
+import kotlinx.coroutines.launch
 
 enum class TalariaScreen(@StringRes val title: Int) {
     Login(title = R.string.app_name),
@@ -23,8 +30,94 @@ enum class TalariaScreen(@StringRes val title: Int) {
     Chat(title = R.string.chat),
 }
 
+enum class DrawerAction {
+    SelectAccount,
+    AddAccount,
+    SavedMessages,
+    Contacts,
+    NewChat,
+    Settings,
+    Help,
+}
+
 @Composable
-fun TalariaAppBar(currentScreen: TalariaScreen, canNavigateBack: Boolean, navigateUp: () -> Unit) {
+fun DrawerAction(
+    icon: ImageVector,
+    text: String,
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    Row(
+        modifier = modifier
+            .clickable(onClick = onClick)
+            .fillMaxWidth()
+            .padding(0.dp, 8.dp)
+    ) {
+        Icon(imageVector = icon, contentDescription = null)
+        Spacer(modifier = Modifier.width(8.dp))
+        Text(text)
+    }
+}
+
+@Composable
+fun Drawer(onSelect: (DrawerAction) -> Unit, modifier: Modifier = Modifier) {
+    Column(
+        modifier = modifier
+            .fillMaxSize()
+            .padding(24.dp, 48.dp)
+    ) {
+        Image(
+            painter = painterResource(R.drawable.ic_launcher_foreground),
+            contentDescription = "App Icon"
+        )
+        DrawerAction(
+            icon = Icons.Filled.AccountBox,
+            text = "Main Account",
+            onClick = { onSelect(DrawerAction.SelectAccount) }
+        )
+        DrawerAction(
+            icon = Icons.Filled.Add,
+            text = "Add Account",
+            onClick = { onSelect(DrawerAction.AddAccount) }
+        )
+        Divider()
+        DrawerAction(
+            icon = Icons.Filled.Star,
+            text = "Saved Messages",
+            onClick = { onSelect(DrawerAction.SavedMessages) }
+        )
+        DrawerAction(
+            icon = Icons.Filled.Call,
+            text = "Contacts",
+            onClick = { onSelect(DrawerAction.Contacts) }
+        )
+        DrawerAction(
+            icon = Icons.Filled.Create,
+            text = "New Chat",
+            onClick = { onSelect(DrawerAction.NewChat) }
+        )
+        Divider()
+        DrawerAction(
+            icon = Icons.Filled.Settings,
+            text = "Settings",
+            onClick = { onSelect(DrawerAction.Settings) }
+        )
+        DrawerAction(
+            icon = Icons.Filled.Info,
+            text = "Help",
+            onClick = { onSelect(DrawerAction.Help) }
+        )
+    }
+}
+
+@Composable
+fun TalariaAppBar(
+    currentScreen: TalariaScreen,
+    canNavigateBack: Boolean,
+    navigateUp: () -> Unit,
+    openDrawer: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
     TopAppBar(
         title = { Text(stringResource(currentScreen.title)) },
         navigationIcon = {
@@ -35,13 +128,20 @@ fun TalariaAppBar(currentScreen: TalariaScreen, canNavigateBack: Boolean, naviga
                         contentDescription = stringResource(R.string.back_button)
                     )
                 }
+            } else {
+                IconButton(onClick = openDrawer) {
+                    Icon(
+                        imageVector = Icons.Filled.Menu,
+                        contentDescription = stringResource(androidx.compose.ui.R.string.navigation_menu)
+                    )
+                }
             }
         }
     )
 }
 
 @Composable
-fun TalariaApp() {
+fun TalariaApp(modifier: Modifier = Modifier) {
     val navController = rememberNavController()
     val backStackEntry by navController.currentBackStackEntryAsState()
     val currentScreen =
@@ -50,15 +150,36 @@ fun TalariaApp() {
     val loggedIn by remember { mutableStateOf(!Native.needLogin()) }
     var selectedDialog by remember { mutableStateOf("") }
 
+    val drawerState = rememberDrawerState(DrawerValue.Closed)
+    val scope = rememberCoroutineScope()
+    val toggleDrawer = { open: Boolean ->
+        scope.launch {
+            if (open) {
+                drawerState.open()
+            } else {
+                drawerState.close()
+            }
+        }
+    }
+
     Scaffold(
+        modifier = modifier,
         topBar = {
             TalariaAppBar(
                 currentScreen,
                 canNavigateBack = navController.previousBackStackEntry != null,
-                navigateUp = { navController.navigateUp() }
+                navigateUp = { navController.navigateUp() },
+                openDrawer = { toggleDrawer(drawerState.isClosed) }
             )
         }
     ) { innerPadding ->
+        ModalDrawer(
+            drawerState = drawerState,
+            gesturesEnabled = drawerState.isOpen,
+            drawerContent = {
+                Drawer(onSelect = {})
+            }) {
+
             NavHost(
                 navController = navController,
                 startDestination = if (loggedIn) {
@@ -85,3 +206,23 @@ fun TalariaApp() {
             }
         }
     }
+}
+
+@Preview
+@Composable
+fun TopBarPreview() {
+    TalariaAppBar(
+        currentScreen = TalariaScreen.Dialog,
+        canNavigateBack = false,
+        navigateUp = {},
+        openDrawer = {},
+    )
+}
+
+@Preview
+@Composable
+fun NavDrawerPreview() {
+    Surface {
+        Drawer(onSelect = {})
+    }
+}

app/src/main/java/dev/lonami/talaria/ui/screens/ChatScreen.kt

@@ -25,10 +25,10 @@ import dev.lonami.talaria.ui.theme.TalariaTheme
 import kotlinx.coroutines.launch
 
 @Composable
-fun MessageCard(message: Message) {
+fun MessageCard(message: Message, modifier: Modifier = Modifier) {
     Card(
         elevation = 4.dp,
-        modifier = Modifier
+        modifier = modifier
             .fillMaxWidth()
             .padding(8.dp)
     ) {
@@ -44,8 +44,8 @@ fun MessageCard(message: Message) {
 }
 
 @Composable
-fun MessageList(messages: List<Message>, modifier: Modifier, listState: LazyListState) {
+fun MessageList(messages: List<Message>, listState: LazyListState, modifier: Modifier = Modifier) {
-    LazyColumn(modifier, state = listState) {
+    LazyColumn(modifier = modifier, state = listState) {
         items(messages.size) { MessageCard(messages[it]) }
     }
 }
@@ -54,9 +54,10 @@ fun MessageList(messages: List<Message>, modifier: Modifier, listState: LazyList
 fun MessageInputField(
     messageText: String,
     onMessageChanged: (String) -> Unit,
-    onSendMessage: () -> Unit
+    onSendMessage: () -> Unit,
+    modifier: Modifier = Modifier,
 ) {
-    Row {
+    Row(modifier = modifier) {
         TextField(
             messageText,
             placeholder = { Text(stringResource(R.string.write_message)) },
@@ -78,13 +79,17 @@ fun MessageInputField(
 }
 
 @Composable
-fun ChatScreen(selectedDialog: String, chatViewModel: ChatViewModel = viewModel()) {
+fun ChatScreen(
+    selectedDialog: String,
+    modifier: Modifier = Modifier,
+    chatViewModel: ChatViewModel = viewModel(),
+) {
     val chatUiState by chatViewModel.uiState.collectAsState()
     var messageText by remember { mutableStateOf("") }
     val messageListState = rememberLazyListState()
     val coroutineScope = rememberCoroutineScope()
 
-    Column(modifier = Modifier.fillMaxSize()) {
+    Column(modifier = modifier.fillMaxSize()) {
         MessageList(
             chatUiState.messages,
             modifier = Modifier.weight(1.0f),

app/src/main/java/dev/lonami/talaria/ui/screens/DialogScreen.kt

@@ -31,9 +31,9 @@ import java.time.format.DateTimeFormatter
 import java.time.format.FormatStyle
 
 @Composable
-fun Dialog(dialog: Dialog, onDialogSelected: () -> Unit) {
+fun Dialog(dialog: Dialog, onDialogSelected: () -> Unit, modifier: Modifier = Modifier) {
     Row(
-        modifier = Modifier
+        modifier = modifier
             .padding(4.dp)
             .clickable(onClick = onDialogSelected)
     ) {
@@ -98,8 +98,12 @@ fun Dialog(dialog: Dialog, onDialogSelected: () -> Unit) {
 }
 
 @Composable
-fun DialogList(dialogs: List<Dialog>, onDialogSelected: (String) -> Unit) {
+fun DialogList(
-    LazyColumn {
+    dialogs: List<Dialog>,
+    onDialogSelected: (String) -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    LazyColumn(modifier = modifier) {
         items(dialogs.size) {
             Dialog(dialogs[it], onDialogSelected = {
                 onDialogSelected(dialogs[it].id)
@@ -112,10 +116,11 @@ fun DialogList(dialogs: List<Dialog>, onDialogSelected: (String) -> Unit) {
 @Composable
 fun DialogScreen(
     onDialogSelected: (String) -> Unit,
-    dialogViewModel: DialogViewModel = viewModel()
+    modifier: Modifier = Modifier,
+    dialogViewModel: DialogViewModel = viewModel(),
 ) {
     val dialogUiState by dialogViewModel.uiState.collectAsState()
-    Surface {
+    Surface(modifier = modifier) {
         DialogList(dialogUiState.dialogs, onDialogSelected = onDialogSelected)
     }
 }

app/src/main/java/dev/lonami/talaria/ui/screens/LoginScreen.kt

@@ -30,9 +30,15 @@ fun isPhoneValid(phone: String): Boolean = phone.trim('+', ' ').isNotEmpty()
 fun isLoginCodeValid(code: String): Boolean = code.trim().count { it.isDigit() } == 5
 
 @Composable
-fun PhoneInput(phone: String, onPhoneChanged: (String) -> Unit, onSendCode: () -> Unit) {
+fun PhoneInput(
+    phone: String,
+    onPhoneChanged: (String) -> Unit,
+    onSendCode: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
     val focusManager = LocalFocusManager.current
 
+    Column(modifier = modifier) {
         Text(stringResource(R.string.enter_phone))
         TextField(
             phone,
@@ -56,11 +62,18 @@ fun PhoneInput(phone: String, onPhoneChanged: (String) -> Unit, onSendCode: () -
             Text(stringResource(R.string.send_otp))
         }
     }
+}
 
 @Composable
-fun OtpInput(otp: String, onOtpChanged: (String) -> Unit, onConfirmOtp: () -> Unit) {
+fun OtpInput(
+    otp: String,
+    onOtpChanged: (String) -> Unit,
+    onConfirmOtp: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
     val focusManager = LocalFocusManager.current
 
+    Column(modifier = modifier) {
         Text(stringResource(R.string.enter_otp))
         TextField(
             otp,
@@ -84,9 +97,10 @@ fun OtpInput(otp: String, onOtpChanged: (String) -> Unit, onConfirmOtp: () -> Un
             Text(stringResource(R.string.do_login))
         }
     }
+}
 
 @Composable
-fun LoginScreen(onConfirmOtp: () -> Unit) {
+fun LoginScreen(onConfirmOtp: () -> Unit, modifier: Modifier = Modifier) {
     var stage by remember { mutableStateOf(LoginStage.ASK_PHONE) }
     var phone by remember { mutableStateOf("") }
     var otp by remember { mutableStateOf("") }
@@ -94,7 +108,7 @@ fun LoginScreen(onConfirmOtp: () -> Unit) {
     var tokenPtr by remember { mutableStateOf(0L) }
 
     Column(
-        modifier = Modifier
+        modifier = modifier
             .fillMaxSize()
             .padding(16.dp),
         verticalArrangement = Arrangement.Center