Add setting for displaying comments in separate tab or below description

Model/CommentsModel.swift

@@ -29,6 +29,12 @@ final class CommentsModel: ObservableObject {
         !Defaults[.commentsInstanceID].isNil && !Defaults[.commentsInstanceID]!.isEmpty
     }
 
+    #if !os(tvOS)
+        static var placement: CommentsPlacement {
+            Defaults[.commentsPlacement]
+        }
+    #endif
+
     var nextPageAvailable: Bool {
         !(nextPage?.isEmpty ?? true)
     }

Shared/Defaults.swift

@@ -34,6 +34,9 @@ extension Defaults.Keys {
     static let playerInstanceID = Key<Instance.ID?>("playerInstance")
     static let showKeywords = Key<Bool>("showKeywords", default: false)
     static let commentsInstanceID = Key<Instance.ID?>("commentsInstance", default: kavinPipedInstanceID)
+    #if !os(tvOS)
+        static let commentsPlacement = Key<CommentsPlacement>("commentsPlacement", default: .separate)
+    #endif
 
     static let recentlyOpened = Key<[RecentItem]>("recentlyOpened", default: [])
 
@@ -129,3 +132,9 @@ enum VisibleSection: String, CaseIterable, Comparable, Defaults.Serializable {
         lhs.sortOrder < rhs.sortOrder
     }
 }
+
+#if !os(tvOS)
+    enum CommentsPlacement: String, CaseIterable, Defaults.Serializable {
+        case info, separate
+    }
+#endif

Shared/Player/VideoDetails.swift

@@ -65,7 +65,7 @@ struct VideoDetails: View {
                 }
                 .padding(.horizontal)
 
-                if CommentsModel.enabled {
+                if CommentsModel.enabled, CommentsModel.placement == .separate {
                     pagePicker
                         .padding(.horizontal)
                 }
@@ -245,13 +245,13 @@ struct VideoDetails: View {
         Picker("Page", selection: $currentPage) {
             if !video.isNil {
                 Text("Info").tag(Page.info)
-                if !sidebarQueue {
-                    Text("Related").tag(Page.related)
-                }
-                if CommentsModel.enabled {
+                if CommentsModel.enabled, CommentsModel.placement == .separate {
                     Text("Comments")
                         .tag(Page.comments)
                 }
+                if !sidebarQueue {
+                    Text("Related").tag(Page.related)
+                }
             }
             if !sidebarQueue {
                 Text("Queue").tag(Page.queue)
@@ -365,6 +365,7 @@ struct VideoDetails: View {
     }
 
     var detailsPage: some View {
+        Group {
             Group {
                 if let video = player.currentItem?.video {
                     Group {
@@ -393,7 +394,6 @@ struct VideoDetails: View {
                             .frame(maxWidth: .infinity, alignment: .leading)
                             .font(.system(size: 14))
                             .lineSpacing(3)
-                        .padding(.bottom, 4)
                         } else {
                             Text("No description")
                                 .foregroundColor(.secondary)
@@ -423,8 +423,24 @@ struct VideoDetails: View {
                         }
                     }
                 }
+
+                if !video.isNil, CommentsModel.placement == .info {
+                    Divider()
+                    #if os(macOS)
+                        .padding(.bottom, 20)
+                    #else
+                        .padding(.vertical, 10)
+                    #endif
+                }
             }
             .padding(.horizontal)
+
+            Group {
+                if !video.isNil, CommentsModel.placement == .info {
+                    CommentsView()
+                }
+            }
+        }
     }
 
     func videoDetail(label: String, value: String, symbol: String) -> some View {

Shared/Settings/ServicesSettings.swift

@@ -6,9 +6,17 @@ struct ServicesSettings: View {
     @Default(.sponsorBlockCategories) private var sponsorBlockCategories
     @Default(.commentsInstanceID) private var commentsInstanceID
 
+    #if !os(tvOS)
+        @Default(.commentsPlacement) private var commentsPlacement
+    #endif
+
     var body: some View {
         Section(header: SettingsHeader(text: "Comments")) {
             commentsInstancePicker
+            #if !os(tvOS)
+                commentsPlacementPicker
+                    .disabled(!CommentsModel.enabled)
+            #endif
         }
 
         Section(header: SettingsHeader(text: "SponsorBlock API")) {
@@ -58,7 +66,7 @@ struct ServicesSettings: View {
     }
 
     private var commentsInstancePicker: some View {
-        Picker("Comments", selection: $commentsInstanceID) {
+        Picker("Source", selection: $commentsInstanceID) {
             Text("Disabled").tag(Optional(""))
 
             ForEach(InstancesModel.all.filter { $0.app.supportsComments }) { instance in
@@ -73,6 +81,19 @@ struct ServicesSettings: View {
         #endif
     }
 
+    #if !os(tvOS)
+        private var commentsPlacementPicker: some View {
+            Picker("Placement", selection: $commentsPlacement) {
+                Text("Below video description").tag(CommentsPlacement.info)
+                Text("Separate tab").tag(CommentsPlacement.separate)
+            }
+            .labelsHidden()
+            #if os(iOS)
+                .pickerStyle(.automatic)
+            #endif
+        }
+    #endif
+
     func toggleCategory(_ category: String, value: Bool) {
         if let index = sponsorBlockCategories.firstIndex(where: { $0 == category }), !value {
             sponsorBlockCategories.remove(at: index)