Make comment header tappable and fix WebView styling (#322)

Author: trevor-e

ios/HackerNews/Comments/CommentsHeader.swift

@@ -11,13 +11,17 @@ struct CommentsHeader: View {
   let state: CommentsHeaderState
   let likePost: () -> Void
   let toggleBody: () -> Void
+  let onTitleTap: () -> Void
 
   var body: some View {
     VStack(alignment: .leading) {
-      // title
-      Text(state.story.title)
-        .font(.ibmPlexMono(.bold, size: 16))
-        .frame(maxWidth: .infinity, alignment: .leading)
+      // title - wrap in Button
+      Button(action: onTitleTap) {
+        Text(state.story.title)
+          .font(.ibmPlexMono(.bold, size: 16))
+          .frame(maxWidth: .infinity, alignment: .leading)
+      }
+      .buttonStyle(.plain)
 
       // actions
       HStack {
@@ -81,6 +85,7 @@ struct CommentsHeader: View {
   CommentsHeader(
     state: CommentsHeaderState(story: PreviewHelpers.makeFakeStory()),
     likePost: {},
-    toggleBody: {}
+    toggleBody: {},
+    onTitleTap: {}
   )
 }

ios/HackerNews/Comments/CommentsScreen.swift

@@ -10,7 +10,7 @@ import SwiftUI
 
 struct CommentsScreen: View {
 
-  @ObservedObject var model: CommentsViewModel
+  @State var model: CommentsViewModel
 
   var body: some View {
     ScrollView {
@@ -31,6 +31,9 @@ struct CommentsScreen: View {
           },
           toggleBody: {
             model.toggleHeaderBody()
+          },
+          onTitleTap: {
+            model.goToWebsite()
           }
         )
 
@@ -109,7 +112,7 @@ struct CommentsScreen: View {
         PreviewHelpers.makeFakeComment(),
         PreviewHelpers.makeFakeComment(),
       ]
-      let viewModel = CommentsViewModel(
+      @Previewable @State var viewModel = CommentsViewModel(
         story: PreviewHelpers.makeFakeStory(kids: comments.map { $0.id }),
         auth: .loggedIn,
         navigation: { _ in }

ios/HackerNews/Comments/CommentsViewModel.swift

@@ -77,12 +77,14 @@ extension CommentFormData {
 enum CommentsDestination {
   case back
   case login
+  case website(url: URL)
 }
 
 @MainActor
-class CommentsViewModel: ObservableObject {
+@Observable
+class CommentsViewModel {
 
-  @Published var state: CommentsUiState
+  var state: CommentsUiState
 
   private let story: Story
   private let navigation: (_ to: CommentsDestination) -> Void
@@ -196,6 +198,11 @@ class CommentsViewModel: ObservableObject {
   func goToLogin() {
     navigation(.login)
   }
+  
+  func goToWebsite() {
+    guard let url = story.makeUrl() else { return }
+    navigation(.website(url: url))
+  }
 
   func updateComment(text: String) {
     state.postCommentState?.text = text

ios/HackerNews/HNApp.swift

@@ -7,8 +7,8 @@
 
 import Reaper
 import Sentry
-import SwiftUI
 import SwiftData
+import SwiftUI
 
 @main
 struct Hacker_NewsApp: App {
@@ -17,12 +17,13 @@ struct Hacker_NewsApp: App {
   init() {
     UINavigationBar.appearance().backgroundColor = .clear
     UICollectionView.appearance().backgroundColor = .clear
-    
+
     EMGReaper.sharedInstance().start(withAPIKey: "f77fb081-cfc2-4d15-acb5-18bad59c9376")
-    
+
     SentrySDK.start { options in
-        options.dsn = "https://118cff4b239bd3e0ede8fd74aad9bf8f@o497846.ingest.sentry.io/4506027753668608"
-        options.enableTracing = true
+      options.dsn =
+        "https://118cff4b239bd3e0ede8fd74aad9bf8f@o497846.ingest.sentry.io/4506027753668608"
+      options.enableTracing = true
     }
   }
 
@@ -38,17 +39,18 @@ struct Hacker_NewsApp: App {
         .navigationDestination(for: AppViewModel.AppNavigation.self) { appNavigation in
           switch appNavigation {
           case .webLink(let url, let title):
-            WebView(url: url)
+            WebViewContainer(url: url, title: title)
               .ignoresSafeArea()
-              .navigationTitle(title)
-              .navigationBarTitleDisplayMode(.inline)
           case .storyComments(let story):
-            let commentModel = CommentsViewModel(story: story, auth: appModel.authState) { destination in
+            let commentModel = CommentsViewModel(story: story, auth: appModel.authState) {
+              destination in
               switch destination {
               case .back:
                 appModel.backPressed()
               case .login:
                 appModel.gotoLogin()
+              case let .website(url):
+                appModel.openLink(url: url)
               }
             }
             CommentsScreen(model: commentModel)

ios/HackerNews/Web/WebView.swift

@@ -9,13 +9,30 @@ import Foundation
 import SwiftUI
 import WebKit
 
+struct WebViewContainer: View {
+  let url: URL
+  let title: String
+
+  var body: some View {
+    WebView(url: url)
+      .navigationBarTitleDisplayMode(.inline)
+      .navigationTitle(title)
+      .toolbarBackground(.visible, for: .navigationBar)
+      .toolbarBackground(Color(UIColor.systemBackground), for: .navigationBar)
+  }
+}
+
 struct WebView: UIViewRepresentable {
   let url: URL
-  
+
   func makeUIView(context: Context) -> WKWebView {
-    return WKWebView()
+    let configuration = WKWebViewConfiguration()
+    let webView = WKWebView(frame: .zero, configuration: configuration)
+    webView.backgroundColor = .systemBackground
+    webView.isOpaque = false
+    return webView
   }
-  
+
   func updateUIView(_ webView: WKWebView, context: Context) {
     let request = URLRequest(url: url)
     webView.load(request)