Refine inbox and watch approval presentation

Tighten the inbox, detail, and watch layouts so approval actions feel denser and more direct across compact surfaces.
2026-04-19 21:50:03 +02:00
parent 61a0cc1f7d
commit 271d9657bf
13 changed files with 1122 additions and 516 deletions
@@ -11,18 +11,18 @@ struct PrimaryActionStyle: ButtonStyle {

        var body: some View {
            configuration.label
-                .font(.headline)
+                .font(.subheadline.weight(.semibold))
                .frame(maxWidth: .infinity)
                .padding(.horizontal, 18)
-                .padding(.vertical, 14)
-                .foregroundStyle(.white)
+                .frame(height: 44)
+                .foregroundStyle(Color.idpPrimaryForeground)
                .background(
                    RoundedRectangle(cornerRadius: IdP.controlRadius, style: .continuous)
-                        .fill(isEnabled ? IdP.tint : Color.secondary.opacity(0.25))
+                        .fill(isEnabled ? Color.idpPrimary : Color.idpMuted)
                )
-                .opacity(configuration.isPressed ? 0.92 : 1)
-                .scaleEffect(configuration.isPressed ? 0.985 : 1)
-                .animation(.easeOut(duration: 0.16), value: configuration.isPressed)
+                .opacity(configuration.isPressed ? 0.9 : 1)
+                .scaleEffect(configuration.isPressed ? 0.99 : 1)
+                .animation(.easeOut(duration: 0.12), value: configuration.isPressed)
        }
    }
 }
@@ -30,43 +30,135 @@ struct PrimaryActionStyle: ButtonStyle {
 struct SecondaryActionStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
-            .font(.headline)
+            .font(.subheadline.weight(.semibold))
            .frame(maxWidth: .infinity)
            .padding(.horizontal, 18)
-            .padding(.vertical, 14)
+            .frame(height: 44)
            .foregroundStyle(.primary)
            .background(
                RoundedRectangle(cornerRadius: IdP.controlRadius, style: .continuous)
-                    .fill(Color.idpSecondaryGroupedBackground)
+                    .fill(Color.clear)
            )
            .overlay(
                RoundedRectangle(cornerRadius: IdP.controlRadius, style: .continuous)
-                    .stroke(Color.idpSeparator.opacity(0.55), lineWidth: 1)
+                    .stroke(Color.idpBorder, lineWidth: 1)
            )
-            .opacity(configuration.isPressed ? 0.9 : 1)
-            .scaleEffect(configuration.isPressed ? 0.985 : 1)
-            .animation(.easeOut(duration: 0.16), value: configuration.isPressed)
+            .opacity(configuration.isPressed ? 0.85 : 1)
+            .scaleEffect(configuration.isPressed ? 0.99 : 1)
+            .animation(.easeOut(duration: 0.12), value: configuration.isPressed)
    }
 }

 struct DestructiveStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
-            .font(.headline)
+            .font(.subheadline.weight(.semibold))
            .frame(maxWidth: .infinity)
            .padding(.horizontal, 18)
-            .padding(.vertical, 14)
-            .foregroundStyle(.red)
+            .frame(height: 44)
+            .foregroundStyle(.white)
            .background(
                RoundedRectangle(cornerRadius: IdP.controlRadius, style: .continuous)
-                    .fill(Color.red.opacity(0.10))
-            )
-            .overlay(
-                RoundedRectangle(cornerRadius: IdP.controlRadius, style: .continuous)
-                    .stroke(Color.red.opacity(0.18), lineWidth: 1)
+                    .fill(Color.idpDestructive)
            )
            .opacity(configuration.isPressed ? 0.9 : 1)
-            .scaleEffect(configuration.isPressed ? 0.985 : 1)
-            .animation(.easeOut(duration: 0.16), value: configuration.isPressed)
+            .scaleEffect(configuration.isPressed ? 0.99 : 1)
+            .animation(.easeOut(duration: 0.12), value: configuration.isPressed)
+    }
+}
+
+struct AccentActionStyle: ButtonStyle {
+    func makeBody(configuration: Configuration) -> some View {
+        configuration.label
+            .font(.subheadline.weight(.semibold))
+            .frame(maxWidth: .infinity)
+            .padding(.horizontal, 18)
+            .frame(height: 44)
+            .foregroundStyle(.white)
+            .background(
+                RoundedRectangle(cornerRadius: IdP.controlRadius, style: .continuous)
+                    .fill(IdP.tint)
+            )
+            .opacity(configuration.isPressed ? 0.9 : 1)
+            .scaleEffect(configuration.isPressed ? 0.99 : 1)
+            .animation(.easeOut(duration: 0.12), value: configuration.isPressed)
+    }
+}
+
+struct GhostActionStyle: ButtonStyle {
+    func makeBody(configuration: Configuration) -> some View {
+        configuration.label
+            .font(.subheadline.weight(.medium))
+            .padding(.horizontal, 12)
+            .frame(height: 32)
+            .foregroundStyle(.primary)
+            .background(
+                RoundedRectangle(cornerRadius: IdP.controlRadius, style: .continuous)
+                    .fill(configuration.isPressed ? Color.idpMuted : Color.clear)
+            )
+    }
+}
+
+struct ShadcnBadge: View {
+    enum Tone {
+        case neutral
+        case outline
+        case ok
+        case warn
+        case danger
+        case accent
+    }
+
+    let title: String
+    var tone: Tone = .neutral
+    var leading: Image? = nil
+
+    var body: some View {
+        HStack(spacing: 4) {
+            if let leading {
+                leading
+                    .font(.caption2.weight(.semibold))
+            }
+            Text(title)
+        }
+        .font(.caption2.weight(.semibold))
+        .padding(.horizontal, 8)
+        .padding(.vertical, 3)
+        .foregroundStyle(foreground)
+        .background(background, in: Capsule(style: .continuous))
+        .overlay(
+            Capsule(style: .continuous)
+                .stroke(strokeColor, lineWidth: strokeWidth)
+        )
+    }
+
+    private var foreground: Color {
+        switch tone {
+        case .neutral: return Color.idpMutedForeground
+        case .outline: return .primary
+        case .ok: return Color.idpOK
+        case .warn: return Color(red: 0.52, green: 0.30, blue: 0.05)
+        case .danger: return Color(red: 0.60, green: 0.10, blue: 0.10)
+        case .accent: return IdP.tint
+        }
+    }
+
+    private var background: Color {
+        switch tone {
+        case .neutral: return Color.idpMuted
+        case .outline: return .clear
+        case .ok: return Color.idpOK.opacity(0.12)
+        case .warn: return Color.idpWarn.opacity(0.18)
+        case .danger: return Color.idpDestructive.opacity(0.14)
+        case .accent: return Color.idpAccentSoft
+        }
+    }
+
+    private var strokeColor: Color {
+        tone == .outline ? Color.idpBorder : .clear
+    }
+
+    private var strokeWidth: CGFloat {
+        tone == .outline ? 1 : 0
    }
 }