Refining layout of URL Previews

app/src/main/java/com/vitorpamplona/amethyst/ui/actions/NewPostView.kt

@@ -119,7 +119,7 @@ import com.vitorpamplona.amethyst.service.startsWithNIP19Scheme
 import com.vitorpamplona.amethyst.ui.components.BechLink
 import com.vitorpamplona.amethyst.ui.components.CreateTextWithEmoji
 import com.vitorpamplona.amethyst.ui.components.InvoiceRequest
-import com.vitorpamplona.amethyst.ui.components.UrlPreview
+import com.vitorpamplona.amethyst.ui.components.LoadUrlPreview
 import com.vitorpamplona.amethyst.ui.components.VideoView
 import com.vitorpamplona.amethyst.ui.components.ZapRaiserRequest
 import com.vitorpamplona.amethyst.ui.components.imageExtensions
@@ -465,7 +465,7 @@ fun NewPostView(
                                             } else if (videoExtensions.any { removedParamsFromUrl.endsWith(it) }) {
                                                 VideoView(myUrlPreview, roundedCorner = true, accountViewModel = accountViewModel)
                                             } else {
-                                                UrlPreview(myUrlPreview, myUrlPreview, accountViewModel)
+                                                LoadUrlPreview(myUrlPreview, myUrlPreview, accountViewModel)
                                             }
                                         } else if (startsWithNIP19Scheme(myUrlPreview)) {
                                             val bgColor = MaterialTheme.colorScheme.background
@@ -481,7 +481,7 @@ fun NewPostView(
                                                 nav
                                             )
                                         } else if (noProtocolUrlValidator.matcher(myUrlPreview).matches()) {
-                                            UrlPreview("https://$myUrlPreview", myUrlPreview, accountViewModel)
+                                            LoadUrlPreview("https://$myUrlPreview", myUrlPreview, accountViewModel)
                                         }
                                     }
                                 }

app/src/main/java/com/vitorpamplona/amethyst/ui/components/LoadUrlPreview.kt

@@ -12,7 +12,7 @@ import com.vitorpamplona.amethyst.model.UrlCachedPreviewer
 import com.vitorpamplona.amethyst.ui.screen.loggedIn.AccountViewModel
 
 @Composable
