Comment Screen Design Pass (#283)

Redesigning the Comments Screen + Adding some Functionality with Upvotes
and Commenting

Author: Rahkeen

ios/HackerNews.xcodeproj/project.pbxproj

@@ -31,8 +31,8 @@
 		A495A6662CED57BB009A2A6B /* SnapshotTesting in Frameworks */ = {isa = PBXBuildFile; productRef = A495A6652CED57BB009A2A6B /* SnapshotTesting */; };
 		A495A6682CED5800009A2A6B /* SwiftSnapshotTest.swift in Sources */ = {isa = PBXBuildFile; fileRef = A495A6672CED57FA009A2A6B /* SwiftSnapshotTest.swift */; };
 		A495B2952BFEA11B00A8A8A9 /* Reaper in Frameworks */ = {isa = PBXBuildFile; productRef = A495B2942BFEA11B00A8A8A9 /* Reaper */; };
-		A49933942AA28B5900DED8B1 /* StoryViewModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = A48C0DE92A9819E00034CC0A /* StoryViewModel.swift */; };
-		A49933952AA28B6500DED8B1 /* StoryScreen.swift in Sources */ = {isa = PBXBuildFile; fileRef = A48C0DE62A9818A50034CC0A /* StoryScreen.swift */; };
+		A49933942AA28B5900DED8B1 /* CommentsViewModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = A48C0DE92A9819E00034CC0A /* CommentsViewModel.swift */; };
+		A49933952AA28B6500DED8B1 /* CommentsScreen.swift in Sources */ = {isa = PBXBuildFile; fileRef = A48C0DE62A9818A50034CC0A /* CommentsScreen.swift */; };
 		A4BED5C32AD5E083001642B3 /* (null) in Frameworks */ = {isa = PBXBuildFile; };
 		A4BED5C42AD5E083001642B3 /* (null) in Frameworks */ = {isa = PBXBuildFile; };
 		A4D28AEE2C237E2A007F20D0 /* SnapshotPreferences in Frameworks */ = {isa = PBXBuildFile; productRef = A4D28AED2C237E2A007F20D0 /* SnapshotPreferences */; };
@@ -47,6 +47,7 @@
 		EC29FDA92CFFD0B5007B1AE9 /* SettingsScreen.swift in Sources */ = {isa = PBXBuildFile; fileRef = EC29FDA82CFFD0B5007B1AE9 /* SettingsScreen.swift */; };
 		EC70E1612D1DD82B00582023 /* HNWebClient.swift in Sources */ = {isa = PBXBuildFile; fileRef = EC70E1602D1DD82B00582023 /* HNWebClient.swift */; };
 		EC882BB22D23A8A70065FEC0 /* LoginScreen.swift in Sources */ = {isa = PBXBuildFile; fileRef = EC882BB12D23A8A70065FEC0 /* LoginScreen.swift */; };
+		ECC0BC8C2D39CDCB00ABB263 /* CommentComposer.swift in Sources */ = {isa = PBXBuildFile; fileRef = ECC0BC8B2D39CDCB00ABB263 /* CommentComposer.swift */; };
 		ECCE8F262D03815300349733 /* Pager.swift in Sources */ = {isa = PBXBuildFile; fileRef = ECCE8F252D03815300349733 /* Pager.swift */; };
 		ECE608562D338B3E008B1618 /* ibm_plex_sans_medium.ttf in Resources */ = {isa = PBXBuildFile; fileRef = ECE608532D338B3E008B1618 /* ibm_plex_sans_medium.ttf */; };
 		ECE608572D338B3E008B1618 /* ibm_plex_sans_bold.ttf in Resources */ = {isa = PBXBuildFile; fileRef = ECE608522D338B3E008B1618 /* ibm_plex_sans_bold.ttf */; };
