Moves headers to the top nav bar

2023-08-04 16:50:23 -04:00
parent 8abfd7149b
commit 0c0e87af21
8 changed files with 170 additions and 149 deletions
@@ -11,11 +11,8 @@ import androidx.compose.foundation.layout.Row
 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.size
-import androidx.compose.foundation.layout.width
-import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.Divider
 import androidx.compose.material.Icon
 import androidx.compose.material.IconButton
@@ -39,7 +36,6 @@ import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.setValue
 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.platform.LocalContext
 import androidx.compose.ui.res.painterResource
@@ -78,11 +74,20 @@ import com.vitorpamplona.amethyst.service.model.PeopleListEvent
 import com.vitorpamplona.amethyst.service.relays.Client
 import com.vitorpamplona.amethyst.service.relays.RelayPool
 import com.vitorpamplona.amethyst.ui.components.RobohashAsyncImageProxy
+import com.vitorpamplona.amethyst.ui.note.CommunityHeader
+import com.vitorpamplona.amethyst.ui.note.LoadAddressableNote
+import com.vitorpamplona.amethyst.ui.note.LoadChannel
+import com.vitorpamplona.amethyst.ui.note.LoadUser
 import com.vitorpamplona.amethyst.ui.note.SearchIcon
 import com.vitorpamplona.amethyst.ui.screen.equalImmutableLists
 import com.vitorpamplona.amethyst.ui.screen.loggedIn.AccountViewModel
+import com.vitorpamplona.amethyst.ui.screen.loggedIn.ChannelHeader
+import com.vitorpamplona.amethyst.ui.screen.loggedIn.ChatroomHeader
+import com.vitorpamplona.amethyst.ui.screen.loggedIn.GeoHashHeader
+import com.vitorpamplona.amethyst.ui.screen.loggedIn.HashtagHeader
 import com.vitorpamplona.amethyst.ui.screen.loggedIn.SpinnerSelectionDialog
 import com.vitorpamplona.amethyst.ui.theme.BottomTopHeight
+import com.vitorpamplona.amethyst.ui.theme.HeaderPictureModifier
 import com.vitorpamplona.amethyst.ui.theme.Size22Modifier
 import com.vitorpamplona.amethyst.ui.theme.placeholderText
 import kotlinx.collections.immutable.ImmutableList
@@ -109,29 +114,77 @@ fun AppTopBar(
        }
    }

-    RenderTopRouteBar(currentRoute, followLists, scaffoldState, accountViewModel, nav)
+    val id by remember(navEntryState.value) {
+        derivedStateOf {
+            navEntryState.value?.arguments?.getString("id")
+        }
+    }
+
+    RenderTopRouteBar(currentRoute, id, followLists, scaffoldState, accountViewModel, nav)
 }

