Have multiple recent connections in history instead of just one

terminus-ssh/src/components/sshModal.component.pug

@@ -1,22 +1,25 @@
 .modal-body
     input.form-control(
-        type='text', 
+        type='text',
-        [(ngModel)]='quickTarget', 
+        [(ngModel)]='quickTarget',
-        autofocus, 
+        autofocus,
-        placeholder='Quick connect: [user@]host[:port]', 
+        placeholder='Quick connect: [user@]host[:port]',
         (ngModelChange)='refresh()',
         (keyup.enter)='quickConnect()'
     )
-    
+
-    .list-group.mt-3(*ngIf='lastConnection')
+    .list-group.mt-3(*ngIf='recentConnections')
-        a.list-group-item.list-group-item-action.d-flex.align-items-center((click)='connect(lastConnection)') 
+        a.list-group-item.list-group-item-action.d-flex.align-items-center(
+            *ngFor='let connection of recentConnections',
+            (click)='connect(connection)'
+        )
             i.fas.fa-fw.fa-history
-            .mr-auto {{lastConnection.name}}
+            .mr-auto {{connection.name}}
-            button.btn.btn-outline-danger.btn-sm((click)='clearLastConnection(); $event.stopPropagation()')
+            button.btn.btn-outline-danger.btn-sm((click)='clearConnection(connection); $event.stopPropagation()')
                 i.fas.fa-trash
-    
+
     .list-group.mt-3.connections-list(*ngIf='childGroups.length')
-        ng-container(*ngFor='let group of childGroups') 
+        ng-container(*ngFor='let group of childGroups')
             .list-group-item.list-group-item-action.d-flex.align-items-center(
                 (click)='groupCollapsed[group.name] = !groupCollapsed[group.name]'
             )
@@ -25,8 +28,8 @@
                 .ml-2 {{group.name || "Ungrouped"}}
             ng-container(*ngIf='!groupCollapsed[group.name]')
                 .list-group-item.list-group-item-action.pl-5.d-flex.align-items-center(
-                    *ngFor='let connection of group.connections', 
+                    *ngFor='let connection of group.connections',
                     (click)='connect(connection)'
-                ) 
+                )
                     .mr-2 {{connection.name}}
                     .text-muted {{connection.host}}

terminus-ssh/src/components/sshModal.component.ts

@@ -16,7 +16,7 @@ export class SSHModalComponent {
     connections: SSHConnection[]
     childFolders: SSHConnectionGroup[]
     quickTarget: string
-    lastConnection: SSHConnection|null = null
+    recentConnections: SSHConnection[]
     childGroups: SSHConnectionGroup[]
     groupCollapsed: {[id: string]: boolean} = {}
 
@@ -30,9 +30,7 @@ export class SSHModalComponent {
 
     ngOnInit () {
         this.connections = this.config.store.ssh.connections
-        if (window.localStorage.lastConnection) {
+        this.recentConnections = this.config.store.ssh.recentConnections
-            this.lastConnection = JSON.parse(window.localStorage.lastConnection)
-        }
         this.refresh()
     }
 
@@ -55,13 +53,21 @@ export class SSHModalComponent {
             user,
             port,
         }
-        window.localStorage.lastConnection = JSON.stringify(connection)
+        this.recentConnections.unshift(connection)
+        if (this.recentConnections.length > 5) {
+            this.recentConnections.pop()
+        }
+        this.config.store.ssh.recentConnections = this.recentConnections
+        this.config.save()
         this.connect(connection)
     }
 
-    clearLastConnection () {
+    clearConnection (connection) {
-        window.localStorage.lastConnection = null
+        this.recentConnections = this.recentConnections.filter(function (el) {
-        this.lastConnection = null
+            return el === connection
+        })
+        this.config.store.ssh.recentConnections = this.recentConnections
+        this.config.save()
     }
 
     async connect (connection: SSHConnection) {

terminus-ssh/src/config.ts

@@ -5,6 +5,7 @@ export class SSHConfigProvider extends ConfigProvider {
     defaults = {
         ssh: {
             connections: [],
+            recentConnections: [],
             options: {
             },
         },