@@ -139,8 +140,8 @@
 		A45C2C9C2A5DDE25009BC030 /* primary_category.txt */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text; path = primary_category.txt; sourceTree = "<group>"; };
 		A45C2CBB2A5F0A41009BC030 /* Hacker-News-Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist; path = "Hacker-News-Info.plist"; sourceTree = SOURCE_ROOT; };
 		A47309B52AA7D1F600201376 /* CommentRow.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CommentRow.swift; sourceTree = "<group>"; };
-		A48C0DE62A9818A50034CC0A /* StoryScreen.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = StoryScreen.swift; sourceTree = "<group>"; };
-		A48C0DE92A9819E00034CC0A /* StoryViewModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = StoryViewModel.swift; sourceTree = "<group>"; };
+		A48C0DE62A9818A50034CC0A /* CommentsScreen.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CommentsScreen.swift; sourceTree = "<group>"; };
+		A48C0DE92A9819E00034CC0A /* CommentsViewModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CommentsViewModel.swift; sourceTree = "<group>"; };
 		A495A6672CED57FA009A2A6B /* SwiftSnapshotTest.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SwiftSnapshotTest.swift; sourceTree = "<group>"; };
 		C3AC6AD32CB6E7FD006BD22D /* HackerNewsPreviewTest.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = HackerNewsPreviewTest.swift; sourceTree = "<group>"; };
 		C3AC6AD52CB6E816006BD22D /* HackerNewsSnapshotTest.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = HackerNewsSnapshotTest.swift; sourceTree = "<group>"; };
@@ -151,6 +152,7 @@
 		EC29FDA82CFFD0B5007B1AE9 /* SettingsScreen.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SettingsScreen.swift; sourceTree = "<group>"; };
 		EC70E1602D1DD82B00582023 /* HNWebClient.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = HNWebClient.swift; sourceTree = "<group>"; };
 		EC882BB12D23A8A70065FEC0 /* LoginScreen.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = LoginScreen.swift; sourceTree = "<group>"; };
+		ECC0BC8B2D39CDCB00ABB263 /* CommentComposer.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CommentComposer.swift; sourceTree = "<group>"; };
 		ECCE8F252D03815300349733 /* Pager.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Pager.swift; sourceTree = "<group>"; };
 		ECE608522D338B3E008B1618 /* ibm_plex_sans_bold.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; path = ibm_plex_sans_bold.ttf; sourceTree = "<group>"; };
 		ECE608532D338B3E008B1618 /* ibm_plex_sans_medium.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; path = ibm_plex_sans_medium.ttf; sourceTree = "<group>"; };
@@ -201,6 +203,7 @@
 				A47309B52AA7D1F600201376 /* CommentRow.swift */,
 				EC072CA92CEF02A500D00B8D /* StoryRowV2.swift */,
 				EC0B1C742D1A34110000C3AC /* CommentsHeader.swift */,
+				ECC0BC8B2D39CDCB00ABB263 /* CommentComposer.swift */,
 			);
 			path = Components;
 			sourceTree = "<group>";
@@ -232,7 +235,7 @@
 			isa = PBXGroup;
 			children = (
 				A42705AA2A4296BA0057E439 /* FeedScreen.swift */,
-				A48C0DE62A9818A50034CC0A /* StoryScreen.swift */,
+				A48C0DE62A9818A50034CC0A /* CommentsScreen.swift */,
 				EC29FDA62CFFD074007B1AE9 /* BookmarksScreen.swift */,
 				EC29FDA82CFFD0B5007B1AE9 /* SettingsScreen.swift */,
 				EC882BB12D23A8A70065FEC0 /* LoginScreen.swift */,
@@ -382,7 +385,7 @@
 			isa = PBXGroup;
 			children = (
 				A42705A62A42949D0057E439 /* AppViewModel.swift */,
-				A48C0DE92A9819E00034CC0A /* StoryViewModel.swift */,
+				A48C0DE92A9819E00034CC0A /* CommentsViewModel.swift */,
 			);
 			path = Models;
 			sourceTree = "<group>";
@@ -614,11 +617,12 @@
 				A427057D2A4293B10057E439 /* HNApp.swift in Sources */,
 				EC70E1612D1DD82B00582023 /* HNWebClient.swift in Sources */,
 				A434C2E02A8E75960002F488 /* WebView.swift in Sources */,
-				A49933942AA28B5900DED8B1 /* StoryViewModel.swift in Sources */,
+				A49933942AA28B5900DED8B1 /* CommentsViewModel.swift in Sources */,
 				A47309B62AA7D1F600201376 /* CommentRow.swift in Sources */,
-				A49933952AA28B6500DED8B1 /* StoryScreen.swift in Sources */,
+				A49933952AA28B6500DED8B1 /* CommentsScreen.swift in Sources */,
 				A42705A72A42949D0057E439 /* AppViewModel.swift in Sources */,
 				A42705AD2A429D2E0057E439 /* HNApi.swift in Sources */,
+				ECC0BC8C2D39CDCB00ABB263 /* CommentComposer.swift in Sources */,
 				A423B0682BAE05FB00267DDB /* NetworkDebugger.swift in Sources */,
 				ECCE8F262D03815300349733 /* Pager.swift in Sources */,
 			);

