Search bar

features/createroom/src/main/kotlin/io/element/android/features/createroom/root/CreateRoomRootScreen.kt

@@ -16,16 +16,27 @@
 
 package io.element.android.features.createroom.root
 
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.semantics.Role
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.tooling.preview.PreviewParameter
+import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
-import io.element.android.libraries.designsystem.R
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.designsystem.theme.components.CenterAlignedTopAppBar
@@ -33,7 +44,8 @@ import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.libraries.designsystem.theme.components.IconButton
 import io.element.android.libraries.designsystem.theme.components.Scaffold
 import io.element.android.libraries.designsystem.theme.components.Text
-import io.element.android.libraries.ui.strings.R.string as StringR
+import io.element.android.libraries.designsystem.R as DrawableR
+import io.element.android.libraries.ui.strings.R as StringR
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
@@ -48,6 +60,18 @@ fun CreateRoomRootScreen(
             CreateRoomRootViewTopBar(onClosePressed = onClosePressed)
         }
     ) {
+        Column(
+            modifier = Modifier.padding(it)
+        ) {
+            SearchBar(
+                modifier = Modifier.padding(horizontal = 16.dp),
+                // TODO use resource string
+                placeHolderTitle = "Search for someone",
+                // TODO implement click behavior
+                onClickDescription = "",
+                onClick = {}
+            )
+        }
     }
 }
 
@@ -61,19 +85,62 @@ fun CreateRoomRootViewTopBar(
         modifier = modifier,
         title = {
             Text(
-                text = stringResource(id = StringR.start_chat),
+                text = stringResource(id = StringR.string.start_chat),
                 fontSize = 16.sp,
                 fontWeight = FontWeight.SemiBold,
             )
         },
         actions = {
             IconButton(onClick = onClosePressed) {
-                Icon(resourceId = R.drawable.ic_close, contentDescription = stringResource(id = StringR.action_close))
+                Icon(resourceId = DrawableR.drawable.ic_close, contentDescription = stringResource(id = StringR.string.action_close))
             }
         }
     )
 }
 
+// TODO export into design system package
+// TODO comment that SearchBar is not yet implemented in Material3 compose
+//  and that TextField cannot be used since contentPadding cannot be changed
+@Composable
+fun SearchBar(
+    modifier: Modifier = Modifier,
+    placeHolderTitle: String,
+    onClickDescription: String = "",
+    onClick: () -> Unit = {},
+) {
+    Row(
+        modifier = modifier
+            .fillMaxWidth()
+            .height(48.dp)
+            .background(
+                color = MaterialTheme.colorScheme.surfaceVariant,
+                shape = RoundedCornerShape(28.dp),
+            )
+            .clickable(
+                role = Role.Button,
+                onClickLabel = onClickDescription,
+                onClick = onClick,
+            ),
+    ) {
+        Text(
+            modifier = Modifier
+                .padding(horizontal = 16.dp)
+                .align(Alignment.CenterVertically)
+                .weight(1f)
+                .alpha(0.4f),
+            text = placeHolderTitle,
+        )
+        Icon(
+            modifier = Modifier
+                .padding(horizontal = 16.dp)
+                .align(Alignment.CenterVertically)
+                .alpha(0.4f),
+            resourceId = DrawableR.drawable.ic_search,
+            contentDescription = stringResource(id = StringR.string.search)
+        )
+    }
+}
+
 @Preview
 @Composable
 fun CreateRoomRootViewLightPreview(@PreviewParameter(CreateRoomRootStateProvider::class) state: CreateRoomRootState) =