Redesign top app bar

2026-02-16 15:02:12 +01:00
parent 972b2226d0
commit cd5a53ff5f
35 changed files with 130 additions and 368 deletions
--- a/app/src/main/java/eu/gaudian/translator/view/composable/AppIcons.kt
+++ b/app/src/main/java/eu/gaudian/translator/view/composable/AppIcons.kt
@@ -10,7 +10,7 @@ import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
 import androidx.compose.foundation.lazy.grid.items
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.Icons.Default
-import androidx.compose.material.icons.automirrored.filled.ArrowBack
+import androidx.compose.material.icons.automirrored.filled.ArrowBackIos
 import androidx.compose.material.icons.automirrored.filled.ArrowForward
 import androidx.compose.material.icons.automirrored.filled.DriveFileMove
 import androidx.compose.material.icons.automirrored.filled.ExitToApp
@@ -135,7 +135,7 @@ object AppIcons {
    val AI = Default.AutoAwesome
    val Appearance = Icons.Filled.ColorLens
    val ApiKey = Default.Key
-    val ArrowBack = Icons.AutoMirrored.Filled.ArrowBack
+    val ArrowBack = Icons.AutoMirrored.Filled.ArrowBackIos
    val ArrowCircleUp = Icons.Filled.ArrowCircleUp
    val ArrowDropDown = Icons.Filled.KeyboardArrowDown
    val ArrowDropUp = Icons.Filled.KeyboardArrowUp
--- a/app/src/main/java/eu/gaudian/translator/view/composable/AppTopAppBar.kt
+++ b/app/src/main/java/eu/gaudian/translator/view/composable/AppTopAppBar.kt
@@ -1,20 +1,23 @@
+@file:Suppress("HardCodedStringLiteral")
+
 package eu.gaudian.translator.view.composable

-import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.RowScope
 import androidx.compose.foundation.layout.WindowInsets
-import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material3.CenterAlignedTopAppBar
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
-import androidx.compose.material3.LocalContentColor
+import androidx.compose.material3.IconButtonDefaults
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
-import androidx.compose.material3.TopAppBar
 import androidx.compose.material3.TopAppBarColors
 import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.material3.rememberModalBottomSheetState
@@ -25,8 +28,10 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import eu.gaudian.translator.R
 import eu.gaudian.translator.ui.theme.ThemePreviews
@@ -36,7 +41,8 @@ import eu.gaudian.translator.view.hints.LocalShowHints

@Composable
 fun AppTopAppBar(
-    title: @Composable () -> Unit,
+    title: String,
+    additionalContent: @Composable () -> Unit = {},
    modifier: Modifier = Modifier,
    onNavigateBack: (() -> Unit)? = null,
    navigationIcon: @Composable (() -> Unit)? = null,
@@ -47,25 +53,26 @@ fun AppTopAppBar(
    val sheetState = rememberModalBottomSheetState()
    var showBottomSheet by remember { mutableStateOf(false) }

-    TopAppBar(
+    // Changed to CenterAlignedTopAppBar to perfectly match the design requirements
+    CenterAlignedTopAppBar(
        modifier = modifier.height(56.dp),
        windowInsets = WindowInsets(0.dp),
        colors = colors,
        title = {
-            Box(
-                modifier = Modifier.fillMaxHeight(),
-                contentAlignment = Alignment.Center
-            ) {
            val showHints = LocalShowHints.current
            if (showHints && hintContent != null) {
+                // Simplified row: keeps the title and hint icon neatly centered together
                Row(
-                        modifier = Modifier.fillMaxWidth(),
-                        verticalAlignment = Alignment.CenterVertically
+                    verticalAlignment = Alignment.CenterVertically,
+                    horizontalArrangement = Arrangement.Center
                ) {
-                        Box(modifier = Modifier.weight(1f)) {
-                            title()
-                        }
-                        Box {
+                    Text(
+                        text = title,
+                        style = MaterialTheme.typography.titleLarge,
+                        fontWeight = FontWeight.Bold,
+                        modifier = Modifier.weight(1f),
+                        textAlign = androidx.compose.ui.text.style.TextAlign.Center
+                    )
                    IconButton(onClick = { showBottomSheet = true }) {
                        Icon(
                            imageVector = AppIcons.Help,
@@ -74,33 +81,35 @@ fun AppTopAppBar(
                        )
                    }
                }
-                    }
            } else {
-                    title()
-                }
+                Text(
+                    text = title,
+                    style = MaterialTheme.typography.titleLarge,
+                    fontWeight = FontWeight.Bold,
+                    textAlign = androidx.compose.ui.text.style.TextAlign.Center
+                )
            }
        },
        navigationIcon = {
            if (onNavigateBack != null) {
-                Box(
-                    modifier = Modifier.fillMaxHeight(),
-                    contentAlignment = Alignment.Center
+                IconButton(
+                    onClick = onNavigateBack,
+                    modifier = Modifier.padding(start = 8.dp),
+                    // This tells the button to paint its own circular background natively
+                    colors = IconButtonDefaults.iconButtonColors(
+                        containerColor = MaterialTheme.colorScheme.surfaceVariant.copy(alpha = 0.5f),
+                        contentColor = MaterialTheme.colorScheme.primary
+                    )
                ) {
-                    IconButton(onClick = onNavigateBack) {
                    Icon(
-                            AppIcons.ArrowBack,
-                            contentDescription = stringResource(R.string.cd_navigate_back),
-                            tint = LocalContentColor.current
+                        imageVector = AppIcons.ArrowBack,
+                        contentDescription = stringResource(R.string.cd_navigate_back)
+                        // Notice we removed the 'tint' here, as contentColor handles it perfectly now!
                    )
                }
-                }
            } else if (navigationIcon != null) {
-                Box(modifier = Modifier.fillMaxHeight(), contentAlignment = Alignment.Center) {
                navigationIcon()
            }
-            } else {
-                // No navigation icon
-            }
        },
        actions = actions
    )
@@ -119,17 +128,9 @@ fun AppTopAppBar(
    }
 }

-
 /**
 * A composable that acts as a TopAppBar, containing a back navigation icon
 * and an [AppTabLayout].
- *
- * @param T The type of the tab item, must implement [TabItem].
- * @param tabs The list of tab items to display.
- * @param selectedTab The currently selected tab item.
- * @param onTabSelected Callback function when a tab is selected.
- * @param onNavigateBack Callback function when the back arrow is clicked.
- * @param modifier The modifier to be applied to the layout.
 */
@Composable
 fun <T : TabItem> TabbedTopAppBar(
@@ -139,7 +140,6 @@ fun <T : TabItem> TabbedTopAppBar(
    onNavigateBack: () -> Unit,
    modifier: Modifier = Modifier
 ) {
-    // Use a Surface to provide background color and context for the app bar
    Surface(
        modifier = modifier.fillMaxWidth(),
        color = MaterialTheme.colorScheme.surface
@@ -148,20 +148,21 @@ fun <T : TabItem> TabbedTopAppBar(
            modifier = Modifier.fillMaxWidth(),
            verticalAlignment = Alignment.CenterVertically
        ) {
-            // Back navigation icon, similar to its usage in AppTopAppBar
+            // Updated back icon here as well to keep your entire app consistent!
            IconButton(
                onClick = onNavigateBack,
-                modifier = Modifier.padding(horizontal = 4.dp)
+                modifier = Modifier
+                    .padding(start = 8.dp, end = 4.dp)
+                    .clip(CircleShape)
+                    .background(MaterialTheme.colorScheme.surfaceVariant.copy(alpha = 0.5f))
            ) {
                Icon(
                    imageVector = AppIcons.ArrowBack,
                    contentDescription = stringResource(R.string.cd_navigate_back),
-                    tint = MaterialTheme.colorScheme.onSurface
+                    tint = MaterialTheme.colorScheme.primary
                )
            }

-            // The AppTabLayout, taking up the remaining space.
-            // Its appearance matches the provided image.
            AppTabLayout(
                tabs = tabs,
                selectedTab = selectedTab,
@@ -172,11 +173,12 @@ fun <T : TabItem> TabbedTopAppBar(
    }
 }

+// ... [Previews remain exactly the same below]
+
@Suppress("HardCodedStringLiteral")
@ThemePreviews
@Composable
 fun TabbedTopAppBarPreview() {
-    // Sample data for preview, similar to ModernTabLayoutPreview
    data class SampleTabItem(override val title: String, override val icon: ImageVector) : TabItem

    val tabs = listOf(
@@ -202,7 +204,7 @@ fun TabbedTopAppBarPreview() {
@Composable
 fun AppTopAppBarPreview() {
    AppTopAppBar(
-        title = { Text("Preview Title") }
+        title = "Previwe Title"
    )
 }

@@ -210,7 +212,7 @@ fun AppTopAppBarPreview() {
@Composable
 fun AppTopAppBarWithNavigationIconPreview() {
    AppTopAppBar(
-        title = { Text(stringResource(R.string.title_title_preview_title)) },
+        title = "Preview Title",
        onNavigateBack = {}
    )
 }
@@ -219,13 +221,13 @@ fun AppTopAppBarWithNavigationIconPreview() {
@Composable
 fun AppTopAppBarWithActionsPreview() {
    AppTopAppBar(
-        title = { Text(stringResource(R.string.title_title_preview_title)) },
+        title = "Preview Title",
        actions = {
            IconButton(onClick = {}) {
                Icon(AppIcons.Settings, contentDescription = stringResource(R.string.title_settings))
            }
            IconButton(onClick = {}) {
-                AppIcons.ArrowBack
+                Icon(AppIcons.ArrowBack, contentDescription = null)
            }
        }
    )
--- a/app/src/main/java/eu/gaudian/translator/view/dialogs/VocabularyReviewScreen.kt
+++ b/app/src/main/java/eu/gaudian/translator/view/dialogs/VocabularyReviewScreen.kt
@@ -65,7 +65,7 @@ fun VocabularyReviewScreen(
    AppScaffold(
        topBar = {
            AppTopAppBar(
-                title = { Text(stringResource(R.string.found_items)) },
+                title = stringResource(R.string.found_items),
                hintContent = HintDefinition.REVIEW.hint()
            )
        },
--- a/app/src/main/java/eu/gaudian/translator/view/dictionary/DictionaryResultScreen.kt
+++ b/app/src/main/java/eu/gaudian/translator/view/dictionary/DictionaryResultScreen.kt
@@ -10,8 +10,6 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
-import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -28,7 +26,6 @@ import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontStyle
-import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import androidx.hilt.lifecycle.viewmodel.compose.hiltViewModel
 import androidx.navigation.NavController
@@ -346,28 +343,8 @@ fun DictionarySimpleTopBar(
    onNavigateBack: () -> Unit
 ) {
    AppTopAppBar(
-        title = {
-            Column {
-                Text(
-                    text = word ?: stringResource(R.string.text_loading_3d),
-                    maxLines = 1,
-                    overflow = TextOverflow.Ellipsis
-                )
-                languageName?.let {
-                    Text(
-                        text = it,
-                        style = MaterialTheme.typography.bodyMedium,
-                        fontStyle = FontStyle.Italic
-                    )
-                }
-            }
-        },
-        navigationIcon = {
-            IconButton(onClick = onNavigateBack) {
-                Icon(AppIcons.ArrowBack, contentDescription = stringResource(R.string.cd_back))
-            }
-        },
-        actions = {}
+        title = "TODO",
+        onNavigateBack =  onNavigateBack
    )
 }

--- a/app/src/main/java/eu/gaudian/translator/view/dictionary/EtymologyResultScreen.kt
+++ b/app/src/main/java/eu/gaudian/translator/view/dictionary/EtymologyResultScreen.kt
@@ -30,7 +30,6 @@ import androidx.compose.ui.Modifier
 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.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.hilt.lifecycle.viewmodel.compose.hiltViewModel
@@ -94,27 +93,8 @@ fun EtymologyResultScreen(
    AppScaffold(
        topBar = {
            AppTopAppBar(
-                title = {
-                    Column {
-                        Text(
-                            text = word,
-                            maxLines = 1,
-                            overflow = TextOverflow.Ellipsis
-                        )
-                        language?.name?.let {
-                            Text(
-                                text = it,
-                                style = MaterialTheme.typography.bodyMedium,
-                                fontStyle = androidx.compose.ui.text.font.FontStyle.Italic
-                            )
-                        }
-                    }
-                },
-                navigationIcon = {
-                    IconButton(onClick = { navController.popBackStack() }) {
-                        Icon(AppIcons.ArrowBack, contentDescription = stringResource(R.string.cd_back))
-                    }
-                },
+                title = "TODO",
+                onNavigateBack = { navController.popBackStack() },
                actions = {
                    etymologyData?.let { data ->
                        if (isTtsAvailable) {
--- a/app/src/main/java/eu/gaudian/translator/view/exercises/ExerciseVocabularyScreen.kt
+++ b/app/src/main/java/eu/gaudian/translator/view/exercises/ExerciseVocabularyScreen.kt
@@ -24,7 +24,7 @@ fun ExerciseVocabularyScreen(
 ) {
    Scaffold(
        topBar = {
-            AppTopAppBar(title = { Text(stringResource(R.string.text_new_vocabulary_for_this_exercise)) })
+            AppTopAppBar(title =stringResource(R.string.text_new_vocabulary_for_this_exercise))
        },
        bottomBar = {
            Surface(shadowElevation = 8.dp) {
--- a/app/src/main/java/eu/gaudian/translator/view/exercises/YouTubeBrowserScreen.kt
+++ b/app/src/main/java/eu/gaudian/translator/view/exercises/YouTubeBrowserScreen.kt
@@ -16,8 +16,6 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.FloatingActionButton
 import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
-import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -26,12 +24,10 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
-import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.viewinterop.AndroidView
 import androidx.hilt.lifecycle.viewmodel.compose.hiltViewModel
 import androidx.navigation.NavController
-import eu.gaudian.translator.R
 import eu.gaudian.translator.utils.findActivity
 import eu.gaudian.translator.view.composable.AppIcons
 import eu.gaudian.translator.view.composable.AppScaffold
@@ -61,12 +57,8 @@ fun YouTubeBrowserScreen(
    AppScaffold(
        topBar = {
            AppTopAppBar(
-                title = { Text("YouTube") },
-                navigationIcon = {
-                    IconButton(onClick = { navController.popBackStack() }) {
-                        Icon(AppIcons.ArrowBack, stringResource(R.string.cd_back))
-                    }
-                }
+                title = "YouTube" ,
+                onNavigateBack = { navController.popBackStack() }
            )
        }
    ) { padding ->
--- a/app/src/main/java/eu/gaudian/translator/view/exercises/YouTubeExerciseScreen.kt
+++ b/app/src/main/java/eu/gaudian/translator/view/exercises/YouTubeExerciseScreen.kt
@@ -183,14 +183,8 @@ fun YouTubeExerciseScreen(
    AppScaffold(
        topBar = {
            AppTopAppBar(
-                title = { Text(title, maxLines = 1) },
-                navigationIcon = {
-                    IconButton(onClick = { navController.popBackStack() }) {
-                        Icon(AppIcons.ArrowBack, contentDescription = stringResource(
-                            R.string.cd_back
-                        ))
-                    }
-                },
+                title = title,
+                onNavigateBack = { navController.popBackStack() },
                actions = {
                    IconButton(
                        onClick = { onFinishVideo() },
--- a/app/src/main/java/eu/gaudian/translator/view/hints/HintScreen.kt
+++ b/app/src/main/java/eu/gaudian/translator/view/hints/HintScreen.kt
@@ -5,15 +5,9 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
-import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
-import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.res.stringResource
 import androidx.navigation.NavController
-import eu.gaudian.translator.R
-import eu.gaudian.translator.view.composable.AppIcons
 import eu.gaudian.translator.view.composable.AppScaffold
 import eu.gaudian.translator.view.composable.AppTopAppBar

@@ -30,12 +24,8 @@ fun HintScreen(
    AppScaffold(
        topBar = {
            AppTopAppBar(
-                title = { Text(title) },
-                navigationIcon = {
-                    IconButton(onClick = { navController.popBackStack() }) {
-                        Icon(AppIcons.ArrowBack, contentDescription = stringResource(R.string.cd_back))
-                    }
-                }
+                title = title,
+                onNavigateBack = { navController.popBackStack() }
            )
        }
    ) { paddingValues ->
--- a/app/src/main/java/eu/gaudian/translator/view/hints/HintsOverviewScreen.kt
+++ b/app/src/main/java/eu/gaudian/translator/view/hints/HintsOverviewScreen.kt
@@ -77,7 +77,7 @@ fun HintsOverviewScreen(
        AppScaffold(
            topBar = {
                AppTopAppBar(
-                    title = { Text(stringResource(R.string.hint_title_hints_overview), style = MaterialTheme.typography.titleLarge) }
+                    title = stringResource(R.string.hint_title_hints_overview)
                )
            }
        ) { paddingValues ->
--- a/app/src/main/java/eu/gaudian/translator/view/settings/AboutScreen.kt
+++ b/app/src/main/java/eu/gaudian/translator/view/settings/AboutScreen.kt
@@ -17,7 +17,6 @@ import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -73,12 +72,8 @@ fun AboutScreen(
    AppScaffold(
        topBar = {
            AppTopAppBar(
-                title = { Text(stringResource(R.string.label_about)) },
-                navigationIcon = {
-                    IconButton(onClick = { navController.popBackStack() }) {
-                        Icon(AppIcons.ArrowBack, contentDescription = stringResource(R.string.cd_back))
-                    }
-                }
+                title = stringResource(R.string.label_about),
+                onNavigateBack = { navController.popBackStack() }
            )
        }
    ) { paddingValues ->
--- a/app/src/main/java/eu/gaudian/translator/view/settings/AddModelScreen.kt
+++ b/app/src/main/java/eu/gaudian/translator/view/settings/AddModelScreen.kt
@@ -134,12 +134,8 @@ fun AddModelScreen(navController: NavController, providerKey: String) {
    AppScaffold(
        topBar = {
            AppTopAppBar(
-                title = { Text(providerName) },
-                navigationIcon = {
-                    IconButton(onClick = { navController.popBackStack() }) {
-                        Icon(AppIcons.ArrowBack, contentDescription = stringResource(R.string.cd_back))
-                    }
-                },
+                title = providerName,
+                onNavigateBack = { navController.popBackStack() },
                hintContent = HintDefinition.ADD_MODEL_SCAN.hint()
            )
        },
--- a/app/src/main/java/eu/gaudian/translator/view/settings/ApiKeyScreen.kt
+++ b/app/src/main/java/eu/gaudian/translator/view/settings/ApiKeyScreen.kt
@@ -115,12 +115,8 @@ fun ApiKeyScreen(navController: NavController) {
    AppScaffold(
        topBar = {
            AppTopAppBar(
-                title = { Text(stringResource(R.string.label_ai_configuration)) },
-                navigationIcon = {
-                    IconButton(onClick = { navController.popBackStack() }) {
-                        Icon(AppIcons.ArrowBack, contentDescription = stringResource(R.string.cd_back))
-                    }
-                },
+                title = stringResource(R.string.label_ai_configuration),
+                onNavigateBack = { navController.popBackStack() },
                hintContent =  HintDefinition.API_KEY.hint()
            )
        }
--- a/app/src/main/java/eu/gaudian/translator/view/settings/CustomPromptScreens.kt
+++ b/app/src/main/java/eu/gaudian/translator/view/settings/CustomPromptScreens.kt
@@ -5,9 +5,6 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
-import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
-import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -22,7 +19,6 @@ import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import androidx.navigation.NavController
 import eu.gaudian.translator.R
 import eu.gaudian.translator.utils.findActivity
-import eu.gaudian.translator.view.composable.AppIcons
 import eu.gaudian.translator.view.composable.AppScaffold
 import eu.gaudian.translator.view.composable.AppTopAppBar
 import eu.gaudian.translator.viewmodel.ApiViewModel
@@ -55,12 +51,8 @@ fun CustomVocabularyPromptScreen(
    AppScaffold(
        topBar = {
            AppTopAppBar(
-                title = { Text(stringResource(R.string.text_vocabulary_prompt)) },
-                navigationIcon = {
-                    IconButton(onClick = { navController.popBackStack() }) {
-                        Icon(AppIcons.ArrowBack, contentDescription = stringResource(R.string.cd_back))
-                    }
-                },
+                title = stringResource(R.string.text_vocabulary_prompt),
+                onNavigateBack = { navController.popBackStack() },
                hintContent = null //TODO: Add hint

            )
--- a/app/src/main/java/eu/gaudian/translator/view/settings/DictionaryOptionsScreen.kt
+++ b/app/src/main/java/eu/gaudian/translator/view/settings/DictionaryOptionsScreen.kt
@@ -8,9 +8,6 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
-import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
-import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -31,7 +28,6 @@ import eu.gaudian.translator.R
 import eu.gaudian.translator.utils.findActivity
 import eu.gaudian.translator.view.LocalShowExperimentalFeatures
 import eu.gaudian.translator.view.composable.AppCard
-import eu.gaudian.translator.view.composable.AppIcons
 import eu.gaudian.translator.view.composable.AppScaffold
 import eu.gaudian.translator.view.composable.AppTopAppBar
 import eu.gaudian.translator.view.composable.OptionItemSwitch
@@ -66,12 +62,8 @@ fun DictionaryOptionsScreen(
    AppScaffold(
        topBar = {
            AppTopAppBar(
-                title = { Text(stringResource(R.string.label_dictionary_options)) },
-                navigationIcon = {
-                    IconButton(onClick = { navController.popBackStack() }) {
-                        Icon(AppIcons.ArrowBack, contentDescription = stringResource(R.string.cd_back))
-                    }
-                },
+                title = stringResource(R.string.label_dictionary_options),
+                onNavigateBack = { navController.popBackStack() },
                hintContent = HintDefinition.DICTIONARY_OPTIONS.hint()
            )
        }
--- a/app/src/main/java/eu/gaudian/translator/view/settings/ExerciseSettingsScreen.kt
+++ b/app/src/main/java/eu/gaudian/translator/view/settings/ExerciseSettingsScreen.kt
@@ -8,8 +8,6 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.LazyRow
 import androidx.compose.foundation.lazy.items
-import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -31,7 +29,6 @@ import eu.gaudian.translator.R
 import eu.gaudian.translator.utils.findActivity
 import eu.gaudian.translator.view.composable.ApiModelDropDown
 import eu.gaudian.translator.view.composable.AppCard
-import eu.gaudian.translator.view.composable.AppIcons
 import eu.gaudian.translator.view.composable.AppOutlinedTextField
 import eu.gaudian.translator.view.composable.AppScaffold
 import eu.gaudian.translator.view.composable.AppTopAppBar
@@ -71,12 +68,8 @@ fun ExerciseSettingsScreen(
    AppScaffold(
        topBar = {
            AppTopAppBar(
-                title = { Text(stringResource(R.string.exercise_settings)) },
-                navigationIcon = {
-                    IconButton(onClick = { navController.popBackStack() }) {
-                        Icon(AppIcons.ArrowBack, contentDescription = stringResource(R.string.cd_back))
-                    }
-                }
+                title = stringResource(R.string.exercise_settings),
+                onNavigateBack = { navController.popBackStack() },
            )
        }
    ) { paddingValues ->
--- a/app/src/main/java/eu/gaudian/translator/view/settings/GeneralSettingsScreen.kt
+++ b/app/src/main/java/eu/gaudian/translator/view/settings/GeneralSettingsScreen.kt
@@ -7,8 +7,6 @@ import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
-import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -24,7 +22,6 @@ import androidx.navigation.NavController
 import eu.gaudian.translator.R
 import eu.gaudian.translator.utils.findActivity
 import eu.gaudian.translator.view.composable.AppCard
-import eu.gaudian.translator.view.composable.AppIcons
 import eu.gaudian.translator.view.composable.AppScaffold
 import eu.gaudian.translator.view.composable.AppSwitch
 import eu.gaudian.translator.view.composable.AppTopAppBar
@@ -41,12 +38,8 @@ fun GeneralSettingsScreen(
    AppScaffold(
        topBar = {
            AppTopAppBar(
-                title = { Text(stringResource(R.string.label_general)) },
-                navigationIcon = {
-                    IconButton(onClick = { navController.popBackStack() }) {
-                        Icon(AppIcons.ArrowBack, contentDescription = stringResource(R.string.cd_back))
-                    }
-                }
+                title = stringResource(R.string.label_general),
+                onNavigateBack = { navController.popBackStack() },
            )
        }
    ) { paddingValues ->
--- a/app/src/main/java/eu/gaudian/translator/view/settings/LanguageOptionsScreen.kt
+++ b/app/src/main/java/eu/gaudian/translator/view/settings/LanguageOptionsScreen.kt
@@ -61,12 +61,8 @@ fun LanguageOptionsScreen(
    AppScaffold(
        topBar = {
            AppTopAppBar(
-                title = { Text(stringResource(R.string.text_language_options)) },
-                navigationIcon = {
-                    IconButton(onClick = { navController.popBackStack() }) {
-                        Icon(AppIcons.ArrowBack, contentDescription = stringResource(R.string.cd_back))
-                    }
-                }
+                title = stringResource(R.string.text_language_options),
+                onNavigateBack = { navController.popBackStack() },
            )
        }
    ) { paddingValues ->
--- a/app/src/main/java/eu/gaudian/translator/view/settings/LayoutOptionsScreen.kt
+++ b/app/src/main/java/eu/gaudian/translator/view/settings/LayoutOptionsScreen.kt
@@ -35,7 +35,6 @@ import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Switch
@@ -101,12 +100,8 @@ fun LayoutOptionsScreen(navController: NavController) {
    AppScaffold(
        topBar = {
            AppTopAppBar(
-                title = { Text(stringResource(R.string.label_appearance)) },
-                navigationIcon = {
-                    IconButton(onClick = { navController.popBackStack() }) {
-                        Icon(AppIcons.ArrowBack, contentDescription = cdBack)
-                    }
-                }
+                title = stringResource(R.string.label_appearance),
+                onNavigateBack = { navController.popBackStack() },
            )
        }
    ) { paddingValues ->
--- a/app/src/main/java/eu/gaudian/translator/view/settings/LogsScreen.kt
+++ b/app/src/main/java/eu/gaudian/translator/view/settings/LogsScreen.kt
@@ -101,15 +101,8 @@ fun LogsScreen(navController: NavController) {
    AppScaffold(
        topBar = {
            AppTopAppBar(
-                title = { Text(stringResource(R.string.label_logs)) },
-                navigationIcon = {
-                    IconButton(onClick = { navController.popBackStack() }) {
-                        Icon(
-                            imageVector = AppIcons.ArrowBack,
-                            contentDescription = stringResource(R.string.cd_back)
-                        )
-                    }
-                },
+                title = stringResource(R.string.label_logs),
+                onNavigateBack = { navController.popBackStack() },
                actions = {
                    TextButton(onClick = {
                        settingsViewModel.clearApiLogs()
--- a/app/src/main/java/eu/gaudian/translator/view/settings/MainSettingsScreen.kt
+++ b/app/src/main/java/eu/gaudian/translator/view/settings/MainSettingsScreen.kt
@@ -84,7 +84,7 @@ fun MainSettingsScreen(
        AppScaffold(
            topBar = {
                AppTopAppBar(
-                    title = { Text(stringResource(R.string.title_settings), style = MaterialTheme.typography.titleLarge) }
+                    title =stringResource(R.string.title_settings)
                )
            }
        ) { paddingValues ->
--- a/app/src/main/java/eu/gaudian/translator/view/settings/TextToSpeechSettingsScreen.kt
+++ b/app/src/main/java/eu/gaudian/translator/view/settings/TextToSpeechSettingsScreen.kt
@@ -15,8 +15,6 @@ import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
-import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -86,12 +84,8 @@ fun TextToSpeechSettingsScreen(
    AppScaffold(
        topBar = {
            AppTopAppBar(
-                title = { Text(stringResource(R.string.settings_title_voice)) },
-                navigationIcon = {
-                    IconButton(onClick = { navController.popBackStack() }) {
-                        Icon(AppIcons.ArrowBack, contentDescription = stringResource(R.string.cd_back))
-                    }
-                }
+                title = stringResource(R.string.settings_title_voice),
+                onNavigateBack = { navController.popBackStack() },
            )
        }
    ) { paddingValues ->
--- a/app/src/main/java/eu/gaudian/translator/view/settings/TranslationSettings.kt
+++ b/app/src/main/java/eu/gaudian/translator/view/settings/TranslationSettings.kt
@@ -9,9 +9,6 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
-import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
-import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -27,7 +24,6 @@ import androidx.navigation.NavController
 import eu.gaudian.translator.R
 import eu.gaudian.translator.utils.findActivity
 import eu.gaudian.translator.view.composable.AppCard
-import eu.gaudian.translator.view.composable.AppIcons
 import eu.gaudian.translator.view.composable.AppScaffold
 import eu.gaudian.translator.view.composable.AppTopAppBar
 import eu.gaudian.translator.view.composable.OptionItemSwitch
@@ -64,12 +60,8 @@ fun TranslationSettingsScreen(
    AppScaffold(
        topBar = {
            AppTopAppBar(
-                title = { Text(stringResource(R.string.label_translation_settings)) },
-                navigationIcon = {
-                    IconButton(onClick = { navController.popBackStack() }) {
-                        Icon(AppIcons.ArrowBack, contentDescription = stringResource(R.string.cd_back))
-                    }
-                },
+                title = stringResource(R.string.label_translation_settings),
+                onNavigateBack = { navController.popBackStack() },
                hintContent = null //TODO add hint
            )
        }
--- a/app/src/main/java/eu/gaudian/translator/view/settings/VocabularyProgressOptionsScreen.kt
+++ b/app/src/main/java/eu/gaudian/translator/view/settings/VocabularyProgressOptionsScreen.kt
@@ -21,7 +21,6 @@ import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
@@ -78,13 +77,8 @@ fun VocabularyProgressOptionsScreen(
    AppScaffold(
        topBar = {
            AppTopAppBar(
-                title = { Text(stringResource(R.string.vocabulary_settings)) },
-                navigationIcon = {
-                    IconButton(onClick = { navController.popBackStack() }) {
-                        Icon(AppIcons.ArrowBack, contentDescription = stringResource(R.string.cd_back))
-                    }
-                },
-                // Here is the new hint content
+                title = stringResource(R.string.vocabulary_settings),
+                onNavigateBack = { navController.popBackStack() },
                hintContent = HintDefinition.VOCABULARY_PROGRESS.hint()
            )
        }
--- a/app/src/main/java/eu/gaudian/translator/view/settings/VocabularyRepositoryOptionsScreen.kt
+++ b/app/src/main/java/eu/gaudian/translator/view/settings/VocabularyRepositoryOptionsScreen.kt
@@ -18,8 +18,6 @@ import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.Checkbox
 import androidx.compose.material3.DropdownMenu
 import androidx.compose.material3.DropdownMenuItem
-import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
@@ -44,7 +42,6 @@ import eu.gaudian.translator.utils.StatusMessageService
 import eu.gaudian.translator.utils.findActivity
 import eu.gaudian.translator.view.composable.AppButton
 import eu.gaudian.translator.view.composable.AppCard
-import eu.gaudian.translator.view.composable.AppIcons
 import eu.gaudian.translator.view.composable.AppOutlinedButton
 import eu.gaudian.translator.view.composable.AppScaffold
 import eu.gaudian.translator.view.composable.AppTopAppBar
@@ -200,12 +197,8 @@ fun VocabularyRepositoryOptionsScreen(
    AppScaffold(
        topBar = {
            AppTopAppBar(
-                title = { Text(stringResource(R.string.vocabulary_repository)) },
-                navigationIcon = {
-                    IconButton(onClick = { navController.popBackStack() }) {
-                        Icon(AppIcons.ArrowBack, contentDescription = stringResource(R.string.cd_back))
-                    }
-                }
+                title = stringResource(R.string.vocabulary_repository),
+                onNavigateBack = { navController.popBackStack() },
            )
        }
    ) { paddingValues ->
--- a/app/src/main/java/eu/gaudian/translator/view/vocabulary/CategoryDetailScreen.kt
+++ b/app/src/main/java/eu/gaudian/translator/view/vocabulary/CategoryDetailScreen.kt
@@ -30,7 +30,6 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 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.lifecycle.viewmodel.compose.hiltViewModel
 import androidx.navigation.NavHostController
@@ -118,30 +117,8 @@ fun CategoryDetailScreen(
                modifier = Modifier.background(MaterialTheme.colorScheme.surface)
            ) {
                AppTopAppBar(
-                    title = {
-                        Column {
-                            Text(
-                                text = title,
-                                maxLines = 1,
-                                overflow = TextOverflow.Ellipsis
-                            )
-                            Text(
-                                text = subtitle,
-                                style = MaterialTheme.typography.bodySmall,
-                                maxLines = 1,
-                                overflow = TextOverflow.Ellipsis,
-                                color = MaterialTheme.colorScheme.onSurfaceVariant
-                            )
-                        }
-                    },
-                    navigationIcon = {
-                        IconButton(onClick = onBackClick) {
-                            Icon(
-                                AppIcons.ArrowBack,
-                                contentDescription = stringResource(R.string.cd_back)
-                            )
-                        }
-                    },
+                    title = title,
+                    onNavigateBack = { navController.popBackStack() },
                    actions = {
                        IconButton(onClick = { showMenu = !showMenu }) {
                            Icon(
--- a/app/src/main/java/eu/gaudian/translator/view/vocabulary/CategoryListScreen.kt
+++ b/app/src/main/java/eu/gaudian/translator/view/vocabulary/CategoryListScreen.kt
@@ -100,13 +100,7 @@ fun CategoryListScreen(
    AppScaffold(
        topBar = {
            AppTopAppBar(
-                title = { 
-                    if (isSelectionMode && selectedCategories.isNotEmpty()) {
-                        Text(stringResource(R.string.text_2d_categories_selected, selectedCategories.size))
-                    } else {
-                        Text(stringResource(R.string.label_categories))
-                    }
-                },
+                title = "TODO",
                navigationIcon = {
                    if (isSelectionMode) {
                        IconButton(onClick = {
--- a/app/src/main/java/eu/gaudian/translator/view/vocabulary/LanguageProgressScreen.kt
+++ b/app/src/main/java/eu/gaudian/translator/view/vocabulary/LanguageProgressScreen.kt
@@ -78,7 +78,7 @@ fun LanguageProgressScreen(navController: NavController) {
    AppScaffold(
        topBar = {
            AppTopAppBar(
-                title = { Text(stringResource(R.string.your_language_journey)) },
+                title = stringResource(R.string.your_language_journey),
                onNavigateBack = { navController.popBackStack() }
            )
        },
--- a/app/src/main/java/eu/gaudian/translator/view/vocabulary/NoGrammarItemsScreen.kt
+++ b/app/src/main/java/eu/gaudian/translator/view/vocabulary/NoGrammarItemsScreen.kt
@@ -14,8 +14,6 @@ import androidx.compose.foundation.layout.size
 import androidx.compose.material3.Card
 import androidx.compose.material3.CardDefaults
 import androidx.compose.material3.CircularProgressIndicator
-import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.ModalBottomSheet
 import androidx.compose.material3.Text
@@ -39,7 +37,6 @@ import androidx.navigation.NavController
 import eu.gaudian.translator.R
 import eu.gaudian.translator.utils.findActivity
 import eu.gaudian.translator.view.composable.AppButton
-import eu.gaudian.translator.view.composable.AppIcons
 import eu.gaudian.translator.view.composable.AppSlider
 import eu.gaudian.translator.view.composable.AppTopAppBar
 import eu.gaudian.translator.viewmodel.VocabularyViewModel
@@ -66,12 +63,8 @@ fun NoGrammarItemsScreen(
            verticalArrangement = Arrangement.Center
        ) {
            AppTopAppBar(
-                title = { Text(stringResource(R.string.title_items_without_grammar)) },
-                navigationIcon = {
-                    IconButton(onClick = { navController.popBackStack() }) {
-                        Icon(AppIcons.ArrowBack, contentDescription = stringResource(R.string.cd_back))
-                    }
-                },
+                title = stringResource(R.string.title_items_without_grammar),
+                onNavigateBack = { navController.popBackStack() },
            )
            Box(
                modifier = Modifier
--- a/app/src/main/java/eu/gaudian/translator/view/vocabulary/StageDetailScreen.kt
+++ b/app/src/main/java/eu/gaudian/translator/view/vocabulary/StageDetailScreen.kt
@@ -2,9 +2,6 @@ package eu.gaudian.translator.view.vocabulary

 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.padding
-import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
-import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
@@ -17,7 +14,6 @@ import androidx.navigation.NavHostController
 import eu.gaudian.translator.R
 import eu.gaudian.translator.model.VocabularyStage
 import eu.gaudian.translator.utils.findActivity
-import eu.gaudian.translator.view.composable.AppIcons
 import eu.gaudian.translator.view.composable.AppScaffold
 import eu.gaudian.translator.view.composable.AppTopAppBar
 import eu.gaudian.translator.view.vocabulary.widgets.DetailedStageProgressBar
@@ -40,15 +36,8 @@ fun StageDetailScreen(
    AppScaffold(
        topBar = {
            AppTopAppBar(
-                title = { Text(text = stringResource(R.string.due_today_, stage.toString())) },
-                navigationIcon = {
-                    IconButton(onClick = { navController.popBackStack() }) {
-                        Icon(
-                            AppIcons.ArrowBack,
-                            contentDescription =stringResource(R.string.cd_back)
-                        )
-                    }
-                }
+                title = stringResource(R.string.due_today_, stage.toString()),
+                onNavigateBack = { navController.popBackStack() },
            )
        }
    ) { paddingValues ->
--- a/app/src/main/java/eu/gaudian/translator/view/vocabulary/StartScreen.kt
+++ b/app/src/main/java/eu/gaudian/translator/view/vocabulary/StartScreen.kt
@@ -157,7 +157,7 @@ private fun StartScreenContent(
    AppScaffold(
        topBar = {
            AppTopAppBar(
-                title = { Text(stringResource(R.string.prepare_exercise)) },
+                title = stringResource(R.string.prepare_exercise),
                navigationIcon = {
                    IconButton(onClick = onClose) {
                        Icon(
--- a/app/src/main/java/eu/gaudian/translator/view/vocabulary/VocabularyCardHost.kt
+++ b/app/src/main/java/eu/gaudian/translator/view/vocabulary/VocabularyCardHost.kt
@@ -75,21 +75,8 @@ fun VocabularyCardHost(
        topBar = {
            AppTopAppBar(
                modifier = Modifier.height(56.dp),
-                title = {
-                    if (navigationItems.isNotEmpty()) {
-                        Text(stringResource(R.string.label_card_with_position, navigationPosition + 1, navigationItems.size))
-                    } else {
-                        Text(stringResource(R.string.item_details))
-                    }
-                },
-                navigationIcon = {
-                    IconButton(onClick = { onBackPressed?.invoke() }) {
-                        Icon(
-                            AppIcons.ArrowBack,
-                            contentDescription = stringResource(R.string.cd_back)
-                        )
-                    }
-                },
+                title = stringResource(R.string.item_details),
+                onNavigateBack = { navController.popBackStack() },
                actions = {
                    // Previous button
                    if (navigationPosition > 0) {
--- a/app/src/main/java/eu/gaudian/translator/view/vocabulary/VocabularyHeatMapScreen.kt
+++ b/app/src/main/java/eu/gaudian/translator/view/vocabulary/VocabularyHeatMapScreen.kt
@@ -95,7 +95,7 @@ fun VocabularyHeatmapScreen(
    AppScaffold(
        topBar = {
            AppTopAppBar(
-                title = { Text(stringResource(R.string.label_vocabulary_activity)) },
+                title = stringResource(R.string.label_vocabulary_activity),
                onNavigateBack = { navController.popBackStack() },
            )
        },
--- a/app/src/main/java/eu/gaudian/translator/view/vocabulary/VocabularyListScreen.kt
+++ b/app/src/main/java/eu/gaudian/translator/view/vocabulary/VocabularyListScreen.kt
@@ -446,25 +446,8 @@ private fun DefaultTopAppBar(
    var showSortMenu by remember { mutableStateOf(false) }
    AppTopAppBar(
        modifier = Modifier.height(56.dp),
-        title = {
-
-            Box(
-                modifier = Modifier.fillMaxHeight(),
-                contentAlignment = Alignment.Center
-            ) {
-                Text(title)
-            }
-        },
-        navigationIcon = {
-            onNavigateBack?.let {
-                IconButton(onClick = it) {
-                    Icon(
-                        AppIcons.ArrowBack,
-                        contentDescription = "stringResource(R.string.navigate_back)"
-                    )
-                }
-            }
-        },
+        title = title,
+        onNavigateBack = onNavigateBack,
        actions = {
            IconButton(onClick = onSearchClick) {
                Icon(
@@ -534,7 +517,8 @@ private fun SearchTopAppBar(

    AppTopAppBar(
        modifier = Modifier.height(56.dp),
-        title = {
+        title = "TODO",
+        additionalContent = {
            Box(
                modifier = Modifier.fillMaxHeight(),
                contentAlignment = Alignment.Center
@@ -605,14 +589,7 @@ private fun ContextualTopAppBar(

    AppTopAppBar(
        modifier = modifier.height(56.dp),
-        title = {
-            Box(
-                modifier = Modifier.fillMaxHeight(),
-                contentAlignment = Alignment.Center
-            ) {
-                Text(stringResource(R.string.d_selected, selectionCount))
-            }
-        },
+        title = stringResource(R.string.d_selected, selectionCount),
        navigationIcon = {
            IconButton(onClick = onCloseClick) {
                Icon(imageVector = AppIcons.Close, contentDescription = stringResource(R.string.label_close_selection_mode))
--- a/app/src/main/java/eu/gaudian/translator/view/vocabulary/VocabularySortingScreen.kt
+++ b/app/src/main/java/eu/gaudian/translator/view/vocabulary/VocabularySortingScreen.kt
@@ -155,7 +155,7 @@ fun VocabularySortingScreen(
            var showFilterMenu by remember { mutableStateOf(false) }

            AppTopAppBar(
-                title = { Text(stringResource(R.string.sort_new_vocabulary)) },
+                title = stringResource(R.string.sort_new_vocabulary),
                actions = {
                    Box {
                        IconButton(onClick = { showFilterMenu = true }) {
@@ -231,11 +231,7 @@ fun VocabularySortingScreen(
                        }
                    }
                },
-                navigationIcon = {
-                    IconButton(onClick = { navController.popBackStack() }) {
-                        Icon(AppIcons.ArrowBack, contentDescription = stringResource(R.string.cd_back))
-                    }
-                },
+                onNavigateBack = { navController.popBackStack() },
                hintContent = HintDefinition.SORTING.hint()
            )
        },