…ts.xcassets/Color.colorset/Contents.json …Colors/Background.colorset/Contents.jsonios/HackerNews/Assets.xcassets/Color.colorset/Contents.json renamed to ios/HackerNews/Assets.xcassets/Colors/Background.colorset/Contents.json ios/HackerNews/Assets.xcassets/Color.colorset/Contents.json renamed to ios/HackerNews/Assets.xcassets/Colors/Background.colorset/Contents.json

@@ -6,8 +6,8 @@
         "components" : {
           "alpha" : "1.000",
           "blue" : "0xFF",
-          "green" : "0xFF",
-          "red" : "0xFE"
+          "green" : "0xF9",
+          "red" : "0xF9"
         }
       },
       "idiom" : "universal"
@@ -23,9 +23,9 @@
         "color-space" : "srgb",
         "components" : {
           "alpha" : "1.000",
-          "blue" : "0xFF",
-          "green" : "0xFF",
-          "red" : "0xFE"
+          "blue" : "0x17",
+          "green" : "0x13",
+          "red" : "0x12"
         }
       },
       "idiom" : "universal"

ios/HackerNews/Assets.xcassets/Colors/Contents.json

@@ -0,0 +1,6 @@
+{
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

…xcassets/HNOrange.colorset/Contents.json …s/Colors/HNOrange.colorset/Contents.jsonios/HackerNews/Assets.xcassets/HNOrange.colorset/Contents.json renamed to ios/HackerNews/Assets.xcassets/Colors/HNOrange.colorset/Contents.json ios/HackerNews/Assets.xcassets/HNOrange.colorset/Contents.json renamed to ios/HackerNews/Assets.xcassets/Colors/HNOrange.colorset/Contents.json

@@ -5,9 +5,9 @@
         "color-space" : "srgb",
         "components" : {
           "alpha" : "1.000",
-          "blue" : "0.940",
-          "green" : "0.960",
-          "red" : "0.960"
+          "blue" : "0x20",
+          "green" : "0x1C",
+          "red" : "0x1A"
         }
       },
       "idiom" : "universal"
@@ -23,9 +23,9 @@
         "color-space" : "srgb",
         "components" : {
           "alpha" : "1.000",
-          "blue" : "0.130",
-          "green" : "0.120",
-          "red" : "0.110"
+          "blue" : "0xE8",
+          "green" : "0xE2",
+          "red" : "0xE2"
         }
       },
       "idiom" : "universal"

…ts.xcassets/HNRed.colorset/Contents.json …sets/Colors/HNRed.colorset/Contents.jsonios/HackerNews/Assets.xcassets/HNRed.colorset/Contents.json renamed to ios/HackerNews/Assets.xcassets/Colors/HNRed.colorset/Contents.json ios/HackerNews/Assets.xcassets/HNRed.colorset/Contents.json renamed to ios/HackerNews/Assets.xcassets/Colors/HNRed.colorset/Contents.json

@@ -0,0 +1,38 @@
+{
+  "colors" : [
+    {
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0xF3",
+          "green" : "0xED",
+          "red" : "0xEE"
+        }
+      },
+      "idiom" : "universal"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0x24",
+          "green" : "0x20",
+          "red" : "0x1E"
+        }
+      },
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

…assets/Background.colorset/Contents.json …lors/OnBackground.colorset/Contents.jsonios/HackerNews/Assets.xcassets/Background.colorset/Contents.json renamed to ios/HackerNews/Assets.xcassets/Colors/OnBackground.colorset/Contents.json ios/HackerNews/Assets.xcassets/Background.colorset/Contents.json renamed to ios/HackerNews/Assets.xcassets/Colors/OnBackground.colorset/Contents.json

