Skip to content

Introduce ThreadsScreen and ThreadListHeader composables #6342

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
gpunto wants to merge 3 commits into
base: v7
Choose a base branch
from
+602 −135
Open

Introduce ThreadsScreen and ThreadListHeader composables #6342

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
53c03ee
Introduce ThreadsScreen and ThreadListHeader composables
gpunto Apr 8, 2026
65f716f
Extract common list header components
gpunto Apr 9, 2026
9465555
Dump API
gpunto Apr 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 13 additions & 11 deletions ...in/java/io/getstream/chat/android/compose/sample/feature/channel/list/ChannelsActivity.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,12 +86,11 @@ import io.getstream.chat.android.compose.ui.components.SearchInput
import io.getstream.chat.android.compose.ui.components.channels.buildDefaultChannelActions
import io.getstream.chat.android.compose.ui.mentions.MentionList
import io.getstream.chat.android.compose.ui.theme.ChatTheme
import io.getstream.chat.android.compose.ui.threads.ThreadList
import io.getstream.chat.android.compose.ui.threads.ThreadsScreen
import io.getstream.chat.android.compose.viewmodel.channels.ChannelListViewModel
import io.getstream.chat.android.compose.viewmodel.channels.ChannelListViewModelFactory
import io.getstream.chat.android.compose.viewmodel.mentions.MentionListViewModel
import io.getstream.chat.android.compose.viewmodel.mentions.MentionListViewModelFactory
import io.getstream.chat.android.compose.viewmodel.threads.ThreadListViewModel
import io.getstream.chat.android.compose.viewmodel.threads.ThreadsViewModelFactory
import io.getstream.chat.android.models.Channel
import io.getstream.chat.android.models.Filters
Expand Down Expand Up @@ -126,10 +125,7 @@ class ChannelsActivity : ComponentActivity() {

private val channelsViewModel: ChannelListViewModel by viewModels { channelsViewModelFactory }
private val mentionListViewModel: MentionListViewModel by viewModels { MentionListViewModelFactory() }
private val threadsViewModel: ThreadListViewModel by viewModels {
val query = QueryThreadsRequest()
ThreadsViewModelFactory(query)
}
private val threadsViewModelFactory = ThreadsViewModelFactory(query = QueryThreadsRequest())

@Suppress("LongMethod")
override fun onCreate(savedInstanceState: Bundle?) {
Expand Down Expand Up @@ -212,7 +208,13 @@ class ChannelsActivity : ComponentActivity() {
)

AppBottomBarOption.MENTIONS -> MentionsContent()
AppBottomBarOption.THREADS -> ThreadsContent()
AppBottomBarOption.THREADS -> ThreadsContent(
onHeaderAvatarClick = {
coroutineScope.launch {
drawerState.open()
}
},
)
}
}
}
Expand Down Expand Up @@ -251,10 +253,10 @@ class ChannelsActivity : ComponentActivity() {
}

