When no contacts added yet, show special welcome-screen

src/main/kotlin/org/briarproject/briar/desktop/contact/ContactList.kt

@@ -17,14 +17,9 @@ import androidx.compose.foundation.rememberScrollbarAdapter
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Scaffold
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
-import org.briarproject.briar.desktop.contact.add.remote.AddContactDialog
 import org.briarproject.briar.desktop.theme.surfaceVariant
 import org.briarproject.briar.desktop.ui.Constants.COLUMN_WIDTH
 import org.briarproject.briar.desktop.ui.Constants.HEADER_SIZE
@@ -36,10 +31,8 @@ fun ContactList(
     selectContact: (BaseContactItem) -> Unit,
     filterBy: String,
     setFilterBy: (String) -> Unit,
+    onContactAdd: () -> Unit,
 ) {
-    var isContactDialogVisible by remember { mutableStateOf(false) }
-    if (isContactDialogVisible) AddContactDialog(onClose = { isContactDialogVisible = false })
-
     val scrollState = rememberLazyListState()
 
     Scaffold(
@@ -52,7 +45,7 @@ fun ContactList(
                 SearchTextField(
                     filterBy,
                     onValueChange = setFilterBy,
-                    onContactAdd = { isContactDialogVisible = true }
+                    onContactAdd = onContactAdd,
                 )
             }
         },

src/main/kotlin/org/briarproject/briar/desktop/conversation/PrivateMessageScreen.kt

 package org.briarproject.briar.desktop.conversation
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
@@ -10,18 +10,29 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.widthIn
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material.Icon
+import androidx.compose.material.IconButton
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Surface
 import androidx.compose.material.Text
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.PersonAdd
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import org.briarproject.briar.desktop.contact.ContactList
 import org.briarproject.briar.desktop.contact.ContactListViewModel
 import org.briarproject.briar.desktop.contact.PendingContactIdWrapper
 import org.briarproject.briar.desktop.contact.RealContactIdWrapper
+import org.briarproject.briar.desktop.contact.add.remote.AddContactDialog
 import org.briarproject.briar.desktop.ui.BriarLogo
 import org.briarproject.briar.desktop.ui.Constants.PARAGRAPH_WIDTH
 import org.briarproject.briar.desktop.ui.VerticalDivider
@@ -32,13 +43,22 @@ import org.briarproject.briar.desktop.viewmodel.viewModel
 fun PrivateMessageScreen(
     viewModel: ContactListViewModel = viewModel(),
 ) {
+    var isContactDialogVisible by remember { mutableStateOf(false) }
+    if (isContactDialogVisible) AddContactDialog(onClose = { isContactDialogVisible = false })
+
+    if (viewModel.contactList.value.isEmpty()) {
+        NoContactsYet(onContactAdd = { isContactDialogVisible = true })
+        return
+    }
+
     Row(modifier = Modifier.fillMaxWidth()) {
         ContactList(
             viewModel.contactList.value,
             viewModel::isSelected,
             viewModel::selectContact,
             viewModel.filterBy.value,
-            viewModel::setFilterBy
+            viewModel::setFilterBy,
+            onContactAdd = { isContactDialogVisible = true }
         )
         VerticalDivider()
         Column(modifier = Modifier.weight(1f).fillMaxHeight()) {
@@ -57,35 +77,56 @@ fun PrivateMessageScreen(
     }
 }
 
+@Composable
+fun NoContactsYet(onContactAdd: () -> Unit) = Explainer(
+    headline = i18n("welcome.title"),
+    text = i18n("welcome.text"),
+) {
+    IconButton(
+        onClick = onContactAdd,
+        modifier = Modifier.padding(end = 10.dp).size(32.dp)
+            .background(MaterialTheme.colors.primary, CircleShape)
+    ) {
+        Icon(
+            Icons.Filled.PersonAdd,
+            i18n("access.contacts.add"),
+            tint = Color.White,
+            modifier = Modifier.size(20.dp)
+        )
+    }
+}
+
 @Composable
 fun NoContactSelected() = Explainer(
     headline = i18n("contacts.none_selected.title"),
-    content = i18n("contacts.none_selected.hint"),
+    text = i18n("contacts.none_selected.hint"),
 )
 
 @Composable
 fun PendingContactSelected() = Explainer(
     headline = i18n("contacts.pending_selected.title"),
-    content = i18n("contacts.pending_selected.hint"),
+    text = i18n("contacts.pending_selected.hint"),
 )
 
 @Composable
-fun Explainer(headline: String, content: String) = Surface(color = MaterialTheme.colors.background) {
-    Column(
-        modifier = Modifier.padding(16.dp).fillMaxSize(),
-        verticalArrangement = Arrangement.Center,
-        horizontalAlignment = Alignment.CenterHorizontally
-    ) {
-        BriarLogo(modifier = Modifier.size(200.dp))
-        Text(
-            text = headline,
-            modifier = Modifier.padding(PaddingValues(top = 15.dp, bottom = 5.dp)),
-            style = MaterialTheme.typography.h5
-        )
-        Text(
-            text = content,
-            modifier = Modifier.padding(PaddingValues(top = 5.dp, bottom = 15.dp)).widthIn(max = PARAGRAPH_WIDTH),
-            style = MaterialTheme.typography.body2.copy(textAlign = TextAlign.Center)
-        )
+fun Explainer(headline: String, text: String, content: @Composable () -> Unit = {}) =
+    Surface(color = MaterialTheme.colors.background) {
+        Column(
+            modifier = Modifier.padding(16.dp).fillMaxSize(),
+            verticalArrangement = Arrangement.Center,
+            horizontalAlignment = Alignment.CenterHorizontally
+        ) {
+            BriarLogo(modifier = Modifier.size(200.dp))
+            Text(
+                text = headline,
+                modifier = Modifier.padding(top = 15.dp, bottom = 5.dp),
+                style = MaterialTheme.typography.h5
+            )
+            Text(
+                text = text,
+                modifier = Modifier.padding(top = 5.dp, bottom = 15.dp).widthIn(max = PARAGRAPH_WIDTH),
+                style = MaterialTheme.typography.body2.copy(textAlign = TextAlign.Center)
+            )
+            content()
+        }
     }
-}

src/main/resources/strings/BriarDesktop.properties

@@ -106,6 +106,10 @@ main.help.data=The directory where Briar will store its files. Default: {0}
 main.help.tor.port.socks=Tor Socks Port
 main.help.tor.port.control=Tor Control Port
 
+# Welcome
+welcome.title=Welcome to Briar
+welcome.text=You don't have any contacts yet. Tap the + icon to add a contact:
+
 # Miscellaneous
 cancel=Cancel
 delete=Delete