From 7712655c3dd9811bbd925ecc8b44b8363309978f Mon Sep 17 00:00:00 2001
From: Jokin <jokingam@tuta.io>
Date: Sat, 11 Jul 2026 19:37:51 +0200
Subject: [PATCH] Connection manager fixes: folder select, open-all-in-tabs,
 stable hover

- Folder select showed '(none)' regardless of the actual folder (Angular sets
  [value] on the select before its options render), so 'move out of folder'
  silently saved the old folderId. Per-option [selected] bindings fix both the
  display and the save.
- Folder rows gain 'Open all in tabs': each connection opens in its own new
  tab with the left panel connecting (right stays local); manager closes.
- Folder-row action buttons no longer shift the row on hover (opacity toggle
  instead of display toggle); also canonicalized accent-primary classes.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../connection-manager.html                   | 26 ++++++++++++++-----
 .../connection-manager/connection-manager.ts  |  5 ++++
 ui/src/app/dialogs/chmod-dialog.ts            |  2 +-
 ui/src/app/panels.service.ts                  | 12 ++++++++-
 4 files changed, 36 insertions(+), 9 deletions(-)

diff --git a/ui/src/app/connection-manager/connection-manager.html b/ui/src/app/connection-manager/connection-manager.html
index a04604e..a0bc4e3 100644
--- a/ui/src/app/connection-manager/connection-manager.html
+++ b/ui/src/app/connection-manager/connection-manager.html
@@ -43,15 +43,24 @@
             </button>
           }
           @for (group of store.grouped().folders; track group.folder.id) {
-            <div class="group flex items-center gap-1.5 px-3 pt-2 pb-0.5">
+            <div class="group flex items-center gap-1 px-3 pt-2 pb-0.5">
               <ng-icon name="mynaFolder" size="0.85rem" class="shrink-0 text-muted-foreground" />
               <span class="flex-1 truncate text-[11px] font-medium text-muted-foreground uppercase">
                 {{ group.folder.name }}
               </span>
+              @if (group.connections.length) {
+                <button
+                  (click)="openFolder(group.connections)"
+                  title="Open all in tabs"
+                  class="grid size-4 shrink-0 place-items-center rounded text-muted-foreground opacity-0 group-hover:opacity-100 hover:text-primary"
+                >
+                  <ng-icon name="mynaArrowRight" size="0.75rem" />
+                </button>
+              }
               <button
                 (click)="deleteFolder(group.folder.id, group.folder.name)"
                 title="Delete folder"
-                class="hidden rounded p-0.5 text-muted-foreground group-hover:block hover:text-destructive"
+                class="grid size-4 shrink-0 place-items-center rounded text-muted-foreground opacity-0 group-hover:opacity-100 hover:text-destructive"
               >
                 <ng-icon name="mynaTrash" size="0.75rem" />
               </button>
@@ -115,13 +124,16 @@
               <label class="flex flex-col gap-1 text-xs">
                 <span class="text-muted-foreground">Folder</span>
                 <select
-                  [value]="d.folderId ?? ''"
                   (change)="patch('folderId', $any($event.target).value || null)"
                   class="h-7 rounded-md border border-input bg-background px-1 outline-none focus:ring-2 focus:ring-ring"
                 >
-                  <option value="">(none)</option>
+                  <!-- [selected] per option: binding [value] on the <select> runs
+                       before the options render and silently shows "(none)" -->
+                  <option value="" [selected]="!d.folderId">(none)</option>
                   @for (folder of store.folders(); track folder.id) {
-                    <option [value]="folder.id">{{ folder.name }}</option>
+                    <option [value]="folder.id" [selected]="d.folderId === folder.id">
+                      {{ folder.name }}
+                    </option>
                   }
                 </select>
               </label>
@@ -155,7 +167,7 @@
                   name="authKind"
                   [checked]="d.authKind === 'password'"
                   (change)="patch('authKind', 'password')"
-                  class="accent-[var(--primary)]"
+                  class="accent-primary"
                 />
                 Password
               </label>
@@ -165,7 +177,7 @@
                   name="authKind"
                   [checked]="d.authKind === 'key'"
                   (change)="patch('authKind', 'key')"
-                  class="accent-[var(--primary)]"
+                  class="accent-primary"
                 />
                 Private key
               </label>
diff --git a/ui/src/app/connection-manager/connection-manager.ts b/ui/src/app/connection-manager/connection-manager.ts
index b5f7c5f..c333d51 100644
--- a/ui/src/app/connection-manager/connection-manager.ts
+++ b/ui/src/app/connection-manager/connection-manager.ts
@@ -149,6 +149,11 @@ export class ConnectionManager {
     });
   }
 
+  openFolder(connections: SavedConnection[]): void {
+    this.panels.openInNewTabs(connections);
+    this.close();
+  }
+
   newFolder(): void {
     this.dialogs.prompt.set({
       title: 'New folder',
diff --git a/ui/src/app/dialogs/chmod-dialog.ts b/ui/src/app/dialogs/chmod-dialog.ts
index 8e2a4d7..70f337b 100644
--- a/ui/src/app/dialogs/chmod-dialog.ts
+++ b/ui/src/app/dialogs/chmod-dialog.ts
@@ -36,7 +36,7 @@ const PERMS = ['r', 'w', 'x'] as const;
                       type="checkbox"
                       [checked]="hasBit(r, p)"
                       (change)="toggleBit(r, p)"
-                      class="size-3.5 accent-[var(--primary)]"
+                      class="size-3.5 accent-primary"
                     />
                   </td>
                 }
diff --git a/ui/src/app/panels.service.ts b/ui/src/app/panels.service.ts
index 31fd539..2563a68 100644
--- a/ui/src/app/panels.service.ts
+++ b/ui/src/app/panels.service.ts
@@ -1,5 +1,5 @@
 import { Injectable, computed, signal, type WritableSignal } from '@angular/core';
-import type { ConnectionConfig, FileEntry } from '@shared/types';
+import type { ConnectionConfig, FileEntry, SavedConnection } from '@shared/types';
 import { RpcService } from './rpc.service';
 import { ToastService } from './toast.service';
 
@@ -280,6 +280,16 @@ export class PanelsService {
     }
   }
 
+  /** One new tab per connection, its left panel connecting (right stays local). */
+  openInNewTabs(connections: SavedConnection[]): void {
+    for (const connection of connections) {
+      this.newWorkspace();
+      // connectPanel resolves the panel synchronously (before awaiting), so
+      // firing these back-to-back binds each connection to its own tab
+      void this.connectPanel('left', connection, connection.name);
+    }
+  }
+
   /** Reorder a tab (drag & drop). Order is purely visual; ids stay stable. */
   moveWorkspace(id: number, toIndex: number): void {
     this.workspaces.update((list) => {