Add overflow indicator and overflow menu items in ButtonGroup

app/src/main/java/org/nsh07/pomodoro/ui/timerScreen/TimerScreen.kt

@@ -21,6 +21,7 @@ import androidx.compose.foundation.layout.widthIn
 import androidx.compose.material3.ButtonGroup
 import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.CircularWavyProgressIndicator
+import androidx.compose.material3.DropdownMenuItem
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
 import androidx.compose.material3.FilledIconToggleButton
@@ -48,6 +49,7 @@ import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Devices
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
@@ -228,30 +230,29 @@ fun TimerScreen(
                 }
                 val interactionSources = remember { List(2) { MutableInteractionSource() } }
                 ButtonGroup(
-                    overflowIndicator = {},
+                    overflowIndicator = { state ->
+                        FilledTonalIconButton(
+                            onClick = {
+                                if (state.isExpanded) {
+                                    state.dismiss()
+                                } else {
+                                    state.show()
+                                }
+                            },
+                            colors = IconButtonDefaults.filledTonalIconButtonColors(
+                                containerColor = colorContainer
+                            ),
+                            shapes = IconButtonDefaults.shapes(),
+                            modifier = Modifier.size(64.dp, 96.dp)
+                        ) {
+                            Icon(
+                                painterResource(R.drawable.more_vert_large),
+                                contentDescription = "More"
+                            )
+                        }
+                    },
                     modifier = Modifier.padding(16.dp)
                 ) {
-                    customItem(
-                        {
-                            FilledTonalIconButton(
-                                onClick = resetTimer,
-                                colors = IconButtonDefaults.filledTonalIconButtonColors(
-                                    containerColor = colorContainer
-                                ),
-                                shapes = IconButtonDefaults.shapes(),
-                                interactionSource = interactionSources[0],
-                                modifier = Modifier
-                                    .size(96.dp)
-                                    .animateWidth(interactionSources[0])
-                            ) {
-                                Icon(
-                                    painterResource(R.drawable.restart_large),
-                                    contentDescription = "Restart"
-                                )
-                            }
-                        },
-                        {}
-                    )
                     customItem(
                         {
                             FilledIconToggleButton(
@@ -270,17 +271,76 @@ fun TimerScreen(
                                 if (uiState.timerRunning) {
                                     Icon(
                                         painterResource(R.drawable.pause_large),
-                                        contentDescription = "Pause"
+                                        contentDescription = "Pause",
+                                        modifier = Modifier.size(32.dp)
                                     )
                                 } else {
                                     Icon(
                                         painterResource(R.drawable.play_large),
-                                        contentDescription = "Play"
+                                        contentDescription = "Play",
+                                        modifier = Modifier.size(32.dp)
                                     )
                                 }
                             }
                         },
-                        {}
+                        { state ->
+                            DropdownMenuItem(
+                                leadingIcon = {
+                                    if (uiState.timerRunning) {
+                                        Icon(
+                                            painterResource(R.drawable.pause),
+                                            contentDescription = "Pause"
+                                        )
+                                    } else {
+                                        Icon(
+                                            painterResource(R.drawable.play),
+                                            contentDescription = "Play"
+                                        )
+                                    }
+                                },
+                                text = { Text(if (uiState.timerRunning) "Pause" else "Play") },
+                                onClick = {
+                                    toggleTimer()
+                                    state.dismiss()
+                                }
+                            )
+                        }
+                    )
+                    customItem(
+                        {
+                            FilledTonalIconButton(
+                                onClick = resetTimer,
+                                colors = IconButtonDefaults.filledTonalIconButtonColors(
+                                    containerColor = colorContainer
+                                ),
+                                shapes = IconButtonDefaults.shapes(),
+                                interactionSource = interactionSources[0],
+                                modifier = Modifier
+                                    .size(96.dp)
+                                    .animateWidth(interactionSources[0])
+                            ) {
+                                Icon(
+                                    painterResource(R.drawable.restart_large),
+                                    contentDescription = "Restart",
+                                    modifier = Modifier.size(32.dp)
+                                )
+                            }
+                        },
+                        { state ->
+                            DropdownMenuItem(
+                                leadingIcon = {
+                                    Icon(
+                                        painterResource(R.drawable.restart),
+                                        "Restart"
+                                    )
+                                },
+                                text = { Text("Restart") },
+                                onClick = {
+                                    resetTimer()
+                                    state.dismiss()
+                                }
+                            )
+                        }
                     )
                 }
             }
