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,12 +210,27 @@ fun MessageInput(
         
         Spacer(modifier = Modifier.width(8.dp)) // Reduced spacing
         
+        // Command quick access button
+        if (value.text.isEmpty()) {
+            FilledTonalIconButton(
+                onClick = {
+                    onValueChange(TextFieldValue(text = "/", selection = TextRange("/".length)))
+                },
+                modifier = Modifier.size(32.dp)
+            ) {
+                Text(
+                    text = "/",
+                    textAlign = TextAlign.Center
+                )
+            }
+        } 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)
@@ -232,7 +252,7 @@ fun MessageInput(
                 ) {
                     Icon(
                         imageVector = Icons.Filled.ArrowUpward,
-                    contentDescription = "Send message",
+                        contentDescription = stringResource(id = R.string.send_message),
                         modifier = Modifier.size(20.dp),
                         tint = if (!hasText) {
                             // Disabled state - muted grey icon
@@ -250,6 +270,7 @@ fun MessageInput(
             }
         }
     }
+}
 
 @Composable
 fun CommandSuggestionsBox(
@@ -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>