feat(blocklist): frame rule workspaces in dark cards

Author: SysAdminDoc

CHANGELOG.md

@@ -4,6 +4,8 @@ All notable changes to CallShield will be documented in this file.
 
 ## Unreleased
 
+- Blocklist now has a clearer rules heading, an outlined count card, pill tabs
+  for each rule type, and a framed empty state.
 - Recent calls now uses compact, neutral history cards and shows a Retry card
   when Android cannot load the call log. Calls already loaded stay visible.
 - Blocked activity now has a clear heading, a framed empty state and compact

README.md

@@ -542,7 +542,7 @@ language in [issue #7](https://github.com/SysAdminDoc/CallShield/issues/7).
 | URL Safety | Local spam-domain data; optional PhishTank and OpenPhish |
 | Verification | Local Gradle, lint, and release-artifact checks |
 | Tests | 1559 JVM unit tests (JUnit) |
-| Strings | 1629 string resources and 38 plural groups (translation-ready) |
+| Strings | 1631 string resources and 38 plural groups (translation-ready) |
 | Accessibility | 100+ content descriptions, 48dp touch targets |
 | Min SDK | 29 (Android 10) |
 | Target SDK | 36 |

app/src/main/java/com/sysadmindoc/callshield/ui/screens/main/BlocklistScreen.kt

@@ -2,7 +2,9 @@ package com.sysadmindoc.callshield.ui.screens.main
 
 import androidx.activity.compose.rememberLauncherForActivityResult
 import androidx.activity.result.contract.ActivityResultContracts
+import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.background
+import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.horizontalScroll
 import androidx.compose.foundation.layout.Arrangement
@@ -340,6 +342,22 @@ fun BlocklistScreen(viewModel: MainViewModel) {
 
     Box(modifier = Modifier.fillMaxSize()) {
         Column(modifier = Modifier.fillMaxSize()) {
+            Column(
+                modifier = Modifier.fillMaxWidth().padding(start = 20.dp, end = 20.dp, top = 16.dp, bottom = 8.dp),
+                verticalArrangement = Arrangement.spacedBy(4.dp),
+            ) {
+                Text(
+                    stringResource(R.string.blocklist_heading),
+                    style = MaterialTheme.typography.headlineSmall,
+                    fontWeight = FontWeight.Bold,
+                    color = CatText,
+                )
+                Text(
+                    stringResource(R.string.blocklist_intro),
+                    style = MaterialTheme.typography.bodySmall,
+                    color = CatSubtext,
+                )
+            }
             BlocklistOverviewCard(
                 modifier =
                     Modifier
@@ -725,55 +743,45 @@ private fun BlocklistOverviewCard(
     workspace: BlocklistWorkspaceModel,
     modifier: Modifier = Modifier,
 ) {
-    Column(
-        modifier = modifier,
-        verticalArrangement = Arrangement.spacedBy(8.dp),
-    ) {
-        SectionHeader(workspace.title, CatGreen)
-        Text(
-            text =
-                if (workspace.addActionLabel == null) {
-                    pluralStringResource(
-                        R.plurals.blocklist_count_saved,
-                        workspace.count,
-                        workspace.count,
+    PremiumCard(modifier = modifier) {
+        Column(
+            modifier = Modifier.fillMaxWidth().padding(16.dp),
+            verticalArrangement = Arrangement.spacedBy(8.dp),
+        ) {
+            SectionHeader(workspace.title, CatGreen)
+            Text(
+                text =
+                    if (workspace.addActionLabel == null) {
+                        pluralStringResource(R.plurals.blocklist_count_saved, workspace.count, workspace.count)
+                    } else {
+                        pluralStringResource(R.plurals.blocklist_count_active_rules, workspace.count, workspace.count)
+                    },
+                style = MaterialTheme.typography.titleLarge,
+                fontWeight = FontWeight.SemiBold,
+                color = CatText,
+            )
+            Text(workspace.subtitle, style = MaterialTheme.typography.bodySmall, color = CatSubtext)
+            Row(
+                modifier = Modifier.fillMaxWidth(),
+                horizontalArrangement = Arrangement.spacedBy(6.dp),
+                verticalAlignment = Alignment.CenterVertically,
+            ) {
+                workspace.primaryUtilityLabel?.let { label ->
+                    PremiumCompactButton(
+                        label = label,
+                        icon = Icons.Default.FileOpen,
+                        color = CatGreen,
+                        onClick = { workspace.onPrimaryUtility?.invoke() },
                     )
-                } else {
-                    pluralStringResource(
-                        R.plurals.blocklist_count_active_rules,
-                        workspace.count,
-                        workspace.count,
+                }
+                workspace.secondaryUtilityLabel?.let { label ->
+                    PremiumCompactButton(
+                        label = label,
+                        icon = Icons.Default.Share,
+                        color = CatGreen,
+                        onClick = { workspace.onSecondaryUtility?.invoke() },
                     )
-                },
-            style = MaterialTheme.typography.headlineMedium,
-            fontWeight = FontWeight.SemiBold,
-            color = CatText,
-        )
-        Text(
-            text = workspace.subtitle,
-            style = MaterialTheme.typography.bodyMedium,
-            color = CatSubtext,
-        )
-        Row(
-            modifier = Modifier.fillMaxWidth(),
-            horizontalArrangement = Arrangement.spacedBy(6.dp),
-            verticalAlignment = Alignment.CenterVertically,
-        ) {
-            workspace.primaryUtilityLabel?.let { label ->
-                PremiumCompactButton(
-                    label = label,
-                    icon = Icons.Default.FileOpen,
-                    color = CatGreen,
-                    onClick = { workspace.onPrimaryUtility?.invoke() },
-                )
-            }
-            workspace.secondaryUtilityLabel?.let { label ->
-                PremiumCompactButton(
-                    label = label,
-                    icon = Icons.Default.Share,
-                    color = CatGreen,
-                    onClick = { workspace.onSecondaryUtility?.invoke() },
-                )
+                }
             }
         }
     }
@@ -873,19 +881,17 @@ private fun RuleTabLabel(
     label: String,
     selected: Boolean,
 ) {
-    Column(horizontalAlignment = Alignment.CenterHorizontally) {
+    Surface(
+        color = if (selected) CatGreen.copy(alpha = 0.12f) else SurfaceBright,
+        shape = RoundedCornerShape(24.dp),
+        border = BorderStroke(1.dp, if (selected) CatGreen else CatOverlay.copy(alpha = 0.3f)),
+    ) {
         Text(
             text = label,
+            modifier = Modifier.padding(horizontal = 14.dp, vertical = 10.dp),
             style = MaterialTheme.typography.labelLarge,
             fontWeight = if (selected) FontWeight.SemiBold else FontWeight.Medium,
-        )
-        Spacer(Modifier.height(7.dp))
-        Box(
-            modifier =
-                Modifier
-                    .width(36.dp)
-                    .height(2.dp)
-                    .background(if (selected) CatGreen else Color.Transparent),
+            color = if (selected) CatText else CatSubtext,
         )
     }
 }
@@ -906,7 +912,13 @@ private fun EmptyStateCard(
         contentAlignment = Alignment.Center,
     ) {
         Column(
-            modifier = Modifier.fillMaxWidth().padding(horizontal = 20.dp, vertical = 28.dp),
+            modifier =
+                Modifier
+                    .fillMaxWidth()
+                    .clip(RoundedCornerShape(20.dp))
+                    .background(SurfaceBright)
+                    .border(1.dp, CatOverlay.copy(alpha = 0.35f), RoundedCornerShape(20.dp))
+                    .padding(horizontal = 20.dp, vertical = 28.dp),
             horizontalAlignment = Alignment.CenterHorizontally,
             verticalArrangement = Arrangement.spacedBy(10.dp),
         ) {

app/src/main/res/values/strings.xml

@@ -216,6 +216,8 @@
     <string name="blocked_log_sms">SMS</string>
 
     <!-- Blocklist Screen -->
+    <string name="blocklist_heading">Blocklist &amp; rules</string>
+    <string name="blocklist_intro">Control who can reach you and how CallShield handles risky calls and texts.</string>
     <string name="blocklist_tab_blocked_short">Blocked</string>
     <string name="blocklist_tab_wildcards_short">Wildcards</string>
     <string name="blocklist_tab_keywords_short">Keywords</string>