Refactor(TopAppBar): Optimize size of TopAppBar

app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/OxygenApp.kt

@@ -7,12 +7,12 @@ import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.WindowInsetsSides
 import androidx.compose.foundation.layout.consumeWindowInsets
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.only
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.safeDrawing
 import androidx.compose.foundation.layout.safeDrawingPadding
 import androidx.compose.foundation.layout.windowInsetsPadding
-import androidx.compose.material3.BottomAppBar
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
@@ -35,6 +35,8 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.dp
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import androidx.navigation.NavDestination
 import androidx.navigation.NavDestination.Companion.hierarchy
@@ -129,13 +131,11 @@ fun OxygenApp(appState: OxygenAppState) {
                     AnimatedVisibility(
                         visible = appState.shouldShowBottomBar && destination != null
                     ) {
-                        BottomAppBar {
+                        OxygenBottomBar(
-                            OxygenBottomBar(
+                            destinations = appState.topLevelDestinations,
-                                destinations = appState.topLevelDestinations,
+                            currentDestination = appState.currentDestination,
-                                currentDestination = appState.currentDestination,
+                            onNavigateToDestination = appState::navigateToTopLevelDestination
-                                onNavigateToDestination = appState::navigateToTopLevelDestination
+                        )
-                            )
-                        }
                     }
                 }
             ) { padding ->
@@ -170,7 +170,13 @@ fun OxygenApp(appState: OxygenAppState) {
                             OxygenTopAppBar(
                                 scrollBehavior = topAppBarScrollBehavior,
                                 title = {
-                                    destination?.let { Text(text = stringResource(destination.titleTextId)) }
+                                    destination?.let {
+                                        Text(
+                                            text = stringResource(destination.titleTextId),
+                                            maxLines = 1,
+                                            overflow = TextOverflow.Ellipsis
+                                        )
+                                    }
                                 },
                                 navigationIcon = OxygenIcons.Search,
                                 navigationIconContentDescription = stringResource(R.string.feature_settings_top_app_bar_navigation_icon_description),

app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/about/AboutScreen.kt

@@ -41,6 +41,7 @@ import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import kotlinx.coroutines.delay
 import top.fatweb.oxygen.toolbox.R
@@ -96,7 +97,11 @@ internal fun AboutScreen(
             OxygenTopAppBar(
                 scrollBehavior = topAppBarScrollBehavior,
                 title = {
-                    Text(text = stringResource(R.string.feature_settings_more_about))
+                    Text(
+                        text = stringResource(R.string.feature_settings_more_about),
+                        maxLines = 1,
+                        overflow = TextOverflow.Ellipsis
+                    )
                 },
                 navigationIcon = OxygenIcons.Back,
                 navigationIconContentDescription = stringResource(R.string.core_back),

app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/about/LibrariesScreen.kt

@@ -47,6 +47,7 @@ import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
@@ -132,7 +133,11 @@ internal fun LibrariesScreen(
             OxygenTopAppBar(
                 scrollBehavior = topAppBarScrollBehavior,
                 title = {
-                    Text(text = stringResource(R.string.feature_settings_open_source_license))
+                    Text(
+                        text = stringResource(R.string.feature_settings_open_source_license),
+                        maxLines = 1,
+                        overflow = TextOverflow.Ellipsis
+                    )
                 },
                 navigationIcon = OxygenIcons.Back,
                 navigationIconContentDescription = stringResource(R.string.core_back),

app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/component/OxygenTopAppBar.kt

@@ -33,6 +33,7 @@ import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.platform.LocalSoftwareKeyboardController
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.input.ImeAction
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import top.fatweb.oxygen.toolbox.R
 import top.fatweb.oxygen.toolbox.icon.OxygenIcons
@@ -81,6 +82,7 @@ fun OxygenTopAppBar(
     CenterAlignedTopAppBar(
         modifier = modifier,
         scrollBehavior = scrollBehavior,
+        expandedHeight = 48.dp,
         title = {
             if (activeSearch) TextField(
                 modifier = Modifier
@@ -116,6 +118,7 @@ fun OxygenTopAppBar(
                 },
                 maxLines = 1,
                 singleLine = true,
+                textStyle = MaterialTheme.typography.titleSmall,
                 onValueChange = {
                     if ("\n" !in it) onQueryChange(it)
                 }
@@ -175,7 +178,13 @@ enum class SearchButtonPosition {
 private fun OxygenTopAppBarPreview() {
     OxygenTheme {
         OxygenTopAppBar(
-            title = { Text(text = stringResource(androidR.string.untitled)) },
+            title = {
+                Text(
+                    text = stringResource(androidR.string.untitled),
+                    maxLines = 1,
+                    overflow = TextOverflow.Ellipsis
+                )
+            },
             navigationIcon = OxygenIcons.Search,
             navigationIconContentDescription = "Navigation icon",
             actionIcon = OxygenIcons.MoreVert,

app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/theme/Theme.kt

@@ -204,7 +204,7 @@ fun supportsDynamicTheming() = Build.VERSION.SDK_INT >= Build.VERSION_CODES.S
     uiMode = Configuration.UI_MODE_NIGHT_YES or Configuration.UI_MODE_TYPE_NORMAL
 )
 @Preview(
-    name = "Api 21 Light", group = "ApiLevelPreviews", apiLevel = 21,
+    name = "Api 24 Light", group = "ApiLevelPreviews", apiLevel = 24,
     uiMode = Configuration.UI_MODE_NIGHT_NO or Configuration.UI_MODE_TYPE_NORMAL
 )
 annotation class OxygenPreviews

app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/view/ToolViewScreen.kt

@@ -37,6 +37,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.kevinnzou.web.AccompanistWebChromeClient
@@ -119,7 +120,9 @@ private fun TopBar(
                     R.string.feature_tool_view_preview_suffix,
                     toolViewUiState.toolName
                 ) else toolViewUiState.toolName
-            }
+            },
+            maxLines = 1,
+            overflow = TextOverflow.Ellipsis
         )
     },
     navigationIcon = OxygenIcons.Back,