rds_ssm_connect 1.7.13 → 1.7.15

package/src/App.svelte

@@ -32,6 +32,7 @@ let showSavePrompt = $state(false)
 let lastConnectedConfig = $state(null)
 let saveConnectionName = $state('')
 let showDeleteConfirm = $state(null)
+let showCloseConfirm = $state(false)
 let isCheckingUpdates = $state(false)
 let updateCheckMessage = $state('')
 
@@ -42,10 +43,12 @@ let showSettings = $state(false)
 
 let invoke = null
 let listen = null
+let appWindow = null
 
 // Cleanup references
 let cancelUpdateMsgTimeout = null
 let unlistenSidecar = null
+let unlistenCloseRequested = null
 
 // Global keyboard shortcuts
 function handleGlobalKeydown(e) {
@@ -83,21 +86,31 @@ async function initApp() {
   loadingProjects = true
 
   try {
-    const [core, event] = await withTimeout(
+    const [core, event, windowModule] = await withTimeout(
       Promise.all([
         import('@tauri-apps/api/core'),
         import('@tauri-apps/api/event'),
+        import('@tauri-apps/api/window'),
       ]),
       5000,
     )
     invoke = core.invoke
     listen = event.listen
+    appWindow = windowModule.getCurrentWindow()
   } catch (err) {
     errorMessage = `Failed to load Tauri API: ${err}`
     loadingProjects = false
     return
   }
 
+  // Intercept window close — prompt if there are active connections
+  unlistenCloseRequested = await appWindow.onCloseRequested(async (event) => {
+    if (activeConnections.length > 0) {
+      event.preventDefault()
+      showCloseConfirm = true
+    }
+  })
+
   // Set up sidecar listener (non-blocking)
   listen('sidecar-event', (ev) => {
     const data = ev.payload
@@ -159,8 +172,28 @@ function retryInit() {
 onDestroy(() => {
   cancelUpdateMsgTimeout?.()
   unlistenSidecar?.()
+  unlistenCloseRequested?.()
 })
 
+async function confirmClose() {
+  showCloseConfirm = false
+  try {
+    await invoke('disconnect_all')
+  } catch (_err) {
+    // Best-effort disconnect before closing
+  }
+  try {
+    await invoke('quit_app')
+  } catch (_err) {
+    // If quit_app fails, force close via window API
+    appWindow?.close()
+  }
+}
+
+function cancelClose() {
+  showCloseConfirm = false
+}
+
 async function checkForUpdates() {
   if (isCheckingUpdates) return
   isCheckingUpdates = true
@@ -213,6 +246,14 @@ async function loadProfiles() {
   }
 }
 
+async function refreshProjects() {
+  try {
+    projects = await invoke('list_projects')
+  } catch (err) {
+    errorMessage = `Failed to refresh projects: ${err}`
+  }
+}
+
 async function handleConnect() {
   if (!selectedProject || !selectedProfile) return
 
@@ -392,8 +433,10 @@ async function handleInstallUpdate() {
 
   try {
     await invoke('install_update')
-    statusMessage = 'Update installed! Restart to apply.'
-    // The app will restart automatically after install
+    // App should auto-restart and never reach here, but just in case:
+    isUpdating = false
+    showUpdateBanner = false
+    statusMessage = 'Update installed successfully.'
   } catch (err) {
     errorMessage = `Update failed: ${err}`
     isUpdating = false
@@ -490,6 +533,7 @@ const isAlreadySaved = $derived(
             {savedConnections}
             {activeConnections}
             {projects}
+            {connectingId}
             onConnect={handleSavedConnectionConnect}
             onDisconnect={handleDisconnectOne}
             onDelete={handleDeleteSavedConnection}
@@ -586,6 +630,18 @@ const isAlreadySaved = $derived(
       />
     {/if}
 
+    {#if showCloseConfirm}
+      <ConfirmDialog
+        title="Close Application"
+        message="All active connections will be closed. Are you sure you want to quit?"
+        confirmLabel="Quit"
+        cancelLabel="Cancel"
+        destructive={true}
+        onConfirm={confirmClose}
+        onCancel={cancelClose}
+      />
+    {/if}
+
     {#if showPrerequisites}
       <PrerequisitesCheck
         prerequisites={prerequisitesData}
@@ -598,6 +654,7 @@ const isAlreadySaved = $derived(
       <Settings
         onClose={() => showSettings = false}
         {invoke}
+        onProjectsChanged={refreshProjects}
       />
     {/if}
   {/if}

package/src/lib/SavedConnections.svelte

@@ -6,6 +6,7 @@ const {
   savedConnections = [],
   activeConnections = [],
   projects = [],
+  connectingId = null,
   onConnect,
   onDisconnect,
   onDelete,
@@ -85,7 +86,8 @@ function handleHeaderKeydown(e, activeConn, connectionId) {
     <div class="connections-list">
       {#each savedConnections as connection (connection.id)}
         {@const activeConn = getActiveConnection(connection)}
-        <div class="connection-item" class:active={activeConn} class:expanded={expandedId === connection.id}>
+        {@const isConnecting = connectingId === connection.id}
+        <div class="connection-item" class:active={activeConn} class:connecting={isConnecting} class:expanded={expandedId === connection.id}>
           <div
             class="connection-header"
             role="button"
@@ -93,7 +95,11 @@ function handleHeaderKeydown(e, activeConn, connectionId) {
             onclick={() => activeConn && toggleExpand(connection.id)}
             onkeydown={(e) => handleHeaderKeydown(e, activeConn, connection.id)}
           >
-            {#if activeConn}
+            {#if isConnecting}
+              <div class="connection-status">
+                <span class="connecting-spinner"></span>
+              </div>
+            {:else if activeConn}
               <div class="connection-status">
                 <span class="status-dot"></span>
               </div>
@@ -105,19 +111,24 @@ function handleHeaderKeydown(e, activeConn, connectionId) {
                   <span class="connection-port">:{activeConn.localPort}</span>
                 {/if}
               </div>
-              <span class="connection-meta">
-                {getProjectName(connection.projectKey)} / {connection.profile}
-              </span>
-              {#if !activeConn}
-                <span class="connection-last-used">
-                  Last used: {formatLastUsed(connection.lastUsedAt)}
+              {#if isConnecting}
+                <span class="connecting-text">Connecting...</span>
+              {:else}
+                <span class="connection-meta">
+                  {getProjectName(connection.projectKey)} / {connection.profile}
                 </span>
+                {#if !activeConn}
+                  <span class="connection-last-used">
+                    Last used: {formatLastUsed(connection.lastUsedAt)}
+                  </span>
+                {/if}
               {/if}
             </div>
             <div class="connection-actions">
               {#if activeConn}
                 <button
                   class="btn-expand"
+                  disabled={!!connectingId}
                   aria-label={expandedId === connection.id ? 'Collapse credentials' : 'Show credentials'}
                 >
                   <svg width="16" height="16" viewBox="0 0 16 16" fill="none" class:rotated={expandedId === connection.id}>
@@ -126,6 +137,7 @@ function handleHeaderKeydown(e, activeConn, connectionId) {
                 </button>
                 <button
                   class="btn-disconnect"
+                  disabled={!!connectingId}
                   onclick={(e) => { e.stopPropagation(); handleDisconnect(activeConn); }}
                   aria-label="Disconnect {connection.name}"
                 >
@@ -136,15 +148,21 @@ function handleHeaderKeydown(e, activeConn, connectionId) {
               {:else}
                 <button
                   class="btn-connect"
+                  disabled={!!connectingId}
                   onclick={(e) => { e.stopPropagation(); handleConnect(connection); }}
                   aria-label="Connect to {connection.name}"
                 >
-                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-                    <path d="M5 3l8 5-8 5V3z" fill="currentColor"/>
-                  </svg>
+                  {#if isConnecting}
+                    <span class="btn-spinner"></span>
+                  {:else}
+                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                      <path d="M5 3l8 5-8 5V3z" fill="currentColor"/>
+                    </svg>
+                  {/if}
                 </button>
                 <button
                   class="btn-delete"
+                  disabled={!!connectingId}
                   onclick={(e) => { e.stopPropagation(); handleDelete(connection); }}
                   aria-label="Delete {connection.name}"
                 >
@@ -255,6 +273,10 @@ function handleHeaderKeydown(e, activeConn, connectionId) {
     border: 1px solid rgba(52, 211, 153, 0.2);
   }
 
+  .connection-item.connecting {
+    border: 1px solid rgba(99, 102, 241, 0.3);
+  }
+
   .connection-header {
     display: flex;
     align-items: center;
@@ -398,6 +420,49 @@ function handleHeaderKeydown(e, activeConn, connectionId) {
     transform: rotate(180deg);
   }
 
+  .btn-connect:disabled, .btn-delete:disabled, .btn-disconnect:disabled, .btn-expand:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  .connecting-spinner {
+    display: block;
+    width: 8px;
+    height: 8px;
+    border: 1.5px solid rgba(99, 102, 241, 0.3);
+    border-top-color: #6366f1;
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+    will-change: transform;
+  }
+
+  .connecting-text {
+    font-size: 0.75rem;
+    color: #a5b4fc;
+    animation: fadeIn 0.3s ease-out;
+  }
+
+  .btn-spinner {
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    border: 1.5px solid rgba(52, 211, 153, 0.3);
+    border-top-color: #34d399;
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+    will-change: transform;
+  }
+
+  @keyframes spin {
+    to { transform: rotate(360deg); }
+  }
+
+  @keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
   .connection-details {
     padding: 0 16px 16px;
     animation: slideDown 0.2s ease-out;