Merge remote-tracking branch 'upstream/dev' into disappearing-messages

# Conflicts: # app/src/main/java/org/thoughtcrime/securesms/conversation/v2/ConversationActivityV2.kt # app/src/main/res/layout/activity_conversation_v2_action_bar.xml
2025-12-08 00:02:23 +00:00 · 2023-07-26 09:46:57 +10:00
parent 57d43270a8 d39cf2754c
commit 7f7971e47f
59 changed files with 1224 additions and 293 deletions
--- a/app/src/main/java/org/thoughtcrime/securesms/MediaPreviewActivity.java
+++ b/app/src/main/java/org/thoughtcrime/securesms/MediaPreviewActivity.java
@@ -147,6 +147,10 @@ public class MediaPreviewActivity extends PassphraseRequiredActionBarActivity im
    }
  };

+  public static Intent getPreviewIntent(Context context, MediaPreviewArgs args) {
+    return getPreviewIntent(context, args.getSlide(), args.getMmsRecord(), args.getThread());
+  }
+
  public static Intent getPreviewIntent(Context context, Slide slide, MmsMessageRecord mms, Recipient threadRecipient) {
    Intent previewIntent = null;
    if (MediaPreviewActivity.isContentTypeSupported(slide.getContentType()) && slide.getUri() != null) {
@@ -524,7 +528,6 @@ public class MediaPreviewActivity extends PassphraseRequiredActionBarActivity im
  @Override
  public void onLoadFinished(@NonNull Loader<Pair<Cursor, Integer>> loader, @Nullable Pair<Cursor, Integer> data) {
    if (data != null) {
-      @SuppressWarnings("ConstantConditions")
      CursorPagerAdapter adapter = new CursorPagerAdapter(this, GlideApp.with(this), getWindow(), data.first, data.second, leftIsRecent);
      mediaPager.setAdapter(adapter);
      adapter.setActive(true);
--- a/app/src/main/java/org/thoughtcrime/securesms/MediaPreviewArgs.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/MediaPreviewArgs.kt
@@ -0,0 +1,11 @@
+package org.thoughtcrime.securesms
+
+import org.session.libsession.utilities.recipients.Recipient
+import org.thoughtcrime.securesms.database.model.MmsMessageRecord
+import org.thoughtcrime.securesms.mms.Slide
+
+data class MediaPreviewArgs(
+    val slide: Slide,
+    val mmsRecord: MmsMessageRecord?,
+    val thread: Recipient?,
+)
--- a/app/src/main/java/org/thoughtcrime/securesms/calls/WebRtcCallActivity.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/calls/WebRtcCallActivity.kt
@@ -249,18 +249,12 @@ class WebRtcCallActivity : PassphraseRequiredActionBarActivity() {
                viewModel.callState.collect { state ->
                    Log.d("Loki", "Consuming view model state $state")
                    when (state) {
-                        CALL_RINGING -> {
-                            if (wantsToAnswer) {
-                                answerCall()
-                                wantsToAnswer = false
-                            }
-                        }
-                        CALL_OUTGOING -> {
-                        }
-                        CALL_CONNECTED -> {
+                        CALL_RINGING -> if (wantsToAnswer) {
+                            answerCall()
                            wantsToAnswer = false
                        }
-                        else -> { /* do nothing */ }
+                        CALL_CONNECTED -> wantsToAnswer = false
+                        else -> {}
                    }
                    updateControls(state)
                }
--- a/app/src/main/java/org/thoughtcrime/securesms/components/ProfilePictureView.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/components/ProfilePictureView.kt
@@ -2,6 +2,7 @@ package org.thoughtcrime.securesms.components

 import android.content.Context
 import android.util.AttributeSet
+import android.view.LayoutInflater
 import android.view.View
 import android.widget.ImageView
 import android.widget.RelativeLayout
@@ -9,6 +10,7 @@ import androidx.annotation.DimenRes
 import com.bumptech.glide.load.engine.DiskCacheStrategy
 import network.loki.messenger.R
 import network.loki.messenger.databinding.ViewProfilePictureBinding
+import network.loki.messenger.databinding.ViewUserBinding
 import org.session.libsession.avatars.ContactColors
 import org.session.libsession.avatars.PlaceholderAvatarPhoto
 import org.session.libsession.avatars.ProfileContactPhoto
@@ -18,13 +20,14 @@ import org.session.libsession.utilities.Address
 import org.session.libsession.utilities.GroupUtil
 import org.session.libsession.utilities.recipients.Recipient
 import org.thoughtcrime.securesms.dependencies.DatabaseComponent
+import org.thoughtcrime.securesms.mms.GlideApp
 import org.thoughtcrime.securesms.mms.GlideRequests

 class ProfilePictureView @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null
 ) : RelativeLayout(context, attrs) {
-    private val binding: ViewProfilePictureBinding by lazy { ViewProfilePictureBinding.bind(this) }
-    lateinit var glide: GlideRequests
+    private val binding = ViewProfilePictureBinding.inflate(LayoutInflater.from(context), this)
+    private val glide: GlideRequests = GlideApp.with(this)
    var publicKey: String? = null
    var displayName: String? = null
    var additionalPublicKey: String? = null
@@ -37,8 +40,13 @@ class ProfilePictureView @JvmOverloads constructor(
    private val unknownOpenGroupDrawable by lazy { ResourceContactPhoto(R.drawable.ic_notification)
        .asDrawable(context, ContactColors.UNKNOWN_COLOR.toConversationColor(context), false) }

+
    // endregion

+    constructor(context: Context, sender: Recipient): this(context) {
+        update(sender)
+    }
+
    // region Updating
    fun update(recipient: Recipient) {
        fun getUserDisplayName(publicKey: String): String {
@@ -80,7 +88,6 @@ class ProfilePictureView @JvmOverloads constructor(
    }

    fun update() {
-        if (!this::glide.isInitialized) return
        val publicKey = publicKey ?: return
        val additionalPublicKey = additionalPublicKey
        if (additionalPublicKey != null) {
--- a/app/src/main/java/org/thoughtcrime/securesms/contacts/UserView.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/contacts/UserView.kt
@@ -55,8 +55,7 @@ class UserView : LinearLayout {
            return contact?.displayName(Contact.ContactContext.REGULAR) ?: publicKey
        }
        val address = user.address.serialize()
-        binding.profilePictureView.root.glide = glide
-        binding.profilePictureView.root.update(user)
+        binding.profilePictureView.update(user)
        binding.actionIndicatorImageView.setImageResource(R.drawable.ic_baseline_edit_24)
        binding.nameTextView.text = if (user.isGroupRecipient) user.name else getUserDisplayName(address)
        when (actionIndicator) {
@@ -88,7 +87,7 @@ class UserView : LinearLayout {
    }

    fun unbind() {
-        binding.profilePictureView.root.recycle()
+        binding.profilePictureView.recycle()
    }
    // endregion
 }
--- a/app/src/main/java/org/thoughtcrime/securesms/conversation/start/ContactListAdapter.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/conversation/start/ContactListAdapter.kt
@@ -32,14 +32,13 @@ class ContactListAdapter(

    class ContactViewHolder(private val binding: ViewContactBinding) : RecyclerView.ViewHolder(binding.root) {
        fun bind(contact: ContactListItem.Contact, glide: GlideRequests, listener: (Recipient) -> Unit) {
-            binding.profilePictureView.root.glide = glide
-            binding.profilePictureView.root.update(contact.recipient)
+            binding.profilePictureView.update(contact.recipient)
            binding.nameTextView.text = contact.displayName
            binding.root.setOnClickListener { listener(contact.recipient) }
        }

        fun unbind() {
-            binding.profilePictureView.root.recycle()
+            binding.profilePictureView.recycle()
        }
    }

--- a/app/src/main/java/org/thoughtcrime/securesms/conversation/v2/ConversationActivityV2.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/conversation/v2/ConversationActivityV2.kt
@@ -32,6 +32,8 @@ import android.view.View
 import android.view.WindowManager
 import android.widget.RelativeLayout
 import android.widget.Toast
+import androidx.activity.result.ActivityResult
+import androidx.activity.result.contract.ActivityResultContracts
 import androidx.activity.viewModels
 import androidx.core.text.set
 import androidx.core.text.toSpannable
@@ -108,6 +110,10 @@ import org.thoughtcrime.securesms.conversation.ConversationActionBarDelegate
 import org.thoughtcrime.securesms.conversation.expiration.ExpirationSettingsActivity
 import org.thoughtcrime.securesms.conversation.v2.ConversationReactionOverlay.OnActionSelectedListener
 import org.thoughtcrime.securesms.conversation.v2.ConversationReactionOverlay.OnReactionSelectedListener
+import org.thoughtcrime.securesms.conversation.v2.MessageDetailActivity.Companion.MESSAGE_TIMESTAMP
+import org.thoughtcrime.securesms.conversation.v2.MessageDetailActivity.Companion.ON_REPLY
+import org.thoughtcrime.securesms.conversation.v2.MessageDetailActivity.Companion.ON_RESEND
+import org.thoughtcrime.securesms.conversation.v2.MessageDetailActivity.Companion.ON_DELETE
 import org.thoughtcrime.securesms.conversation.v2.dialogs.BlockedDialog
 import org.thoughtcrime.securesms.conversation.v2.dialogs.LinkPreviewDialog
 import org.thoughtcrime.securesms.conversation.v2.dialogs.SendSeedDialog
@@ -1904,10 +1910,24 @@ class ConversationActivityV2 : PassphraseRequiredActionBarActivity(), InputBarDe
        endActionMode()
    }

+    private val handleMessageDetail = registerForActivityResult(ActivityResultContracts.StartActivityForResult()) { result: ActivityResult ->
+        val message = result.data?.extras?.getLong(MESSAGE_TIMESTAMP)
+            ?.let(mmsSmsDb::getMessageForTimestamp)
+
+        val set = setOfNotNull(message)
+
+        when (result.resultCode) {
+            ON_REPLY -> reply(set)
+            ON_RESEND -> resendMessage(set)
+            ON_DELETE -> deleteMessages(set)
+        }
+    }
+
    override fun showMessageDetail(messages: Set<MessageRecord>) {
-        val intent = Intent(this, MessageDetailActivity::class.java)
-        intent.putExtra(MessageDetailActivity.MESSAGE_TIMESTAMP, messages.first().timestamp)
-        push(intent)
+        Intent(this, MessageDetailActivity::class.java)
+            .apply { putExtra(MESSAGE_TIMESTAMP, messages.first().timestamp) }
+            .let { handleMessageDetail.launch(it) }
+
        endActionMode()
    }

@@ -1946,7 +1966,7 @@ class ConversationActivityV2 : PassphraseRequiredActionBarActivity(), InputBarDe

    override fun reply(messages: Set<MessageRecord>) {
        val recipient = viewModel.recipient ?: return
-        binding?.inputBar?.draftQuote(recipient, messages.first(), glide)
+        messages.firstOrNull()?.let { binding?.inputBar?.draftQuote(recipient, it, glide) }
        endActionMode()
    }

--- a/app/src/main/java/org/thoughtcrime/securesms/conversation/v2/ConversationReactionOverlay.java
+++ b/app/src/main/java/org/thoughtcrime/securesms/conversation/v2/ConversationReactionOverlay.java
@@ -695,9 +695,7 @@ public final class ConversationReactionOverlay extends FrameLayout {
      items.add(new ActionItem(R.attr.menu_trash_icon, getContext().getResources().getString(R.string.conversation_context__menu_ban_and_delete_all), () -> handleActionItemClicked(Action.BAN_AND_DELETE_ALL)));
    }
    // Message detail
-    if (message.isFailed()) {
-      items.add(new ActionItem(R.attr.menu_info_icon, getContext().getResources().getString(R.string.conversation_context__menu_message_details), () -> handleActionItemClicked(Action.VIEW_INFO)));
-    }
+    items.add(new ActionItem(R.attr.menu_info_icon, getContext().getResources().getString(R.string.conversation_context__menu_message_details), () -> handleActionItemClicked(Action.VIEW_INFO)));
    // Resend
    if (message.isFailed()) {
      items.add(new ActionItem(R.attr.menu_reply_icon, getContext().getResources().getString(R.string.conversation_context__menu_resend_message), () -> handleActionItemClicked(Action.RESEND)));
--- a/app/src/main/java/org/thoughtcrime/securesms/conversation/v2/MessageDetailActivity.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/conversation/v2/MessageDetailActivity.kt
@@ -1,99 +1,401 @@
 package org.thoughtcrime.securesms.conversation.v2

+import android.annotation.SuppressLint
+import android.content.Intent
 import android.os.Bundle
-import android.view.View
-import androidx.core.view.isVisible
+import android.view.LayoutInflater
+import android.view.MotionEvent.ACTION_UP
+import androidx.activity.viewModels
+import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxWithConstraints
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ExperimentalLayoutApi
+import androidx.compose.foundation.layout.FlowRow
+import androidx.compose.foundation.layout.IntrinsicSize
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.aspectRatio
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.widthIn
+import androidx.compose.foundation.pager.HorizontalPager
+import androidx.compose.foundation.pager.PagerState
+import androidx.compose.foundation.pager.rememberPagerState
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material.Icon
+import androidx.compose.material.LocalTextStyle
+import androidx.compose.material.Surface
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.platform.ComposeView
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.tooling.preview.PreviewParameter
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.viewinterop.AndroidView
+import androidx.lifecycle.lifecycleScope
+import com.bumptech.glide.integration.compose.ExperimentalGlideComposeApi
+import com.bumptech.glide.integration.compose.GlideImage
 import dagger.hilt.android.AndroidEntryPoint
+import kotlinx.coroutines.launch
 import network.loki.messenger.R
-import network.loki.messenger.databinding.ActivityMessageDetailBinding
-import org.session.libsession.messaging.MessagingModuleConfiguration
-import org.session.libsession.messaging.open_groups.OpenGroupApi
-import org.session.libsession.messaging.utilities.SessionId
-import org.session.libsession.messaging.utilities.SodiumUtilities
-import org.session.libsession.snode.SnodeAPI
-import org.session.libsession.utilities.Address
-import org.session.libsession.utilities.ExpirationUtil
-import org.session.libsession.utilities.TextSecurePreferences
-import org.session.libsignal.utilities.IdPrefix
+import network.loki.messenger.databinding.ViewVisibleMessageContentBinding
+import org.thoughtcrime.securesms.MediaPreviewActivity.getPreviewIntent
 import org.thoughtcrime.securesms.PassphraseRequiredActionBarActivity
-import org.thoughtcrime.securesms.conversation.v2.utilities.ResendMessageUtilities
 import org.thoughtcrime.securesms.database.Storage
-import org.thoughtcrime.securesms.database.model.MessageRecord
-import org.thoughtcrime.securesms.dependencies.DatabaseComponent
-import org.thoughtcrime.securesms.util.DateUtils
-import java.text.SimpleDateFormat
-import java.util.*
+import org.thoughtcrime.securesms.ui.AppTheme
+import org.thoughtcrime.securesms.ui.Avatar
+import org.thoughtcrime.securesms.ui.CarouselNextButton
+import org.thoughtcrime.securesms.ui.CarouselPrevButton
+import org.thoughtcrime.securesms.ui.Cell
+import org.thoughtcrime.securesms.ui.CellNoMargin
+import org.thoughtcrime.securesms.ui.CellWithPaddingAndMargin
+import org.thoughtcrime.securesms.ui.Divider
+import org.thoughtcrime.securesms.ui.GetString
+import org.thoughtcrime.securesms.ui.HorizontalPagerIndicator
+import org.thoughtcrime.securesms.ui.ItemButton
+import org.thoughtcrime.securesms.ui.PreviewTheme
+import org.thoughtcrime.securesms.ui.ThemeResPreviewParameterProvider
+import org.thoughtcrime.securesms.ui.TitledText
+import org.thoughtcrime.securesms.ui.blackAlpha40
+import org.thoughtcrime.securesms.ui.colorDestructive
+import org.thoughtcrime.securesms.ui.destructiveButtonColors
 import javax.inject.Inject

@AndroidEntryPoint
-class MessageDetailActivity: PassphraseRequiredActionBarActivity() {
-    private lateinit var binding: ActivityMessageDetailBinding
-    var messageRecord: MessageRecord? = null
+class MessageDetailActivity : PassphraseRequiredActionBarActivity() {

    @Inject
    lateinit var storage: Storage

-    // region Settings
+    private val viewModel: MessageDetailsViewModel by viewModels()
+
    companion object {
        // Extras
        const val MESSAGE_TIMESTAMP = "message_timestamp"
+
+        const val ON_REPLY = 1
+        const val ON_RESEND = 2
+        const val ON_DELETE = 3
    }
-    // endregion

    override fun onCreate(savedInstanceState: Bundle?, ready: Boolean) {
        super.onCreate(savedInstanceState, ready)
-        binding = ActivityMessageDetailBinding.inflate(layoutInflater)
-        setContentView(binding.root)
+
        title = resources.getString(R.string.conversation_context__menu_message_details)
-        val timestamp = intent.getLongExtra(MESSAGE_TIMESTAMP, -1L)
-        // We only show this screen for messages fail to send,
-        // so the author of the messages must be the current user.
-        val author = Address.fromSerialized(TextSecurePreferences.getLocalNumber(this)!!)
-        messageRecord = DatabaseComponent.get(this).mmsSmsDatabase().getMessageFor(timestamp, author) ?: run {
-            finish()
-            return
-        }
-        val threadId = messageRecord!!.threadId
-        val openGroup = storage.getOpenGroup(threadId)
-        val blindedKey = openGroup?.let { group ->
-            val userEdKeyPair = MessagingModuleConfiguration.shared.getUserED25519KeyPair() ?: return@let null
-            val blindingEnabled = storage.getServerCapabilities(group.server).contains(OpenGroupApi.Capability.BLIND.name.lowercase())
-            if (blindingEnabled) {
-                SodiumUtilities.blindedKeyPair(group.publicKey, userEdKeyPair)?.publicKey?.asBytes
-                    ?.let { SessionId(IdPrefix.BLINDED, it) }?.hexString
-            } else null
-        }
-        updateContent()
-        binding.resendButton.setOnClickListener {
-            ResendMessageUtilities.resend(this, messageRecord!!, blindedKey)
-            finish()
+
+        viewModel.timestamp = intent.getLongExtra(MESSAGE_TIMESTAMP, -1L)
+
+        ComposeView(this)
+            .apply { setContent { MessageDetailsScreen() } }
+            .let(::setContentView)
+
+        lifecycleScope.launch {
+            viewModel.eventFlow.collect {
+                when (it) {
+                    Event.Finish -> finish()
+                    is Event.StartMediaPreview -> startActivity(
+                        getPreviewIntent(this@MessageDetailActivity, it.args)
+                    )
+                }
+            }
        }
    }

-    fun updateContent() {
-        val dateLocale = Locale.getDefault()
-        val dateFormatter: SimpleDateFormat = DateUtils.getDetailedDateFormatter(this, dateLocale)
-        binding.sentTime.text = dateFormatter.format(Date(messageRecord!!.dateSent))
-
-        val errorMessage = DatabaseComponent.get(this).lokiMessageDatabase().getErrorMessage(messageRecord!!.getId())
-        if (errorMessage != null) {
-            binding.errorMessage.text = errorMessage
-            binding.resendContainer.isVisible = true
-            binding.errorContainer.isVisible = true
-        } else {
-            binding.errorContainer.isVisible = false
-            binding.resendContainer.isVisible = false
-        }
-
-        if (messageRecord!!.expiresIn <= 0 || messageRecord!!.expireStarted <= 0) {
-            binding.expiresContainer.visibility = View.GONE
-        } else {
-            binding.expiresContainer.visibility = View.VISIBLE
-            val elapsed = SnodeAPI.nowWithOffset - messageRecord!!.expireStarted
-            val remaining = messageRecord!!.expiresIn - elapsed
-
-            val duration = ExpirationUtil.getExpirationDisplayValue(this, Math.max((remaining / 1000).toInt(), 1))
-            binding.expiresIn.text = duration
+    @Composable
+    private fun MessageDetailsScreen() {
+        val state by viewModel.stateFlow.collectAsState()
+        AppTheme {
+            MessageDetails(
+                state = state,
+                onReply = { setResultAndFinish(ON_REPLY) },
+                onResend = state.error?.let { { setResultAndFinish(ON_RESEND) } },
+                onDelete = { setResultAndFinish(ON_DELETE) },
+                onClickImage = { viewModel.onClickImage(it) },
+                onAttachmentNeedsDownload = viewModel::onAttachmentNeedsDownload,
+            )
        }
    }
-}
+
+    private fun setResultAndFinish(code: Int) {
+        Bundle().apply { putLong(MESSAGE_TIMESTAMP, viewModel.timestamp) }
+            .let(Intent()::putExtras)
+            .let { setResult(code, it) }
+
+        finish()
+    }
+}
+
+@SuppressLint("ClickableViewAccessibility")
+@Composable
+fun MessageDetails(
+    state: MessageDetailsState,
+    onReply: () -> Unit = {},
+    onResend: (() -> Unit)? = null,
+    onDelete: () -> Unit = {},
+    onClickImage: (Int) -> Unit = {},
+    onAttachmentNeedsDownload: (Long, Long) -> Unit = { _, _ -> }
+) {
+    Column(
+        modifier = Modifier
+            .verticalScroll(rememberScrollState())
+            .padding(vertical = 16.dp),
+        verticalArrangement = Arrangement.spacedBy(16.dp)
+    ) {
+        state.record?.let { message ->
+            AndroidView(
+                modifier = Modifier.padding(horizontal = 32.dp),
+                factory = {
+                    ViewVisibleMessageContentBinding.inflate(LayoutInflater.from(it)).mainContainerConstraint.apply {
+                        bind(
+                            message,
+                            thread = state.thread!!,
+                            onAttachmentNeedsDownload = onAttachmentNeedsDownload,
+                            suppressThumbnails = true
+                        )
+
+                        setOnTouchListener { _, event ->
+                            if (event.actionMasked == ACTION_UP) onContentClick(event)
+                            true
+                        }
+                    }
+                }
+            )
+        }
+        Carousel(state.imageAttachments) { onClickImage(it) }
+        state.nonImageAttachmentFileDetails?.let { FileDetails(it) }
+        CellMetadata(state)
+        CellButtons(
+            onReply,
+            onResend,
+            onDelete,
+        )
+    }
+}
+
+@Composable
+fun CellMetadata(
+    state: MessageDetailsState,
+) {
+    state.apply {
+        if (listOfNotNull(sent, received, error, senderInfo).isEmpty()) return
+        CellWithPaddingAndMargin {
+            Column(verticalArrangement = Arrangement.spacedBy(16.dp)) {
+                TitledText(sent)
+                TitledText(received)
+                TitledErrorText(error)
+                senderInfo?.let {
+                    TitledView(state.fromTitle) {
+                        Row {
+                            sender?.let { Avatar(it) }
+                            TitledMonospaceText(it)
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+@Composable
+fun CellButtons(
+    onReply: () -> Unit = {},
+    onResend: (() -> Unit)? = null,
+    onDelete: () -> Unit = {},
+) {
+    Cell {
+        Column {
+            ItemButton(
+                stringResource(R.string.reply),
+                R.drawable.ic_message_details__reply,
+                onClick = onReply
+            )
+            Divider()
+            onResend?.let {
+                ItemButton(
+                    stringResource(R.string.resend),
+                    R.drawable.ic_message_details__refresh,
+                    onClick = it
+                )
+                Divider()
+            }
+            ItemButton(
+                stringResource(R.string.delete),
+                R.drawable.ic_message_details__trash,
+                colors = destructiveButtonColors(),
+                onClick = onDelete
+            )
+        }
+    }
+}
+
+@OptIn(ExperimentalFoundationApi::class)
+@Composable
+fun Carousel(attachments: List<Attachment>, onClick: (Int) -> Unit) {
+    if (attachments.isEmpty()) return
+
+    val pagerState = rememberPagerState { attachments.size }
+
+    Column(verticalArrangement = Arrangement.spacedBy(16.dp)) {
+        Row {
+            CarouselPrevButton(pagerState)
+            Box(modifier = Modifier.weight(1f)) {
+                CellCarousel(pagerState, attachments, onClick)
+                HorizontalPagerIndicator(pagerState)
+                ExpandButton(
+                    modifier = Modifier
+                        .align(Alignment.BottomEnd)
+                        .padding(8.dp)
+                ) { onClick(pagerState.currentPage) }
+            }
+            CarouselNextButton(pagerState)
+        }
+        attachments.getOrNull(pagerState.currentPage)?.fileDetails?.let { FileDetails(it) }
+    }
+}
+
+@OptIn(
+    ExperimentalFoundationApi::class,
+    ExperimentalGlideComposeApi::class
+)
+@Composable
+private fun CellCarousel(
+    pagerState: PagerState,
+    attachments: List<Attachment>,
+    onClick: (Int) -> Unit
+) {
+    CellNoMargin {
+        HorizontalPager(state = pagerState) { i ->
+            GlideImage(
+                contentScale = ContentScale.Crop,
+                modifier = Modifier
+                    .aspectRatio(1f)
+                    .clickable { onClick(i) },
+                model = attachments[i].uri,
+                contentDescription = attachments[i].fileName ?: stringResource(id = R.string.image)
+            )
+        }
+    }
+}
+
+@Composable
+fun ExpandButton(modifier: Modifier = Modifier, onClick: () -> Unit) {
+    Surface(
+        shape = CircleShape,
+        color = blackAlpha40,
+        modifier = modifier,
+        contentColor = Color.White,
+    ) {
+        Icon(
+            painter = painterResource(id = R.drawable.ic_expand),
+            contentDescription = stringResource(id = R.string.expand),
+            modifier = Modifier.clickable { onClick() },
+        )
+    }
+}
+
+
+@Preview
+@Composable
+fun PreviewMessageDetails(
+    @PreviewParameter(ThemeResPreviewParameterProvider::class) themeResId: Int
+) {
+    PreviewTheme(themeResId) {
+        MessageDetails(
+            state = MessageDetailsState(
+                nonImageAttachmentFileDetails = listOf(
+                    TitledText(R.string.message_details_header__file_id, "Screen Shot 2023-07-06 at 11.35.50 am.png"),
+                    TitledText(R.string.message_details_header__file_type, "image/png"),
+                    TitledText(R.string.message_details_header__file_size, "195.6kB"),
+                    TitledText(R.string.message_details_header__resolution, "342x312"),
+                ),
+                sent = TitledText(R.string.message_details_header__sent, "6:12 AM Tue, 09/08/2022"),
+                received = TitledText(R.string.message_details_header__received, "6:12 AM Tue, 09/08/2022"),
+                error = TitledText(R.string.message_details_header__error, "Message failed to send"),
+                senderInfo = TitledText("Connor", "d4f1g54sdf5g1d5f4g65ds4564df65f4g65d54"),
+            )
+        )
+    }
+}
+
+@OptIn(ExperimentalLayoutApi::class)
+@Composable
+fun FileDetails(fileDetails: List<TitledText>) {
+    if (fileDetails.isEmpty()) return
+
+    CellWithPaddingAndMargin(padding = 0.dp) {
+        FlowRow(
+            modifier = Modifier.padding(vertical = 24.dp, horizontal = 12.dp),
+            verticalArrangement = Arrangement.spacedBy(16.dp)
+        ) {
+            fileDetails.forEach {
+                BoxWithConstraints {
+                    TitledText(
+                        it,
+                        modifier = Modifier
+                            .widthIn(min = maxWidth.div(2))
+                            .padding(horizontal = 12.dp)
+                            .width(IntrinsicSize.Max)
+                    )
+                }
+            }
+        }
+    }
+}
+
+@Composable
+fun TitledErrorText(titledText: TitledText?) {
+    TitledText(
+        titledText,
+        valueStyle = LocalTextStyle.current.copy(color = colorDestructive)
+    )
+}
+
+@Composable
+fun TitledMonospaceText(titledText: TitledText?) {
+    TitledText(
+        titledText,
+        valueStyle = LocalTextStyle.current.copy(fontFamily = FontFamily.Monospace)
+    )
+}
+
+@Composable
+fun TitledText(
+    titledText: TitledText?,
+    modifier: Modifier = Modifier,
+    valueStyle: TextStyle = LocalTextStyle.current,
+) {
+    titledText?.apply {
+        TitledView(title, modifier) {
+            Text(text, style = valueStyle, modifier = Modifier.fillMaxWidth())
+        }
+    }
+}
+
+@Composable
+fun TitledView(title: GetString, modifier: Modifier = Modifier, content: @Composable () -> Unit) {
+    Column(modifier = modifier, verticalArrangement = Arrangement.spacedBy(4.dp)) {
+        Title(title)
+        content()
+    }
+}
+
+@Composable
+fun Title(title: GetString) {
+    Text(title.string(), fontWeight = FontWeight.Bold)
+}
--- a/app/src/main/java/org/thoughtcrime/securesms/conversation/v2/MessageDetailsViewModel.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/conversation/v2/MessageDetailsViewModel.kt
@@ -0,0 +1,159 @@
+package org.thoughtcrime.securesms.conversation.v2
+
+import android.net.Uri
+import androidx.lifecycle.ViewModel
+import androidx.lifecycle.viewModelScope
+import dagger.hilt.android.lifecycle.HiltViewModel
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.channels.Channel
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.asStateFlow
+import kotlinx.coroutines.flow.receiveAsFlow
+import kotlinx.coroutines.launch
+import network.loki.messenger.R
+import org.session.libsession.messaging.jobs.AttachmentDownloadJob
+import org.session.libsession.messaging.jobs.JobQueue
+import org.session.libsession.messaging.sending_receiving.attachments.AttachmentTransferProgress
+import org.session.libsession.messaging.sending_receiving.attachments.DatabaseAttachment
+import org.session.libsession.utilities.Util
+import org.session.libsession.utilities.recipients.Recipient
+import org.thoughtcrime.securesms.MediaPreviewArgs
+import org.thoughtcrime.securesms.database.AttachmentDatabase
+import org.thoughtcrime.securesms.database.LokiMessageDatabase
+import org.thoughtcrime.securesms.database.MmsSmsDatabase
+import org.thoughtcrime.securesms.database.ThreadDatabase
+import org.thoughtcrime.securesms.database.model.MessageRecord
+import org.thoughtcrime.securesms.database.model.MmsMessageRecord
+import org.thoughtcrime.securesms.mms.ImageSlide
+import org.thoughtcrime.securesms.mms.Slide
+import org.thoughtcrime.securesms.ui.GetString
+import org.thoughtcrime.securesms.ui.TitledText
+import java.util.Date
+import java.util.concurrent.TimeUnit
+import javax.inject.Inject
+
+@HiltViewModel
+class MessageDetailsViewModel @Inject constructor(
+    private val attachmentDb: AttachmentDatabase,
+    private val lokiMessageDatabase: LokiMessageDatabase,
+    private val mmsSmsDatabase: MmsSmsDatabase,
+    private val threadDb: ThreadDatabase,
+) : ViewModel() {
+
+    private val state = MutableStateFlow(MessageDetailsState())
+    val stateFlow = state.asStateFlow()
+
+    private val event = Channel<Event>()
+    val eventFlow = event.receiveAsFlow()
+
+    var timestamp: Long = 0L
+        set(value) {
+            field = value
+            val record = mmsSmsDatabase.getMessageForTimestamp(timestamp)
+
+            if (record == null) {
+                viewModelScope.launch { event.send(Event.Finish) }
+                return
+            }
+
+            val mmsRecord = record as? MmsMessageRecord
+
+            state.value = record.run {
+                val slides = mmsRecord?.slideDeck?.slides ?: emptyList()
+
+                MessageDetailsState(
+                    attachments = slides.map(::Attachment),
+                    record = record,
+                    sent = dateSent.let(::Date).toString().let { TitledText(R.string.message_details_header__sent, it) },
+                    received = dateReceived.let(::Date).toString().let { TitledText(R.string.message_details_header__received, it) },
+                    error = lokiMessageDatabase.getErrorMessage(id)?.let { TitledText(R.string.message_details_header__error, it) },
+                    senderInfo = individualRecipient.run { name?.let { TitledText(it, address.serialize()) } },
+                    sender = individualRecipient,
+                    thread = threadDb.getRecipientForThreadId(threadId)!!,
+                )
+            }
+        }
+
+    private val Slide.details: List<TitledText>
+        get() = listOfNotNull(
+            fileName.orNull()?.let { TitledText(R.string.message_details_header__file_id, it) },
+            TitledText(R.string.message_details_header__file_type, asAttachment().contentType),
+            TitledText(R.string.message_details_header__file_size, Util.getPrettyFileSize(fileSize)),
+            takeIf { it is ImageSlide }
+                ?.let(Slide::asAttachment)
+                ?.run { "${width}x$height" }
+                ?.let { TitledText(R.string.message_details_header__resolution, it) },
+            attachmentDb.duration(this)?.let { TitledText(R.string.message_details_header__duration, it) },
+        )
+
+    private fun AttachmentDatabase.duration(slide: Slide): String? =
+        slide.takeIf { it.hasAudio() }
+            ?.run { asAttachment() as? DatabaseAttachment }
+            ?.run { getAttachmentAudioExtras(attachmentId)?.durationMs }
+            ?.takeIf { it > 0 }
+            ?.let {
+                String.format(
+                    "%01d:%02d",
+                    TimeUnit.MILLISECONDS.toMinutes(it),
+                    TimeUnit.MILLISECONDS.toSeconds(it) % 60
+                )
+            }
+
+    fun Attachment(slide: Slide): Attachment =
+        Attachment(slide.details, slide.fileName.orNull(), slide.uri, slide is ImageSlide)
+
+    fun onClickImage(index: Int) {
+        val state = state.value ?: return
+        val mmsRecord = state.mmsRecord ?: return
+        val slide = mmsRecord.slideDeck.slides[index] ?: return
+        // only open to downloaded images
+        if (slide.transferState == AttachmentTransferProgress.TRANSFER_PROGRESS_FAILED) {
+            // Restart download here (on IO thread)
+            (slide.asAttachment() as? DatabaseAttachment)?.let { attachment ->
+                onAttachmentNeedsDownload(attachment.attachmentId.rowId, state.mmsRecord.getId())
+            }
+        }
+
+        if (slide.isInProgress) return
+
+        viewModelScope.launch {
+            MediaPreviewArgs(slide, state.mmsRecord, state.thread)
+                .let(Event::StartMediaPreview)
+                .let { event.send(it) }
+        }
+    }
+
+    fun onAttachmentNeedsDownload(attachmentId: Long, mmsId: Long) {
+        viewModelScope.launch(Dispatchers.IO) {
+            JobQueue.shared.add(AttachmentDownloadJob(attachmentId, mmsId))
+        }
+    }
+}
+
+data class MessageDetailsState(
+    val attachments: List<Attachment> = emptyList(),
+    val imageAttachments: List<Attachment> = attachments.filter { it.hasImage },
+    val nonImageAttachmentFileDetails: List<TitledText>? = attachments.firstOrNull { !it.hasImage }?.fileDetails,
+    val record: MessageRecord? = null,
+    val mmsRecord: MmsMessageRecord? = record as? MmsMessageRecord,
+    val sent: TitledText? = null,
+    val received: TitledText? = null,
+    val error: TitledText? = null,
+    val senderInfo: TitledText? = null,
+    val sender: Recipient? = null,
+    val thread: Recipient? = null,
+) {
+    val fromTitle = GetString(R.string.message_details_header__from)
+}
+
+data class Attachment(
+    val fileDetails: List<TitledText>,
+    val fileName: String?,
+    val uri: Uri?,
+    val hasImage: Boolean
+)
+
+sealed class Event {
+    object Finish: Event()
+    data class StartMediaPreview(val args: MediaPreviewArgs): Event()
+}
--- a/app/src/main/java/org/thoughtcrime/securesms/conversation/v2/components/MentionCandidateView.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/conversation/v2/components/MentionCandidateView.kt
@@ -28,11 +28,10 @@ class MentionCandidateView : LinearLayout {

    private fun update() = with(binding) {
        mentionCandidateNameTextView.text = mentionCandidate.displayName
-        profilePictureView.root.publicKey = mentionCandidate.publicKey
-        profilePictureView.root.displayName = mentionCandidate.displayName
-        profilePictureView.root.additionalPublicKey = null
-        profilePictureView.root.glide = glide!!
-        profilePictureView.root.update()
+        profilePictureView.publicKey = mentionCandidate.publicKey
+        profilePictureView.displayName = mentionCandidate.displayName
+        profilePictureView.additionalPublicKey = null
+        profilePictureView.update()
        if (openGroupServer != null && openGroupRoom != null) {
            val isUserModerator = OpenGroupManager.isUserModerator(context, "$openGroupRoom.$openGroupServer", mentionCandidate.publicKey)
            moderatorIconImageView.visibility = if (isUserModerator) View.VISIBLE else View.GONE
--- a/app/src/main/java/org/thoughtcrime/securesms/conversation/v2/input_bar/mentions/MentionCandidateView.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/conversation/v2/input_bar/mentions/MentionCandidateView.kt
@@ -28,11 +28,10 @@ class MentionCandidateView : RelativeLayout {

    private fun update() = with(binding) {
        mentionCandidateNameTextView.text = candidate.displayName
-        profilePictureView.root.publicKey = candidate.publicKey
-        profilePictureView.root.displayName = candidate.displayName
-        profilePictureView.root.additionalPublicKey = null
-        profilePictureView.root.glide = glide!!
-        profilePictureView.root.update()
+        profilePictureView.publicKey = candidate.publicKey
+        profilePictureView.displayName = candidate.displayName
+        profilePictureView.additionalPublicKey = null
+        profilePictureView.update()
        if (openGroupServer != null && openGroupRoom != null) {
            val isUserModerator = OpenGroupManager.isUserModerator(context, "$openGroupRoom.$openGroupServer", candidate.publicKey)
            moderatorIconImageView.visibility = if (isUserModerator) View.VISIBLE else View.GONE
--- a/app/src/main/java/org/thoughtcrime/securesms/conversation/v2/menus/ConversationActionModeCallback.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/conversation/v2/menus/ConversationActionModeCallback.kt
@@ -67,7 +67,7 @@ class ConversationActionModeCallback(private val adapter: ConversationAdapter, p
        menu.findItem(R.id.menu_context_copy_public_key).isVisible =
             (thread.isGroupRecipient && !thread.isOpenGroupRecipient && selectedItems.size == 1 && firstMessage.individualRecipient.address.toString() != userPublicKey)
        // Message detail
-        menu.findItem(R.id.menu_message_details).isVisible = (selectedItems.size == 1 && firstMessage.isOutgoing)
+        menu.findItem(R.id.menu_message_details).isVisible = selectedItems.size == 1
        // Resend
        menu.findItem(R.id.menu_context_resend).isVisible = (selectedItems.size == 1 && firstMessage.isFailed)
        // Resync
--- a/app/src/main/java/org/thoughtcrime/securesms/conversation/v2/messages/VisibleMessageContentView.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/conversation/v2/messages/VisibleMessageContentView.kt
@@ -36,6 +36,7 @@ import org.thoughtcrime.securesms.conversation.v2.utilities.TextUtilities.getInt
 import org.thoughtcrime.securesms.database.model.MessageRecord
 import org.thoughtcrime.securesms.database.model.MmsMessageRecord
 import org.thoughtcrime.securesms.database.model.SmsMessageRecord
+import org.thoughtcrime.securesms.mms.GlideApp
 import org.thoughtcrime.securesms.mms.GlideRequests
 import org.thoughtcrime.securesms.util.GlowViewUtilities
 import org.thoughtcrime.securesms.util.SearchUtil
@@ -45,7 +46,6 @@ import kotlin.math.roundToInt

 class VisibleMessageContentView : ConstraintLayout {
    private val binding: ViewVisibleMessageContentBinding by lazy { ViewVisibleMessageContentBinding.bind(this) }
-    var onContentClick: MutableList<((event: MotionEvent) -> Unit)> = mutableListOf()
    var onContentDoubleTap: (() -> Unit)? = null
    var delegate: VisibleMessageViewDelegate? = null
    var indexInAdapter: Int = -1
@@ -59,13 +59,14 @@ class VisibleMessageContentView : ConstraintLayout {
    // region Updating
    fun bind(
        message: MessageRecord,
-        isStartOfMessageCluster: Boolean,
-        isEndOfMessageCluster: Boolean,
-        glide: GlideRequests,
+        isStartOfMessageCluster: Boolean = true,
+        isEndOfMessageCluster: Boolean = true,
+        glide: GlideRequests = GlideApp.with(this),
        thread: Recipient,
-        searchQuery: String?,
-        contactIsTrusted: Boolean,
-        onAttachmentNeedsDownload: (Long, Long) -> Unit
+        searchQuery: String? = null,
+        contactIsTrusted: Boolean = true,
+        onAttachmentNeedsDownload: (Long, Long) -> Unit,
+        suppressThumbnails: Boolean = false
    ) {
        // Background
        val color = if (message.isOutgoing) context.getAccentColor()
@@ -184,7 +185,7 @@ class VisibleMessageContentView : ConstraintLayout {
                    onContentClick.add { binding.untrustedView.root.showTrustDialog(message.individualRecipient) }
                }
            }
-            message is MmsMessageRecord && message.slideDeck.asAttachments().isNotEmpty() -> {
+            message is MmsMessageRecord && !suppressThumbnails && message.slideDeck.asAttachments().isNotEmpty() -> {
                /*
                 *    Images / Video attachment
                 */
@@ -237,6 +238,12 @@ class VisibleMessageContentView : ConstraintLayout {
        binding.contentParent.layoutParams = layoutParams
    }

+    private val onContentClick: MutableList<((event: MotionEvent) -> Unit)> = mutableListOf()
+
+    fun onContentClick(event: MotionEvent) {
+        onContentClick.forEach { clickHandler -> clickHandler.invoke(event) }
+    }
+
    private fun ViewVisibleMessageContentBinding.barrierViewsGone(): Boolean =
        listOf<View>(albumThumbnailView.root, linkPreviewView.root, voiceMessageView.root, quoteView.root).none { it.isVisible }

--- a/app/src/main/java/org/thoughtcrime/securesms/conversation/v2/messages/VisibleMessageView.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/conversation/v2/messages/VisibleMessageView.kt
@@ -2,16 +2,17 @@ package org.thoughtcrime.securesms.conversation.v2.messages

 import android.content.Context
 import android.content.Intent
-import android.content.res.Resources
 import android.graphics.Canvas
 import android.graphics.Rect
 import android.graphics.drawable.ColorDrawable
 import android.os.Handler
 import android.os.Looper
 import android.util.AttributeSet
+import android.view.Gravity
 import android.view.HapticFeedbackConstants
 import android.view.MotionEvent
 import android.view.View
+import android.widget.FrameLayout
 import android.widget.LinearLayout
 import androidx.annotation.ColorInt
 import androidx.annotation.DrawableRes
@@ -46,6 +47,7 @@ import org.thoughtcrime.securesms.database.ThreadDatabase
 import org.thoughtcrime.securesms.database.model.MessageRecord
 import org.thoughtcrime.securesms.groups.OpenGroupManager
 import org.thoughtcrime.securesms.home.UserDetailsBottomSheet
+import org.thoughtcrime.securesms.mms.GlideApp
 import org.thoughtcrime.securesms.mms.GlideRequests
 import org.thoughtcrime.securesms.util.DateUtils
 import org.thoughtcrime.securesms.util.disableClipping
@@ -70,7 +72,6 @@ class VisibleMessageView : LinearLayout {
    @Inject lateinit var mmsDb: MmsDatabase

    private val binding by lazy { ViewVisibleMessageBinding.bind(this) }
-    private val screenWidth = Resources.getSystem().displayMetrics.widthPixels
    private val swipeToReplyIcon = ContextCompat.getDrawable(context, R.drawable.ic_baseline_reply_24)!!.mutate()
    private val swipeToReplyIconRect = Rect()
    private var dx = 0.0f
@@ -114,6 +115,7 @@ class VisibleMessageView : LinearLayout {
        binding.root.disableClipping()
        binding.mainContainer.disableClipping()
        binding.messageInnerContainer.disableClipping()
+        binding.messageInnerLayout.disableClipping()
        binding.messageContentView.root.disableClipping()
    }
    // endregion
@@ -121,14 +123,14 @@ class VisibleMessageView : LinearLayout {
    // region Updating
    fun bind(
        message: MessageRecord,
-        previous: MessageRecord?,
-        next: MessageRecord?,
-        glide: GlideRequests,
-        searchQuery: String?,
-        contact: Contact?,
+        previous: MessageRecord? = null,
+        next: MessageRecord? = null,
+        glide: GlideRequests = GlideApp.with(this),
+        searchQuery: String? = null,
+        contact: Contact? = null,
        senderSessionID: String,
        lastSeen: Long,
-        delegate: VisibleMessageViewDelegate?,
+        delegate: VisibleMessageViewDelegate? = null,
        onAttachmentNeedsDownload: (Long, Long) -> Unit
    ) {
        val threadID = message.threadId
@@ -139,7 +141,7 @@ class VisibleMessageView : LinearLayout {
        // Show profile picture and sender name if this is a group thread AND
        // the message is incoming
        binding.moderatorIconImageView.isVisible = false
-        binding.profilePictureView.root.visibility = when {
+        binding.profilePictureView.visibility = when {
            thread.isGroupRecipient && !message.isOutgoing && isEndOfMessageCluster -> View.VISIBLE
            thread.isGroupRecipient -> View.INVISIBLE
            else -> View.GONE
@@ -148,22 +150,21 @@ class VisibleMessageView : LinearLayout {
        val bottomMargin = if (isEndOfMessageCluster) resources.getDimensionPixelSize(R.dimen.small_spacing)
        else ViewUtil.dpToPx(context,2)

-        if (binding.profilePictureView.root.visibility == View.GONE) {
+        if (binding.profilePictureView.visibility == View.GONE) {
            val expirationParams = binding.messageInnerContainer.layoutParams as MarginLayoutParams
            expirationParams.bottomMargin = bottomMargin
            binding.messageInnerContainer.layoutParams = expirationParams
        } else {
-            val avatarLayoutParams = binding.profilePictureView.root.layoutParams as MarginLayoutParams
+            val avatarLayoutParams = binding.profilePictureView.layoutParams as MarginLayoutParams
            avatarLayoutParams.bottomMargin = bottomMargin
-            binding.profilePictureView.root.layoutParams = avatarLayoutParams
+            binding.profilePictureView.layoutParams = avatarLayoutParams
        }

        if (isGroupThread && !message.isOutgoing) {
            if (isEndOfMessageCluster) {
-                binding.profilePictureView.root.publicKey = senderSessionID
-                binding.profilePictureView.root.glide = glide
-                binding.profilePictureView.root.update(message.individualRecipient)
-                binding.profilePictureView.root.setOnClickListener {
+                binding.profilePictureView.publicKey = senderSessionID
+                binding.profilePictureView.update(message.individualRecipient)
+                binding.profilePictureView.setOnClickListener {
                    if (thread.isOpenGroupRecipient) {
                        val openGroup = lokiThreadDb.getOpenGroupChat(threadID)
                        if (IdPrefix.fromValue(senderSessionID) == IdPrefix.BLINDED && openGroup?.canWrite == true) {
@@ -342,11 +343,14 @@ class VisibleMessageView : LinearLayout {

    private fun updateExpirationTimer(message: MessageRecord) {
        val container = binding.messageInnerContainer
-        val content = binding.messageContentView.root
-        val expiration = binding.expirationTimerView
-        container.removeAllViewsInLayout()
-        container.addView(if (message.isOutgoing) expiration else content)
-        container.addView(if (message.isOutgoing) content else expiration)
+        val layout = binding.messageInnerLayout
+
+        if (message.isOutgoing) binding.messageContentView.root.bringToFront()
+        else binding.expirationTimerView.bringToFront()
+
+        layout.layoutParams = layout.layoutParams.let { it as FrameLayout.LayoutParams }
+            .apply { gravity = if (message.isOutgoing) Gravity.END else Gravity.START }
+
        val containerParams = container.layoutParams as ConstraintLayout.LayoutParams
        containerParams.horizontalBias = if (message.isOutgoing) 1f else 0f
        container.layoutParams = containerParams
@@ -392,7 +396,7 @@ class VisibleMessageView : LinearLayout {
        val spacing = context.resources.getDimensionPixelSize(R.dimen.small_spacing)
        val iconSize = toPx(24, context.resources)
        val left = binding.messageInnerContainer.left + binding.messageContentView.root.right + spacing
-        val top = height - (binding.messageInnerContainer.height / 2) - binding.profilePictureView.root.marginBottom - (iconSize / 2)
+        val top = height - (binding.messageInnerContainer.height / 2) - binding.profilePictureView.marginBottom - (iconSize / 2)
        val right = left + iconSize
        val bottom = top + iconSize
        swipeToReplyIconRect.left = left
@@ -412,7 +416,7 @@ class VisibleMessageView : LinearLayout {
    }

    fun recycle() {
-        binding.profilePictureView.root.recycle()
+        binding.profilePictureView.recycle()
        binding.messageContentView.root.recycle()
    }

@@ -513,7 +517,7 @@ class VisibleMessageView : LinearLayout {
    }

    fun onContentClick(event: MotionEvent) {
-        binding.messageContentView.root.onContentClick.iterator().forEach { clickHandler -> clickHandler.invoke(event) }
+        binding.messageContentView.root.onContentClick(event)
    }

    private fun onPress(event: MotionEvent) {
--- a/app/src/main/java/org/thoughtcrime/securesms/home/ConversationView.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/home/ConversationView.kt
@@ -65,7 +65,6 @@ class ConversationView : LinearLayout {
        } else {
            ContextCompat.getDrawable(context, R.drawable.conversation_view_background)
        }
-        binding.profilePictureView.root.glide = glide
        val unreadCount = thread.unreadCount
        if (thread.recipient.isBlocked) {
            binding.accentView.setBackgroundResource(R.color.destructive)
@@ -125,11 +124,11 @@ class ConversationView : LinearLayout {
            thread.isRead -> binding.statusIndicatorImageView.setImageResource(R.drawable.ic_filled_circle_check)
            else -> binding.statusIndicatorImageView.setImageResource(R.drawable.ic_circle_check)
        }
-        binding.profilePictureView.root.update(thread.recipient)
+        binding.profilePictureView.update(thread.recipient)
    }

    fun recycle() {
-        binding.profilePictureView.root.recycle()
+        binding.profilePictureView.recycle()
    }

    private fun getUserDisplayName(recipient: Recipient): String? {
--- a/app/src/main/java/org/thoughtcrime/securesms/home/HomeActivity.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/home/HomeActivity.kt
@@ -168,8 +168,7 @@ class HomeActivity : PassphraseRequiredActionBarActivity(),
        // Set up Glide
        glide = GlideApp.with(this)
        // Set up toolbar buttons
-        binding.profileButton.root.glide = glide
-        binding.profileButton.root.setOnClickListener { openSettings() }
+        binding.profileButton.setOnClickListener { openSettings() }
        binding.searchViewContainer.setOnClickListener {
            binding.globalSearchInputLayout.requestFocus()
        }
@@ -364,8 +363,8 @@ class HomeActivity : PassphraseRequiredActionBarActivity(),
        ApplicationContext.getInstance(this).messageNotifier.setHomeScreenVisible(true)
        if (textSecurePreferences.getLocalNumber() == null) { return; } // This can be the case after a secondary device is auto-cleared
        IdentityKeyUtil.checkUpdate(this)
-        binding.profileButton.root.recycle() // clear cached image before update tje profilePictureView
-        binding.profileButton.root.update()
+        binding.profileButton.recycle() // clear cached image before update tje profilePictureView
+        binding.profileButton.update()
        if (textSecurePreferences.getHasViewedSeed()) {
            binding.seedReminderView.isVisible = false
        }
@@ -440,10 +439,10 @@ class HomeActivity : PassphraseRequiredActionBarActivity(),
    }

    private fun updateProfileButton() {
-        binding.profileButton.root.publicKey = publicKey
-        binding.profileButton.root.displayName = textSecurePreferences.getProfileName()
-        binding.profileButton.root.recycle()
-        binding.profileButton.root.update()
+        binding.profileButton.publicKey = publicKey
+        binding.profileButton.displayName = textSecurePreferences.getProfileName()
+        binding.profileButton.recycle()
+        binding.profileButton.update()
    }
    // endregion

--- a/app/src/main/java/org/thoughtcrime/securesms/home/UserDetailsBottomSheet.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/home/UserDetailsBottomSheet.kt
@@ -53,10 +53,9 @@ class UserDetailsBottomSheet: BottomSheetDialogFragment() {
        val recipient = Recipient.from(requireContext(), Address.fromSerialized(publicKey), false)
        val threadRecipient = threadDb.getRecipientForThreadId(threadID) ?: return dismiss()
        with(binding) {
-            profilePictureView.root.publicKey = publicKey
-            profilePictureView.root.glide = GlideApp.with(this@UserDetailsBottomSheet)
-            profilePictureView.root.isLarge = true
-            profilePictureView.root.update(recipient)
+            profilePictureView.publicKey = publicKey
+            profilePictureView.isLarge = true
+            profilePictureView.update(recipient)
            nameTextViewContainer.visibility = View.VISIBLE
            nameTextViewContainer.setOnClickListener {
                if (recipient.isOpenGroupInboxRecipient || recipient.isOpenGroupOutboxRecipient) return@setOnClickListener
--- a/app/src/main/java/org/thoughtcrime/securesms/home/search/GlobalSearchAdapter.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/home/search/GlobalSearchAdapter.kt
@@ -83,22 +83,20 @@ class GlobalSearchAdapter (private val modelCallback: (Model)->Unit): RecyclerVi

    override fun onViewRecycled(holder: RecyclerView.ViewHolder) {
        if (holder is ContentView) {
-            holder.binding.searchResultProfilePicture.root.recycle()
+            holder.binding.searchResultProfilePicture.recycle()
        }
    }

    class ContentView(view: View, private val modelCallback: (Model) -> Unit) : RecyclerView.ViewHolder(view) {

-        val binding = ViewGlobalSearchResultBinding.bind(view).apply {
-            searchResultProfilePicture.root.glide = GlideApp.with(root)
-        }
+        val binding = ViewGlobalSearchResultBinding.bind(view)

        fun bindPayload(newQuery: String, model: Model) {
            bindQuery(newQuery, model)
        }

        fun bind(query: String, model: Model) {
-            binding.searchResultProfilePicture.root.recycle()
+            binding.searchResultProfilePicture.recycle()
            when (model) {
                is Model.GroupConversation -> bindModel(query, model)
                is Model.Contact -> bindModel(query, model)
--- a/app/src/main/java/org/thoughtcrime/securesms/home/search/GlobalSearchAdapterUtils.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/home/search/GlobalSearchAdapterUtils.kt
@@ -87,12 +87,12 @@ private fun getHighlight(query: String?, toSearch: String): Spannable? {
 }

 fun ContentView.bindModel(query: String?, model: GroupConversation) {
-    binding.searchResultProfilePicture.root.isVisible = true
+    binding.searchResultProfilePicture.isVisible = true
    binding.searchResultSavedMessages.isVisible = false
    binding.searchResultSubtitle.isVisible = model.groupRecord.isClosedGroup
    binding.searchResultTimestamp.isVisible = false
    val threadRecipient = Recipient.from(binding.root.context, Address.fromSerialized(model.groupRecord.encodedId), false)
-    binding.searchResultProfilePicture.root.update(threadRecipient)
+    binding.searchResultProfilePicture.update(threadRecipient)
    val nameString = model.groupRecord.title
    binding.searchResultTitle.text = getHighlight(query, nameString)

@@ -108,14 +108,14 @@ fun ContentView.bindModel(query: String?, model: GroupConversation) {
 }

 fun ContentView.bindModel(query: String?, model: ContactModel) {
-    binding.searchResultProfilePicture.root.isVisible = true
+    binding.searchResultProfilePicture.isVisible = true
    binding.searchResultSavedMessages.isVisible = false
    binding.searchResultSubtitle.isVisible = false
    binding.searchResultTimestamp.isVisible = false
    binding.searchResultSubtitle.text = null
    val recipient =
        Recipient.from(binding.root.context, Address.fromSerialized(model.contact.sessionID), false)
-    binding.searchResultProfilePicture.root.update(recipient)
+    binding.searchResultProfilePicture.update(recipient)
    val nameString = model.contact.getSearchName()
    binding.searchResultTitle.text = getHighlight(query, nameString)
 }
@@ -124,12 +124,12 @@ fun ContentView.bindModel(model: SavedMessages) {
    binding.searchResultSubtitle.isVisible = false
    binding.searchResultTimestamp.isVisible = false
    binding.searchResultTitle.setText(R.string.note_to_self)
-    binding.searchResultProfilePicture.root.isVisible = false
+    binding.searchResultProfilePicture.isVisible = false
    binding.searchResultSavedMessages.isVisible = true
 }

 fun ContentView.bindModel(query: String?, model: Message) {
-    binding.searchResultProfilePicture.root.isVisible = true
+    binding.searchResultProfilePicture.isVisible = true
    binding.searchResultSavedMessages.isVisible = false
    binding.searchResultTimestamp.isVisible = true
 //    val hasUnreads = model.unread > 0
@@ -138,7 +138,7 @@ fun ContentView.bindModel(query: String?, model: Message) {
 //        binding.unreadCountTextView.text = model.unread.toString()
 //    }
    binding.searchResultTimestamp.text = DateUtils.getDisplayFormattedTimeSpanString(binding.root.context, Locale.getDefault(), model.messageResult.sentTimestampMs)
-    binding.searchResultProfilePicture.root.update(model.messageResult.conversationRecipient)
+    binding.searchResultProfilePicture.update(model.messageResult.conversationRecipient)
    val textSpannable = SpannableStringBuilder()
    if (model.messageResult.conversationRecipient != model.messageResult.messageRecipient) {
        // group chat, bind
--- a/app/src/main/java/org/thoughtcrime/securesms/messagerequests/MessageRequestView.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/messagerequests/MessageRequestView.kt
@@ -34,7 +34,6 @@ class MessageRequestView : LinearLayout {
    // region Updating
    fun bind(thread: ThreadRecord, glide: GlideRequests) {
        this.thread = thread
-        binding.profilePictureView.root.glide = glide
        val senderDisplayName = getUserDisplayName(thread.recipient)
            ?: thread.recipient.address.toString()
        binding.displayNameTextView.text = senderDisplayName
@@ -44,12 +43,12 @@ class MessageRequestView : LinearLayout {
        binding.snippetTextView.text = snippet

        post {
-            binding.profilePictureView.root.update(thread.recipient)
+            binding.profilePictureView.update(thread.recipient)
        }
    }

    fun recycle() {
-        binding.profilePictureView.root.recycle()
+        binding.profilePictureView.recycle()
    }

    private fun getUserDisplayName(recipient: Recipient): String? {
--- a/app/src/main/java/org/thoughtcrime/securesms/preferences/BlockedContactsAdapter.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/preferences/BlockedContactsAdapter.kt
@@ -38,7 +38,7 @@ class BlockedContactsAdapter(val viewModel: BlockedContactsViewModel) : ListAdap

    override fun onViewRecycled(holder: ViewHolder) {
        super.onViewRecycled(holder)
-        holder.binding.profilePictureView.root.recycle()
+        holder.binding.profilePictureView.recycle()
    }

    class ViewHolder(itemView: View): RecyclerView.ViewHolder(itemView) {
@@ -48,8 +48,7 @@ class BlockedContactsAdapter(val viewModel: BlockedContactsViewModel) : ListAdap

        fun bind(selectable: SelectableRecipient, toggle: (SelectableRecipient) -> Unit) {
            binding.recipientName.text = selectable.item.name
-            with (binding.profilePictureView.root) {
-                glide = this@ViewHolder.glide
+            with (binding.profilePictureView) {
                update(selectable.item)
            }
            binding.root.setOnClickListener { toggle(selectable) }
--- a/app/src/main/java/org/thoughtcrime/securesms/preferences/SettingsActivity.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/preferences/SettingsActivity.kt
@@ -88,10 +88,8 @@ class SettingsActivity : PassphraseRequiredActionBarActivity() {
        val displayName = getDisplayName()
        glide = GlideApp.with(this)
        with(binding) {
-            setupProfilePictureView(profilePictureView.root)
-            profilePictureView.root.setOnClickListener {
-                showEditProfilePictureUI()
-            }
+            setupProfilePictureView(profilePictureView)
+            profilePictureView.setOnClickListener { showEditProfilePictureUI() }
            ctnGroupNameSection.setOnClickListener { startActionMode(DisplayNameEditActionModeCallback()) }
            btnGroupNameDisplay.text = displayName
            publicKeyTextView.text = hexEncodedPublicKey
@@ -116,7 +114,6 @@ class SettingsActivity : PassphraseRequiredActionBarActivity() {
        TextSecurePreferences.getProfileName(this) ?: truncateIdForDisplay(hexEncodedPublicKey)

    private fun setupProfilePictureView(view: ProfilePictureView) {
-        view.glide = glide
        view.apply {
            publicKey = hexEncodedPublicKey
            displayName = getDisplayName()
@@ -255,8 +252,8 @@ class SettingsActivity : PassphraseRequiredActionBarActivity() {
                binding.btnGroupNameDisplay.text = displayName
            }
            if (isUpdatingProfilePicture) {
-                binding.profilePictureView.root.recycle() // Clear the cached image before updating
-                binding.profilePictureView.root.update()
+                binding.profilePictureView.recycle() // Clear the cached image before updating
+                binding.profilePictureView.update()
            }
            binding.loader.isVisible = false
        }
--- a/app/src/main/java/org/thoughtcrime/securesms/reactions/ReactionRecipientsAdapter.java
+++ b/app/src/main/java/org/thoughtcrime/securesms/reactions/ReactionRecipientsAdapter.java
@@ -144,7 +144,6 @@ final class ReactionRecipientsAdapter extends RecyclerView.Adapter<ReactionRecip
      super(itemView);
      this.callback = callback;
      avatar = itemView.findViewById(R.id.reactions_bottom_view_avatar);
-      avatar.glide = GlideApp.with(itemView);
      recipient = itemView.findViewById(R.id.reactions_bottom_view_recipient_name);
      remove = itemView.findViewById(R.id.reactions_bottom_view_recipient_remove);
    }
--- a/app/src/main/java/org/thoughtcrime/securesms/ui/Colors.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/ui/Colors.kt
@@ -0,0 +1,63 @@
+package org.thoughtcrime.securesms.ui
+
+import androidx.compose.material.ButtonDefaults
+import androidx.compose.material.Colors
+import androidx.compose.material.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.graphics.Color
+
+val colorDestructive = Color(0xffFF453A)
+
+const val classicDark0 = 0xff111111
+const val classicDark1 = 0xff1B1B1B
+const val classicDark2 = 0xff2D2D2D
+const val classicDark3 = 0xff414141
+const val classicDark4 = 0xff767676
+const val classicDark5 = 0xffA1A2A1
+const val classicDark6 = 0xffFFFFFF
+
+const val classicLight0 = 0xff000000
+const val classicLight1 = 0xff6D6D6D
+const val classicLight2 = 0xffA1A2A1
+const val classicLight3 = 0xffDFDFDF
+const val classicLight4 = 0xffF0F0F0
+const val classicLight5 = 0xffF9F9F9
+const val classicLight6 = 0xffFFFFFF
+
+const val oceanDark0 = 0xff000000
+const val oceanDark1 = 0xff1A1C28
+const val oceanDark2 = 0xff252735
+const val oceanDark3 = 0xff2B2D40
+const val oceanDark4 = 0xff3D4A5D
+const val oceanDark5 = 0xffA6A9CE
+const val oceanDark6 = 0xff5CAACC
+const val oceanDark7 = 0xffFFFFFF
+
+const val oceanLight0 = 0xff000000
+const val oceanLight1 = 0xff19345D
+const val oceanLight2 = 0xff6A6E90
+const val oceanLight3 = 0xff5CAACC
+const val oceanLight4 = 0xffB3EDF2
+const val oceanLight5 = 0xffE7F3F4
+const val oceanLight6 = 0xffECFAFB
+const val oceanLight7 = 0xffFCFFFF
+
+val ocean_accent = Color(0xff57C9FA)
+
+val oceanLights = arrayOf(oceanLight0, oceanLight1, oceanLight2, oceanLight3, oceanLight4, oceanLight5, oceanLight6, oceanLight7)
+val oceanDarks = arrayOf(oceanDark0, oceanDark1, oceanDark2, oceanDark3, oceanDark4, oceanDark5, oceanDark6, oceanDark7)
+val classicLights = arrayOf(classicLight0, classicLight1, classicLight2, classicLight3, classicLight4, classicLight5, classicLight6)
+val classicDarks = arrayOf(classicDark0, classicDark1, classicDark2, classicDark3, classicDark4, classicDark5, classicDark6)
+
+val oceanLightColors = oceanLights.map(::Color)
+val oceanDarkColors = oceanDarks.map(::Color)
+val classicLightColors = classicLights.map(::Color)
+val classicDarkColors = classicDarks.map(::Color)
+
+val blackAlpha40 = Color.Black.copy(alpha = 0.4f)
+
+@Composable
+fun transparentButtonColors() = ButtonDefaults.buttonColors(backgroundColor = Color.Transparent)
+
+@Composable
+fun destructiveButtonColors() = ButtonDefaults.buttonColors(backgroundColor = Color.Transparent, contentColor = colorDestructive)
--- a/app/src/main/java/org/thoughtcrime/securesms/ui/Components.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/ui/Components.kt
@@ -0,0 +1,182 @@
+package org.thoughtcrime.securesms.ui
+
+import androidx.annotation.DrawableRes
+import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxScope
+import androidx.compose.foundation.layout.RowScope
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.wrapContentHeight
+import androidx.compose.foundation.pager.PagerState
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.ButtonColors
+import androidx.compose.material.Card
+import androidx.compose.material.Colors
+import androidx.compose.material.Icon
+import androidx.compose.material.IconButton
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Text
+import androidx.compose.material.TextButton
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.RectangleShape
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.viewinterop.AndroidView
+import com.google.accompanist.pager.HorizontalPagerIndicator
+import kotlinx.coroutines.launch
+import network.loki.messenger.R
+import org.session.libsession.utilities.recipients.Recipient
+import org.thoughtcrime.securesms.components.ProfilePictureView
+
+@Composable
+fun ItemButton(
+    text: String,
+    @DrawableRes icon: Int,
+    colors: ButtonColors = transparentButtonColors(),
+    contentDescription: String = text,
+    onClick: () -> Unit
+) {
+    TextButton(
+        modifier = Modifier
+            .fillMaxWidth()
+            .height(60.dp),
+        colors = colors,
+        onClick = onClick,
+        shape = RectangleShape,
+    ) {
+        Box(modifier = Modifier
+            .width(80.dp)
+            .fillMaxHeight()) {
+            Icon(
+                painter = painterResource(id = icon),
+                contentDescription = contentDescription,
+                modifier = Modifier.align(Alignment.Center)
+            )
+        }
+        Text(text, modifier = Modifier.fillMaxWidth())
+    }
+}
+
+@Composable
+fun Cell(content: @Composable () -> Unit) {
+    CellWithPaddingAndMargin(padding = 0.dp) { content() }
+}
+@Composable
+fun CellNoMargin(content: @Composable () -> Unit) {
+    CellWithPaddingAndMargin(padding = 0.dp, margin = 0.dp) { content() }
+}
+
+@Composable
+fun CellWithPaddingAndMargin(
+    padding: Dp = 24.dp,
+    margin: Dp = 32.dp,
+    content: @Composable () -> Unit
+) {
+    Card(
+        backgroundColor = MaterialTheme.colors.cellColor,
+        shape = RoundedCornerShape(16.dp),
+        elevation = 0.dp,
+        modifier = Modifier
+            .wrapContentHeight()
+            .fillMaxWidth()
+            .padding(horizontal = margin),
+    ) {
+        Box(Modifier.padding(padding)) { content() }
+    }
+}
+
+private val Colors.cellColor: Color
+    @Composable
+    get() = LocalExtraColors.current.settingsBackground
+
+@OptIn(ExperimentalFoundationApi::class)
+@Composable
+fun BoxScope.HorizontalPagerIndicator(pagerState: PagerState) {
+    if (pagerState.pageCount >= 2) Card(
+        shape = RoundedCornerShape(50.dp),
+        backgroundColor = Color.Black.copy(alpha = 0.4f),
+        modifier = Modifier
+            .align(Alignment.BottomCenter)
+            .padding(8.dp)
+    ) {
+        Box(modifier = Modifier.padding(8.dp)) {
+            HorizontalPagerIndicator(
+                pagerState = pagerState,
+                pageCount = pagerState.pageCount,
+                activeColor = Color.White,
+                inactiveColor = classicDarkColors[5])
+        }
+    }
+}
+
+@OptIn(ExperimentalFoundationApi::class)
+@Composable
+fun RowScope.CarouselPrevButton(pagerState: PagerState) {
+    CarouselButton(pagerState, pagerState.canScrollBackward, R.drawable.ic_prev, -1)
+}
+
+@OptIn(ExperimentalFoundationApi::class)
+@Composable
+fun RowScope.CarouselNextButton(pagerState: PagerState) {
+    CarouselButton(pagerState, pagerState.canScrollForward, R.drawable.ic_next, 1)
+}
+
+@OptIn(ExperimentalFoundationApi::class)
+@Composable
+fun RowScope.CarouselButton(
+    pagerState: PagerState,
+    enabled: Boolean,
+    @DrawableRes id: Int,
+    delta: Int
+) {
+    if (pagerState.pageCount <= 1) Spacer(modifier = Modifier.width(32.dp))
+    else {
+        val animationScope = rememberCoroutineScope()
+        IconButton(
+            modifier = Modifier
+                .width(40.dp)
+                .align(Alignment.CenterVertically),
+            enabled = enabled,
+            onClick = { animationScope.launch { pagerState.animateScrollToPage(pagerState.currentPage + delta) } }) {
+            Icon(
+                painter = painterResource(id = id),
+                contentDescription = "",
+            )
+        }
+    }
+}
+
+@Composable
+fun Divider() {
+    androidx.compose.material.Divider(
+        modifier = Modifier.padding(horizontal = 16.dp),
+    )
+}
+
+@Composable
+fun RowScope.Avatar(recipient: Recipient) {
+    Box(
+        modifier = Modifier
+            .width(60.dp)
+            .align(Alignment.CenterVertically)
+    ) {
+        AndroidView(
+            factory = {
+                ProfilePictureView(it).apply { update(recipient) }
+            },
+            modifier = Modifier
+                .width(46.dp)
+                .height(46.dp)
+        )
+    }
+}
--- a/app/src/main/java/org/thoughtcrime/securesms/ui/Data.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/ui/Data.kt
@@ -0,0 +1,34 @@
+package org.thoughtcrime.securesms.ui
+
+import androidx.annotation.StringRes
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.res.stringResource
+
+/**
+ * Compatibility class to allow ViewModels to use strings and string resources interchangeably.
+ */
+sealed class GetString {
+    @Composable
+    abstract fun string(): String
+    data class FromString(val string: String): GetString() {
+        @Composable
+        override fun string(): String = string
+    }
+    data class FromResId(@StringRes val resId: Int): GetString() {
+        @Composable
+        override fun string(): String = stringResource(resId)
+
+    }
+}
+
+fun GetString(@StringRes resId: Int) = GetString.FromResId(resId)
+fun GetString(string: String) = GetString.FromString(string)
+
+
+/**
+ * Represents some text with an associated title.
+ */
+data class TitledText(val title: GetString, val text: String) {
+    constructor(title: String, text: String): this(GetString(title), text)
+    constructor(@StringRes title: Int, text: String): this(GetString(title), text)
+}
--- a/app/src/main/java/org/thoughtcrime/securesms/ui/Themes.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/ui/Themes.kt
@@ -0,0 +1,76 @@
+package org.thoughtcrime.securesms.ui
+
+import android.content.Context
+import androidx.annotation.AttrRes
+import androidx.appcompat.view.ContextThemeWrapper
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.material.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.staticCompositionLocalOf
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.tooling.preview.PreviewParameterProvider
+import com.google.accompanist.themeadapter.appcompat.AppCompatTheme
+import com.google.android.material.color.MaterialColors
+import network.loki.messenger.R
+
+val LocalExtraColors = staticCompositionLocalOf<ExtraColors> { error("No Custom Attribute value provided") }
+
+
+data class ExtraColors(
+    val settingsBackground: Color,
+)
+
+/**
+ * Converts current Theme to Compose Theme.
+ */
+@Composable
+fun AppTheme(
+    content: @Composable () -> Unit
+) {
+    val extraColors = LocalContext.current.run {
+        ExtraColors(
+            settingsBackground = getColorFromTheme(R.attr.colorSettingsBackground),
+        )
+    }
+
+    CompositionLocalProvider(LocalExtraColors provides extraColors) {
+        AppCompatTheme {
+            content()
+        }
+    }
+}
+
+fun Context.getColorFromTheme(@AttrRes attr: Int, defaultValue: Int = 0x0): Color =
+    MaterialColors.getColor(this, attr, defaultValue).let(::Color)
+
+/**
+ * Set the theme and a background for Compose Previews.
+ */
+@Composable
+fun PreviewTheme(
+    themeResId: Int,
+    content: @Composable () -> Unit
+) {
+    CompositionLocalProvider(
+        LocalContext provides ContextThemeWrapper(LocalContext.current, themeResId)
+    ) {
+        AppTheme {
+            Box(modifier = Modifier.background(color = MaterialTheme.colors.background)) {
+                content()
+            }
+        }
+    }
+}
+
+class ThemeResPreviewParameterProvider : PreviewParameterProvider<Int> {
+    override val values = sequenceOf(
+        R.style.Classic_Dark,
+        R.style.Classic_Light,
+        R.style.Ocean_Dark,
+        R.style.Ocean_Light,
+    )
+}