feat: improves feed highlights carousel performance

MacMagazine/Features/NewsLibrary/Sources/NewsLibrary/Views/Components/FeedHighlightCardView.swift

@@ -5,7 +5,8 @@ import UIComponentsLibrary
 
 // MARK: - Feed Highlight Card View
 
-/// Card view for featured/highlighted posts in the carousel
+/// Card view for featured/highlighted posts in the carousel.
+/// Optimized for performance with reduced shadows and drawingGroup.
 public struct FeedHighlightCardView: View {
 
     // MARK: - Properties
@@ -28,10 +29,14 @@ public struct FeedHighlightCardView: View {
                     .frame(width: geometry.size.width)
             }
         }
-        .clipShape(RoundedRectangle(cornerRadius: 20, style: .continuous))
-        .shadow(color: .black.opacity(0.3), radius: 12, x: 0, y: 6)
+        .clipShape(RoundedRectangle(cornerRadius: 16, style: .continuous))
+        .compositingGroup()
+        .shadow(color: .black.opacity(0.15), radius: 8, x: 0, y: 4)
+        .drawingGroup()
         .accessibilityElement(children: .combine)
         .accessibilityLabel(accessibilityLabel)
+        .accessibilityHint("Toque duas vezes para ler a notícia")
+        .accessibilityAddTraits(.isButton)
     }
 
     // MARK: - Background Image
@@ -59,8 +64,8 @@ public struct FeedHighlightCardView: View {
         LinearGradient(
             gradient: Gradient(stops: [
                 .init(color: .clear, location: 0.0),
-                .init(color: .black.opacity(0.2), location: 0.5),
-                .init(color: .black.opacity(0.85), location: 1.0)
+                .init(color: .black.opacity(0.15), location: 0.5),
+                .init(color: .black.opacity(0.75), location: 1.0)
             ]),
             startPoint: .top,
             endPoint: .bottom
@@ -70,29 +75,29 @@ public struct FeedHighlightCardView: View {
     // MARK: - Content Overlay
 
     private var contentOverlay: some View {
-        VStack(alignment: .leading, spacing: 8) {
+        VStack(alignment: .leading, spacing: 6) {
             Spacer()
 
             Text(post.title)
-                .font(.title2)
-                .fontWeight(.bold)
+                .font(.headline)
+                .fontWeight(.semibold)
                 .foregroundStyle(.white)
                 .lineLimit(3)
                 .multilineTextAlignment(.leading)
 
             dateLabel
         }
-        .padding(20)
+        .padding(16)
         .frame(maxWidth: .infinity, alignment: .leading)
     }
 
     private var dateLabel: some View {
-        HStack(spacing: 6) {
+        HStack(spacing: 4) {
             Image(systemName: "calendar")
             Text(post.pubDate.toTimeAgoDisplay(showTime: true))
         }
-        .font(.subheadline)
-        .foregroundStyle(.white.opacity(0.85))
+        .font(.caption)
+        .foregroundStyle(.white.opacity(0.8))
     }
 
     // MARK: - Accessibility
@@ -102,7 +107,7 @@ public struct FeedHighlightCardView: View {
         if post.favorite {
             label += ", favoritado"
         }
-        label += ", publicado em \(post.pubDate.toTimeAgoDisplay(showTime: true))"
+        label += ", publicado em \(post.pubDate.toTimeAgoDisplay(showTime: true)))"
         return label
     }
 
@@ -122,15 +127,61 @@ private struct FeedHighlightCardPreview: View {
             Color.black.opacity(0.9).ignoresSafeArea()
 
             if let post = PreviewData.sampleHighlights.first {
-                FeedHighlightCardView(post: post)
-                    .frame(width: 340, height: 420)
-                    .padding()
+                VStack(spacing: 20) {
+                    Text("Tamanho reduzido")
+                        .foregroundStyle(.white)
+                        .font(.caption)
+
+                    FeedHighlightCardView(post: post)
+                        .frame(width: 320, height: 280)
+                }
+                .padding()
             }
         }
     }
 }
 
-#Preview {
+#Preview("Card") {
     FeedHighlightCardPreview()
 }
+
+#Preview("Card Sizes") {
+    ScrollView {
+        VStack(spacing: 24) {
+            if let post = PreviewData.sampleHighlights.first {
+                Group {
+                    VStack(spacing: 8) {
+                        Text("iPhone Portrait (280pt)")
+                            .font(.caption)
+                        FeedHighlightCardView(post: post)
+                            .frame(width: 340, height: 280)
+                    }
+
+                    VStack(spacing: 8) {
+                        Text("iPhone Landscape (180pt)")
+                            .font(.caption)
+                        FeedHighlightCardView(post: post)
+                            .frame(width: 400, height: 180)
+                    }
+
+                    VStack(spacing: 8) {
+                        Text("iPad Portrait (320pt)")
+                            .font(.caption)
+                        FeedHighlightCardView(post: post)
+                            .frame(width: 500, height: 320)
+                    }
+
+                    VStack(spacing: 8) {
+                        Text("iPad Landscape (240pt)")
+                            .font(.caption)
+                        FeedHighlightCardView(post: post)
+                            .frame(width: 380, height: 240)
+                    }
+                }
+            }
+        }
+        .padding()
+    }
+    .background(Color.gray.opacity(0.2))
+}
 #endif