@@ -0,0 +1,72 @@
+//
+//  CommentComposer.swift
+//  HackerNews
+//
+//  Created by Rikin Marfatia on 1/16/25.
+//
+import SwiftUI
+
+struct CommentComposer: View {
+  @Binding var state: CommentComposerState
+  let goToLogin: () -> Void
+  let sendComment: () -> Void
+
+  var body: some View {
+    VStack {
+      HStack(alignment: .center) {
+        Image(systemName: "message.fill")
+          .font(.system(size: 12))
+        Text("Add a comment")
+          .font(.custom("IBMPlexSans-Medium", size: 12))
+      }
+      TextField(
+        "Words of wisdom",
+        text: $state.text
+      )
+      .textFieldStyle(.roundedBorder)
+      .disabled(AuthState.loggedOut == state.loggedIn)
+      .submitLabel(.send)
+      .onSubmit {
+        sendComment()
+      }
+    }
+    .padding(16)
+    .background {
+      Color
+        .clear
+        .background(.ultraThinMaterial)
+        .containerShape(
+          .rect(
+            cornerRadii: RectangleCornerRadii(
+              topLeading: 24,
+              bottomLeading: 0,
+              bottomTrailing: 0,
+              topTrailing: 24
+            ),
+            style: .continuous
+          )
+        )
+    }
+    .onTapGesture {
+      if (AuthState.loggedOut == state.loggedIn) {
+        goToLogin()
+      }
+    }
+  }
+}
+
+#Preview {
+  CommentComposer(
+    state: .constant(
+      CommentComposerState(
+        parentId: "",
+        goToUrl: "",
+        hmac: "",
+        loggedIn: .loggedIn,
+        text: ""
+      )
+    ),
+    goToLogin: {},
+    sendComment: {}
+  )
+}

ios/HackerNews/Assets.xcassets/Colors/Surface.colorset/Contents.json

@@ -11,55 +11,56 @@ import SwiftUI
 private let maxIndentationLevel: Int = 5
 
 struct CommentRow: View {
-  let state: CommentInfo
-  let likeComment: (CommentInfo) -> Void
+  let state: CommentState
+  let likeComment: (CommentState) -> Void
+  let toggleComment: () -> Void
 
   var body: some View {
     VStack(alignment: .leading) {
       // first row
       HStack {
         // author
         Text("@\(state.user)")
-          .font(.caption)
-          .fontWeight(.bold)
+          .font(.custom("IBMPlexMono-Bold", size: 12))
         // time
         HStack(alignment: .center, spacing: 4.0) {
           Image(systemName: "clock")
+            .font(.system(size: 12))
           Text(state.age)
+            .font(.custom("IBMPlexSans-Medium", size: 12))
         }
         .font(.caption)
         // collapse/expand
         Image(systemName: "chevron.up.chevron.down")
-          .font(.caption)
+          .font(.system(size: 12))
         // space between
         Spacer()
         // upvote
         Button(action: {
           likeComment(state)
         }) {
           Image(systemName: "arrow.up")
-            .font(.caption2)
+            .font(.system(size: 12))
+            .padding(.horizontal, 8)
+            .padding(.vertical, 4)
         }
-        .padding(
-          EdgeInsets(
-            top: 4.0,
-            leading: 8.0,
-            bottom: 4.0,
-            trailing: 8.0
-          )
-        )
-        .background(HNColors.background)
-        .foregroundStyle(.black)
+        .background(state.upvoted ? .green.opacity(0.2) : .white.opacity(0.2))
+        .foregroundStyle(state.upvoted ? .green : .onBackground)
         .clipShape(Capsule())
       }
-      
+
       // Comment Body
-      Text(state.text.strippingHTML())
-        .font(.caption)
+      if (!state.hidden) {
+        Text(state.text.strippingHTML())
+          .font(.custom("IBMPlexMono-Regular", size: 12))
+      }
     }
     .padding(8.0)
-    .background(HNColors.commentBackground)
+    .background(.surface)
     .clipShape(RoundedRectangle(cornerRadius: 16.0))
+    .onTapGesture {
+      toggleComment()
+    }
     .padding(
       EdgeInsets(
         top: 0,
@@ -75,7 +76,8 @@ struct CommentView_Preview: PreviewProvider {
     PreviewVariants {
       CommentRow(
         state: PreviewHelpers.makeFakeComment(),
-        likeComment: {_ in}
+        likeComment: {_ in},
+        toggleComment: {}
       )
     }
   }
@@ -87,7 +89,8 @@ struct CommentViewIndentation_Preview: PreviewProvider {
       ForEach(0..<6) { index in
         CommentRow(
           state: PreviewHelpers.makeFakeComment(level: index),
-          likeComment: {_ in}
+          likeComment: {_ in},
+          toggleComment: {}
         )
           .previewLayout(.sizeThatFits)
           .previewDisplayName("Indentation \(index)")