update: build FeedbackView inspired by github ui

Author: devahmedshendy

FeedbackKitPlayground/FeedbackKitPlayground/ContentView.swift

@@ -11,10 +11,9 @@ import FeedbackKit
 struct ContentView: View {
     var body: some View {
         VStack {
-            Image(systemName: "globe")
-                .imageScale(.large)
-                .foregroundStyle(.tint)
-            Text("Hello, world!")
+            FeedbackView()
+            Spacer()
+                .background(Color.yellow)
         }
         .padding()
     }

Sources/FeedbackKit/Extensions/NSTableView+Extension.swift

@@ -0,0 +1,19 @@
+//
+//  NSTableView+Extension.swift
+//
+//
+//  Created by Ahmed Shendy on 26/04/2024.
+//
+
+#if os(macOS)
+import AppKit
+
+extension NSTableView {
+  open override func viewDidMoveToWindow() {
+    super.viewDidMoveToWindow()
+
+    backgroundColor = NSColor.clear
+    enclosingScrollView!.drawsBackground = false
+  }
+}
+#endif

Sources/FeedbackKit/Feedback.swift

@@ -1,5 +1,44 @@
-struct Feedback {
+struct Feedback: Identifiable, Hashable {
+    var id: String { title }
+
     let type: FeedbackType
     let title: String
     let description: String
+    let state: FeedbackState
+}
+
+extension Feedback {
+    static var samples: [Feedback] {
+        [
+            .init(
+                type: .bug,
+                title: "We need an alternative when failed to create SQLite database using GRDB",
+                description: "",
+                state: .open
+            ),
+            .init(
+                type: .feature,
+                title: "[FEATURE]: Hook up search screen and favoriting functionality",
+                description: "",
+                state: .closed
+            ),
+            .init(
+                type: .feature,
+                title: "[FEATURE]: Sort search locations by distance from a location",
+                description: "",
+                state: .open
+            ),
+            .init(
+                type: .feature,
+                title: "[FEATURE]: Enhance weather information for detail view of a location",
+                description: "",
+                state: .open
+            ),
+        ]
+    }
+}
+
+enum FeedbackState {
+    case open
+    case closed
 }

Sources/FeedbackKit/FeedbackView.swift

@@ -1,7 +1,110 @@
 import SwiftUI
 
-struct FeedbackView: View {
+public struct FeedbackView: View {
+    public init() { }
+    public var body: some View {
+        ScrollView {
+            LazyVStack(spacing: 0) {
+                ForEach(Feedback.samples) { item in
+                    FeedbackItem(item)
+
+                    if item != Feedback.samples.last {
+                        Divider()
+                    }
+                }
+            }
+        }
+        .fixedSize(horizontal: false, vertical: true)
+        .clipShape(RoundedRectangle(cornerRadius: 5))
+        .overlay(
+            RoundedRectangle(cornerRadius: 5)
+                .inset(by: 1)
+                .strokeBorder(
+                    Color(red: 0.255, green: 0.255, blue: 0.255),
+                    lineWidth: 1,
+                    antialiased: true
+                )
+        )
+    }
+}
+
+struct FeedbackItem: View {
+    let feedback: Feedback
+
+    init(_ feedback: Feedback) {
+        self.feedback = feedback
+    }
+
+    var body: some View {
+        HStack(alignment: .top) {
+
+            FeedbackStateIcon(state: feedback.state)
+            Spacer().frame(width: 5)
+
+            VStack(spacing: 0) {
+                HStack(spacing: 0) {
+                    FeedbackTitle(text: feedback.title)
+                    Spacer()
+                    HStack(spacing: 0) {
+                        Image(systemName: "message")
+                        Text("2")
+                    }
+                    .foregroundColor(.init(red: 0.518, green: 0.553, blue: 0.592))
+                }
+
+                Spacer().frame(height: 8)
+
+                HStack(spacing: 0) {
+                    Text("opened on May 18, 2023")
+                        .font(.caption)
+                        .foregroundColor(Color.gray)
+                    Spacer()
+                    FeedbackLabel(text: feedback.type.rawValue)
+                }
+            }
+        }
+        .padding(.horizontal, 15)
+        .padding(.vertical, 10)
+    }
+}
+
+struct FeedbackStateIcon: View {
+    let state: FeedbackState
+
+    var body: some View {
+        Group {
+            switch state {
+            case .open:
+                Image(systemName: "smallcircle.filled.circle")
+                    .foregroundColor(.green)
+            case .closed:
+                Image(systemName: "checkmark.circle")
+                    .foregroundColor(.blue)
+            }
+        }
+        .font(.body)
+    }
+}
+
+struct FeedbackTitle: View {
+    let text: String
+
+    var body: some View {
+        Text(text)
+            .font(.headline)
+    }
+}
+
+struct FeedbackLabel: View {
+    let text: String
+
     var body: some View {
-        Text("FeedbackKit Root View")
+        Text(text)
+            .font(.caption)
+            .fontWeight(.light)
+            .foregroundColor(.white)
+            .padding(.horizontal, 6)
+            .background(Color.gray.opacity(0.5))
+            .clipShape(Capsule(style: .continuous))
     }
 }