Donate to e Foundation | Murena handsets with /e/OS | Own a part of Murena! Learn more

Verified Commit 987af578 authored by Fahim M. Choudhury's avatar Fahim M. Choudhury
Browse files

feat: bootstrap Search screen in Compose 

Implemented search view top bar with necessary scaffolding to support fragment navigation.
parent b12d3635

app/build.gradle

+1 −0
Original line number Diff line number Diff line
@@ -350,6 +350,7 @@ dependencies { 
    androidTestImplementation composeBom



    implementation libs.compose.material3

    implementation libs.compose.material.icons.extended



    implementation libs.activity.compose

    implementation libs.lifecycle.viewmodel.compose

app/src/main/java/foundation/e/apps/ui/compose/components/SearchInitialState.kt

0 → 100644
+75 −0
Original line number Diff line number Diff line 
/*

 * Copyright (C) 2025 e Foundation

 *

 * This program is free software: you can redistribute it and/or modify

 * it under the terms of the GNU General Public License as published by

 * the Free Software Foundation, either version 3 of the License, or

 * (at your option) any later version.

 *

 * This program is distributed in the hope that it will be useful,

 * but WITHOUT ANY WARRANTY; without even the implied warranty of

 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the

 * GNU General Public License for more details.

 *

 * You should have received a copy of the GNU General Public License

 * along with this program.  If not, see <https://www.gnu.org/licenses/>.

 *

 */



package foundation.e.apps.ui.compose.components



import androidx.compose.foundation.layout.Arrangement

import androidx.compose.foundation.layout.Box

import androidx.compose.foundation.layout.Column

import androidx.compose.foundation.layout.fillMaxSize

import androidx.compose.foundation.layout.padding

import androidx.compose.foundation.layout.size

import androidx.compose.material.icons.Icons

import androidx.compose.material.icons.outlined.Search

import androidx.compose.material3.Icon

import androidx.compose.material3.MaterialTheme

import androidx.compose.material3.Text

import androidx.compose.runtime.Composable

import androidx.compose.ui.Alignment

import androidx.compose.ui.Modifier

import androidx.compose.ui.res.stringResource

import androidx.compose.ui.tooling.preview.Preview

import androidx.compose.ui.unit.dp

import foundation.e.apps.R

import foundation.e.apps.ui.compose.theme.AppTheme



@Composable

fun SearchInitialState(modifier: Modifier = Modifier) {

    Box(

        modifier = modifier

            .fillMaxSize(),

        contentAlignment = Alignment.Center,

    ) {

        Column(

            horizontalAlignment = Alignment.CenterHorizontally,

            verticalArrangement = Arrangement.spacedBy(12.dp),

        ) {

            Icon(

                imageVector = Icons.Outlined.Search,

                contentDescription = null,

                tint = MaterialTheme.colorScheme.onBackground.copy(alpha = 0.45f),

                modifier = Modifier

                    .padding(bottom = 4.dp)

                    .size(72.dp),

            )

            Text(

                text = stringResource(id = R.string.search_hint),

                style = MaterialTheme.typography.bodyMedium,

                color = MaterialTheme.colorScheme.onBackground.copy(alpha = 0.72f),

            )

        }

    }

}



@Preview(showBackground = false)

@Composable

private fun SearchInitialStatePreview() {

    AppTheme(darkTheme = true) {

        SearchInitialState()

    }

}

app/src/main/java/foundation/e/apps/ui/compose/components/SearchTopBar.kt

0 → 100644
+170 −0
Original line number Diff line number Diff line 
/*

 * Copyright (C) 2025 e Foundation

 *

 * This program is free software: you can redistribute it and/or modify

 * it under the terms of the GNU General Public License as published by

 * the Free Software Foundation, either version 3 of the License, or

 * (at your option) any later version.

 *

 * This program is distributed in the hope that it will be useful,

 * but WITHOUT ANY WARRANTY; without even the implied warranty of

 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the

 * GNU General Public License for more details.

 *

 * You should have received a copy of the GNU General Public License

 * along with this program.  If not, see <https://www.gnu.org/licenses/>.

 *

 */



package foundation.e.apps.ui.compose.components



import androidx.compose.foundation.layout.Arrangement

import androidx.compose.foundation.layout.Row

import androidx.compose.foundation.layout.fillMaxWidth

import androidx.compose.foundation.layout.padding

import androidx.compose.foundation.text.KeyboardOptions

import androidx.compose.material.icons.Icons

import androidx.compose.material.icons.automirrored.filled.ArrowBack

import androidx.compose.material.icons.filled.Cancel

import androidx.compose.material.icons.outlined.Search

import androidx.compose.material3.Icon

import androidx.compose.material3.IconButton

import androidx.compose.material3.MaterialTheme

import androidx.compose.material3.Text

import androidx.compose.material3.TextField

import androidx.compose.material3.TextFieldDefaults

import androidx.compose.runtime.Composable

import androidx.compose.runtime.LaunchedEffect

import androidx.compose.runtime.remember

import androidx.compose.ui.Alignment

import androidx.compose.ui.Modifier

import androidx.compose.ui.focus.FocusRequester

import androidx.compose.ui.focus.focusRequester

import androidx.compose.ui.graphics.Color

import androidx.compose.ui.platform.LocalSoftwareKeyboardController

import androidx.compose.ui.res.stringResource

import androidx.compose.ui.text.input.ImeAction

import androidx.compose.ui.text.input.KeyboardCapitalization

import androidx.compose.ui.tooling.preview.Preview

import androidx.compose.ui.unit.dp

import foundation.e.apps.R

import foundation.e.apps.ui.compose.theme.AppTheme



@Composable

fun SearchTopBar(

    query: String,

    onQueryChange: (String) -> Unit,

    onBackClick: () -> Unit,

    onClearQuery: () -> Unit,

    onSubmitSearch: (String) -> Unit,

    focusRequester: FocusRequester,

    modifier: Modifier = Modifier,

) {

    val keyboardController = LocalSoftwareKeyboardController.current



    // Request focus immediately so the keyboard shows on entry

    LaunchedEffect(Unit) {

        focusRequester.requestFocus()

        keyboardController?.show()

    }



    Row(

        modifier = modifier

            .fillMaxWidth(),

        verticalAlignment = Alignment.CenterVertically,

        horizontalArrangement = Arrangement.SpaceEvenly

    ) {

        IconButton(onClick = onBackClick) {

            Icon(

                imageVector = Icons.AutoMirrored.Filled.ArrowBack,

                contentDescription = stringResource(id = R.string.back),

                tint = MaterialTheme.colorScheme.onBackground,

            )

        }



        TextField(

            modifier = Modifier

                .padding(end = 16.dp)

                .weight(1f)

                .focusRequester(focusRequester),

            value = query,

            onValueChange = onQueryChange,

            placeholder = { Text(text = stringResource(id = R.string.search_hint)) },

            singleLine = true,

            textStyle = MaterialTheme.typography.bodyLarge,

            leadingIcon = {

                Icon(

                    imageVector = Icons.Outlined.Search,

                    contentDescription = null,

                    tint = MaterialTheme.colorScheme.onBackground,

                )

            },

            trailingIcon = {

                if (query.isNotEmpty()) {

                    IconButton(onClick = onClearQuery) {

                        Icon(

                            imageVector = Icons.Filled.Cancel,

                            contentDescription = stringResource(id = R.string.clear),

                            tint = MaterialTheme.colorScheme.onBackground,

                        )

                    }

                } else {

                    Icon(

                        imageVector = Icons.Filled.Cancel,

                        contentDescription = null,

                        tint = Color.Transparent,

                    )

                }

            },

            keyboardOptions = KeyboardOptions(

                capitalization = KeyboardCapitalization.Sentences,

                imeAction = ImeAction.Search,

            ),

            keyboardActions = androidx.compose.foundation.text.KeyboardActions(

                onSearch = {

                    val trimmedQuery = query.trim()

                    if (trimmedQuery.isEmpty()) {

                        onClearQuery()

                    } else {

                        onSubmitSearch(trimmedQuery)

                        keyboardController?.hide()

                    }

                },

            ),

            colors = TextFieldDefaults.colors(

                focusedIndicatorColor = MaterialTheme.colorScheme.primary,

                unfocusedIndicatorColor = MaterialTheme.colorScheme.primary,

                disabledIndicatorColor = MaterialTheme.colorScheme.primary.copy(alpha = 0.5f),

                cursorColor = MaterialTheme.colorScheme.primary,

                focusedTextColor = MaterialTheme.colorScheme.onBackground,

                unfocusedTextColor = MaterialTheme.colorScheme.onBackground,

                disabledTextColor = MaterialTheme.colorScheme.onBackground.copy(alpha = 0.5f),

                focusedLeadingIconColor = MaterialTheme.colorScheme.onBackground,

                unfocusedLeadingIconColor = MaterialTheme.colorScheme.onBackground,

                focusedTrailingIconColor = MaterialTheme.colorScheme.onBackground,

                unfocusedTrailingIconColor = MaterialTheme.colorScheme.onBackground,

                focusedPlaceholderColor = MaterialTheme.colorScheme.onBackground.copy(alpha = 0.6f),

                unfocusedPlaceholderColor = MaterialTheme.colorScheme.onBackground.copy(alpha = 0.6f),

                focusedContainerColor = Color.Transparent,

                unfocusedContainerColor = Color.Transparent,

                disabledContainerColor = Color.Transparent,

            ),

        )

    }

}



@Preview(showBackground = false)

@Composable

private fun SearchTopBarPreview() {

    AppTheme(darkTheme = false) {

        val focusRequester = remember { FocusRequester() }

        SearchTopBar(

            query = "Firefox",

            onQueryChange = {},

            onBackClick = {},

            onClearQuery = {},

            onSubmitSearch = {},

            focusRequester = focusRequester,

        )

    }

}

app/src/main/java/foundation/e/apps/ui/compose/screens/SearchScreen.kt

0 → 100644
+88 −0
Original line number Diff line number Diff line 
/*

 * Copyright (C) 2025 e Foundation

 *

 * This program is free software: you can redistribute it and/or modify

 * it under the terms of the GNU General Public License as published by

 * the Free Software Foundation, either version 3 of the License, or

 * (at your option) any later version.

 *

 * This program is distributed in the hope that it will be useful,

 * but WITHOUT ANY WARRANTY; without even the implied warranty of

 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the

 * GNU General Public License for more details.

 *

 * You should have received a copy of the GNU General Public License

 * along with this program.  If not, see <https://www.gnu.org/licenses/>.

 *

 */



package foundation.e.apps.ui.compose.screens



import androidx.compose.foundation.layout.Column

import androidx.compose.foundation.layout.fillMaxSize

import androidx.compose.foundation.layout.padding

import androidx.compose.material3.Scaffold

import androidx.compose.runtime.Composable

import androidx.compose.runtime.remember

import androidx.compose.ui.Modifier

import androidx.compose.ui.focus.FocusRequester

import androidx.compose.ui.platform.LocalFocusManager

import androidx.compose.ui.tooling.preview.Preview

import androidx.compose.ui.unit.dp

import foundation.e.apps.ui.compose.components.SearchInitialState

import foundation.e.apps.ui.compose.components.SearchTopBar

import foundation.e.apps.ui.compose.theme.AppTheme



@Composable

fun SearchScreen(

    query: String,

    onQueryChange: (String) -> Unit,

    onBackClick: () -> Unit,

    onClearQuery: () -> Unit,

    onSubmitSearch: (String) -> Unit,

) {

    val focusManager = LocalFocusManager.current

    val focusRequester = remember { FocusRequester() }



    Scaffold(

        topBar = {

            SearchTopBar(

                query = query,

                onQueryChange = onQueryChange,

                onBackClick = onBackClick,

                onClearQuery = {

                    onClearQuery()

                    focusManager.clearFocus(force = false)

                },

                onSubmitSearch = onSubmitSearch,

                focusRequester = focusRequester,

            )

        },

    ) { innerPadding ->

        Column(

            modifier = Modifier

                .fillMaxSize()

                .padding(innerPadding)

                .padding(horizontal = 16.dp),

        ) {

            SearchInitialState(

                modifier = Modifier

                    .fillMaxSize(),

            )

        }

    }

}



@Preview(showBackground = false)

@Composable

private fun SearchScreenPreview() {

    AppTheme(darkTheme = true) {

        SearchScreen(

            query = "",

            onQueryChange = {},

            onBackClick = {},

            onClearQuery = {},

            onSubmitSearch = {},

        )

    }

}

app/src/main/java/foundation/e/apps/ui/compose/theme/AppTheme.kt

0 → 100644
+58 −0
Original line number Diff line number Diff line 
/*

 * Copyright (C) 2025-2025 e Foundation

 *

 * This program is free software: you can redistribute it and/or modify

 * it under the terms of the GNU General Public License as published by

 * the Free Software Foundation, either version 3 of the License, or

 * (at your option) any later version.

 *

 * This program is distributed in the hope that it will be useful,

 * but WITHOUT ANY WARRANTY; without even the implied warranty of

 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the

 * GNU General Public License for more details.

 *

 * You should have received a copy of the GNU General Public License

 * along with this program.  If not, see <https://www.gnu.org/licenses/>.

 *

 */

package foundation.e.apps.ui.compose.theme



import androidx.compose.foundation.isSystemInDarkTheme

import androidx.compose.material3.MaterialTheme

import androidx.compose.material3.darkColorScheme

import androidx.compose.material3.lightColorScheme

import androidx.compose.runtime.Composable

import androidx.compose.ui.res.colorResource

import foundation.e.elib.R as eR



@Composable

fun AppTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit) {

    val colorScheme =

        if (darkTheme) {

            darkColorScheme(

                primary = colorResource(eR.color.e_action_bar_dark),

                secondary = colorResource(eR.color.e_action_bar_dark),

                tertiary = colorResource(eR.color.e_accent_dark),

                background = colorResource(eR.color.e_background_dark),

                surface = colorResource(eR.color.e_floating_background_dark),

                onPrimary = colorResource(eR.color.e_primary_text_color_dark),

                onSecondary = colorResource(eR.color.e_primary_text_color_light),

                onBackground = colorResource(eR.color.e_primary_text_color_dark),

                onSurface = colorResource(eR.color.e_primary_text_color_dark),

            )

        } else {

            lightColorScheme(

                primary = colorResource(eR.color.e_action_bar_light),

                secondary = colorResource(eR.color.e_action_bar_light),

                tertiary = colorResource(eR.color.e_accent_light),

                background = colorResource(eR.color.e_background_light),

                surface = colorResource(eR.color.e_floating_background_light),

                onPrimary = colorResource(eR.color.e_primary_text_color_light),

                onSecondary = colorResource(eR.color.e_primary_text_color_dark),

                onBackground = colorResource(eR.color.e_primary_text_color_light),

                onSurface = colorResource(eR.color.e_primary_text_color_light),

            )

        }



    MaterialTheme(colorScheme = colorScheme, typography = Typography, content = content)

}