update styling for grid item cards

apple/OmnivoreKit/Sources/App/Views/Home/Components/FeedCardNavigationLink.swift

@@ -12,6 +12,7 @@ struct FeedCardNavigationLink: View {
   @Binding var selectedLinkItem: FeedItem?
 
   @ObservedObject var viewModel: HomeFeedViewModel
+  
   var body: some View {
     NavigationLink(
       destination: LinkItemDetailView(viewModel: LinkItemDetailViewModel(item: item)),
@@ -38,6 +39,7 @@ struct GridCardNavigationLink: View {
   @Binding var selectedLinkItem: FeedItem?
 
   @ObservedObject var viewModel: HomeFeedViewModel
+  
   var body: some View {
     ZStack {
       NavigationLink(
@@ -47,11 +49,16 @@ struct GridCardNavigationLink: View {
       ) {
         GridCard(item: item)
       }
-//      .opacity(0)
-//      .buttonStyle(PlainButtonStyle())
+//      .buttonStyle(FlatLinkStyle())
       .onAppear {
         viewModel.itemAppeared(item: item, searchQuery: searchQuery, dataService: dataService)
       }
     }
   }
 }
+
+struct FlatLinkStyle: ButtonStyle {
+  func makeBody(configuration: Configuration) -> some View {
+    configuration.label
+  }
+}

apple/OmnivoreKit/Sources/App/Views/Home/HomeFeedViewIOS.swift

@@ -239,9 +239,11 @@ import Views
 
     @ObservedObject var viewModel: HomeFeedViewModel
 
+    private let columns = Array(repeating: GridItem(.flexible(), spacing: 20), count: 2)
+
     var body: some View {
       ScrollView {
-        LazyVGrid(columns: [GridItem(.flexible()), GridItem(.flexible())], spacing: 20) {
+        LazyVGrid(columns: columns, spacing: 20) {
           ForEach(viewModel.items) { item in
             let link = GridCardNavigationLink(
               item: item,
@@ -276,6 +278,8 @@ import Views
             }
           }
         }
+        .padding()
+        .background(Color(.systemGroupedBackground))
 
         if viewModel.isLoading {
           LoadingSection()

apple/OmnivoreKit/Sources/App/Views/Home/HomeView.swift

@@ -24,7 +24,9 @@ struct HomeView: View {
         }
         .accentColor(.appGrayTextContrast)
       } else {
-        HomeFeedContainerView(isCompact: false, viewModel: viewModel)
+        GeometryReader { geo in
+          HomeFeedContainerView(isCompact: geo.size.width < 500, viewModel: viewModel)
+        }
       }
     #elseif os(macOS)
       HomeFeedView(viewModel: viewModel)

apple/OmnivoreKit/Sources/Views/HomeFeedCardView.swift

@@ -59,15 +59,20 @@ public struct GridCard: View {
   public var body: some View {
     VStack(alignment: .leading, spacing: 16) {
       // Progress Bar
-      ProgressView(value: Double.random(in: 0 ... 1))
-        .foregroundColor(.appYellow48)
-        .frame(maxWidth: .infinity, alignment: .leading)
+      if #available(iOS 15.0, *) {
+        ProgressView(value: Double.random(in: 0 ... 1))
+          .tint(.appYellow48)
+          .frame(maxWidth: .infinity, alignment: .leading)
+      } else {
+        ProgressView(value: Double.random(in: 0 ... 1))
+          .frame(maxWidth: .infinity, alignment: .leading)
+      }
 
       // Title, Subtitle, Menu Button
-      VStack(alignment: .leading, spacing: 6) {
+      VStack(alignment: .leading, spacing: 4) {
         HStack {
           Text(item.title)
-            .font(.appSubheadline)
+            .font(.appHeadline)
             .foregroundColor(.appGrayTextContrast)
             .lineLimit(1)
           Spacer()
@@ -80,14 +85,14 @@ public struct GridCard: View {
         HStack {
           if let author = item.author {
             Text("by \(author)")
-              .font(.appCaption)
+              .font(.appCaptionTwo)
               .foregroundColor(.appGrayText)
               .lineLimit(1)
           }
 
           if let publisherURL = item.publisherHostname {
             Text(publisherURL)
-              .font(.appCaption)
+              .font(.appCaptionTwo)
               .foregroundColor(.appGrayText)
               .underline()
               .lineLimit(1)
@@ -96,14 +101,16 @@ public struct GridCard: View {
           Spacer()
         }
       }
-      .frame(height: 40)
+      .frame(height: 30)
+      .padding(.horizontal)
 
       // Description, Image
-      HStack {
-        Text(item.description ?? "No description")
-          .font(.appSubheadline)
+      HStack(alignment: .top) {
+        Text(item.description ?? item.title)
+          .font(.appFootnote)
           .foregroundColor(.appGrayTextContrast)
           .lineLimit(nil)
+          .multilineTextAlignment(.leading)
 
         Spacer()
 
@@ -111,17 +118,63 @@ public struct GridCard: View {
           AsyncImage(url: imageURL, isResizable: true)
             .aspectRatio(1, contentMode: .fill)
             .frame(width: 135, height: 90)
-            .cornerRadius(6)
+            .cornerRadius(3)
         }
       }
-      .frame(height: 140)
+      .frame(height: 95)
+      .padding(.horizontal)
 
       // Labels
       HStack {
-        Text("Label 1")
-        Text("Label 2")
+        if Bool.random() {
+          TextChip(text: "label", color: .red)
+          TextChip(text: "longer label", color: .blue)
+        }
         Spacer()
       }
+      .frame(height: 30)
+      .padding(.horizontal)
+      .padding(.bottom, 8)
     }
+    .background(Color(.secondarySystemGroupedBackground))
+    .cornerRadius(6)
+  }
+}
+
+struct TextChipdep: View {
+  let text: String
+  let color: Color
+
+  var body: some View {
+    Capsule()
+      .fill(color.opacity(0.3))
+      .border(color.opacity(0.7), width: 3)
+      .overlay(
+        Text(text)
+          .font(.appFootnote)
+          .foregroundColor(color)
+          .padding()
+      )
+  }
+}
+
+struct TextChip: View {
+  let text: String
+  let color: Color
+  let cornerRadius = 20.0
+
+  var body: some View {
+    Text(text)
+      .padding(.horizontal, 10)
+      .padding(.vertical, 5)
+      .font(.appFootnote)
+      .foregroundColor(color)
+      .lineLimit(1)
+      .background(color.opacity(0.1))
+      .cornerRadius(cornerRadius)
+      .overlay(
+        RoundedRectangle(cornerRadius: cornerRadius)
+          .stroke(color.opacity(0.3), lineWidth: 1)
+      )
   }
 }