Keyboard shortcut to switch sidebar navigator tabs

CodeEdit.xcodeproj/project.pbxproj

@@ -54,6 +54,7 @@
 		2B7AC06B282452FB0082A5B8 /* Media.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 2B7AC06A282452FB0082A5B8 /* Media.xcassets */; };
 		2BE487EF28245162003F3F64 /* FinderSync.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2BE487EE28245162003F3F64 /* FinderSync.swift */; };
 		2BE487F428245162003F3F64 /* OpenWithCodeEdit.appex in Embed Foundation Extensions */ = {isa = PBXBuildFile; fileRef = 2BE487EC28245162003F3F64 /* OpenWithCodeEdit.appex */; settings = {ATTRIBUTES = (RemoveHeadersOnCopy, ); }; };
+		30E6D0012A6E505200A58B20 /* NavigatorSidebarViewModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = 30E6D0002A6E505200A58B20 /* NavigatorSidebarViewModel.swift */; };
 		3E0196732A3921AC002648D8 /* codeedit_shell_integration.zsh in Resources */ = {isa = PBXBuildFile; fileRef = 3E0196722A3921AC002648D8 /* codeedit_shell_integration.zsh */; };
 		3E01967A2A392B45002648D8 /* codeedit_shell_integration.bash in Resources */ = {isa = PBXBuildFile; fileRef = 3E0196792A392B45002648D8 /* codeedit_shell_integration.bash */; };
 		474397C52893AC4B00518C8C /* codeedit-midnight.json in Resources */ = {isa = PBXBuildFile; fileRef = 474397C42893AC4B00518C8C /* codeedit-midnight.json */; };
@@ -515,6 +516,7 @@
 		2BE487EC28245162003F3F64 /* OpenWithCodeEdit.appex */ = {isa = PBXFileReference; explicitFileType = "wrapper.app-extension"; includeInIndex = 0; path = OpenWithCodeEdit.appex; sourceTree = BUILT_PRODUCTS_DIR; };
 		2BE487EE28245162003F3F64 /* FinderSync.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = FinderSync.swift; sourceTree = "<group>"; };
 		2BE487F028245162003F3F64 /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
+		30E6D0002A6E505200A58B20 /* NavigatorSidebarViewModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = NavigatorSidebarViewModel.swift; sourceTree = "<group>"; };
 		3E0196722A3921AC002648D8 /* codeedit_shell_integration.zsh */ = {isa = PBXFileReference; lastKnownFileType = text.script.sh; path = codeedit_shell_integration.zsh; sourceTree = "<group>"; };
 		3E0196792A392B45002648D8 /* codeedit_shell_integration.bash */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.script.sh; path = codeedit_shell_integration.bash; sourceTree = "<group>"; };
 		474397C42893AC4B00518C8C /* codeedit-midnight.json */ = {isa = PBXFileReference; lastKnownFileType = text.json; path = "codeedit-midnight.json"; sourceTree = "<group>"; };
@@ -1072,6 +1074,7 @@
 				201169D52837B29600F92B46 /* SourceControlNavigator */,
 				287776E627E3413200D46668 /* NavigatorSidebarView.swift */,
 				6CE6226D2A2A1CDE0013085C /* NavigatorTab.swift */,
+				30E6D0002A6E505200A58B20 /* NavigatorSidebarViewModel.swift */,
 			);
 			path = NavigatorSidebar;
 			sourceTree = "<group>";
@@ -2976,6 +2979,7 @@
 				6C6BD6F629CD145F00235D17 /* ExtensionInfo.swift in Sources */,
 				58F2EB05292FB2B0004A9BDE /* Settings.swift in Sources */,
 				6CBD1BC62978DE53006639D5 /* Font+Caption3.swift in Sources */,
+				30E6D0012A6E505200A58B20 /* NavigatorSidebarViewModel.swift in Sources */,
 				B6E41C9429DEAE260088F9F4 /* SourceControlAccount.swift in Sources */,
 				2806E9022979588B000040F4 /* Contributor.swift in Sources */,
 				58D01C98293167DC00C5B6B4 /* String+RemoveOccurrences.swift in Sources */,

CodeEdit.xcodeproj/project.xcworkspace/xcshareddata/swiftpm/Package.resolved

