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

This commit is contained in:
Kingkor Roy Tirtho 2026-07-16 23:41:58 +06:00
parent 70cabedc9e
commit 3d7d15541f

View File

@ -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 androidx.compose.ui.window.DialogProperties
import dev.krtirtho.spotube.core.ui.base.Card
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)
) {
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)) {
title = {
Row(
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(14.dp)
) {
Surface(
Box(
modifier = Modifier
.size(48.dp)
.clip(RoundedCornerShape(12.dp)),
color = MaterialTheme.colorScheme.primary.copy(alpha = 0.15f)
.clip(RoundedCornerShape(12.dp))
.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 {
Column(modifier = Modifier.weight(1f)) {
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()
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)
) {
Card {
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))
.background(MaterialTheme.colorScheme.surfaceVariant.copy(alpha = 0.5f))
.padding(horizontal = 14.dp, vertical = 10.dp),
.padding(12.dp),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(14.dp)
) {
@ -380,4 +326,5 @@ private fun CapabilityRow(capability: PluginCapability) {
)
}
}
}
}