-fun UrlPreview(url: String, urlText: String, accountViewModel: AccountViewModel) {
+fun LoadUrlPreview(url: String, urlText: String, accountViewModel: AccountViewModel) {
     val automaticallyShowUrlPreview = remember {
         accountViewModel.settings.showUrlPreview.value
     }
@@ -37,11 +37,12 @@ fun UrlPreview(url: String, urlText: String, accountViewModel: AccountViewModel)
 
         Crossfade(
             targetState = urlPreviewState,
-            animationSpec = tween(durationMillis = 100)
+            animationSpec = tween(durationMillis = 100),
+            label = "UrlPreview"
         ) { state ->
             when (state) {
                 is UrlPreviewState.Loaded -> {
-                    UrlPreviewCard(url, state.previewInfo, accountViewModel)
+                    UrlPreviewCard(url, state.previewInfo)
                 }
 
                 else -> {

app/src/main/java/com/vitorpamplona/amethyst/ui/components/RichTextViewer.kt

@@ -278,7 +278,7 @@ private fun RenderWordWithPreview(
 ) {
     when (word) {
         is ImageSegment -> ZoomableContentView(word.segmentText, state, accountViewModel)
-        is LinkSegment -> UrlPreview(word.segmentText, word.segmentText, accountViewModel)
+        is LinkSegment -> LoadUrlPreview(word.segmentText, word.segmentText, accountViewModel)
         is EmojiSegment -> RenderCustomEmoji(word.segmentText, state)
         is InvoiceSegment -> MayBeInvoicePreview(word.segmentText)
         is WithdrawSegment -> MayBeWithdrawal(word.segmentText)

app/src/main/java/com/vitorpamplona/amethyst/ui/components/UrlPreviewCard.kt

@@ -2,13 +2,11 @@ package com.vitorpamplona.amethyst.ui.components
 
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.ContentScale
@@ -18,7 +16,6 @@ import androidx.compose.ui.text.style.TextOverflow
 import coil.compose.AsyncImage
 import com.vitorpamplona.amethyst.R
 import com.vitorpamplona.amethyst.service.previews.UrlInfoItem
-import com.vitorpamplona.amethyst.ui.screen.loggedIn.AccountViewModel
 import com.vitorpamplona.amethyst.ui.theme.DoubleVertSpacer
 import com.vitorpamplona.amethyst.ui.theme.MaxWidthWithHorzPadding
 import com.vitorpamplona.amethyst.ui.theme.StdVertSpacer
@@ -27,62 +24,51 @@ import com.vitorpamplona.amethyst.ui.theme.innerPostModifier
 @Composable
 fun UrlPreviewCard(
     url: String,
-    previewInfo: UrlInfoItem,
+    previewInfo: UrlInfoItem
-    accountViewModel: AccountViewModel
 ) {
-    val automaticallyShowUrlPreview = remember {
+    val uri = LocalUriHandler.current
-        accountViewModel.settings.showUrlPreview.value
-    }
 
-    if (!automaticallyShowUrlPreview) {
+    Column(
-        ClickableUrl(url, url)
+        modifier = MaterialTheme.colorScheme.innerPostModifier
-    } else {
+            .clickable {
-        val uri = LocalUriHandler.current
+                runCatching { uri.openUri(url) }
-
-        Row(
-            modifier = MaterialTheme.colorScheme.innerPostModifier
-                .clickable {
-                    runCatching { uri.openUri(url) }
-                }
-        ) {
-            Column {
-                AsyncImage(
-                    model = previewInfo.imageUrlFullPath,
-                    contentDescription = stringResource(R.string.preview_card_image_for, previewInfo.url),
-                    contentScale = ContentScale.FillWidth,
-                    modifier = Modifier.fillMaxWidth()
-                )
-
-                Spacer(modifier = StdVertSpacer)
-
-                Text(
-                    text = previewInfo.verifiedUrl?.host ?: previewInfo.url,
-                    style = MaterialTheme.typography.bodySmall,
-                    modifier = MaxWidthWithHorzPadding,
-                    color = Color.Gray,
-                    maxLines = 1,
-                    overflow = TextOverflow.Ellipsis
-                )
-
-                Text(
-                    text = previewInfo.title,
-                    style = MaterialTheme.typography.bodyMedium,
-                    modifier = MaxWidthWithHorzPadding,
-                    maxLines = 1,
-                    overflow = TextOverflow.Ellipsis
-                )
-
-                Text(
-                    text = previewInfo.description,
-                    style = MaterialTheme.typography.bodySmall,
-                    modifier = MaxWidthWithHorzPadding,
-                    color = Color.Gray,
-                    maxLines = 3,
-                    overflow = TextOverflow.Ellipsis
-                )
-
-                Spacer(modifier = DoubleVertSpacer)
             }
-        }
+    ) {
+        AsyncImage(
+            model = previewInfo.imageUrlFullPath,
+            contentDescription = stringResource(R.string.preview_card_image_for, previewInfo.url),
+            contentScale = ContentScale.FillWidth,
+            modifier = Modifier.fillMaxWidth()
+        )
+
+        Spacer(modifier = StdVertSpacer)
+
+        Text(
+            text = previewInfo.verifiedUrl?.host ?: previewInfo.url,
+            style = MaterialTheme.typography.bodySmall,
+            modifier = MaxWidthWithHorzPadding,
+            color = Color.Gray,
+            maxLines = 1,
+            overflow = TextOverflow.Ellipsis
+        )
+
+        Text(
+            text = previewInfo.title,
+            style = MaterialTheme.typography.bodyMedium,
+            modifier = MaxWidthWithHorzPadding,
+            maxLines = 1,
+            overflow = TextOverflow.Ellipsis
+        )
+
+        Text(
+            text = previewInfo.description,
+            style = MaterialTheme.typography.bodySmall,
+            modifier = MaxWidthWithHorzPadding,
+            color = Color.Gray,
+            maxLines = 3,
+            overflow = TextOverflow.Ellipsis
+        )
+
+        Spacer(modifier = DoubleVertSpacer)
     }
 }