@Composable
 private fun RenderTopRouteBar(
    currentRoute: String?,
+    id: String?,
    followLists: FollowListViewModel,
    scaffoldState: ScaffoldState,
    accountViewModel: AccountViewModel,
    nav: (String) -> Unit
 ) {
    when (currentRoute) {
-        Route.Channel.base -> NoTopBar()
-        Route.Room.base -> NoTopBar()
-        Route.Community.base -> NoTopBar()
-        Route.Hashtag.base -> NoTopBar()
-        Route.Geohash.base -> NoTopBar()
        // Route.Profile.route -> TopBarWithBackButton(nav)
        Route.Home.base -> HomeTopBar(followLists, scaffoldState, accountViewModel, nav)
        Route.Video.base -> StoriesTopBar(followLists, scaffoldState, accountViewModel, nav)
        Route.Discover.base -> DiscoveryTopBar(followLists, scaffoldState, accountViewModel, nav)
        Route.Notification.base -> NotificationTopBar(followLists, scaffoldState, accountViewModel, nav)
-        else -> MainTopBar(scaffoldState, accountViewModel, nav)
+        else -> {
+            if (id != null) {
+                when (currentRoute) {
+                    Route.Channel.base -> LoadChannel(baseChannelHex = id) {
+                        ChannelHeader(
+                            baseChannel = it,
+                            showVideo = true,
+                            showBottomDiviser = true,
+                            modifier = Modifier.padding(vertical = 8.dp, horizontal = 10.dp),
+                            accountViewModel = accountViewModel,
+                            nav = nav
+                        )
+                    }
+                    Route.Room.base -> LoadUser(baseUserHex = id) {
+                        if (it != null) {
+                            ChatroomHeader(
+                                baseUser = it,
+                                modifier = Modifier.padding(vertical = 4.dp, horizontal = 10.dp),
+                                accountViewModel = accountViewModel,
+                                nav = nav
+                            )
+                        } else {
+                            Spacer(BottomTopHeight)
+                        }
+                    }
+                    Route.Community.base -> LoadAddressableNote(aTagHex = id) {
+                        if (it != null) {
+                            CommunityHeader(
+                                baseNote = it,
+                                showBottomDiviser = true,
+                                sendToCommunity = false,
+                                modifier = Modifier.padding(vertical = 8.dp, horizontal = 10.dp),
+                                accountViewModel = accountViewModel,
+                                nav = nav
+                            )
+                        } else {
+                            Spacer(BottomTopHeight)
+                        }
+                    }
+                    Route.Hashtag.base -> HashtagHeader(id, Modifier.padding(vertical = 0.dp, horizontal = 10.dp), accountViewModel)
+                    Route.Geohash.base -> GeoHashHeader(id, Modifier.padding(vertical = 0.dp, horizontal = 10.dp), accountViewModel)
+                    else -> MainTopBar(scaffoldState, accountViewModel, nav)
+                }
+            } else {
+                MainTopBar(scaffoldState, accountViewModel, nav)
+            }
+        }
    }
 }

@@ -279,17 +332,13 @@ private fun LoggedInUserPictureDrawer(
    val profilePicture = remember(accountUserState) { accountUserState?.user?.profilePicture() }

    IconButton(
-        onClick = onClick,
-        modifier = Modifier
+        onClick = onClick
    ) {
        RobohashAsyncImageProxy(
            robot = pubkeyHex,
            model = profilePicture,
            contentDescription = stringResource(id = R.string.profile_image),
-            modifier = Modifier
-                .width(34.dp)
-                .height(34.dp)
-                .clip(shape = CircleShape)
+            modifier = HeaderPictureModifier
        )
    }
 }
@@ -160,6 +160,7 @@ import com.vitorpamplona.amethyst.ui.theme.Font14SP
 import com.vitorpamplona.amethyst.ui.theme.HalfPadding
 import com.vitorpamplona.amethyst.ui.theme.HalfStartPadding
 import com.vitorpamplona.amethyst.ui.theme.HalfVertSpacer
+import com.vitorpamplona.amethyst.ui.theme.HeaderPictureModifier
 import com.vitorpamplona.amethyst.ui.theme.QuoteBorder
 import com.vitorpamplona.amethyst.ui.theme.Size15Modifier
 import com.vitorpamplona.amethyst.ui.theme.Size16Modifier
