refactor More menu and replace AppDropDownMenu with ModalBottomSheet in `LibraryScreen

app/src/main/java/eu/gaudian/translator/view/composable/AppDropdownMenu.kt

@@ -25,6 +25,7 @@ import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.itemsIndexed
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.DropdownMenu
@@ -550,7 +551,55 @@ fun AppDropdownMenu(
 // =========================================
 // LEGACY COMPONENTS (UPDATED TO USE UNIFIED STYLES)
 // =========================================
+@Composable
+fun BottomSheetMenuItem(
+    icon: ImageVector,
+    title: String,
+    subtitle: String,
+    onClick: () -> Unit
+) {
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .clickable { onClick() }
+            .padding(horizontal = 24.dp, vertical = 16.dp),
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        // Circular Icon Background
+        Surface(
+            shape = CircleShape,
+            color = MaterialTheme.colorScheme.surfaceVariant,
+            modifier = Modifier.size(52.dp)
+        ) {
+            Box(contentAlignment = Alignment.Center) {
+                Icon(
+                    imageVector = icon,
+                    contentDescription = null,
+                    tint = MaterialTheme.colorScheme.onSurfaceVariant,
+                    modifier = Modifier.size(28.dp)
+                )
+            }
+        }
 
+        Spacer(modifier = Modifier.width(16.dp))
+
+        // Title and Subtitle Column
+        Column(modifier = Modifier.weight(1f)) {
+            Text(
+                text = title,
+                style = MaterialTheme.typography.titleMedium,
+                fontWeight = FontWeight.Bold,
+                color = MaterialTheme.colorScheme.onSurface
+            )
+            Spacer(modifier = Modifier.height(2.dp))
+            Text(
+                text = subtitle,
+                style = MaterialTheme.typography.bodyMedium,
+                color = MaterialTheme.colorScheme.onSurfaceVariant
+            )
+        }
+    }
+}
 @Composable
 fun LargeDropdownMenuItem(
     text: String,

app/src/main/java/eu/gaudian/translator/view/composable/BottomNavigationBar.kt

@@ -28,13 +28,13 @@ import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.PlayArrow
-import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.ModalBottomSheet
 import androidx.compose.material3.NavigationBar
 import androidx.compose.material3.NavigationBarItem
 import androidx.compose.material3.NavigationBarItemDefaults
+import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.material3.rememberModalBottomSheetState
 import androidx.compose.runtime.Composable
@@ -326,10 +326,11 @@ private fun MoreBottomSheetContent(
         Text(
             text = stringResource(R.string.label_more),
             style = MaterialTheme.typography.titleLarge,
+            fontWeight = FontWeight.Bold, // Added bold to match the new style
             modifier = Modifier.padding(horizontal = 24.dp, vertical = 16.dp)
         )
 
-        HorizontalDivider()
+        // Removed HorizontalDivider() for a cleaner look
 
         moreItems.forEach { screen ->
             MoreMenuItem(
@@ -340,31 +341,49 @@ private fun MoreBottomSheetContent(
     }
 }
 
+
+
 @Composable
-private fun MoreMenuItem(
+fun MoreMenuItem(
     screen: Screen,
     onClick: () -> Unit
 ) {
     Row(
         modifier = Modifier
             .fillMaxWidth()
-            .clickable(onClick = onClick)
+            .clickable { onClick() }
             .padding(horizontal = 24.dp, vertical = 16.dp),
         verticalAlignment = Alignment.CenterVertically
     ) {
+        // Circular Icon Background
+        Surface(
+            shape = CircleShape,
+            color = MaterialTheme.colorScheme.surfaceVariant,
+            modifier = Modifier.size(52.dp)
+        ) {
+            Box(contentAlignment = Alignment.Center) {
+                // Adjust this depending on whether your Screen uses ImageVector or Drawable Res
                 Icon(
                     imageVector = screen.selectedIcon,
                     contentDescription = null,
-            tint = MaterialTheme.colorScheme.primary
+                    tint = MaterialTheme.colorScheme.onSurfaceVariant,
-        )
+                    modifier = Modifier.size(28.dp)
-        Spacer(modifier = Modifier.width(16.dp))
-        Text(
-            text = stringResource(screen.title),
-            style = MaterialTheme.typography.bodyLarge
                 )
             }
         }
 
+        Spacer(modifier = Modifier.width(16.dp))
+
+        // Title
+        Text(
+            text = stringResource(id = screen.title), // Adjust to your actual string property
+            style = MaterialTheme.typography.titleMedium,
+            fontWeight = FontWeight.Bold,
+            color = MaterialTheme.colorScheme.onSurface,
+            modifier = Modifier.weight(1f)
+        )
+    }
+}
 @ThemePreviews
 @Composable
 fun BottomNavigationBarPreview() {

app/src/main/java/eu/gaudian/translator/view/library/LibraryScreen.kt

@@ -26,6 +26,9 @@ import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.verticalScroll
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.rounded.Add
+import androidx.compose.material.icons.rounded.Folder
 import androidx.compose.material3.BottomSheetDefaults
 import androidx.compose.material3.Button
 import androidx.compose.material3.FilterChip
@@ -60,10 +63,9 @@ 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.AppDropDownMenu
 import eu.gaudian.translator.view.composable.AppIcons
 import eu.gaudian.translator.view.composable.AppSwitch
-import eu.gaudian.translator.view.composable.LargeDropdownMenuItem
+import eu.gaudian.translator.view.composable.BottomSheetMenuItem
 import eu.gaudian.translator.view.composable.MultipleLanguageDropdown
 import eu.gaudian.translator.view.dialogs.AddCategoryDialog
 import eu.gaudian.translator.view.dialogs.CategorySelectionDialog
@@ -329,23 +331,30 @@ fun LibraryScreen(
     }
 
     if (showAddMenu) {
-        AppDropDownMenu(
+        ModalBottomSheet(
-            expanded = showAddMenu,
+            onDismissRequest = { showAddMenu = false },
-            onDismissRequest = { showAddMenu = false }
+            sheetState = sheetState,
+            containerColor = MaterialTheme.colorScheme.surface,
         ) {
-            LargeDropdownMenuItem(
+            Column(
-                text = stringResource(R.string.label_add_vocabulary),
+                modifier = Modifier
-                selected = false,
+                    .fillMaxWidth()
-                enabled = true,
+                    .padding(bottom = 32.dp) // Extra padding for system navigation bar
+            ) {
+                BottomSheetMenuItem(
+                    icon = Icons.Rounded.Add, // Or any custom vector icon you prefer
+                    title = stringResource(R.string.label_add_vocabulary),
+                    subtitle = "Füge ein neues Wort zu deiner Liste hinzu", // Suggest adding this to strings.xml
                     onClick = {
                         showAddMenu = false
                         navController.navigate("new_word")
                     }
                 )
-            LargeDropdownMenuItem(
+
-                text = stringResource(R.string.label_add_category),
+                BottomSheetMenuItem(
-                selected = false,
+                    icon = Icons.Rounded.Folder,
-                enabled = true,
+                    title = stringResource(R.string.label_add_category),
+                    subtitle = "Organisiere deine Vokabeln in Gruppen", // Suggest adding this to strings.xml
                     onClick = {
                         showAddMenu = false
                         showAddCategoryDialog = true
@@ -353,6 +362,7 @@ fun LibraryScreen(
                 )
             }
         }
+    }
 
     if (showAddCategoryDialog) {
         AddCategoryDialog(onDismiss = { showAddCategoryDialog = false })

app/src/main/java/eu/gaudian/translator/view/settings/MainSettingsScreen.kt

@@ -105,7 +105,7 @@ fun MainSettingsScreen(
                     }
                     item {
                         AppCard(
-                            modifier = Modifier.padding(horizontal = 8.dp, vertical = 8.dp),
+                            modifier = Modifier.padding(horizontal = 16.dp, vertical = 8.dp),
                         ) {
                             Column {
                                 settings.forEachIndexed { index, setting ->

app/src/main/res/values-de-rDE/strings.xml

@@ -631,7 +631,6 @@
     <string name="label_language_none">Keine</string>
     <string name="text_no_data_available">Keine Daten verfügbar</string>
     <string name="label_grammar_inflections">Flexionen</string>
-    <string name="label_more">Weniger</string>
     <string name="label_translations">Übersetzungen</string>
     <string name="label_show_examples">Beispiele anzeigen</string>
     <string name="label_grammar_hyphenation">Silbentrennung</string>