Fixing Options Button

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

@@ -26,6 +26,7 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.material.ripple.rememberRipple
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.semantics.Role
 import com.vitorpamplona.amethyst.ui.theme.Size24dp
@@ -43,6 +44,7 @@ fun ClickableBox(
             indication = rememberRipple(bounded = false, radius = Size24dp),
             onClick = onClick,
         ),
+        contentAlignment = Alignment.Center,
     ) {
         content()
     }

app/src/main/java/com/vitorpamplona/amethyst/ui/note/BadgeCompose.kt

@@ -22,7 +22,7 @@ package com.vitorpamplona.amethyst.ui.note
 
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.background
-import androidx.compose.foundation.combinedClickable
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
@@ -31,17 +31,12 @@ import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.MilitaryTech
-import androidx.compose.material.icons.filled.MoreVert
 import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.livedata.observeAsState
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
@@ -49,14 +44,12 @@ import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import com.vitorpamplona.amethyst.R
 import com.vitorpamplona.amethyst.ui.navigation.routeFor
-import com.vitorpamplona.amethyst.ui.note.elements.NoteDropDownMenu
+import com.vitorpamplona.amethyst.ui.note.elements.MoreOptionsButton
 import com.vitorpamplona.amethyst.ui.note.types.BadgeDisplay
 import com.vitorpamplona.amethyst.ui.screen.BadgeCard
 import com.vitorpamplona.amethyst.ui.screen.loggedIn.AccountViewModel
 import com.vitorpamplona.amethyst.ui.stringRes
-import com.vitorpamplona.amethyst.ui.theme.Size15Modifier
 import com.vitorpamplona.amethyst.ui.theme.placeholderText
-import kotlinx.coroutines.launch
 
 @OptIn(ExperimentalFoundationApi::class)
 @Composable
