feat: refactor PluginPermissionsDialog to use custom UI components for improved consistency and readability

composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/modules/plugin/components/PluginPermissionsDialog.kt

@@ -25,18 +25,11 @@ import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.layout.widthIn
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material3.Button
-import androidx.compose.material3.ButtonDefaults
-import androidx.compose.material3.Card
-import androidx.compose.material3.CardDefaults
 import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.OutlinedButton
-import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
@@ -45,8 +38,10 @@ import androidx.compose.ui.draw.clip
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.window.Dialog
+import dev.krtirtho.spotube.core.ui.base.Card
-import androidx.compose.ui.window.DialogProperties
+import dev.krtirtho.spotube.core.ui.base.OutlineButton
+import dev.krtirtho.spotube.core.ui.base.PrimaryButton
+import dev.krtirtho.spotube.core.ui.base.ThemedDialog
 import dev.krtirtho.spotube.modules.plugin.PluginCapability
 import dev.krtirtho.spotube.modules.plugin.PluginEntry
 import dev.krtirtho.spotube.resources.iconsax.Iconsax
@@ -84,39 +79,20 @@ fun PluginPermissionDialog(
     onConfirm: (() -> Unit)? = null,
     onDismiss: () -> Unit,
 ) {
-    Dialog(
+    ThemedDialog(
         onDismissRequest = onDismiss,
-        properties = DialogProperties(usePlatformDefaultWidth = false)
+        title = {
-    ) {
-        Card(
-            modifier = Modifier
-                .widthIn(min = 320.dp, max = 480.dp)
-                .padding(horizontal = 16.dp),
-            shape = RoundedCornerShape(20.dp),
-            elevation = CardDefaults.cardElevation(defaultElevation = 6.dp),
-            colors = CardDefaults.cardColors(
-                containerColor = MaterialTheme.colorScheme.surface
-            )
-        ) {
-            Column(modifier = Modifier.fillMaxWidth()) {
-                Box(
-                    modifier = Modifier
-                        .fillMaxWidth()
-                        .background(MaterialTheme.colorScheme.primaryContainer.copy(alpha = 0.4f))
-                        .padding(24.dp)
-                ) {
-                    Column(verticalArrangement = Arrangement.spacedBy(12.dp)) {
             Row(
                 verticalAlignment = Alignment.CenterVertically,
                 horizontalArrangement = Arrangement.spacedBy(14.dp)
             ) {
-                            Surface(
+                Box(
                     modifier = Modifier
                         .size(48.dp)
-                                    .clip(RoundedCornerShape(12.dp)),
+                        .clip(RoundedCornerShape(12.dp))
-                                color = MaterialTheme.colorScheme.primary.copy(alpha = 0.15f)
+                        .background(MaterialTheme.colorScheme.primary.copy(alpha = 0.12f)),
+                    contentAlignment = Alignment.Center
                 ) {
-                                Box(contentAlignment = Alignment.Center) {
                     Icon(
                         imageVector = Iconsax.IconsaxBoxAdd,
                         contentDescription = null,
@@ -124,8 +100,7 @@ fun PluginPermissionDialog(
                         modifier = Modifier.size(24.dp)
                     )
                 }
-                            }
+                Column(modifier = Modifier.weight(1f)) {
-                            Column {
                     Text(
                         title,
                         style = MaterialTheme.typography.titleMedium,
@@ -143,7 +118,8 @@ fun PluginPermissionDialog(
 
             Row(
                 verticalAlignment = Alignment.CenterVertically,
-                            horizontalArrangement = Arrangement.spacedBy(6.dp)
+                horizontalArrangement = Arrangement.spacedBy(6.dp),
+                modifier = Modifier.padding(top = 8.dp)
             ) {
                 Icon(
                     Iconsax.User,
@@ -165,7 +141,27 @@ fun PluginPermissionDialog(
                     color = MaterialTheme.colorScheme.onSurfaceVariant
                 )
             }
-
+        },
+        actions = {
+            OutlineButton(onClick = onDismiss) {
+                Text(
+                    if (confirmLabel == null) {
+                        stringResource(Res.string.settings_action_close)
+                    } else {
+                        stringResource(Res.string.settings_action_cancel)
+                    }
+                )
+            }
+            if (confirmLabel != null && onConfirm != null) {
+                PrimaryButton(onClick = onConfirm) {
+                    Text(confirmLabel)
+                }
+            }
+        },
+    ) {
+        Column(
+            verticalArrangement = Arrangement.spacedBy(12.dp)
+        ) {
             if (pluginInfo.description.isNotBlank()) {
                 Text(
                     pluginInfo.description,
@@ -175,22 +171,8 @@ fun PluginPermissionDialog(
                     overflow = TextOverflow.Ellipsis
                 )
             }
-                    }
-                }
 
-                HorizontalDivider()
+            Card {
-
-                Column(
-                    modifier = Modifier
-                        .fillMaxWidth()
-                        .padding(horizontal = 20.dp, vertical = 16.dp),
-                    verticalArrangement = Arrangement.spacedBy(12.dp)
-                ) {
-                    Surface(
-                        modifier = Modifier.fillMaxWidth(),
-                        shape = RoundedCornerShape(12.dp),
-                        color = MaterialTheme.colorScheme.surfaceVariant.copy(alpha = 0.55f)
-                    ) {
                 Text(
                     message,
                     style = MaterialTheme.typography.bodySmall,
@@ -225,41 +207,6 @@ fun PluginPermissionDialog(
                 }
             }
         }
-
-                HorizontalDivider()
-
-                Row(
-                    modifier = Modifier
-                        .fillMaxWidth()
-                        .padding(horizontal = 20.dp, vertical = 16.dp),
-                    horizontalArrangement = Arrangement.spacedBy(12.dp, Alignment.End)
-                ) {
-                    OutlinedButton(
-                        onClick = onDismiss,
-                        shape = RoundedCornerShape(10.dp)
-                    ) {
-                        Text(
-                            if (confirmLabel == null) {
-                                stringResource(Res.string.settings_action_close)
-                            } else {
-                                stringResource(Res.string.settings_action_cancel)
-                            }
-                        )
-                    }
-                    if (confirmLabel != null && onConfirm != null) {
-                        Button(
-                            onClick = onConfirm,
-                            shape = RoundedCornerShape(10.dp),
-                            colors = ButtonDefaults.buttonColors(
-                                containerColor = MaterialTheme.colorScheme.primary
-                            )
-                        ) {
-                            Text(confirmLabel)
-                        }
-                    }
-                }
-            }
-        }
     }
 }
 
@@ -268,10 +215,8 @@ private fun InstalledComparisonCard(
     installedPlugin: PluginEntry,
     incomingPlugin: PluginEntry,
 ) {
-    Surface(
+    Card(
         modifier = Modifier.fillMaxWidth(),
-        shape = RoundedCornerShape(12.dp),
-        color = MaterialTheme.colorScheme.secondaryContainer.copy(alpha = 0.45f)
     ) {
         Column(
             modifier = Modifier.padding(14.dp),
@@ -344,12 +289,13 @@ private fun CapabilityRow(capability: PluginCapability) {
         )
     }
 
+    Card(
+        modifier = Modifier.fillMaxWidth(),
+    ) {
         Row(
             modifier = Modifier
                 .fillMaxWidth()
-            .clip(RoundedCornerShape(10.dp))
+                .padding(12.dp),
-            .background(MaterialTheme.colorScheme.surfaceVariant.copy(alpha = 0.5f))
-            .padding(horizontal = 14.dp, vertical = 10.dp),
             verticalAlignment = Alignment.CenterVertically,
             horizontalArrangement = Arrangement.spacedBy(14.dp)
         ) {
@@ -380,4 +326,5 @@ private fun CapabilityRow(capability: PluginCapability) {
                 )
             }
         }
+    }
 }