@Composable
private fun ThreadsContent() {
ThreadList(
viewModel = threadsViewModel,
modifier = Modifier.fillMaxSize(),
private fun ThreadsContent(onHeaderAvatarClick: () -> Unit) {
ThreadsScreen(
viewModelFactory = threadsViewModelFactory,
onHeaderAvatarClick = onHeaderAvatarClick,
onThreadClick = ::openThread,
)
}
Expand Down
41 changes: 41 additions & 0 deletions stream-chat-android-compose/api/stream-chat-android-compose.api
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3474,6 +3474,7 @@ public abstract interface class io/getstream/chat/android/compose/ui/theme/ChatC
public fun SwipeToReplyContent (Landroidx/compose/foundation/layout/RowScope;Lio/getstream/chat/android/compose/ui/theme/SwipeToReplyContentParams;Landroidx/compose/runtime/Composer;I)V
public fun ThreadListBanner (Lio/getstream/chat/android/compose/ui/theme/ThreadListBannerParams;Landroidx/compose/runtime/Composer;I)V
public fun ThreadListEmptyContent (Lio/getstream/chat/android/compose/ui/theme/ThreadListEmptyContentParams;Landroidx/compose/runtime/Composer;I)V
public fun ThreadListHeader (Lio/getstream/chat/android/compose/ui/theme/ThreadListHeaderParams;Landroidx/compose/runtime/Composer;I)V
public fun ThreadListItem (Lio/getstream/chat/android/compose/ui/theme/ThreadListItemParams;Landroidx/compose/runtime/Composer;I)V
public fun ThreadListLoadingContent (Lio/getstream/chat/android/compose/ui/theme/ThreadListLoadingContentParams;Landroidx/compose/runtime/Composer;I)V
public fun ThreadListLoadingMoreContent (Lio/getstream/chat/android/compose/ui/theme/ThreadListLoadingMoreContentParams;Landroidx/compose/runtime/Composer;I)V
Expand Down Expand Up @@ -3662,6 +3663,7 @@ public final class io/getstream/chat/android/compose/ui/theme/ChatComponentFacto
public static fun SwipeToReplyContent (Lio/getstream/chat/android/compose/ui/theme/ChatComponentFactory;Landroidx/compose/foundation/layout/RowScope;Lio/getstream/chat/android/compose/ui/theme/SwipeToReplyContentParams;Landroidx/compose/runtime/Composer;I)V
public static fun ThreadListBanner (Lio/getstream/chat/android/compose/ui/theme/ChatComponentFactory;Lio/getstream/chat/android/compose/ui/theme/ThreadListBannerParams;Landroidx/compose/runtime/Composer;I)V
public static fun ThreadListEmptyContent (Lio/getstream/chat/android/compose/ui/theme/ChatComponentFactory;Lio/getstream/chat/android/compose/ui/theme/ThreadListEmptyContentParams;Landroidx/compose/runtime/Composer;I)V
public static fun ThreadListHeader (Lio/getstream/chat/android/compose/ui/theme/ChatComponentFactory;Lio/getstream/chat/android/compose/ui/theme/ThreadListHeaderParams;Landroidx/compose/runtime/Composer;I)V
public static fun ThreadListItem (Lio/getstream/chat/android/compose/ui/theme/ChatComponentFactory;Lio/getstream/chat/android/compose/ui/theme/ThreadListItemParams;Landroidx/compose/runtime/Composer;I)V
public static fun ThreadListLoadingContent (Lio/getstream/chat/android/compose/ui/theme/ChatComponentFactory;Lio/getstream/chat/android/compose/ui/theme/ThreadListLoadingContentParams;Landroidx/compose/runtime/Composer;I)V
public static fun ThreadListLoadingMoreContent (Lio/getstream/chat/android/compose/ui/theme/ChatComponentFactory;Lio/getstream/chat/android/compose/ui/theme/ThreadListLoadingMoreContentParams;Landroidx/compose/runtime/Composer;I)V
Expand Down Expand Up @@ -6097,6 +6099,27 @@ public final class io/getstream/chat/android/compose/ui/theme/ThreadListEmptyCon
public fun toString ()Ljava/lang/String;
}

public final class io/getstream/chat/android/compose/ui/theme/ThreadListHeaderParams {
public static final field $stable I
public fun <init> (Lio/getstream/chat/android/models/ConnectionState;Landroidx/compose/ui/Modifier;Ljava/lang/String;Lio/getstream/chat/android/models/User;Lkotlin/jvm/functions/Function1;)V
public synthetic fun <init> (Lio/getstream/chat/android/models/ConnectionState;Landroidx/compose/ui/Modifier;Ljava/lang/String;Lio/getstream/chat/android/models/User;Lkotlin/jvm/functions/Function1;ILkotlin/jvm/internal/DefaultConstructorMarker;)V
public final fun component1 ()Lio/getstream/chat/android/models/ConnectionState;
public final fun component2 ()Landroidx/compose/ui/Modifier;
public final fun component3 ()Ljava/lang/String;
public final fun component4 ()Lio/getstream/chat/android/models/User;
public final fun component5 ()Lkotlin/jvm/functions/Function1;
public final fun copy (Lio/getstream/chat/android/models/ConnectionState;Landroidx/compose/ui/Modifier;Ljava/lang/String;Lio/getstream/chat/android/models/User;Lkotlin/jvm/functions/Function1;)Lio/getstream/chat/android/compose/ui/theme/ThreadListHeaderParams;
public static synthetic fun copy$default (Lio/getstream/chat/android/compose/ui/theme/ThreadListHeaderParams;Lio/getstream/chat/android/models/ConnectionState;Landroidx/compose/ui/Modifier;Ljava/lang/String;Lio/getstream/chat/android/models/User;Lkotlin/jvm/functions/Function1;ILjava/lang/Object;)Lio/getstream/chat/android/compose/ui/theme/ThreadListHeaderParams;
public fun equals (Ljava/lang/Object;)Z
public final fun getConnectionState ()Lio/getstream/chat/android/models/ConnectionState;
public final fun getCurrentUser ()Lio/getstream/chat/android/models/User;
public final fun getModifier ()Landroidx/compose/ui/Modifier;
public final fun getOnAvatarClick ()Lkotlin/jvm/functions/Function1;
public final fun getTitle ()Ljava/lang/String;
public fun hashCode ()I
public fun toString ()Ljava/lang/String;
}

public final class io/getstream/chat/android/compose/ui/theme/ThreadListItemParams {
public static final field $stable I
public fun <init> (Lio/getstream/chat/android/models/Thread;Lio/getstream/chat/android/models/User;Lkotlin/jvm/functions/Function1;)V
Expand Down Expand Up @@ -6185,6 +6208,14 @@ public final class io/getstream/chat/android/compose/ui/threads/ComposableSingle
public final fun getLambda$881034423$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
}

public final class io/getstream/chat/android/compose/ui/threads/ComposableSingletons$ThreadListHeaderKt {
public static final field INSTANCE Lio/getstream/chat/android/compose/ui/threads/ComposableSingletons$ThreadListHeaderKt;
public fun <init> ()V
public final fun getLambda$-509567249$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
public final fun getLambda$-549714838$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
public final fun getLambda$1494410151$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function3;
}

public final class io/getstream/chat/android/compose/ui/threads/ComposableSingletons$ThreadListKt {
public static final field INSTANCE Lio/getstream/chat/android/compose/ui/threads/ComposableSingletons$ThreadListKt;
public fun <init> ()V
Expand Down Expand Up @@ -6241,11 +6272,19 @@ public final class io/getstream/chat/android/compose/ui/threads/ThreadListBanner
public fun toString ()Ljava/lang/String;
}

public final class io/getstream/chat/android/compose/ui/threads/ThreadListHeaderKt {
public static final fun ThreadListHeader-ws93vos (Landroidx/compose/ui/Modifier;Ljava/lang/String;Lio/getstream/chat/android/models/User;Lio/getstream/chat/android/models/ConnectionState;JLandroidx/compose/ui/graphics/Shape;FLkotlin/jvm/functions/Function1;Landroidx/compose/runtime/Composer;II)V
}

public final class io/getstream/chat/android/compose/ui/threads/ThreadListKt {
public static final fun ThreadList (Lio/getstream/chat/android/compose/viewmodel/threads/ThreadListViewModel;Landroidx/compose/ui/Modifier;Lio/getstream/chat/android/models/User;Lkotlin/jvm/functions/Function0;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function0;Lkotlin/jvm/functions/Function3;Lkotlin/jvm/functions/Function3;Lkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function2;Landroidx/compose/runtime/Composer;III)V
public static final fun ThreadList (Lio/getstream/chat/android/ui/common/state/threads/ThreadListState;Landroidx/compose/ui/Modifier;Lio/getstream/chat/android/models/User;Lkotlin/jvm/functions/Function0;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function0;Lkotlin/jvm/functions/Function3;Lkotlin/jvm/functions/Function3;Lkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function2;Landroidx/compose/runtime/Composer;III)V
}

public final class io/getstream/chat/android/compose/ui/threads/ThreadsScreenKt {
public static final fun ThreadsScreen (Lio/getstream/chat/android/compose/viewmodel/threads/ThreadsViewModelFactory;Ljava/lang/String;Lkotlin/jvm/functions/Function0;Lkotlin/jvm/functions/Function1;Landroidx/compose/runtime/Composer;II)V
}

public final class io/getstream/chat/android/compose/ui/util/ChannelUtilsKt {
public static final fun getLastMessage (Lio/getstream/chat/android/models/Channel;Lio/getstream/chat/android/models/User;)Lio/getstream/chat/android/models/Message;
public static final fun getMembersStatusText (Lio/getstream/chat/android/models/Channel;Landroid/content/Context;Lio/getstream/chat/android/models/User;)Ljava/lang/String;
Expand Down Expand Up @@ -6814,7 +6853,9 @@ public final class io/getstream/chat/android/compose/viewmodel/pinned/PinnedMess
public final class io/getstream/chat/android/compose/viewmodel/threads/ThreadListViewModel : androidx/lifecycle/ViewModel {
public static final field $stable I
public fun <init> (Lio/getstream/chat/android/ui/common/feature/threads/ThreadListController;)V
public final fun getConnectionState ()Lkotlinx/coroutines/flow/StateFlow;
public final fun getState ()Lkotlinx/coroutines/flow/StateFlow;
public final fun getUser ()Lkotlinx/coroutines/flow/StateFlow;
public final fun load ()V
public final fun loadNextPage ()V
}
Expand Down
127 changes: 8 additions & 119 deletions ...e/src/main/java/io/getstream/chat/android/compose/ui/channels/header/ChannelListHeader.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,25 +16,10 @@

package io.getstream.chat.android.compose.ui.channels.header

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.RowScope
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentWidth
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.Icon
import androidx.compose.material3.Surface
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.RectangleShape
import androidx.compose.ui.graphics.Shape
Expand All @@ -45,16 +30,12 @@ import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import io.getstream.chat.android.compose.R
import io.getstream.chat.android.compose.ui.components.NetworkLoadingIndicator
import io.getstream.chat.android.compose.ui.components.avatar.AvatarSize
import io.getstream.chat.android.compose.ui.components.ListHeader
import io.getstream.chat.android.compose.ui.components.button.StreamButton
import io.getstream.chat.android.compose.ui.theme.ChannelListHeaderCenterContentParams
import io.getstream.chat.android.compose.ui.theme.ChannelListHeaderLeadingContentParams
import io.getstream.chat.android.compose.ui.theme.ChannelListHeaderTrailingContentParams
import io.getstream.chat.android.compose.ui.theme.ChatTheme
import io.getstream.chat.android.compose.ui.theme.StreamTokens
import io.getstream.chat.android.compose.ui.theme.UserAvatarParams
import io.getstream.chat.android.compose.ui.util.clickable
import io.getstream.chat.android.models.ConnectionState
import io.getstream.chat.android.models.User
import io.getstream.chat.android.previewdata.PreviewUserData
Expand Down Expand Up @@ -121,107 +102,15 @@ public fun ChannelListHeader(
}
},
) {
Surface(
modifier = modifier
.fillMaxWidth(),
shadowElevation = elevation,
ListHeader(
modifier = modifier,
color = color,
shape = shape,
) {
Column {
Row(
Modifier
.fillMaxWidth()
.padding(StreamTokens.spacingSm),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(StreamTokens.spacingXs),
) {
leadingContent()

centerContent()

trailingContent()
}
HorizontalDivider(
thickness = 1.dp,
color = ChatTheme.colors.borderCoreDefault,
)
}
}
}

/**
* Represents the default leading content of a channel list header, which is the currently logged-in user avatar.
*
* We show the avatar if the user is available, otherwise we add a spacer to make sure the alignment is correct.
*/
@Composable
internal fun DefaultChannelListHeaderLeadingContent(
currentUser: User?,
onAvatarClick: (User?) -> Unit,
) {
if (currentUser != null) {
Box(
modifier = Modifier
.size(AvatarSize.ExtraLarge)
.clip(CircleShape)
.clickable { onAvatarClick(currentUser) },
contentAlignment = Alignment.Center,
) {
ChatTheme.componentFactory.UserAvatar(
params = UserAvatarParams(
modifier = Modifier
.size(AvatarSize.Large)
.testTag("Stream_UserAvatar"),
user = currentUser,
),
)
}
} else {
Spacer(modifier = Modifier.size(AvatarSize.ExtraLarge))
}
}

/**
* Represents the channel header's center slot. It either shows a [Text] if [connectionState] is
* [ConnectionState.CONNECTED], or a [NetworkLoadingIndicator] if there is no connections.
*
* @param connectionState The state of WebSocket connection.
* @param title The title to show.
*/
@Composable
internal fun RowScope.DefaultChannelListHeaderCenterContent(
connectionState: ConnectionState,
title: String,
) {
when (connectionState) {
is ConnectionState.Connected -> {
Text(
modifier = Modifier
.weight(1f)
.wrapContentWidth()
.padding(horizontal = StreamTokens.spacingMd),
text = title,
style = ChatTheme.typography.headingSmall,
maxLines = 1,
color = ChatTheme.colors.textPrimary,
)
}

is ConnectionState.Connecting -> NetworkLoadingIndicator(modifier = Modifier.weight(1f))
is ConnectionState.Offline -> {
Text(
modifier = Modifier
.weight(1f)
.wrapContentWidth()
.padding(horizontal = StreamTokens.spacingMd),
text = stringResource(R.string.stream_compose_disconnected),
style = ChatTheme.typography.headingSmall,
maxLines = 1,
color = ChatTheme.colors.textPrimary,
)
}
}
elevation = elevation,
leadingContent = leadingContent,
centerContent = centerContent,
trailingContent = trailingContent,
)
}

/**
Expand Down
Loading
Loading