@@ -75,11 +68,6 @@ fun BadgeCompose(
 
     val context = LocalContext.current.applicationContext
 
-    val popupExpanded = remember { mutableStateOf(false) }
-    val enablePopup = remember { { popupExpanded.value = true } }
-
-    val scope = rememberCoroutineScope()
-
     if (note == null) {
         BlankNote(Modifier)
     } else {
@@ -94,16 +82,13 @@ fun BadgeCompose(
             modifier =
                 Modifier
                     .background(backgroundColor.value)
-                    .combinedClickable(
+                    .clickable(
                         onClick = {
-                            scope.launch {
-                                routeFor(
-                                    note,
-                                    accountViewModel.userProfile(),
-                                )?.let { nav(it) }
-                            }
+                            routeFor(
+                                note,
+                                accountViewModel.userProfile(),
+                            )?.let { nav(it) }
                         },
-                        onLongClick = enablePopup,
                     ),
         ) {
             Row(
@@ -142,19 +127,7 @@ fun BadgeCompose(
                             maxLines = 1,
                         )
 
-                        IconButton(
-                            modifier = Modifier.then(Modifier.size(24.dp)),
-                            onClick = enablePopup,
-                        ) {
-                            Icon(
-                                imageVector = Icons.Default.MoreVert,
-                                contentDescription = stringRes(id = R.string.more_options),
-                                modifier = Size15Modifier,
-                                tint = MaterialTheme.colorScheme.placeholderText,
-                            )
-
-                            NoteDropDownMenu(note, popupExpanded, null, accountViewModel, nav)
-                        }
+                        MoreOptionsButton(note, null, accountViewModel, nav)
                     }
 
                     note.replyTo?.firstOrNull()?.let {

app/src/main/java/com/vitorpamplona/amethyst/ui/note/Icons.kt

@@ -73,7 +73,7 @@ import com.vitorpamplona.amethyst.commons.icons.Zap
 import com.vitorpamplona.amethyst.commons.icons.ZapSplit
 import com.vitorpamplona.amethyst.ui.stringRes
 import com.vitorpamplona.amethyst.ui.theme.BitcoinOrange
-import com.vitorpamplona.amethyst.ui.theme.Size18Modifier
+import com.vitorpamplona.amethyst.ui.theme.Size19Modifier
 import com.vitorpamplona.amethyst.ui.theme.Size20Modifier
 import com.vitorpamplona.amethyst.ui.theme.Size30Modifier
 import com.vitorpamplona.amethyst.ui.theme.grayText
@@ -508,11 +508,11 @@ fun LinkIcon(
 }
 
 @Composable
-fun VerticalDotsIcon(contentDescriptor: Int? = null) {
+fun VerticalDotsIcon() {
     Icon(
         imageVector = Icons.Default.MoreVert,
-        contentDescription = contentDescriptor?.let { stringRes(id = it) },
-        modifier = Size18Modifier,
+        contentDescription = stringRes(id = R.string.note_options),
+        modifier = Size19Modifier,
         tint = MaterialTheme.colorScheme.placeholderText,
     )
 }

app/src/main/java/com/vitorpamplona/amethyst/ui/note/MessageSetCompose.kt

@@ -68,25 +68,23 @@ fun MessageSetCompose(
 
     val columnModifier =
         remember(backgroundColor.value) {
-            Modifier.background(backgroundColor.value)
+            Modifier
+                .background(backgroundColor.value)
                 .padding(
                     start = 12.dp,
                     end = 12.dp,
                     top = 10.dp,
-                )
-                .combinedClickable(
+                ).combinedClickable(
                     onClick = {
                         scope.launch {
                             routeFor(
                                 baseNote,
                                 accountViewModel.userProfile(),
-                            )
-                                ?.let { nav(it) }
+                            )?.let { nav(it) }
                         }
                     },
                     onLongClick = enablePopup,
-                )
-                .fillMaxWidth()
+                ).fillMaxWidth()
         }
 
     Column(columnModifier) {
@@ -111,7 +109,9 @@ fun MessageSetCompose(
                     nav = nav,
                 )
 
-                NoteDropDownMenu(baseNote, popupExpanded, null, accountViewModel, nav)
+                if (popupExpanded.value) {
+                    NoteDropDownMenu(baseNote, { popupExpanded.value = false }, null, accountViewModel, nav)
+                }
             }
         }
     }

app/src/main/java/com/vitorpamplona/amethyst/ui/note/MultiSetCompose.kt

@@ -106,7 +106,6 @@ fun MultiSetCompose(
     val baseNote = remember { multiSetCard.note }
 
     val popupExpanded = remember { mutableStateOf(false) }
-    val enablePopup = remember { { popupExpanded.value = true } }
 
     val scope = rememberCoroutineScope()
 
@@ -126,7 +125,7 @@ fun MultiSetCompose(
                     onClick = {
                         scope.launch { routeFor(baseNote, accountViewModel.userProfile())?.let { nav(it) } }
                     },
-                    onLongClick = enablePopup,
+                    onLongClick = { popupExpanded.value = true },
                 ).padding(
                     start = 12.dp,
                     end = 12.dp,
@@ -152,7 +151,9 @@ fun MultiSetCompose(
                 nav = nav,
             )
 
-            NoteDropDownMenu(baseNote, popupExpanded, null, accountViewModel, nav)
+            if (popupExpanded.value) {
+                NoteDropDownMenu(baseNote, { popupExpanded.value = false }, null, accountViewModel, nav)
+            }
         }
     }
 }

app/src/main/java/com/vitorpamplona/amethyst/ui/note/elements/DropDownMenu.kt

@@ -28,7 +28,6 @@ import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.Immutable
 import androidx.compose.runtime.LaunchedEffect
-import androidx.compose.runtime.MutableState
 import androidx.compose.runtime.State
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.livedata.observeAsState
@@ -71,15 +70,17 @@ fun MoreOptionsButton(
         modifier = Size24Modifier,
         onClick = { popupExpanded.value = true },
     ) {
-        VerticalDotsIcon(R.string.note_options)
+        VerticalDotsIcon()
 
-        NoteDropDownMenu(
-            baseNote,
-            popupExpanded,
-            editState,
-            accountViewModel,
-            nav,
-        )
+        if (popupExpanded.value) {
+            NoteDropDownMenu(
+                note = baseNote,
+                onDismiss = { popupExpanded.value = false },
+                editState = editState,
+                accountViewModel = accountViewModel,
+                nav = nav,
+            )
+        }
     }
 }
 
@@ -96,7 +97,7 @@ data class DropDownParams(
 @Composable
 fun NoteDropDownMenu(
     note: Note,
-    popupExpanded: MutableState<Boolean>,
+    onDismiss: () -> Unit,
     editState: State<GenericLoadable<EditState>>? = null,
     accountViewModel: AccountViewModel,
     nav: (String) -> Unit,
@@ -116,8 +117,6 @@ fun NoteDropDownMenu(
         )
     }
 
-    val onDismiss = remember(popupExpanded) { { popupExpanded.value = false } }
-
     val wantsToEditPost =
         remember {
             mutableStateOf(false)
@@ -137,7 +136,7 @@ fun NoteDropDownMenu(
 
         EditPostView(
             onClose = {
-                popupExpanded.value = false
+                onDismiss()
                 wantsToEditPost.value = false
             },
             edit = note,
@@ -150,7 +149,7 @@ fun NoteDropDownMenu(
     if (wantsToEditDraft.value) {
         NewPostView(
             onClose = {
-                popupExpanded.value = false
+                onDismiss()
                 wantsToEditDraft.value = false
             },
             accountViewModel = accountViewModel,
@@ -160,7 +159,7 @@ fun NoteDropDownMenu(
     }
 
     DropdownMenu(
-        expanded = popupExpanded.value,
+        expanded = true,
         onDismissRequest = onDismiss,
     ) {
         val clipboardManager = LocalClipboardManager.current

app/src/main/java/com/vitorpamplona/amethyst/ui/screen/loggedIn/VideoScreen.kt

@@ -39,7 +39,6 @@ import androidx.compose.foundation.pager.rememberPagerState
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.MoreVert
 import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.DisposableEffect
@@ -63,6 +62,7 @@ import com.vitorpamplona.amethyst.model.Note
 import com.vitorpamplona.amethyst.service.NostrVideoDataSource
 import com.vitorpamplona.amethyst.ui.actions.CrossfadeIfEnabled
 import com.vitorpamplona.amethyst.ui.actions.NewPostView
+import com.vitorpamplona.amethyst.ui.components.ClickableBox
 import com.vitorpamplona.amethyst.ui.components.ObserveDisplayNip05Status
 import com.vitorpamplona.amethyst.ui.navigation.routeFor
 import com.vitorpamplona.amethyst.ui.note.BoostReaction
@@ -89,6 +89,8 @@ import com.vitorpamplona.amethyst.ui.screen.rememberForeverPagerState
 import com.vitorpamplona.amethyst.ui.stringRes
 import com.vitorpamplona.amethyst.ui.theme.AuthorInfoVideoFeed
 import com.vitorpamplona.amethyst.ui.theme.DoubleHorzSpacer
+import com.vitorpamplona.amethyst.ui.theme.Size20Modifier
+import com.vitorpamplona.amethyst.ui.theme.Size22Modifier
 import com.vitorpamplona.amethyst.ui.theme.Size35Modifier
 import com.vitorpamplona.amethyst.ui.theme.Size35dp
 import com.vitorpamplona.amethyst.ui.theme.Size40Modifier
@@ -343,26 +345,27 @@ private fun VideoUserOptionAction(
     nav: (String) -> Unit,
 ) {
     val popupExpanded = remember { mutableStateOf(false) }
-    val enablePopup = remember { { popupExpanded.value = true } }
 
-    IconButton(
-        modifier = remember { Modifier.size(22.dp) },
-        onClick = enablePopup,
+    ClickableBox(
+        modifier = Size22Modifier,
+        onClick = { popupExpanded.value = true },
     ) {
         Icon(
             imageVector = Icons.Default.MoreVert,
             contentDescription = stringRes(id = R.string.more_options),
-            modifier = remember { Modifier.size(20.dp) },
+            modifier = Size20Modifier,
             tint = MaterialTheme.colorScheme.placeholderText,
         )
 
-        NoteDropDownMenu(
-            note,
-            popupExpanded,
-            null,
-            accountViewModel,
-            nav,
-        )
+        if (popupExpanded.value) {
+            NoteDropDownMenu(
+                note,
+                { popupExpanded.value = false },
+                null,
+                accountViewModel,
+                nav,
+            )
+        }
     }
 }