Fix Issue #8461: Add Toggle Hotkey and Pin Button for SFTP Panel

tabby-core/src/hotkeys.ts

@@ -255,6 +255,10 @@ export class AppHotkeyProvider extends HotkeyProvider {
             id: 'pane-decrease-horizontal',
             name: this.translate.instant('Decrease horizontal split size'),
         },
+        {
+            id: 'toggle-sftp-pane',
+            name: this.translate.instant('Toggle SFTP panel'),
+        },
     ]
 
     constructor (

tabby-ssh/src/components/sftpPanel.component.pug

@@ -24,6 +24,11 @@
     button.btn.btn-link.btn-sm.flex-shrink-0.d-flex((click)='upload()')
         i.fas.fa-upload.me-1
         div(translate) Upload
+
+    button.btn.btn-link.btn-sm.flex-shrink-0.d-flex((click)='togglePinSFTPPanel()')
+        i.fas.fa-thumbtack
+        span(*ngIf='pinSFTPPanel', translate) Unpin
+        span(*ngIf='!pinSFTPPanel', translate) Pin
 
     button.btn.btn-link.text-decoration-none((click)='close()') !{require('../../../tabby-core/src/icons/times.svg')}
 

tabby-ssh/src/components/sftpPanel.component.ts

@@ -1,6 +1,6 @@
 import * as C from 'constants'
 import { posix as path } from 'path'
-import { Component, Input, Output, EventEmitter, Inject, Optional } from '@angular/core'
+import { Component, Input, Output, EventEmitter, Inject, Optional, HostBinding } from '@angular/core'
 import { FileUpload, MenuItemOptions, NotificationsService, PlatformService } from 'tabby-core'
 import { SFTPSession, SFTPFile } from '../session/sftp'
 import { SSHSession } from '../session/ssh'
@@ -28,6 +28,8 @@ export class SFTPPanelComponent {
     pathSegments: PathSegment[] = []
     @Input() cwdDetectionAvailable = false
     editingPath: string|null = null
+    @HostBinding('class.pinned') pinSFTPPanel = false
+    @Output() pinStateChange = new EventEmitter<boolean>()
 
     constructor (
         private ngbModal: NgbModal,
@@ -246,6 +248,11 @@ export class SFTPPanelComponent {
         this.editingPath = null
     }
 
+    togglePinSFTPPanel (): void {
+        this.pinSFTPPanel = !this.pinSFTPPanel
+        this.pinStateChange.emit(this.pinSFTPPanel)
+    }
+
     close (): void {
         this.closed.emit()
     }

tabby-ssh/src/components/sshTab.component.ts

@@ -1,6 +1,6 @@
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'
 import colors from 'ansi-colors'
-import { Component, Injector, HostListener } from '@angular/core'
+import { Component, Injector, HostListener, ViewChild } from '@angular/core'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { Platform, ProfilesService } from 'tabby-core'
 import { BaseTerminalTabComponent, ConnectableTerminalTabComponent } from 'tabby-terminal'
@@ -10,6 +10,7 @@
 import { SSHProfile } from '../api'
 import { SSHShellSession } from '../session/shell'
 import { SSHMultiplexerService } from '../services/sshMultiplexer.service'
+import { SFTPPanelComponent } from './sftpPanel.component'
 
 /** @hidden */
 @Component({
@@ -26,9 +27,11 @@
     sshSession: SSHSession|null = null
     session: SSHShellSession|null = null
     sftpPanelVisible = false
+    isSftpPanelPinned = false
     sftpPath = '/'
     enableToolbar = true
     activeKIPrompt: KeyboardInteractivePrompt|null = null
+    @ViewChild(SFTPPanelComponent, { static: false }) sftpPanel: SFTPPanelComponent
 
     constructor (
         injector: Injector,
@@ -58,6 +61,13 @@
                 case 'restart-ssh-session':
                     this.reconnect()
                     break
+                case 'toggle-sftp-pane':
+                    if (this.sftpPanelVisible) {
+                        this.sftpPanelVisible = false
+                    } else {
+                        this.openSFTP()
+                    }
+                    break
                 case 'launch-winscp':
                     if (this.sshSession) {
                         this.ssh.launchWinSCP(this.sshSession)
@@ -213,9 +223,26 @@
         }, 100)
     }
 
+    ngAfterViewChecked (): void {
+        if (!this.sftpPanel.pinStateChange.observers.length) {
+            this.subscribeToPinState()
+        }
+    }
+
+    subscribeToPinState (): void {
+        this.sftpPanel.pinStateChange.subscribe((isPinned: boolean) => {
+            this.isSftpPanelPinned = isPinned
+        })
+        this.sftpPanel.closed.subscribe(() => {
+            this.isSftpPanelPinned = false
+        })
+    }
+
     @HostListener('click')
     onClick (): void {
-        this.sftpPanelVisible = false
+        if (!this.isSftpPanelPinned) {
+            this.sftpPanelVisible = false
+        }
     }
 
     protected isSessionExplicitlyTerminated (): boolean {