@@ -512,29 +513,32 @@ fun CommunityHeader(
 ) {
    val expanded = remember { mutableStateOf(false) }

-    Column(
-        modifier = modifier.clickable {
-            if (sendToCommunity) {
-                routeFor(baseNote, accountViewModel.userProfile())?.let {
-                    nav(it)
+    Column(Modifier.fillMaxWidth()) {
+        Column(
+            verticalArrangement = Arrangement.Center,
+            modifier = modifier.clickable {
+                if (sendToCommunity) {
+                    routeFor(baseNote, accountViewModel.userProfile())?.let {
+                        nav(it)
+                    }
+                } else {
+                    expanded.value = !expanded.value
                }
-            } else {
-                expanded.value = !expanded.value
+            }
+        ) {
+            ShortCommunityHeader(baseNote, expanded, accountViewModel, nav)
+
+            if (expanded.value) {
+                LongCommunityHeader(baseNote, accountViewModel, nav)
            }
        }
-    ) {
-        ShortCommunityHeader(baseNote, expanded, accountViewModel, nav)

-        if (expanded.value) {
-            LongCommunityHeader(baseNote, accountViewModel, nav)
+        if (showBottomDiviser) {
+            Divider(
+                thickness = 0.25.dp
+            )
        }
    }
-
-    if (showBottomDiviser) {
-        Divider(
-            thickness = 0.25.dp
-        )
-    }
 }

@Composable
@@ -691,11 +695,7 @@ fun ShortCommunityHeader(baseNote: AddressableNote, expanded: MutableState<Boole
                model = it,
                contentDescription = stringResource(R.string.profile_image),
                contentScale = ContentScale.Crop,
-                modifier = Modifier
-                    .padding(start = 10.dp)
-                    .width(Size35dp)
-                    .height(Size35dp)
-                    .clip(shape = CircleShape)
+                modifier = HeaderPictureModifier
            )
        }

@@ -1950,6 +1950,26 @@ fun RenderPostApproval(
    }
 }

+@Composable
+fun LoadAddressableNote(aTagHex: String, content: @Composable (AddressableNote?) -> Unit) {
+    var note by remember(aTagHex) {
+        mutableStateOf<AddressableNote?>(LocalCache.getAddressableNoteIfExists(aTagHex))
+    }
+
+    if (note == null) {
+        LaunchedEffect(key1 = aTagHex) {
+            launch(Dispatchers.IO) {
+                val newNote = LocalCache.checkGetOrCreateAddressableNote(aTagHex)
+                if (newNote != note) {
+                    note = newNote
+                }
+            }
+        }
+    }
+
+    content(note)
+}
+
@Composable
 fun LoadAddressableNote(aTag: ATag, content: @Composable (AddressableNote?) -> Unit) {
    var note by remember(aTag) {
@@ -1959,7 +1979,10 @@ fun LoadAddressableNote(aTag: ATag, content: @Composable (AddressableNote?) -> U
    if (note == null) {
        LaunchedEffect(key1 = aTag) {
            launch(Dispatchers.IO) {
-                note = LocalCache.getOrCreateAddressableNote(aTag)
+                val newNote = LocalCache.getOrCreateAddressableNote(aTag)
+                if (newNote != note) {
+                    note = newNote
+                }
            }
        }
    }
@@ -18,7 +18,6 @@ import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
-import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.text.BasicTextField
 import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
@@ -127,7 +126,9 @@ import com.vitorpamplona.amethyst.ui.theme.EditFieldBorder
 import com.vitorpamplona.amethyst.ui.theme.EditFieldLeadingIconModifier
 import com.vitorpamplona.amethyst.ui.theme.EditFieldModifier
 import com.vitorpamplona.amethyst.ui.theme.EditFieldTrailingIconModifier
+import com.vitorpamplona.amethyst.ui.theme.HeaderPictureModifier
 import com.vitorpamplona.amethyst.ui.theme.Size25dp
+import com.vitorpamplona.amethyst.ui.theme.Size34dp
 import com.vitorpamplona.amethyst.ui.theme.Size35dp
 import com.vitorpamplona.amethyst.ui.theme.SmallBorder
 import com.vitorpamplona.amethyst.ui.theme.StdHorzSpacer
@@ -229,14 +230,6 @@ fun ChannelScreen(
    }

    Column(Modifier.fillMaxHeight()) {
-        ChannelHeader(
-            baseChannel = channel,
-            showVideo = true,
-            showBottomDiviser = true,
-            accountViewModel = accountViewModel,
-            nav = nav
-        )
-
        val replyTo = remember { mutableStateOf<Note?>(null) }

        Column(
@@ -571,6 +564,7 @@ fun ChannelHeader(
        val expanded = remember { mutableStateOf(false) }

        Column(
+            verticalArrangement = Arrangement.Center,
            modifier = modifier.clickable {
                if (sendToChannel) {
                    nav(routeFor(baseChannel))
@@ -670,7 +664,7 @@ private fun ShortChannelHeader(
            channel.creator?.let {
                UserPicture(
                    user = it,
-                    size = Size35dp,
+                    size = Size34dp,
                    accountViewModel = accountViewModel,
                    nav = nav
                )
@@ -682,11 +676,7 @@ private fun ShortChannelHeader(
                    model = it,
                    contentDescription = stringResource(R.string.profile_image),
                    contentScale = ContentScale.Crop,
-                    modifier = Modifier
-                        .padding(start = 10.dp)
-                        .width(Size35dp)
-                        .height(Size35dp)
-                        .clip(shape = CircleShape)
+                    modifier = HeaderPictureModifier
                )
            }
        }
@@ -2,10 +2,12 @@ package com.vitorpamplona.amethyst.ui.screen.loggedIn

 import android.widget.Toast
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 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.material.Divider
@@ -36,7 +38,8 @@ import com.vitorpamplona.amethyst.ui.note.LoadUser
 import com.vitorpamplona.amethyst.ui.note.UsernameDisplay
 import com.vitorpamplona.amethyst.ui.screen.NostrChatroomFeedViewModel
 import com.vitorpamplona.amethyst.ui.screen.RefreshingChatroomFeedView
-import com.vitorpamplona.amethyst.ui.theme.Size35dp
+import com.vitorpamplona.amethyst.ui.theme.Size34dp
+import com.vitorpamplona.amethyst.ui.theme.StdPadding
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.launch
 import kotlinx.coroutines.withContext
@@ -129,10 +132,7 @@ fun ChatroomScreen(
    }

    Column(Modifier.fillMaxHeight()) {
-        ChatroomHeader(baseUser, accountViewModel, nav = nav)
-
        val replyTo = remember { mutableStateOf<Note?>(null) }
-
        Column(
            modifier = Modifier
                .fillMaxHeight()
@@ -179,34 +179,36 @@ fun ChatroomScreen(
 }

@Composable
-fun ChatroomHeader(baseUser: User, accountViewModel: AccountViewModel, nav: (String) -> Unit) {
+fun ChatroomHeader(
+    baseUser: User,
+    modifier: Modifier = StdPadding,
+    accountViewModel: AccountViewModel,
+    nav: (String) -> Unit
+) {
    Column(
-        modifier = Modifier.clickable(
+        modifier = Modifier.fillMaxWidth().clickable(
            onClick = { nav("User/${baseUser.pubkeyHex}") }
        )
    ) {
-        Column(modifier = Modifier.padding(12.dp)) {
+        Column(
+            verticalArrangement = Arrangement.Center,
+            modifier = modifier
+        ) {
            Row(verticalAlignment = Alignment.CenterVertically) {
                ClickableUserPicture(
                    baseUser = baseUser,
                    accountViewModel = accountViewModel,
-                    size = Size35dp
+                    size = Size34dp
                )

                Column(modifier = Modifier.padding(start = 10.dp)) {
-                    Row(verticalAlignment = Alignment.CenterVertically) {
-                        UsernameDisplay(baseUser)
-                    }
-
-                    Row(verticalAlignment = Alignment.CenterVertically) {
-                        ObserveDisplayNip05Status(baseUser)
-                    }
+                    UsernameDisplay(baseUser)
+                    ObserveDisplayNip05Status(baseUser)
                }
            }
        }

        Divider(
-            modifier = Modifier.padding(start = 12.dp, end = 12.dp),
            thickness = 0.25.dp
        )
    }
@@ -6,8 +6,6 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.DisposableEffect
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalLifecycleOwner
@@ -15,39 +13,24 @@ import androidx.lifecycle.Lifecycle
 import androidx.lifecycle.LifecycleEventObserver
 import androidx.lifecycle.viewmodel.compose.viewModel
 import com.vitorpamplona.amethyst.model.AddressableNote
-import com.vitorpamplona.amethyst.model.LocalCache
 import com.vitorpamplona.amethyst.service.NostrCommunityDataSource
-import com.vitorpamplona.amethyst.ui.note.CommunityHeader
+import com.vitorpamplona.amethyst.ui.note.LoadAddressableNote
 import com.vitorpamplona.amethyst.ui.screen.NostrCommunityFeedViewModel
 import com.vitorpamplona.amethyst.ui.screen.RefresheableFeedView
-import kotlinx.coroutines.Dispatchers
-import kotlinx.coroutines.launch

@Composable
 fun CommunityScreen(aTagHex: String?, accountViewModel: AccountViewModel, nav: (String) -> Unit) {
    if (aTagHex == null) return

-    var noteDefBase by remember { mutableStateOf<AddressableNote?>(LocalCache.getAddressableNoteIfExists(aTagHex)) }
-
-    if (noteDefBase == null) {
-        LaunchedEffect(aTagHex) {
-            // waits to resolve.
-            launch(Dispatchers.IO) {
-                val newNote = LocalCache.checkGetOrCreateAddressableNote(aTagHex)
-                if (newNote != noteDefBase) {
-                    noteDefBase = newNote
-                }
-            }
+    LoadAddressableNote(aTagHex = aTagHex) {
+        it?.let {
+            PrepareViewModelsCommunityScreen(
+                note = it,
+                accountViewModel = accountViewModel,
+                nav = nav
+            )
        }
    }
-
-    noteDefBase?.let {
-        PrepareViewModelsCommunityScreen(
-            note = it,
-            accountViewModel = accountViewModel,
-            nav = nav
-        )
-    }
 }

@Composable
@@ -94,13 +77,6 @@ fun CommunityScreen(note: AddressableNote, feedViewModel: NostrCommunityFeedView
    }

    Column(Modifier.fillMaxSize()) {
-        CommunityHeader(
-            baseNote = note,
-            showBottomDiviser = true,
-            sendToCommunity = false,
-            accountViewModel = accountViewModel,
-            nav = nav
-        )
        RefresheableFeedView(
            feedViewModel,
            null,
@@ -35,7 +35,7 @@ import com.vitorpamplona.amethyst.service.NostrGeohashDataSource
 import com.vitorpamplona.amethyst.service.ReverseGeoLocationUtil
 import com.vitorpamplona.amethyst.ui.screen.NostrGeoHashFeedViewModel
 import com.vitorpamplona.amethyst.ui.screen.RefresheableFeedView
-import com.vitorpamplona.amethyst.ui.theme.HalfPadding
+import com.vitorpamplona.amethyst.ui.theme.StdPadding
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.launch

@@ -97,7 +97,6 @@ fun GeoHashScreen(tag: String, feedViewModel: NostrGeoHashFeedViewModel, account
        Column(
            modifier = Modifier.padding(vertical = 0.dp)
        ) {
-            GeoHashHeader(tag, accountViewModel)
            RefresheableFeedView(
                feedViewModel,
                null,
@@ -109,32 +108,22 @@ fun GeoHashScreen(tag: String, feedViewModel: NostrGeoHashFeedViewModel, account
 }

@Composable
-fun GeoHashHeader(tag: String, account: AccountViewModel, onClick: () -> Unit = { }) {
+fun GeoHashHeader(tag: String, modifier: Modifier = StdPadding, account: AccountViewModel, onClick: () -> Unit = { }) {
    Column(
-        Modifier.clickable { onClick() }
+        Modifier.fillMaxWidth().clickable { onClick() }
    ) {
-        Column(modifier = HalfPadding) {
-            Row(verticalAlignment = Alignment.CenterVertically) {
-                Column(
-                    modifier = Modifier
-                        .padding(start = 10.dp)
-                        .weight(1f)
-                ) {
-                    Row(
-                        verticalAlignment = Alignment.CenterVertically,
-                        horizontalArrangement = Arrangement.Center,
-                        modifier = Modifier.fillMaxWidth()
-                    ) {
-                        DislayGeoTagHeader(tag, remember { Modifier.weight(1f) })
+        Column(modifier = modifier) {
+            Row(
+                verticalAlignment = Alignment.CenterVertically,
+                horizontalArrangement = Arrangement.Center
+            ) {
+                DislayGeoTagHeader(tag, remember { Modifier.weight(1f) })

-                        HashtagActionOptions(tag, account)
-                    }
-                }
+                HashtagActionOptions(tag, account)
            }
        }

        Divider(
-            modifier = Modifier.padding(start = 12.dp, end = 12.dp),
            thickness = 0.25.dp
        )
    }
@@ -31,7 +31,7 @@ import com.vitorpamplona.amethyst.R
 import com.vitorpamplona.amethyst.service.NostrHashtagDataSource
 import com.vitorpamplona.amethyst.ui.screen.NostrHashtagFeedViewModel
 import com.vitorpamplona.amethyst.ui.screen.RefresheableFeedView
-import com.vitorpamplona.amethyst.ui.theme.HalfPadding
+import com.vitorpamplona.amethyst.ui.theme.StdPadding
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.launch

@@ -93,7 +93,6 @@ fun HashtagScreen(tag: String, feedViewModel: NostrHashtagFeedViewModel, account
        Column(
            modifier = Modifier.padding(vertical = 0.dp)
        ) {
-            HashtagHeader(tag, accountViewModel)
            RefresheableFeedView(
                feedViewModel,
                null,
@@ -105,36 +104,26 @@ fun HashtagScreen(tag: String, feedViewModel: NostrHashtagFeedViewModel, account
 }

@Composable
-fun HashtagHeader(tag: String, account: AccountViewModel, onClick: () -> Unit = { }) {
+fun HashtagHeader(tag: String, modifier: Modifier = StdPadding, account: AccountViewModel, onClick: () -> Unit = { }) {
    Column(
-        Modifier.clickable { onClick() }
+        Modifier.fillMaxWidth().clickable { onClick() }
    ) {
-        Column(modifier = HalfPadding) {
-            Row(verticalAlignment = Alignment.CenterVertically) {
-                Column(
-                    modifier = Modifier
-                        .padding(start = 10.dp)
-                        .weight(1f)
-                ) {
-                    Row(
-                        verticalAlignment = Alignment.CenterVertically,
-                        horizontalArrangement = Arrangement.Center,
-                        modifier = Modifier.fillMaxWidth()
-                    ) {
-                        Text(
-                            "#$tag",
-                            fontWeight = FontWeight.Bold,
-                            modifier = Modifier.weight(1f)
-                        )
+        Column(modifier = modifier) {
+            Row(
+                verticalAlignment = Alignment.CenterVertically,
+                horizontalArrangement = Arrangement.Center
+            ) {
+                Text(
+                    "#$tag",
+                    fontWeight = FontWeight.Bold,
+                    modifier = Modifier.weight(1f)
+                )

-                        HashtagActionOptions(tag, account)
-                    }
-                }
+                HashtagActionOptions(tag, account)
            }
        }

        Divider(
-            modifier = Modifier.padding(start = 12.dp, end = 12.dp),
            thickness = 0.25.dp
        )
    }
@@ -48,6 +48,7 @@ val HalfDoubleVertSpacer = Modifier.height(7.dp)
 val Size0dp = 0.dp
 val Size5dp = 5.dp
 val Size10dp = 10.dp
+val Size12dp = 12.dp
 val Size13dp = 13.dp
 val Size15dp = 15.dp
 val Size16dp = 16.dp
@@ -59,6 +60,7 @@ val Size22dp = 22.dp
 val Size24dp = 24.dp
 val Size25dp = 25.dp
 val Size30dp = 30.dp
+val Size34dp = 34.dp
 val Size35dp = 35.dp
 val Size55dp = 55.dp
 val Size75dp = 75.dp
@@ -105,6 +107,7 @@ val UserNameMaxRowHeight = Modifier.fillMaxWidth()
 val Height4dpModifier = Modifier.height(4.dp)

 val AccountPictureModifier = Modifier.width(55.dp).height(55.dp).clip(shape = CircleShape)
+val HeaderPictureModifier = Modifier.width(34.dp).height(34.dp).clip(shape = CircleShape)

 val ShowMoreRelaysButtonIconButtonModifier = Modifier.size(24.dp)
 val ShowMoreRelaysButtonIconModifier = Modifier.size(15.dp)