Add Pin Button for SFTP Panel

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() {
+        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 { SSHPortForwardingModalComponent } from './sshPortForwardingModal.compon
 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 @@ export class SSHTabComponent extends ConnectableTerminalTabComponent<SSHProfile>
     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,
@@ -220,9 +223,26 @@ export class SSHTabComponent extends ConnectableTerminalTabComponent<SSHProfile>
         }, 100)
     }
 
+    ngAfterViewChecked() {
+        if (this.sftpPanel && !this.sftpPanel.pinStateChange.observers.length) {
+            this.subscribeToPinState();
+        }
+    }
+
+    subscribeToPinState() {
+        this.sftpPanel.pinStateChange.subscribe((isPinned: boolean) => {
+            this.isSftpPanelPinned = isPinned;
+        });
+        this.sftpPanel.closed.subscribe(() => {
+            this.isSftpPanelPinned = false;
+        });
+    }
+
     @HostListener('click')
-    onClick (): void {
-        this.sftpPanelVisible = false
+    onClick(): void {
+        if (!this.isSftpPanelPinned) {
+            this.sftpPanelVisible = false;
+        }
     }
 
     protected isSessionExplicitlyTerminated (): boolean {