Support chat tab reordering in UI

Author: intitni

Core/Sources/SuggestionWidget/ChatWindowView.swift

@@ -160,6 +160,7 @@ struct ChatTabBar: View {
     }
 
     @Environment(\.chatTabPool) var chatTabPool
+    @State var draggingTabId: String?
 
     var body: some View {
         WithViewStore(
@@ -186,6 +187,21 @@ struct ChatTabBar: View {
                                         tab.menu
                                     }
                                     .id(info.id)
+                                    .onDrag {
+                                        print("dragging tab \(info.id)")
+                                        draggingTabId = info.id
+                                        return NSItemProvider(object: info.id as NSString)
+                                    }
+                                    .onDrop(
+                                        of: [.text],
+                                        delegate: ChatTabBarDropDelegate(
+                                            store: store,
+                                            tabs: viewStore.state.tabInfo,
+                                            itemId: info.id,
+                                            draggingTabId: $draggingTabId
+                                        )
+                                    )
+
                                 } else {
                                     EmptyView()
                                 }
@@ -264,6 +280,30 @@ struct ChatTabBar: View {
     }
 }
 
+struct ChatTabBarDropDelegate: DropDelegate {
+    let store: StoreOf<ChatPanelFeature>
+    let tabs: IdentifiedArray<String, ChatTabInfo>
+    let itemId: String
+    @Binding var draggingTabId: String?
+    
+    func dropUpdated(info: DropInfo) -> DropProposal? {
+        return DropProposal(operation: .move)
+    }
+
+    func performDrop(info: DropInfo) -> Bool {
+        draggingTabId = nil
+        return true
+    }
+
+    func dropEntered(info: DropInfo) {
+        guard itemId != draggingTabId else { return }
+        let from = tabs.firstIndex { $0.id == draggingTabId }
+        let to = tabs.firstIndex { $0.id == itemId }
+        guard let from, let to, from != to else { return }
+        store.send(.moveChatTab(from: from, to: to))
+    }
+}
+
 struct ChatTabBarButton<Content: View>: View {
     let store: StoreOf<ChatPanelFeature>
     let info: ChatTabInfo
@@ -273,33 +313,30 @@ struct ChatTabBarButton<Content: View>: View {
 
     var body: some View {
         HStack(spacing: 0) {
-            Button(action: {
-                store.send(.tabClicked(id: info.id))
-            }) {
-                content()
-                    .font(.callout)
-                    .lineLimit(1)
-                    .frame(maxWidth: 120)
-                    .padding(.horizontal, 32)
-                    .contentShape(Rectangle())
-            }
-            .buttonStyle(PlainButtonStyle())
-
-            .overlay(alignment: .leading) {
-                Button(action: {
-                    store.send(.closeTabButtonClicked(id: info.id))
-                }) {
-                    Image(systemName: "xmark")
-                        .foregroundColor(.secondary)
+            content()
+                .font(.callout)
+                .lineLimit(1)
+                .frame(maxWidth: 120)
+                .padding(.horizontal, 32)
+                .contentShape(Rectangle())
+                .onTapGesture {
+                    store.send(.tabClicked(id: info.id))
                 }
-                .buttonStyle(.plain)
-                .padding(2)
-                .padding(.leading, 8)
-                .opacity(isHovered ? 1 : 0)
-            }
-            .onHover { isHovered = $0 }
-            .animation(.linear(duration: 0.1), value: isHovered)
-            .animation(.linear(duration: 0.1), value: isSelected)
+                .overlay(alignment: .leading) {
+                    Button(action: {
+                        store.send(.closeTabButtonClicked(id: info.id))
+                    }) {
+                        Image(systemName: "xmark")
+                            .foregroundColor(.secondary)
+                    }
+                    .buttonStyle(.plain)
+                    .padding(2)
+                    .padding(.leading, 8)
+                    .opacity(isHovered ? 1 : 0)
+                }
+                .onHover { isHovered = $0 }
+                .animation(.linear(duration: 0.1), value: isHovered)
+                .animation(.linear(duration: 0.1), value: isSelected)
 
             Divider().padding(.vertical, 6)
         }

Core/Sources/SuggestionWidget/FeatureReducers/ChatPanelFeature.swift

@@ -27,7 +27,7 @@ public struct ChatPanelFeature: ReducerProtocol {
         public var tabInfo: IdentifiedArray<String, ChatTabInfo>
         public var tabCollection: [ChatTabBuilderCollection]
         public var selectedTabId: String?
-        
+
         public var selectedTabInfo: ChatTabInfo? {
             guard let id = selectedTabId else { return tabInfo.first }
             return tabInfo[id: id]
@@ -69,7 +69,8 @@ public struct ChatPanelFeature: ReducerProtocol {
         case appendAndSelectTab(ChatTabInfo)
         case switchToNextTab
         case switchToPreviousTab
-        
+        case moveChatTab(from: Int, to: Int)
+
         case chatTab(id: String, action: ChatTabItem.Action)
     }
 
@@ -205,7 +206,18 @@ public struct ChatPanelFeature: ReducerProtocol {
                 let targetId = state.chatTabGroup.tabInfo[previousIndex].id
                 state.chatTabGroup.selectedTabId = targetId
                 return .none
-                
+
+            case let .moveChatTab(from, to):
+                guard from >= 0, from < state.chatTabGroup.tabInfo.endIndex, to >= 0,
+                      to <= state.chatTabGroup.tabInfo.endIndex
+                else {
+                    return .none
+                }
+                let tab = state.chatTabGroup.tabInfo[from]
+                state.chatTabGroup.tabInfo.remove(at: from)
+                state.chatTabGroup.tabInfo.insert(tab, at: to)
+                return .none
+
             case .chatTab:
                 return .none
             }