Add CommandSuggestionsBox quick access (#146)

* Add CommandSuggestionsBox quick access

* Remove unnecessary evaluation

* Use a FilledTonalIconButton for the CommandSuggestionsBox quick access button

* fix import

* quick command instead of send

* simplify

---------

Co-authored-by: callebtc <93376500+callebtc@users.noreply.github.com>

app/src/main/java/com/bitchat/android/ui/ChatScreen.kt

@@ -86,7 +86,6 @@ fun ChatScreen(viewModel: ChatViewModel) {
                 meshService = viewModel.meshService,
                 modifier = Modifier.weight(1f)
             )
-            
             // Input area - stays at bottom
             ChatInputSection(
                 messageText = messageText,
@@ -225,7 +224,6 @@ private fun ChatInputSection(
     ) {
         Column {
             HorizontalDivider(color = colorScheme.outline.copy(alpha = 0.3f))
-            
             // Command suggestions box
             if (showCommandSuggestions && commandSuggestions.isNotEmpty()) {
                 CommandSuggestionsBox(

app/src/main/java/com/bitchat/android/ui/CommandProcessor.kt

@@ -329,7 +329,7 @@ class CommandProcessor(
     // MARK: - Command Autocomplete
 
     fun updateCommandSuggestions(input: String) {
-        if (!input.startsWith("/") || input.length < 1) {
+        if (!input.startsWith("/")) {
             state.setShowCommandSuggestions(false)
             state.setCommandSuggestions(emptyList())
             return

app/src/main/java/com/bitchat/android/ui/InputComponents.kt

@@ -15,19 +15,23 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.SolidColor
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.TextRange
 import androidx.compose.ui.text.AnnotatedString
 import androidx.compose.ui.text.SpanStyle
 import androidx.compose.ui.text.buildAnnotatedString
 import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.input.ImeAction
-import androidx.compose.ui.text.input.OffsetMapping
 import androidx.compose.ui.text.input.TextFieldValue
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.input.OffsetMapping
 import androidx.compose.ui.text.input.TransformedText
 import androidx.compose.ui.text.input.VisualTransformation
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import com.bitchat.android.R
 import androidx.compose.ui.focus.onFocusChanged
 import androidx.compose.ui.text.withStyle
 
@@ -162,7 +166,8 @@ fun MessageInput(
     
     Row(
         modifier = modifier.padding(horizontal = 12.dp, vertical = 8.dp), // Reduced padding
-        verticalAlignment = Alignment.CenterVertically
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(8.dp)
     ) {
         // Text input with placeholder
         Box(
@@ -205,48 +210,64 @@ fun MessageInput(
         
         Spacer(modifier = Modifier.width(8.dp)) // Reduced spacing
         
-        // Send button with enabled/disabled state
+        // Command quick access button
-        IconButton(
+        if (value.text.isEmpty()) {
-            onClick = { if (hasText) onSend() }, // Only execute if there's text
+            FilledTonalIconButton(
-            enabled = hasText, // Enable only when there's text
+                onClick = {
-            modifier = Modifier.size(32.dp)
+                    onValueChange(TextFieldValue(text = "/", selection = TextRange("/".length)))
-        ) {
+                },
-            Box(
+                modifier = Modifier.size(32.dp)
-                modifier = Modifier
-                    .size(30.dp)
-                    .background(
-                        color = if (!hasText) {
-                            // Disabled state - muted grey
-                            colorScheme.onSurface.copy(alpha = 0.3f)
-                        } else if (selectedPrivatePeer != null || currentChannel != null) {
-                            // Orange for both private messages and channels when enabled
-                            Color(0xFFFF9500).copy(alpha = 0.75f)
-                        } else if (colorScheme.background == Color.Black) {
-                            Color(0xFF00FF00).copy(alpha = 0.75f) // Bright green for dark theme
-                        } else {
-                            Color(0xFF008000).copy(alpha = 0.75f) // Dark green for light theme
-                        },
-                        shape = CircleShape
-                    ),
-                contentAlignment = Alignment.Center
             ) {
-                Icon(
+                Text(
-                    imageVector = Icons.Filled.ArrowUpward,
+                    text = "/",
-                    contentDescription = "Send message",
+                    textAlign = TextAlign.Center
-                    modifier = Modifier.size(20.dp),
-                    tint = if (!hasText) {
-                        // Disabled state - muted grey icon
-                        colorScheme.onSurface.copy(alpha = 0.5f)
-                    } else if (selectedPrivatePeer != null || currentChannel != null) {
-                        // Black arrow on orange for both private and channel modes
-                        Color.Black
-                    } else if (colorScheme.background == Color.Black) {
-                        Color.Black // Black arrow on bright green in dark theme
-                    } else {
-                        Color.White // White arrow on dark green in light theme
-                    }
                 )
             }
+        } else {
+            // Send button with enabled/disabled state
+            IconButton(
+                onClick = { if (hasText) onSend() }, // Only execute if there's text
+                enabled = hasText, // Enable only when there's text
+                modifier = Modifier.size(32.dp)
+            ) {
+                // Update send button to match input field colors
+                Box(
+                    modifier = Modifier
+                        .size(30.dp)
+                        .background(
+                            color = if (!hasText) {
+                                // Disabled state - muted grey
+                                colorScheme.onSurface.copy(alpha = 0.3f)
+                            } else if (selectedPrivatePeer != null || currentChannel != null) {
+                                // Orange for both private messages and channels when enabled
+                                Color(0xFFFF9500).copy(alpha = 0.75f)
+                            } else if (colorScheme.background == Color.Black) {
+                                Color(0xFF00FF00).copy(alpha = 0.75f) // Bright green for dark theme
+                            } else {
+                                Color(0xFF008000).copy(alpha = 0.75f) // Dark green for light theme
+                            },
+                            shape = CircleShape
+                        ),
+                    contentAlignment = Alignment.Center
+                ) {
+                    Icon(
+                        imageVector = Icons.Filled.ArrowUpward,
+                        contentDescription = stringResource(id = R.string.send_message),
+                        modifier = Modifier.size(20.dp),
+                        tint = if (!hasText) {
+                            // Disabled state - muted grey icon
+                            colorScheme.onSurface.copy(alpha = 0.5f)
+                        } else if (selectedPrivatePeer != null || currentChannel != null) {
+                            // Black arrow on orange for both private and channel modes
+                            Color.Black
+                        } else if (colorScheme.background == Color.Black) {
+                            Color.Black // Black arrow on bright green in dark theme
+                        } else {
+                            Color.White // White arrow on dark green in light theme
+                        }
+                    )
+                }
+            }
         }
     }
 }
@@ -261,6 +282,7 @@ fun CommandSuggestionsBox(
 
     Column(
         modifier = modifier
+            .verticalScroll(rememberScrollState())
             .background(colorScheme.surface)
             .border(1.dp, colorScheme.outline.copy(alpha = 0.3f), RoundedCornerShape(4.dp))
             .padding(vertical = 8.dp)
@@ -287,7 +309,8 @@ fun CommandSuggestionItem(
             .clickable { onClick() }
             .padding(horizontal = 12.dp, vertical = 3.dp)
             .background(Color.Gray.copy(alpha = 0.1f)),
-        verticalAlignment = Alignment.CenterVertically
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(8.dp)
     ) {
         // Show all aliases together
         val allCommands = if (suggestion.aliases.isNotEmpty()) {
@@ -308,7 +331,6 @@ fun CommandSuggestionItem(
 
         // Show syntax if any
         suggestion.syntax?.let { syntax ->
-            Spacer(modifier = Modifier.width(8.dp))
             Text(
                 text = syntax,
                 style = MaterialTheme.typography.bodySmall.copy(
@@ -319,8 +341,6 @@ fun CommandSuggestionItem(
             )
         }
 
-        Spacer(modifier = Modifier.weight(1f))
-        
         // Show description
         Text(
             text = suggestion.description,

app/src/main/res/values/strings.xml

@@ -10,6 +10,7 @@
     <string name="join_channel">Join Channel</string>
     <string name="leave_channel">Leave</string>
     <string name="send_message">Send</string>
+    <string name="show_commands">Show commands</string>
     <string name="back">Back</string>
     <string name="people">People</string>
     <string name="channels">Channels</string>