Fixing new line of Loading Animation and Download buttons for images.

2025-04-17 00:01:27 +02:00 · 2023-10-30 16:39:39 -04:00 · 2023-10-30 16:39:39 -04:00 · 0571312dca
commit 0571312dca
parent 717c3bc45e
10 changed files with 291 additions and 230 deletions
--- a/app/src/main/java/com/vitorpamplona/amethyst/ui/actions/NewRelayListView.kt
+++ b/app/src/main/java/com/vitorpamplona/amethyst/ui/actions/NewRelayListView.kt
@ -103,8 +103,7 @@ fun NewRelayListView(onClose: () -> Unit, accountViewModel: AccountViewModel, re
                TopAppBar(
                    title = {
                        Row(
-                            modifier = Modifier
-                                .fillMaxWidth(),
+                            modifier = Modifier.fillMaxWidth(),
                            horizontalArrangement = Arrangement.SpaceBetween,
                            verticalAlignment = Alignment.CenterVertically
                        ) {
--- a/app/src/main/java/com/vitorpamplona/amethyst/ui/components/ClickableRoute.kt
+++ b/app/src/main/java/com/vitorpamplona/amethyst/ui/components/ClickableRoute.kt
@ -685,15 +685,17 @@ fun InLineIconRenderer(
        }
    }.associate { it.first to it.second }

-    val annotatedText = buildAnnotatedString {
-        wordsInOrder.forEachIndexed { idx, value ->
-            withStyle(
-                style
-            ) {
-                if (value is TextType) {
-                    append(value.text)
-                } else if (value is ImageUrlType) {
-                    appendInlineContent("inlineContent$idx", "[icon]")
+    val annotatedText = remember {
+        buildAnnotatedString {
+            wordsInOrder.forEachIndexed { idx, value ->
+                withStyle(
+                    style
+                ) {
+                    if (value is TextType) {
+                        append(value.text)
+                    } else if (value is ImageUrlType) {
+                        appendInlineContent("inlineContent$idx", "[icon]")
+                    }
                }
            }
        }
--- a/app/src/main/java/com/vitorpamplona/amethyst/ui/components/RichTextViewer.kt
+++ b/app/src/main/java/com/vitorpamplona/amethyst/ui/components/RichTextViewer.kt
@ -556,32 +556,32 @@ private fun RenderHashtag(
    nav: (String) -> Unit
 ) {
    val primary = MaterialTheme.colorScheme.primary
+    val background = MaterialTheme.colorScheme.onBackground
    val hashtagIcon = remember(segment.hashtag) {
        checkForHashtagWithIcon(segment.hashtag, primary)
    }

-    val regularText =
-        SpanStyle(color = MaterialTheme.colorScheme.onBackground)
+    val regularText = remember { SpanStyle(color = background) }
+    val clickableTextStyle = remember { SpanStyle(color = primary) }

-    val clickableTextStyle =
-        SpanStyle(color = primary)
-
-    val annotatedTermsString = buildAnnotatedString {
-        withStyle(clickableTextStyle) {
-            pushStringAnnotation("routeToHashtag", "")
-            append("#${segment.hashtag}")
-        }
-
-        if (hashtagIcon != null) {
+    val annotatedTermsString = remember {
+        buildAnnotatedString {
            withStyle(clickableTextStyle) {
                pushStringAnnotation("routeToHashtag", "")
-                appendInlineContent("inlineContent", "[icon]")
+                append("#${segment.hashtag}")
            }
-        }

-        segment.extras?.ifBlank { "" }?.let {
-            withStyle(regularText) {
-                append(it)
+            if (hashtagIcon != null) {
+                withStyle(clickableTextStyle) {
+                    pushStringAnnotation("routeToHashtag", "")
+                    appendInlineContent("inlineContent", "[icon]")
+                }
+            }
+
+            segment.extras?.ifBlank { "" }?.let {
+                withStyle(regularText) {
+                    append(it)
+                }
            }
        }
    }
@ -592,8 +592,10 @@ private fun RenderHashtag(
        emptyMap()
    }

-    val pressIndicator = Modifier.clickable {
-        nav("Hashtag/${segment.hashtag}")
+    val pressIndicator = remember {
+        Modifier.clickable {
+            nav("Hashtag/${segment.hashtag}")
+        }
    }

    Text(
--- a/app/src/main/java/com/vitorpamplona/amethyst/ui/components/ZoomableContentView.kt
+++ b/app/src/main/java/com/vitorpamplona/amethyst/ui/components/ZoomableContentView.kt
@ -41,7 +41,6 @@ import androidx.compose.material3.DropdownMenu
 import androidx.compose.material3.DropdownMenuItem
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
-import androidx.compose.material3.LocalTextStyle
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.OutlinedButton
 import androidx.compose.material3.Surface
@ -62,11 +61,13 @@ import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.LocalClipboardManager
 import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.platform.LocalUriHandler
 import androidx.compose.ui.platform.LocalView
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.AnnotatedString
 import androidx.compose.ui.text.Placeholder
 import androidx.compose.ui.text.PlaceholderVerticalAlign
+import androidx.compose.ui.text.SpanStyle
 import androidx.compose.ui.text.buildAnnotatedString
 import androidx.compose.ui.text.withStyle
 import androidx.compose.ui.unit.Dp
@ -305,7 +306,9 @@ private fun LocalImageView(
            }

            val verifierModifier = if (topPaddingForControllers.isSpecified) {
-                Modifier.padding(top = topPaddingForControllers).align(Alignment.TopEnd)
+                Modifier
+                    .padding(top = topPaddingForControllers)
+                    .align(Alignment.TopEnd)
            } else {
                Modifier.align(Alignment.TopEnd)
            }
@ -373,7 +376,9 @@ private fun UrlImageView(
        }

        val verifierModifier = if (topPaddingForControllers.isSpecified) {
-            Modifier.padding(top = topPaddingForControllers).align(Alignment.TopEnd)
+            Modifier
+                .padding(top = topPaddingForControllers)
+                .align(Alignment.TopEnd)
        } else {
            Modifier.align(Alignment.TopEnd)
        }
@ -405,11 +410,58 @@ private fun UrlImageView(
    }
 }

-@OptIn(ExperimentalLayoutApi::class)
@Composable
 fun ImageUrlWithDownloadButton(url: String, showImage: MutableState<Boolean>) {
-    FlowRow() {
-        ClickableUrl(urlText = url, url = url)
+    val uri = LocalUriHandler.current
+
+    val primary = MaterialTheme.colorScheme.primary
+    val background = MaterialTheme.colorScheme.onBackground
+
+    val regularText = remember { SpanStyle(color = background) }
+    val clickableTextStyle = remember { SpanStyle(color = primary) }
+
+    val annotatedTermsString = remember {
+        buildAnnotatedString {
+            withStyle(clickableTextStyle) {
+                pushStringAnnotation("routeToImage", "")
+                append("$url ")
+            }
+
+            withStyle(clickableTextStyle) {
+                pushStringAnnotation("routeToImage", "")
+                appendInlineContent("inlineContent", "[icon]")
+            }
+
+            withStyle(regularText) {
+                append(" ")
+            }
+        }
+    }
+
+    val inlineContent = mapOf("inlineContent" to InlineDownloadIcon(showImage))
+
+    val pressIndicator = remember {
+        Modifier.clickable {
+            runCatching { uri.openUri(url) }
+        }
+    }
+
+    Text(
+        text = annotatedTermsString,
+        modifier = pressIndicator,
+        inlineContent = inlineContent
+    )
+}
+
+@Composable
+private fun InlineDownloadIcon(showImage: MutableState<Boolean>) =
+    InlineTextContent(
+        Placeholder(
+            width = Font17SP,
+            height = Font17SP,
+            placeholderVerticalAlign = PlaceholderVerticalAlign.Center
+        )
+    ) {
        IconButton(
            modifier = Modifier.size(Size20dp),
            onClick = { showImage.value = true }
@ -417,7 +469,6 @@ fun ImageUrlWithDownloadButton(url: String, showImage: MutableState<Boolean>) {
            DownloadForOfflineIcon(Size24dp)
        }
    }
-}

@Composable
@OptIn(ExperimentalLayoutApi::class)
@ -548,43 +599,69 @@ private fun DisplayUrlWithLoadingSymbol(content: ZoomableContent) {

@Composable
 private fun DisplayUrlWithLoadingSymbolWait(content: ZoomableContent) {
-    if (content is ZoomableUrlContent) {
-        ClickableUrl(urlText = remember { "${content.url} " }, url = content.url)
-    } else {
-        Text("Loading content... ")
-    }
+    val uri = LocalUriHandler.current

-    val myId = "inlineContent"
-    val emptytext = buildAnnotatedString {
-        withStyle(
-            LocalTextStyle.current.copy(color = MaterialTheme.colorScheme.primary).toSpanStyle()
-        ) {
-            append("")
-            appendInlineContent(myId, "[icon]")
+    val primary = MaterialTheme.colorScheme.primary
+    val background = MaterialTheme.colorScheme.onBackground
+
+    val regularText = remember { SpanStyle(color = background) }
+    val clickableTextStyle = remember { SpanStyle(color = primary) }
+
+    val annotatedTermsString = remember {
+        buildAnnotatedString {
+            if (content is ZoomableUrlContent) {
+                withStyle(clickableTextStyle) {
+                    pushStringAnnotation("routeToImage", "")
+                    append(content.url + " ")
+                }
+            } else {
+                withStyle(regularText) {
+                    append("Loading content...")
+                }
+            }
+
+            withStyle(clickableTextStyle) {
+                pushStringAnnotation("routeToImage", "")
+                appendInlineContent("inlineContent", "[icon]")
+            }
+
+            withStyle(regularText) {
+                append(" ")
+            }
+        }
+    }
+
+    val inlineContent = mapOf("inlineContent" to InlineLoadingIcon())
+
+    val pressIndicator = remember {
+        if (content is ZoomableUrlContent) {
+            Modifier.clickable {
+                runCatching { uri.openUri(content.url) }
+            }
+        } else {
+            Modifier
        }
    }
-    val inlineContent = mapOf(
-        Pair(
-            myId,
-            InlineTextContent(
-                Placeholder(
-                    width = Font17SP,
-                    height = Font17SP,
-                    placeholderVerticalAlign = PlaceholderVerticalAlign.Center
-                )
-            ) {
-                LoadingAnimation()
-            }
-        )
-    )

-    // Empty Text for Size of Icon
    Text(
-        text = emptytext,
+        text = annotatedTermsString,
+        modifier = pressIndicator,
        inlineContent = inlineContent
    )
 }

+@Composable
+private fun InlineLoadingIcon() =
+    InlineTextContent(
+        Placeholder(
+            width = Font17SP,
+            height = Font17SP,
+            placeholderVerticalAlign = PlaceholderVerticalAlign.Center
+        )
+    ) {
+        LoadingAnimation()
+    }
+
@Composable
 private fun DisplayBlurHash(
    blurhash: String?,
--- a/app/src/main/java/com/vitorpamplona/amethyst/ui/screen/CardFeedView.kt
+++ b/app/src/main/java/com/vitorpamplona/amethyst/ui/screen/CardFeedView.kt
@ -4,7 +4,6 @@ import androidx.compose.animation.Crossfade
 import androidx.compose.animation.core.tween
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
@ -55,15 +54,13 @@ fun RefresheableCardView(
    )

    val modifier = if (enablePullRefresh) {
-        Modifier.pullRefresh(pullRefreshState)
+        Modifier.fillMaxSize().pullRefresh(pullRefreshState)
    } else {
-        Modifier
+        Modifier.fillMaxSize()
    }

    Box(modifier) {
-        Column {
-            SaveableCardFeedState(viewModel, accountViewModel, nav, routeForLastRead, scrollStateKey)
-        }
+        SaveableCardFeedState(viewModel, accountViewModel, nav, routeForLastRead, scrollStateKey)

        if (enablePullRefresh) {
            PullRefreshIndicator(refreshing, pullRefreshState, Modifier.align(Alignment.TopCenter))
--- a/app/src/main/java/com/vitorpamplona/amethyst/ui/screen/RelayFeedView.kt
+++ b/app/src/main/java/com/vitorpamplona/amethyst/ui/screen/RelayFeedView.kt
@ -2,7 +2,7 @@ package com.vitorpamplona.amethyst.ui.screen

 import android.util.Log
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.itemsIndexed
 import androidx.compose.foundation.lazy.rememberLazyListState
@ -126,27 +126,25 @@ fun RelayFeedView(
    val pullRefreshState = rememberPullRefreshState(refreshing, onRefresh = refresh)

    val modifier = if (enablePullRefresh) {
-        Modifier.pullRefresh(pullRefreshState)
+        Modifier.fillMaxSize().pullRefresh(pullRefreshState)
    } else {
-        Modifier
+        Modifier.fillMaxSize()
    }

    Box(modifier) {
-        Column() {
-            val listState = rememberLazyListState()
+        val listState = rememberLazyListState()

-            LazyColumn(
-                contentPadding = FeedPadding,
-                state = listState
-            ) {
-                itemsIndexed(feedState, key = { _, item -> item.url }) { _, item ->
-                    RelayCompose(
-                        item,
-                        accountViewModel = accountViewModel,
-                        onAddRelay = { wantsToAddRelay = item.url },
-                        onRemoveRelay = { wantsToAddRelay = item.url }
-                    )
-                }
+        LazyColumn(
+            contentPadding = FeedPadding,
+            state = listState
+        ) {
+            itemsIndexed(feedState, key = { _, item -> item.url }) { _, item ->
+                RelayCompose(
+                    item,
+                    accountViewModel = accountViewModel,
+                    onAddRelay = { wantsToAddRelay = item.url },
+                    onRemoveRelay = { wantsToAddRelay = item.url }
+                )
            }
        }

--- a/app/src/main/java/com/vitorpamplona/amethyst/ui/screen/loggedIn/BookmarkListScreen.kt
+++ b/app/src/main/java/com/vitorpamplona/amethyst/ui/screen/loggedIn/BookmarkListScreen.kt
@ -3,7 +3,6 @@ package com.vitorpamplona.amethyst.ui.screen.loggedIn
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxHeight
-import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.pager.HorizontalPager
 import androidx.compose.foundation.pager.rememberPagerState
 import androidx.compose.material3.MaterialTheme
@ -17,7 +16,6 @@ import androidx.compose.runtime.livedata.observeAsState
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.unit.dp
 import androidx.lifecycle.viewmodel.compose.viewModel
 import com.vitorpamplona.amethyst.R
 import com.vitorpamplona.amethyst.ui.dal.BookmarkPrivateFeedFilter
@ -31,65 +29,58 @@ import kotlinx.coroutines.launch
@OptIn(ExperimentalFoundationApi::class)
@Composable
 fun BookmarkListScreen(accountViewModel: AccountViewModel, nav: (String) -> Unit) {
-    val accountState by accountViewModel.accountLiveData.observeAsState()
-    val account = accountState?.account
+    BookmarkPublicFeedFilter.account = accountViewModel.account
+    BookmarkPrivateFeedFilter.account = accountViewModel.account

-    if (account != null) {
-        BookmarkPublicFeedFilter.account = account
-        BookmarkPrivateFeedFilter.account = account
+    val publicFeedViewModel: NostrBookmarkPublicFeedViewModel = viewModel()
+    val privateFeedViewModel: NostrBookmarkPrivateFeedViewModel = viewModel()

-        val publicFeedViewModel: NostrBookmarkPublicFeedViewModel = viewModel()
-        val privateFeedViewModel: NostrBookmarkPrivateFeedViewModel = viewModel()
+    val userState by accountViewModel.account.userProfile().live().bookmarks.observeAsState()

-        val userState by account.userProfile().live().bookmarks.observeAsState()
+    LaunchedEffect(userState) {
+        publicFeedViewModel.invalidateData()
+        privateFeedViewModel.invalidateData()
+    }

-        LaunchedEffect(userState) {
-            publicFeedViewModel.invalidateData()
-            privateFeedViewModel.invalidateData()
+    Column(Modifier.fillMaxHeight()) {
+        val pagerState = rememberPagerState() { 2 }
+        val coroutineScope = rememberCoroutineScope()
+
+        TabRow(
+            containerColor = MaterialTheme.colorScheme.background,
+            contentColor = MaterialTheme.colorScheme.onBackground,
+            selectedTabIndex = pagerState.currentPage,
+            modifier = TabRowHeight
+        ) {
+            Tab(
+                selected = pagerState.currentPage == 0,
+                onClick = { coroutineScope.launch { pagerState.animateScrollToPage(0) } },
+                text = {
+                    Text(text = stringResource(R.string.private_bookmarks))
+                }
+            )
+            Tab(
+                selected = pagerState.currentPage == 1,
+                onClick = { coroutineScope.launch { pagerState.animateScrollToPage(1) } },
+                text = {
+                    Text(text = stringResource(R.string.public_bookmarks))
+                }
+            )
        }
-
-        Column(Modifier.fillMaxHeight()) {
-            Column(modifier = Modifier.padding(start = 10.dp, end = 10.dp)) {
-                val pagerState = rememberPagerState() { 2 }
-                val coroutineScope = rememberCoroutineScope()
-
-                TabRow(
-                    containerColor = MaterialTheme.colorScheme.background,
-                    contentColor = MaterialTheme.colorScheme.onBackground,
-                    selectedTabIndex = pagerState.currentPage,
-                    modifier = TabRowHeight
-                ) {
-                    Tab(
-                        selected = pagerState.currentPage == 0,
-                        onClick = { coroutineScope.launch { pagerState.animateScrollToPage(0) } },
-                        text = {
-                            Text(text = stringResource(R.string.private_bookmarks))
-                        }
-                    )
-                    Tab(
-                        selected = pagerState.currentPage == 1,
-                        onClick = { coroutineScope.launch { pagerState.animateScrollToPage(1) } },
-                        text = {
-                            Text(text = stringResource(R.string.public_bookmarks))
-                        }
-                    )
-                }
-                HorizontalPager(state = pagerState) { page ->
-                    when (page) {
-                        0 -> RefresheableFeedView(
-                            privateFeedViewModel,
-                            null,
-                            accountViewModel = accountViewModel,
-                            nav = nav
-                        )
-                        1 -> RefresheableFeedView(
-                            publicFeedViewModel,
-                            null,
-                            accountViewModel = accountViewModel,
-                            nav = nav
-                        )
-                    }
-                }
+        HorizontalPager(state = pagerState) { page ->
+            when (page) {
+                0 -> RefresheableFeedView(
+                    privateFeedViewModel,
+                    null,
+                    accountViewModel = accountViewModel,
+                    nav = nav
+                )
+                1 -> RefresheableFeedView(
+                    publicFeedViewModel,
+                    null,
+                    accountViewModel = accountViewModel,
+                    nav = nav
+                )
            }
        }
    }
--- a/app/src/main/java/com/vitorpamplona/amethyst/ui/screen/loggedIn/HiddenUsersScreen.kt
+++ b/app/src/main/java/com/vitorpamplona/amethyst/ui/screen/loggedIn/HiddenUsersScreen.kt
@ -58,7 +58,6 @@ import com.vitorpamplona.amethyst.ui.theme.ButtonBorder
 import com.vitorpamplona.amethyst.ui.theme.ButtonPadding
 import com.vitorpamplona.amethyst.ui.theme.DividerThickness
 import com.vitorpamplona.amethyst.ui.theme.HorzPadding
-import com.vitorpamplona.amethyst.ui.theme.Size10dp
 import com.vitorpamplona.amethyst.ui.theme.StdPadding
 import com.vitorpamplona.amethyst.ui.theme.TabRowHeight
 import com.vitorpamplona.amethyst.ui.theme.placeholderText
@ -109,78 +108,76 @@ fun HiddenUsersScreen(
    }

    Column(Modifier.fillMaxHeight()) {
-        Column(modifier = Modifier.padding(start = 10.dp, end = 10.dp)) {
-            val pagerState = rememberPagerState() { 3 }
-            val coroutineScope = rememberCoroutineScope()
-            var warnAboutReports by remember { mutableStateOf(accountViewModel.account.warnAboutPostsWithReports) }
-            var filterSpam by remember { mutableStateOf(accountViewModel.account.filterSpamFromStrangers) }
+        val pagerState = rememberPagerState() { 3 }
+        val coroutineScope = rememberCoroutineScope()
+        var warnAboutReports by remember { mutableStateOf(accountViewModel.account.warnAboutPostsWithReports) }
+        var filterSpam by remember { mutableStateOf(accountViewModel.account.filterSpamFromStrangers) }

-            Row(verticalAlignment = Alignment.CenterVertically) {
-                Checkbox(
-                    checked = warnAboutReports,
-                    onCheckedChange = {
-                        warnAboutReports = it
-                        accountViewModel.account.updateOptOutOptions(warnAboutReports, filterSpam)
-                    }
-                )
-
-                Text(stringResource(R.string.warn_when_posts_have_reports_from_your_follows))
-            }
-
-            Row(verticalAlignment = Alignment.CenterVertically) {
-                Checkbox(
-                    checked = filterSpam,
-                    onCheckedChange = {
-                        filterSpam = it
-                        accountViewModel.account.updateOptOutOptions(warnAboutReports, filterSpam)
-                    }
-                )
-
-                Text(stringResource(R.string.filter_spam_from_strangers))
-            }
-
-            ScrollableTabRow(
-                containerColor = MaterialTheme.colorScheme.background,
-                contentColor = MaterialTheme.colorScheme.onBackground,
-                edgePadding = 8.dp,
-                selectedTabIndex = pagerState.currentPage,
-                modifier = TabRowHeight,
-                divider = {
-                    Divider(thickness = DividerThickness)
+        Row(verticalAlignment = Alignment.CenterVertically) {
+            Checkbox(
+                checked = warnAboutReports,
+                onCheckedChange = {
+                    warnAboutReports = it
+                    accountViewModel.account.updateOptOutOptions(warnAboutReports, filterSpam)
                }
-            ) {
-                Tab(
-                    selected = pagerState.currentPage == 0,
-                    onClick = { coroutineScope.launch { pagerState.animateScrollToPage(0) } },
-                    text = {
-                        Text(text = stringResource(R.string.blocked_users))
-                    }
-                )
-                Tab(
-                    selected = pagerState.currentPage == 1,
-                    onClick = { coroutineScope.launch { pagerState.animateScrollToPage(1) } },
-                    text = {
-                        Text(text = stringResource(R.string.spamming_users))
-                    }
-                )
-                Tab(
-                    selected = pagerState.currentPage == 2,
-                    onClick = { coroutineScope.launch { pagerState.animateScrollToPage(2) } },
-                    text = {
-                        Text(text = stringResource(R.string.hidden_words))
-                    }
-                )
-            }
-            HorizontalPager(state = pagerState) { page ->
-                when (page) {
-                    0 -> RefreshingUserFeedView(hiddenFeedViewModel, accountViewModel) {
-                        RefreshingFeedUserFeedView(hiddenFeedViewModel, accountViewModel, nav)
-                    }
-                    1 -> RefreshingUserFeedView(spammerFeedViewModel, accountViewModel) {
-                        RefreshingFeedUserFeedView(spammerFeedViewModel, accountViewModel, nav)
-                    }
-                    2 -> HiddenWordsFeed(hiddenWordsViewModel, accountViewModel)
+            )
+
+            Text(stringResource(R.string.warn_when_posts_have_reports_from_your_follows))
+        }
+
+        Row(verticalAlignment = Alignment.CenterVertically) {
+            Checkbox(
+                checked = filterSpam,
+                onCheckedChange = {
+                    filterSpam = it
+                    accountViewModel.account.updateOptOutOptions(warnAboutReports, filterSpam)
                }
+            )
+
+            Text(stringResource(R.string.filter_spam_from_strangers))
+        }
+
+        ScrollableTabRow(
+            containerColor = MaterialTheme.colorScheme.background,
+            contentColor = MaterialTheme.colorScheme.onBackground,
+            edgePadding = 8.dp,
+            selectedTabIndex = pagerState.currentPage,
+            modifier = TabRowHeight,
+            divider = {
+                Divider(thickness = DividerThickness)
+            }
+        ) {
+            Tab(
+                selected = pagerState.currentPage == 0,
+                onClick = { coroutineScope.launch { pagerState.animateScrollToPage(0) } },
+                text = {
+                    Text(text = stringResource(R.string.blocked_users))
+                }
+            )
+            Tab(
+                selected = pagerState.currentPage == 1,
+                onClick = { coroutineScope.launch { pagerState.animateScrollToPage(1) } },
+                text = {
+                    Text(text = stringResource(R.string.spamming_users))
+                }
+            )
+            Tab(
+                selected = pagerState.currentPage == 2,
+                onClick = { coroutineScope.launch { pagerState.animateScrollToPage(2) } },
+                text = {
+                    Text(text = stringResource(R.string.hidden_words))
+                }
+            )
+        }
+        HorizontalPager(state = pagerState) { page ->
+            when (page) {
+                0 -> RefreshingUserFeedView(hiddenFeedViewModel, accountViewModel) {
+                    RefreshingFeedUserFeedView(hiddenFeedViewModel, accountViewModel, nav)
+                }
+                1 -> RefreshingUserFeedView(spammerFeedViewModel, accountViewModel) {
+                    RefreshingFeedUserFeedView(spammerFeedViewModel, accountViewModel, nav)
+                }
+                2 -> HiddenWordsFeed(hiddenWordsViewModel, accountViewModel)
            }
        }
    }
@ -203,7 +200,7 @@ private fun HiddenWordsFeed(

@Composable
 private fun AddMuteWordTextField(accountViewModel: AccountViewModel) {
-    Row(modifier = Modifier.padding(vertical = Size10dp)) {
+    Row() {
        val currentWordToAdd = remember {
            mutableStateOf("")
        }
@ -217,7 +214,7 @@ private fun AddMuteWordTextField(accountViewModel: AccountViewModel) {
            value = currentWordToAdd.value,
            onValueChange = { currentWordToAdd.value = it },
            label = { Text(text = stringResource(R.string.hide_new_word_label)) },
-            modifier = Modifier.fillMaxWidth(),
+            modifier = Modifier.fillMaxWidth().padding(10.dp),
            placeholder = {
                Text(
                    text = stringResource(R.string.hide_new_word_label),
--- a/app/src/main/java/com/vitorpamplona/amethyst/ui/screen/loggedIn/NotificationScreen.kt
+++ b/app/src/main/java/com/vitorpamplona/amethyst/ui/screen/loggedIn/NotificationScreen.kt
@ -97,21 +97,17 @@ fun NotificationScreen(
    }

    Column(Modifier.fillMaxHeight()) {
-        Column(
-            modifier = Modifier.padding(vertical = 0.dp)
-        ) {
-            SummaryBar(
-                model = userReactionsStatsModel
-            )
+        SummaryBar(
+            model = userReactionsStatsModel
+        )

-            RefresheableCardView(
-                viewModel = notifFeedViewModel,
-                accountViewModel = accountViewModel,
-                nav = nav,
-                routeForLastRead = Route.Notification.base,
-                scrollStateKey = ScrollStateKeys.NOTIFICATION_SCREEN
-            )
-        }
+        RefresheableCardView(
+            viewModel = notifFeedViewModel,
+            accountViewModel = accountViewModel,
+            nav = nav,
+            routeForLastRead = Route.Notification.base,
+            scrollStateKey = ScrollStateKeys.NOTIFICATION_SCREEN
+        )
    }
 }

--- a/app/src/main/java/com/vitorpamplona/amethyst/ui/screen/loggedIn/SettingsScreen.kt
+++ b/app/src/main/java/com/vitorpamplona/amethyst/ui/screen/loggedIn/SettingsScreen.kt
@ -6,6 +6,7 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.windowInsetsPadding
@ -132,6 +133,7 @@ fun SettingsScreen(

    Column(
        Modifier
+            .fillMaxSize()
            .padding(top = Size10dp, start = Size20dp, end = Size20dp)
            .verticalScroll(rememberScrollState()),
        horizontalAlignment = Alignment.CenterHorizontally