@@ -313,16 +373,16 @@ fun TimerScreen(
 }
 
 @Preview(
-    widthDp = 384,
+    showSystemUi = true,
-    heightDp = 832,
+    device = Devices.PIXEL_9_PRO,
-    showSystemUi = true
+//    widthDp = 200
 )
 @Composable
 fun TimerScreenPreview() {
     val uiState = UiState(
-        timeStr = "03:34", nextTimeStr = "5:00", timerMode = TimerMode.SHORT_BREAK
+        timeStr = "03:34", nextTimeStr = "5:00", timerMode = TimerMode.FOCUS, timerRunning = true
     )
     TomatoTheme {
-        TimerScreen(uiState, false,{ 0.3f }, {}, {})
+        TimerScreen(uiState, false, { 0.3f }, {}, {})
     }
 }

app/src/main/res/drawable/more_vert_large.xml

@@ -0,0 +1,13 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="40dp"
+    android:height="40dp"
+    android:autoMirrored="true"
+    android:tint="#000000"
+    android:viewportWidth="960"
+    android:viewportHeight="960">
+
+    <path
+        android:fillColor="@android:color/white"
+        android:pathData="M479.8,833.33q-28.13,0 -47.97,-20.03Q412,793.27 412,765.13q0,-28.13 20.03,-47.96 20.04,-19.84 48.17,-19.84 28.13,0 47.97,20.04Q548,737.4 548,765.53q0,28.14 -20.03,47.97 -20.04,19.83 -48.17,19.83ZM479.8,548q-28.13,0 -47.97,-20.03Q412,507.93 412,479.8q0,-28.13 20.03,-47.97Q452.07,412 480.2,412q28.13,0 47.97,20.03Q548,452.07 548,480.2q0,28.13 -20.03,47.97Q507.93,548 479.8,548ZM479.8,262.67q-28.13,0 -47.97,-20.04Q412,222.6 412,194.47q0,-28.14 20.03,-47.97 20.04,-19.83 48.17,-19.83 28.13,0 47.97,20.03Q548,166.73 548,194.87q0,28.13 -20.03,47.96 -20.04,19.84 -48.17,19.84Z" />
+
+</vector>

app/src/main/res/drawable/pause.xml

@@ -0,0 +1,13 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:autoMirrored="true"
+    android:tint="#000000"
+    android:viewportWidth="960"
+    android:viewportHeight="960">
+
+    <path
+        android:fillColor="@android:color/white"
+        android:pathData="M640,760q-33,0 -56.5,-23.5T560,680v-400q0,-33 23.5,-56.5T640,200q33,0 56.5,23.5T720,280v400q0,33 -23.5,56.5T640,760ZM320,760q-33,0 -56.5,-23.5T240,680v-400q0,-33 23.5,-56.5T320,200q33,0 56.5,23.5T400,280v400q0,33 -23.5,56.5T320,760Z" />
+
+</vector>

app/src/main/res/drawable/play.xml

@@ -0,0 +1,13 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:autoMirrored="true"
+    android:tint="#000000"
+    android:viewportWidth="960"
+    android:viewportHeight="960">
+
+    <path
+        android:fillColor="@android:color/white"
+        android:pathData="M320,687v-414q0,-17 12,-28.5t28,-11.5q5,0 10.5,1.5T381,239l326,207q9,6 13.5,15t4.5,19q0,10 -4.5,19T707,514L381,721q-5,3 -10.5,4.5T360,727q-16,0 -28,-11.5T320,687Z" />
+
+</vector>

app/src/main/res/drawable/restart.xml

@@ -0,0 +1,13 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:autoMirrored="true"
+    android:tint="#000000"
+    android:viewportWidth="960"
+    android:viewportHeight="960">
+
+    <path
+        android:fillColor="@android:color/white"
+        android:pathData="M393,828q-103,-29 -168,-113.5T160,520q0,-57 19,-108.5t54,-94.5q11,-12 27,-12.5t29,12.5q11,11 11.5,27T290,374q-24,31 -37,68t-13,78q0,81 47.5,144.5T410,751q13,4 21.5,15t8.5,24q0,20 -14,31.5t-33,6.5ZM567,828q-19,5 -33,-7t-14,-32q0,-12 8.5,-23t21.5,-15q75,-24 122.5,-87T720,520q0,-100 -70,-170t-170,-70h-3l16,16q11,11 11,28t-11,28q-11,11 -28,11t-28,-11l-84,-84q-6,-6 -8.5,-13t-2.5,-15q0,-8 2.5,-15t8.5,-13l84,-84q11,-11 28,-11t28,11q11,11 11,28t-11,28l-16,16h3q134,0 227,93t93,227q0,109 -65,194T567,828Z" />
+
+</vector>