UserInfoSheet: Show user info in a bottom sheet

Signed-off-by: Aayush Gupta <aayushgupta219@gmail.com>

app/src/main/java/io/aayush/relabs/ui/components/PostItem.kt

@@ -5,6 +5,7 @@ import android.text.format.DateUtils
 import android.text.util.Linkify
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
@@ -68,7 +69,8 @@ fun PostItem(
     onReact: () -> Unit = {},
     onQuote: () -> Unit = {},
     onMultiQuote: () -> Unit = {},
-    onShare: () -> Unit = {}
+    onShare: () -> Unit = {},
+    onUserClicked: () -> Unit = {}
 ) {
     Box(
         modifier = Modifier
@@ -112,6 +114,7 @@ fun PostItem(
                     modifier = Modifier
                         .requiredSize(64.dp)
                         .clip(CircleShape)
+                        .clickable { onUserClicked() }
                 )
                 Spacer(modifier = Modifier.width(10.dp))
                 Column(

app/src/main/java/io/aayush/relabs/ui/components/UserInfoSheet.kt

@@ -0,0 +1,145 @@
+package io.aayush.relabs.ui.components
+
+import android.os.Build
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.isSystemInDarkTheme
+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.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.requiredSize
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Share
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.ModalBottomSheet
+import androidx.compose.material3.SheetState
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.ColorFilter
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import coil.ImageLoader
+import coil.compose.SubcomposeAsyncImage
+import coil.decode.GifDecoder
+import coil.decode.ImageDecoderDecoder
+import coil.request.ImageRequest
+import coil.size.Scale
+import io.aayush.relabs.R
+import io.aayush.relabs.network.data.user.User
+import io.aayush.relabs.ui.theme.XDAYellow
+
+@Composable
+@OptIn(ExperimentalMaterial3Api::class)
+fun UserInfoSheet(user: User, sheetState: SheetState, onDismissRequest: () -> Unit = {}) {
+    ModalBottomSheet(onDismissRequest = { onDismissRequest() }, sheetState = sheetState) {
+        UserHeader(user = user)
+        UserShowcase(
+            reactionScore = user.reaction_score,
+            trophyCount = user.trophy_points,
+            messageCount = user.message_count
+        )
+    }
+}
+
+@Composable
+private fun UserHeader(user: User) {
+    Column(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(20.dp),
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.spacedBy(5.dp, Alignment.CenterVertically)
+    ) {
+        SubcomposeAsyncImage(
+            model = ImageRequest.Builder(LocalContext.current)
+                .data(user.avatar?.data?.medium?.ifBlank { R.drawable.ic_account }
+                    ?: R.drawable.ic_account)
+                .placeholder(R.drawable.ic_account)
+                .crossfade(true)
+                .build(),
+            contentDescription = "",
+            imageLoader = ImageLoader.Builder(LocalContext.current)
+                .components {
+                    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
+                        add(ImageDecoderDecoder.Factory())
+                    } else {
+                        add(GifDecoder.Factory())
+                    }
+                }.build(),
+            modifier = Modifier
+                .requiredSize(96.dp)
+                .clip(CircleShape)
+        )
+        Text(text = user.username, fontSize = 25.sp, fontWeight = FontWeight.Bold)
+        Text(
+            text = user.title,
+            fontSize = 15.sp,
+            fontWeight = FontWeight.Medium,
+            textAlign = TextAlign.Center
+        )
+    }
+}
+
+@Composable
+private fun UserShowcase(reactionScore: Int, trophyCount: Int, messageCount: Int) {
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(10.dp),
+        horizontalArrangement = Arrangement.SpaceEvenly,
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        Column(
+            verticalArrangement = Arrangement.spacedBy(5.dp, Alignment.CenterVertically),
+            horizontalAlignment = Alignment.CenterHorizontally
+        ) {
+            Image(
+                painter = painterResource(id = R.drawable.ic_recommended),
+                contentDescription = "",
+                colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.primary)
+            )
+            Text(text = reactionScore.toString())
+        }
+        Column(
+            verticalArrangement = Arrangement.spacedBy(5.dp, Alignment.CenterVertically),
+            horizontalAlignment = Alignment.CenterHorizontally
+        ) {
+            Image(
+                painter = painterResource(id = R.drawable.ic_trophy),
+                contentDescription = "",
+                colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.primary)
+            )
+            Text(text = trophyCount.toString())
+        }
+        Column(
+            verticalArrangement = Arrangement.spacedBy(5.dp, Alignment.CenterVertically),
+            horizontalAlignment = Alignment.CenterHorizontally
+        ) {
+            Image(
+                painter = painterResource(id = R.drawable.ic_comment),
+                contentDescription = "",
+                colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.primary)
+            )
+            Text(text = messageCount.toString())
+        }
+    }
+}

app/src/main/java/io/aayush/relabs/ui/screens/thread/ThreadScreen.kt

