Redesign top app bar

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

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)) {
+                    Text(
-                            title()
+                        text = title,
-                        }
+                        style = MaterialTheme.typography.titleLarge,
-                        Box {
+                        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(
+                IconButton(
-                    modifier = Modifier.fillMaxHeight(),
+                    onClick = onNavigateBack,
-                    contentAlignment = Alignment.Center
+                    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,
+                        imageVector = AppIcons.ArrowBack,
-                            contentDescription = stringResource(R.string.cd_navigate_back),
+                        contentDescription = stringResource(R.string.cd_navigate_back)
-                            tint = LocalContentColor.current
+                        // 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)
             }
         }
     )

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()
             )
         },

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 = {
+        title = "TODO",
-            Column {
+        onNavigateBack =  onNavigateBack
-                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 = {}
     )
 }
 

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 = {
+                title = "TODO",
-                    Column {
+                onNavigateBack = { navController.popBackStack() },
-                        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))
-                    }
-                },
                 actions = {
                     etymologyData?.let { data ->
                         if (isTtsAvailable) {

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) {

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") },
+                title = "YouTube" ,
-                navigationIcon = {
+                onNavigateBack = { navController.popBackStack() }
-                    IconButton(onClick = { navController.popBackStack() }) {
-                        Icon(AppIcons.ArrowBack, stringResource(R.string.cd_back))
-                    }
-                }
             )
         }
     ) { padding ->

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) },
+                title = title,
-                navigationIcon = {
+                onNavigateBack = { navController.popBackStack() },
-                    IconButton(onClick = { navController.popBackStack() }) {
-                        Icon(AppIcons.ArrowBack, contentDescription = stringResource(
-                            R.string.cd_back
-                        ))
-                    }
-                },
                 actions = {
                     IconButton(
                         onClick = { onFinishVideo() },

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) },
+                title = title,
-                navigationIcon = {
+                onNavigateBack = { navController.popBackStack() }
-                    IconButton(onClick = { navController.popBackStack() }) {
-                        Icon(AppIcons.ArrowBack, contentDescription = stringResource(R.string.cd_back))
-                    }
-                }
             )
         }
     ) { paddingValues ->

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 ->

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)) },
+                title = stringResource(R.string.label_about),
-                navigationIcon = {
+                onNavigateBack = { navController.popBackStack() }
-                    IconButton(onClick = { navController.popBackStack() }) {
-                        Icon(AppIcons.ArrowBack, contentDescription = stringResource(R.string.cd_back))
-                    }
-                }
             )
         }
     ) { paddingValues ->

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) },
+                title = providerName,
-                navigationIcon = {
+                onNavigateBack = { navController.popBackStack() },
-                    IconButton(onClick = { navController.popBackStack() }) {
-                        Icon(AppIcons.ArrowBack, contentDescription = stringResource(R.string.cd_back))
-                    }
-                },
                 hintContent = HintDefinition.ADD_MODEL_SCAN.hint()
             )
         },

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)) },
+                title = stringResource(R.string.label_ai_configuration),
-                navigationIcon = {
+                onNavigateBack = { navController.popBackStack() },
-                    IconButton(onClick = { navController.popBackStack() }) {
-                        Icon(AppIcons.ArrowBack, contentDescription = stringResource(R.string.cd_back))
-                    }
-                },
                 hintContent =  HintDefinition.API_KEY.hint()
             )
         }

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)) },
+                title = stringResource(R.string.text_vocabulary_prompt),
-                navigationIcon = {
+                onNavigateBack = { navController.popBackStack() },
-                    IconButton(onClick = { navController.popBackStack() }) {
-                        Icon(AppIcons.ArrowBack, contentDescription = stringResource(R.string.cd_back))
-                    }
-                },
                 hintContent = null //TODO: Add hint
 
             )

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)) },
+                title = stringResource(R.string.label_dictionary_options),
-                navigationIcon = {
+                onNavigateBack = { navController.popBackStack() },
-                    IconButton(onClick = { navController.popBackStack() }) {
-                        Icon(AppIcons.ArrowBack, contentDescription = stringResource(R.string.cd_back))
-                    }
-                },
                 hintContent = HintDefinition.DICTIONARY_OPTIONS.hint()
             )
         }

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)) },
+                title = stringResource(R.string.exercise_settings),
-                navigationIcon = {
+                onNavigateBack = { navController.popBackStack() },
-                    IconButton(onClick = { navController.popBackStack() }) {
-                        Icon(AppIcons.ArrowBack, contentDescription = stringResource(R.string.cd_back))
-                    }
-                }
             )
         }
     ) { paddingValues ->

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)) },
+                title = stringResource(R.string.label_general),
-                navigationIcon = {
+                onNavigateBack = { navController.popBackStack() },
-                    IconButton(onClick = { navController.popBackStack() }) {
-                        Icon(AppIcons.ArrowBack, contentDescription = stringResource(R.string.cd_back))
-                    }
-                }
             )
         }
     ) { paddingValues ->

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)) },
+                title = stringResource(R.string.text_language_options),
-                navigationIcon = {
+                onNavigateBack = { navController.popBackStack() },
-                    IconButton(onClick = { navController.popBackStack() }) {
-                        Icon(AppIcons.ArrowBack, contentDescription = stringResource(R.string.cd_back))
-                    }
-                }
             )
         }
     ) { paddingValues ->

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)) },
+                title = stringResource(R.string.label_appearance),
-                navigationIcon = {
+                onNavigateBack = { navController.popBackStack() },
-                    IconButton(onClick = { navController.popBackStack() }) {
-                        Icon(AppIcons.ArrowBack, contentDescription = cdBack)
-                    }
-                }
             )
         }
     ) { paddingValues ->

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)) },
+                title = stringResource(R.string.label_logs),
-                navigationIcon = {
+                onNavigateBack = { navController.popBackStack() },
-                    IconButton(onClick = { navController.popBackStack() }) {
-                        Icon(
-                            imageVector = AppIcons.ArrowBack,
-                            contentDescription = stringResource(R.string.cd_back)
-                        )
-                    }
-                },
                 actions = {
                     TextButton(onClick = {
                         settingsViewModel.clearApiLogs()

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 ->

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)) },
+                title = stringResource(R.string.settings_title_voice),
-                navigationIcon = {
+                onNavigateBack = { navController.popBackStack() },
-                    IconButton(onClick = { navController.popBackStack() }) {
-                        Icon(AppIcons.ArrowBack, contentDescription = stringResource(R.string.cd_back))
-                    }
-                }
             )
         }
     ) { paddingValues ->

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)) },
+                title = stringResource(R.string.label_translation_settings),
-                navigationIcon = {
+                onNavigateBack = { navController.popBackStack() },
-                    IconButton(onClick = { navController.popBackStack() }) {
-                        Icon(AppIcons.ArrowBack, contentDescription = stringResource(R.string.cd_back))
-                    }
-                },
                 hintContent = null //TODO add hint
             )
         }

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)) },
+                title = stringResource(R.string.vocabulary_settings),
-                navigationIcon = {
+                onNavigateBack = { navController.popBackStack() },
-                    IconButton(onClick = { navController.popBackStack() }) {
-                        Icon(AppIcons.ArrowBack, contentDescription = stringResource(R.string.cd_back))
-                    }
-                },
-                // Here is the new hint content
                 hintContent = HintDefinition.VOCABULARY_PROGRESS.hint()
             )
         }

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)) },
+                title = stringResource(R.string.vocabulary_repository),
-                navigationIcon = {
+                onNavigateBack = { navController.popBackStack() },
-                    IconButton(onClick = { navController.popBackStack() }) {
-                        Icon(AppIcons.ArrowBack, contentDescription = stringResource(R.string.cd_back))
-                    }
-                }
             )
         }
     ) { paddingValues ->

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 = {
+                    title = title,
-                        Column {
+                    onNavigateBack = { navController.popBackStack() },
-                            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)
-                            )
-                        }
-                    },
                     actions = {
                         IconButton(onClick = { showMenu = !showMenu }) {
                             Icon(

app/src/main/java/eu/gaudian/translator/view/vocabulary/CategoryListScreen.kt

@@ -100,13 +100,7 @@ fun CategoryListScreen(
     AppScaffold(
         topBar = {
             AppTopAppBar(
-                title = { 
+                title = "TODO",
-                    if (isSelectionMode && selectedCategories.isNotEmpty()) {
-                        Text(stringResource(R.string.text_2d_categories_selected, selectedCategories.size))
-                    } else {
-                        Text(stringResource(R.string.label_categories))
-                    }
-                },
                 navigationIcon = {
                     if (isSelectionMode) {
                         IconButton(onClick = {

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() }
             )
         },

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)) },
+                title = stringResource(R.string.title_items_without_grammar),
-                navigationIcon = {
+                onNavigateBack = { navController.popBackStack() },
-                    IconButton(onClick = { navController.popBackStack() }) {
-                        Icon(AppIcons.ArrowBack, contentDescription = stringResource(R.string.cd_back))
-                    }
-                },
             )
             Box(
                 modifier = Modifier

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())) },
+                title = stringResource(R.string.due_today_, stage.toString()),
-                navigationIcon = {
+                onNavigateBack = { navController.popBackStack() },
-                    IconButton(onClick = { navController.popBackStack() }) {
-                        Icon(
-                            AppIcons.ArrowBack,
-                            contentDescription =stringResource(R.string.cd_back)
-                        )
-                    }
-                }
             )
         }
     ) { paddingValues ->

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(

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 = {
+                title = stringResource(R.string.item_details),
-                    if (navigationItems.isNotEmpty()) {
+                onNavigateBack = { navController.popBackStack() },
-                        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)
-                        )
-                    }
-                },
                 actions = {
                     // Previous button
                     if (navigationPosition > 0) {

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() },
             )
         },

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 = {
+        title = title,
-
+        onNavigateBack = onNavigateBack,
-            Box(
-                modifier = Modifier.fillMaxHeight(),
-                contentAlignment = Alignment.Center
-            ) {
-                Text(title)
-            }
-        },
-        navigationIcon = {
-            onNavigateBack?.let {
-                IconButton(onClick = it) {
-                    Icon(
-                        AppIcons.ArrowBack,
-                        contentDescription = "stringResource(R.string.navigate_back)"
-                    )
-                }
-            }
-        },
         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 = {
+        title = stringResource(R.string.d_selected, selectionCount),
-            Box(
-                modifier = Modifier.fillMaxHeight(),
-                contentAlignment = Alignment.Center
-            ) {
-                Text(stringResource(R.string.d_selected, selectionCount))
-            }
-        },
         navigationIcon = {
             IconButton(onClick = onCloseClick) {
                 Icon(imageVector = AppIcons.Close, contentDescription = stringResource(R.string.label_close_selection_mode))

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 = {
+                onNavigateBack = { navController.popBackStack() },
-                    IconButton(onClick = { navController.popBackStack() }) {
-                        Icon(AppIcons.ArrowBack, contentDescription = stringResource(R.string.cd_back))
-                    }
-                },
                 hintContent = HintDefinition.SORTING.hint()
             )
         },