Proper contact alias and (un)read messages handling

This MR resolves two issues related to displaying contact aliases. Apart from that, messages shown on screen are now marked as read (in an later to be refined way) and a proper unread message counter has been added to the contact list.

Closes #101 (closed), #102 (closed), #108 (closed)

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

 package org.briarproject.briar.desktop.contact
 
+import androidx.compose.desktop.ui.tooling.preview.Preview
 import androidx.compose.foundation.Canvas
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.offset
 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.foundation.shape.RoundedCornerShape
 import androidx.compose.material.Card
 import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Surface
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.drawscope.withTransform
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import org.briarproject.bramble.api.contact.ContactId
+import org.briarproject.bramble.api.identity.AuthorId
+import org.briarproject.briar.desktop.theme.DarkColors
 import org.briarproject.briar.desktop.theme.outline
 import org.briarproject.briar.desktop.theme.selectedCard
 import org.briarproject.briar.desktop.theme.surfaceVariant
@@ -26,6 +38,29 @@ import org.briarproject.briar.desktop.ui.Constants.HEADER_SIZE
 import org.briarproject.briar.desktop.ui.HorizontalDivider
 import org.briarproject.briar.desktop.utils.InternationalizationUtils.i18n
 import org.briarproject.briar.desktop.utils.TimeUtils.getFormattedTimestamp
+import java.time.Instant
+
+@Preview
+@Composable
+fun PreviewContactCard() {
+    MaterialTheme(colors = DarkColors) {
+        Surface {
+            ContactCard(
+                ContactItem(
+                    contactId = ContactId(0),
+                    authorId = AuthorId(ByteArray(0)),
+                    name = "Paul",
+                    alias = "UI Master",
+                    isConnected = true,
+                    isEmpty = false,
+                    unread = 3,
+                    timestamp = Instant.now().epochSecond
+                ),
+                {}, false
+            )
+        }
+    }
+}
 
 @Composable
 fun ContactCard(
@@ -35,7 +70,6 @@ fun ContactCard(
 ) {
     val bgColor = if (selected) MaterialTheme.colors.selectedCard else MaterialTheme.colors.surfaceVariant
     val outlineColor = MaterialTheme.colors.outline
-    val briarPrimary = MaterialTheme.colors.primary
     val briarSecondary = MaterialTheme.colors.secondary
     val briarSurfaceVar = MaterialTheme.colors.surfaceVariant
 
@@ -47,24 +81,34 @@ fun ContactCard(
     ) {
         Row(horizontalArrangement = Arrangement.SpaceBetween) {
             Row(modifier = Modifier.align(Alignment.CenterVertically).padding(horizontal = 16.dp)) {
-                // TODO Pull profile pictures
-                ProfileCircle(36.dp, contactItem.contact.author.id.bytes)
-                // Draw notification badges
-                if (contactItem.unread > 0) {
-                    Canvas(
-                        modifier = Modifier.align(Alignment.CenterVertically),
-                        onDraw = {
-                            val size = 10.dp.toPx()
-                            withTransform({ translate(left = -6f, top = -12f) }) {
-                                drawCircle(color = outlineColor, radius = (size + 2.dp.toPx()) / 2f)
-                                drawCircle(color = briarPrimary, radius = size / 2f)
-                            }
+                Box(modifier = Modifier.align(Alignment.CenterVertically)) {
+                    // TODO Pull profile pictures
+                    ProfileCircle(36.dp, contactItem.authorId.bytes)
+                    // Draw new message counter
+                    if (contactItem.unread > 0) {
+                        Box(
+                            modifier = Modifier
+                                .align(Alignment.TopEnd)
+                                .offset(6.dp, (-6).dp)
+                                .height(20.dp)
+                                .widthIn(min = 20.dp, max = Dp.Infinity)
+                                .border(2.dp, outlineColor, CircleShape)
+                                .background(briarSecondary, CircleShape)
+                                .padding(horizontal = 6.dp)
+                        ) {
+                            Text(
+                                modifier = Modifier.align(Alignment.Center),
+                                fontSize = 8.sp,
+                                textAlign = TextAlign.Center,
+                                text = contactItem.unread.toString(),
+                                maxLines = 1
+                            )
                         }
-                    )
+                    }
                 }
                 Column(modifier = Modifier.align(Alignment.CenterVertically).padding(start = 12.dp)) {
                     Text(
-                        contactItem.contact.author.name,
+                        contactItem.displayName,
                         fontSize = 14.sp,
                         modifier = Modifier.align(Alignment.Start).padding(bottom = 2.dp)
                     )