@@ -17,6 +17,7 @@ import androidx.compose.foundation.pager.rememberPagerState
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.KeyboardArrowLeft
 import androidx.compose.material.icons.automirrored.filled.KeyboardArrowRight
+import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.ExtendedFloatingActionButton
 import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Icon
@@ -25,6 +26,7 @@ import androidx.compose.material3.Scaffold
 import androidx.compose.material3.SnackbarHost
 import androidx.compose.material3.SnackbarHostState
 import androidx.compose.material3.Text
+import androidx.compose.material3.rememberModalBottomSheetState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
@@ -45,12 +47,13 @@ import io.aayush.relabs.network.data.thread.ThreadInfo
 import io.aayush.relabs.ui.components.ErrorScreen
 import io.aayush.relabs.ui.components.MainTopAppBar
 import io.aayush.relabs.ui.components.PostItem
+import io.aayush.relabs.ui.components.UserInfoSheet
 import io.aayush.relabs.ui.navigation.Screen
 import io.aayush.relabs.utils.Error
 import kotlinx.coroutines.launch
 
 @Composable
-@OptIn(ExperimentalFoundationApi::class)
+@OptIn(ExperimentalFoundationApi::class, ExperimentalMaterial3Api::class)
 fun ThreadScreen(
     navHostController: NavHostController,
     threadID: Int,
@@ -64,6 +67,9 @@ fun ThreadScreen(
     val threadInfo: ThreadInfo? by viewModel.threadInfo.collectAsStateWithLifecycle()
     val postsToQuote = remember { viewModel.postsToQuote }
 
+    val sheetState = rememberModalBottomSheetState()
+    val user by viewModel.user.collectAsStateWithLifecycle()
+
     Scaffold(
         modifier = Modifier.fillMaxSize(),
         topBar = {
@@ -240,11 +246,18 @@ fun ThreadScreen(
                                     type = "text/plain"
                                 }
                                 context.startActivity(Intent.createChooser(intent, null))
-                            }
+                            },
+                            onUserClicked = { post.user?.let { u -> viewModel.showUserInfo(u) } }
                         )
                     }
                 }
             }
         }
+
+        if (user.username.isNotBlank()) {
+            UserInfoSheet(user = user, sheetState = sheetState) {
+                viewModel.hideUserInfo()
+            }
+        }
     }
 }

app/src/main/java/io/aayush/relabs/ui/screens/thread/ThreadViewModel.kt

@@ -15,6 +15,7 @@ import io.aayush.relabs.network.data.post.Post
 import io.aayush.relabs.network.data.post.PostReply
 import io.aayush.relabs.network.data.react.React
 import io.aayush.relabs.network.data.thread.ThreadInfo
+import io.aayush.relabs.network.data.user.User
 import io.aayush.relabs.utils.DesignQuoteSpan
 import io.aayush.relabs.utils.LinkTransformationMethod
 import javax.inject.Inject
@@ -34,6 +35,9 @@ class ThreadViewModel @Inject constructor(
 
     val postsToQuote = mutableStateListOf<Post>()
 
+    private val _user = MutableStateFlow<User>(User())
+    val user = _user.asStateFlow()
+
     private val _postReply = MutableStateFlow<PostReply?>(PostReply())
     val postReply = _postReply.asStateFlow()
 
@@ -112,4 +116,12 @@ class ThreadViewModel @Inject constructor(
             if (response?.success == true) getThreadInfo(threadID)
         }
     }
+
+    fun showUserInfo(user: User) {
+        _user.value = user
+    }
+
+    fun hideUserInfo() {
+        _user.value = User()
+    }
 }

app/src/main/res/drawable/ic_recommended.xml

@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="960"
+    android:viewportHeight="960"
+    android:tint="?attr/colorControlNormal">
+    <path
+        android:fillColor="@android:color/white"
+        android:pathData="M360,720L580,720Q597,720 611.5,711.5Q626,703 632,688L716,492Q718,487 719,482Q720,477 720,472L720,440Q720,423 708.5,411.5Q697,400 680,400L496,400L520,264Q522,254 519,245Q516,236 509,229L480,200L296,400Q288,408 284,418Q280,428 280,440L280,640Q280,673 303.5,696.5Q327,720 360,720ZM480,880Q397,880 324,848.5Q251,817 197,763Q143,709 111.5,636Q80,563 80,480Q80,397 111.5,324Q143,251 197,197Q251,143 324,111.5Q397,80 480,80Q563,80 636,111.5Q709,143 763,197Q817,251 848.5,324Q880,397 880,480Q880,563 848.5,636Q817,709 763,763Q709,817 636,848.5Q563,880 480,880ZM480,800Q614,800 707,707Q800,614 800,480Q800,346 707,253Q614,160 480,160Q346,160 253,253Q160,346 160,480Q160,614 253,707Q346,800 480,800ZM480,480Q480,480 480,480Q480,480 480,480Q480,480 480,480Q480,480 480,480Q480,480 480,480Q480,480 480,480Q480,480 480,480Q480,480 480,480Z"/>
+</vector>