@@ -158,8 +158,8 @@
       "kind" : "remoteSourceControl",
       "location" : "https://github.com/ChimeHQ/Rearrange",
       "state" : {
-        "revision" : "0fb658e721c68495f6340c211cc6d4719e6b52d8",
-        "version" : "1.6.0"
+        "revision" : "8f97f721d8a08c6e01ab9f7460e53819bef72dfa",
+        "version" : "1.5.3"
       }
     },
     {

CodeEdit/Features/CodeEditUI/Views/AreaTabBar.swift

@@ -16,15 +16,30 @@ struct AreaTabBar<Tab: AreaTab>: View {
     @Environment(\.controlActiveState)
     private var activeState
 
-    var items: [Tab]
-
+    @Binding var items: [Tab]
     @Binding var selection: Tab?
 
     var position: SettingsData.SidebarTabBarPosition
 
-    @State private var hasChangedLocation: Bool = false
-    @State private var draggingItem: SidebarDockIcon?
-    @State private var drugItemLocation: CGPoint?
+    @State private var tabLocations: [Tab: CGRect] = [:]
+    @State private var tabWidth: [Tab: CGFloat] = [:]
+    @State private var tabOffsets: [Tab: CGFloat] = [:]
+
+    /// The tab currently being dragged.
+    ///
+    /// It will be `nil` when there is no tab dragged currently.
+    @State private var draggingTab: Tab?
+
+    /// The start location of dragging.
+    ///
+    /// When there is no tab being dragged, it will be `nil`.
+    @State private var draggingStartLocation: CGFloat?
+
+    /// The last location of dragging.
+    ///
+    /// This is used to determine the dragging direction.
+    /// - TODO: Check if I can use `value.translation` instead.
+    @State private var draggingLastLocation: CGFloat?
 
     var body: some View {
         if position == .top {
@@ -63,19 +78,12 @@ struct AreaTabBar<Tab: AreaTab>: View {
         layout {
             ForEach(items) { icon in
                 makeIcon(tab: icon, size: size)
-                    .opacity(draggingItem?.imageName == icon.systemImage &&
-                             hasChangedLocation &&
-                             drugItemLocation != nil ? 0.0 : 1.0)
-                //                    .onDrop(
-                //                        of: [.utf8PlainText],
-                //                        delegate: InspectorSidebarDockIconDelegate(
-                //                            item: icon,
-                //                            current: $draggingItem,
-                //                            icons: $icons,
-                //                            hasChangedLocation: $hasChangedLocation,
-                //                            drugItemLocation: $drugItemLocation
-                //                        )
-                //                    )
+                    .offset(
+                        x: (position == .top) ? (tabOffsets[icon] ?? 0) : 0,
+                        y: (position == .side) ? (tabOffsets[icon] ?? 0) : 0
+                    )
+                    .background(makeTabItemGeometryReader(tab: icon))
+                    .simultaneousGesture(makeAreaTabDragGesture(tab: icon))
             }
             if position == .side {
                 Spacer()
@@ -100,85 +108,167 @@ struct AreaTabBar<Tab: AreaTab>: View {
                     alignment: .center
                 )
                 .help(tab.title)
-            //                .onDrag {
-            //                    if let index = icons.firstIndex(where: { $0.imageName == named }) {
-            //                        draggingItem = icons[index]
-            //                    }
-            //                    return .init(object: NSString(string: named))
-            //                } preview: {
-            //                    RoundedRectangle(cornerRadius: .zero)
-            //                        .frame(width: .zero)
-            //                }
         }
         .buttonStyle(.icon(isActive: tab == selection, size: nil))
     }
 
-    private func getSafeImage(named: String, accessibilityDescription: String?) -> Image {
-        // We still use the NSImage init to check if a symbol with the name exists.
-        if NSImage(systemSymbolName: named, accessibilityDescription: nil) != nil {
-            return Image(systemName: named)
-        } else {
-            return Image(symbol: named)
-        }
-    }
+    private func makeAreaTabDragGesture(tab: Tab) -> some Gesture {
+        DragGesture(minimumDistance: 2, coordinateSpace: .global)
+            .onChanged({ value in
+                if draggingTab != tab {
+                    initializeDragGesture(value: value, for: tab)
+                }
 
-    struct NavigatorToolbarButtonStyle: ButtonStyle {
-        var id: Int
-        var selection: Int
-        var activeState: ControlActiveState
-        var sidebarWidth: CGFloat
+                // Get the current cursor location
+                let currentLocation = (position == .top) ? value.location.x : value.location.y
+                guard let startLocation = draggingStartLocation,
+                      let currentIndex = items.firstIndex(of: tab),
+                      let currentTabWidth = tabWidth[tab],
+                      let lastLocation = draggingLastLocation
+                else { return }
 
-        func makeBody(configuration: Configuration) -> some View {
-            configuration.label
-                .foregroundColor(id == selection ? .accentColor : configuration.isPressed ? .primary : .secondary)
-        }
+                let dragDifference = currentLocation - lastLocation
+                tabOffsets[tab] = currentLocation - startLocation
+
+                // Check for swaps between adjacent tabs
+                swapWithPreviousTab(
+                    tab: tab,
+                    currentIndex: currentIndex,
+                    currentLocation: currentLocation,
+                    dragDifference: dragDifference,
+                    currentTabWidth: currentTabWidth
+                )
+                swapWithNextTab(
+                    tab: tab,
+                    currentIndex: currentIndex,
+                    currentLocation: currentLocation,
+                    dragDifference: dragDifference,
+                    currentTabWidth: currentTabWidth
+                )
+
+                // Update the last dragging location if there's enough offset
+                let currentLocationOnAxis = ((position == .top) ? value.location.x : value.location.y)
+                if draggingLastLocation == nil || abs(currentLocationOnAxis - draggingLastLocation!) >= 10 {
+                    draggingLastLocation = (position == .top) ? value.location.x : value.location.y
+                }
+            })
+            .onEnded({ _ in
+                draggingStartLocation = nil
+                draggingLastLocation = nil
+                withAnimation(.easeInOut(duration: 0.25)) {
+                    tabOffsets = [:]
+                }
+                DispatchQueue.main.asyncAfter(deadline: .now() + 0.25) {
+                    draggingTab = nil
+                }
+            })
     }
 
-    private struct SidebarDockIcon: Identifiable, Equatable {
-        let imageName: String
-        let title: String
-        var id: Int
-        var disabled: Bool = false
+    private func initializeDragGesture(value: DragGesture.Value, for tab: Tab) {
+        draggingTab = tab
+        let initialLocation = position == .top ? value.startLocation.x : value.startLocation.y
+        draggingStartLocation = initialLocation
+        draggingLastLocation = initialLocation
     }
 
-    private struct NavigatorSidebarDockIconDelegate: DropDelegate {
-        let item: SidebarDockIcon
-        @Binding var current: SidebarDockIcon?
-        @Binding var icons: [SidebarDockIcon]
-        @Binding var hasChangedLocation: Bool
-        @Binding var drugItemLocation: CGPoint?
-
-        func dropEntered(info: DropInfo) {
-            if current == nil {
-                current = item
-                drugItemLocation = info.location
-            }
+    private func swapWithPreviousTab(
+        tab: Tab, currentIndex: Int, currentLocation: CGFloat, dragDifference: CGFloat, currentTabWidth: CGFloat
+    ) {
+        guard let previousIndex = currentIndex > 0 ? currentIndex - 1 : nil,
+              dragDifference < 0 else { return }
 
-            guard item != current, let current = current,
-                    let from = icons.firstIndex(of: current),
-                    let toIndex = icons.firstIndex(of: item) else { return }
+        // Get info about the previous tab
+        let previousTab = items[previousIndex]
+        guard let previousTabLocation = tabLocations[previousTab],
+              let previousTabWidth = tabWidth[previousTab]
+        else { return }
 
-            hasChangedLocation = true
-            drugItemLocation = info.location
+        // Did we pass the threshold to swap positions with the previous tab?
+        var isWithinBounds = false
+        if position == .top {
+            isWithinBounds = currentLocation < max(
+                previousTabLocation.maxX - previousTabWidth * 0.1,
+                previousTabLocation.minX + previousTabWidth * 0.9
+            )
+        } else {
+            isWithinBounds = currentLocation < max(
+                previousTabLocation.maxY - previousTabWidth * 0.1,
+                previousTabLocation.minY + previousTabWidth * 0.9
+            )
+        }
 
-            if icons[toIndex] != current {
-                icons.move(fromOffsets: IndexSet(integer: from), toOffset: toIndex > from ? toIndex + 1 : toIndex)
+        // Swap tab positions
+        if isWithinBounds {
+            let changing = previousTabWidth - 1
+            draggingStartLocation! -= changing
+            withAnimation {
+                tabOffsets[tab]! += changing
+                items.swapAt(currentIndex, previousIndex)
             }
+            return
+        }
+    }
+
+    private func swapWithNextTab(
+        tab: Tab, currentIndex: Int, currentLocation: CGFloat, dragDifference: CGFloat, currentTabWidth: CGFloat
+    ) {
+        guard let nextIndex = currentIndex < items.count - 1 ? currentIndex + 1 : nil,
+              dragDifference > 0 else { return }
+
+        // Get info about the next tab
+        let nextTab = items[nextIndex]
+        guard let nextTabLocation = tabLocations[nextTab],
+              let nextTabWidth = tabWidth[nextTab]
+        else { return }
+
+        // Did we pass the threshold to swap positions with the next tab?
+        var isWithinBounds = false
+        if position == .top {
+            isWithinBounds = currentLocation > min(
+                nextTabLocation.minX + nextTabWidth * 0.1,
+                nextTabLocation.maxX - currentTabWidth * 0.9
+            )
+        } else {
+            isWithinBounds = currentLocation > min(
+                nextTabLocation.minY + nextTabWidth * 0.1,
+                nextTabLocation.maxY - currentTabWidth * 0.9
+            )
         }
 
-        func dropExited(info: DropInfo) {
-            drugItemLocation = nil
+        // Swap tab positions
+        if isWithinBounds {
+            let changing = nextTabWidth - 1
+            draggingStartLocation! += changing
+            withAnimation {
+                tabOffsets[tab]! -= changing
+                items.swapAt(currentIndex, nextIndex)
+            }
         }
+    }
 
-        func dropUpdated(info: DropInfo) -> DropProposal? {
-            DropProposal(operation: .move)
+    private func makeTabItemGeometryReader(tab: Tab) -> some View {
+        GeometryReader { geometry in
+            Rectangle()
+                .foregroundColor(.clear)
+                .onAppear {
+                    self.tabWidth[tab] = geometry.size.width
+                    self.tabLocations[tab] = geometry.frame(in: .global)
+                }
+                .onChange(of: geometry.frame(in: .global)) { newFrame in
+                    self.tabLocations[tab] = newFrame
+                }
+                .onChange(of: geometry.size.width) { newWidth in
+                    self.tabWidth[tab] = newWidth
+                }
         }
+    }
 
-        func performDrop(info: DropInfo) -> Bool {
-            hasChangedLocation = false
-            drugItemLocation = nil
-            current = nil
-            return true
+    private func getSafeImage(named: String, accessibilityDescription: String?) -> Image {
+        // We still use the NSImage init to check if a symbol with the name exists.
+        if NSImage(systemSymbolName: named, accessibilityDescription: nil) != nil {
+            return Image(systemName: named)
+        } else {
+            return Image(symbol: named)
         }
     }
 }

CodeEdit/Features/DebugArea/DebugAreaView.swift

@@ -26,7 +26,7 @@ struct DebugAreaView: View {
         }
         .safeAreaInset(edge: .leading, spacing: 0) {
             HStack(spacing: 0) {
-                AreaTabBar(items: DebugAreaTab.allCases, selection: $selection, position: .side)
+                AreaTabBar(items: $model.tabItems, selection: $selection, position: .side)
                 Divider()
                     .overlay(Color(nsColor: colorScheme == .dark ? .black : .clear))
             }

CodeEdit/Features/DebugArea/ViewModels/DebugAreaViewModel.swift

@@ -37,6 +37,9 @@ class DebugAreaViewModel: ObservableObject {
     /// Search value to filter in drawer
     @Published var searchText: String = ""
 
+    /// The tab bar items for the DebugAreaView
+    @Published var tabItems: [DebugAreaTab] = DebugAreaTab.allCases
+
     /// Returns the font for status bar items to use
     private(set) var toolbarFont: Font = .system(size: 11, weight: .medium)
 

CodeEdit/Features/Documents/Controllers/CodeEditWindowController.swift

@@ -19,6 +19,7 @@ final class CodeEditWindowController: NSWindowController, NSToolbarDelegate, Obs
     var workspace: WorkspaceDocument?
     var quickOpenPanel: OverlayPanel?
     var commandPalettePanel: OverlayPanel?
+    var navigatorSidebarViewModel: NavigatorSidebarViewModel?
 
     var splitViewController: NSSplitViewController!
 
@@ -79,13 +80,18 @@ final class CodeEditWindowController: NSWindowController, NSToolbarDelegate, Obs
         let feedbackPerformer = NSHapticFeedbackManager.defaultPerformer
         let splitVC = CodeEditSplitViewController(workspace: workspace, feedbackPerformer: feedbackPerformer)
 
-        let navigatorView = SettingsInjector {
-            NavigatorSidebarView(workspace: workspace)
+        let navigatorViewModel = NavigatorSidebarViewModel()
+        navigatorSidebarViewModel = navigatorViewModel
+
+        let settingsView = SettingsInjector {
+            NavigatorSidebarView(workspace: workspace, viewModel: navigatorViewModel)
                 .environmentObject(workspace)
                 .environmentObject(workspace.tabManager)
         }
 
-        let navigator = NSSplitViewItem(sidebarWithViewController: NSHostingController(rootView: navigatorView))
+        let navigator = NSSplitViewItem(
+            sidebarWithViewController: NSHostingController(rootView: settingsView)
+        )
         navigator.titlebarSeparatorStyle = .none
         navigator.minimumThickness = Self.minSidebarWidth
         navigator.collapseBehavior = .useConstraints