From d22bc9b4e28d5e8cb4aa2630441b7854781f1e07 Mon Sep 17 00:00:00 2001
From: Jokin <jokingam@tuta.io>
Date: Mon, 13 Jul 2026 23:13:53 +0200
Subject: [PATCH] Connection manager design refresh; fix stack-row button
 crowding

Import moves to the window header; sidebar widens with a muted tint;
the stack row's count and action buttons swap on hover instead of
sharing the row, so long names can't collide with them.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../connection-manager.html                   | 81 ++++++++++---------
 1 file changed, 43 insertions(+), 38 deletions(-)

diff --git a/ui/src/app/connection-manager/connection-manager.html b/ui/src/app/connection-manager/connection-manager.html
index 6aad431..2b3f680 100644
--- a/ui/src/app/connection-manager/connection-manager.html
+++ b/ui/src/app/connection-manager/connection-manager.html
@@ -12,11 +12,24 @@
     <ng-icon name="mynaServers" size="0.95rem" class="shrink-0 text-muted-foreground" />
     <h1 class="text-sm font-semibold">Connections</h1>
     <div class="flex-1"></div>
+    <button
+      (click)="importWinScp()"
+      [disabled]="importing()"
+      title="Import sessions from a WinSCP.ini export"
+      class="flex items-center gap-1.5 rounded-md px-2 py-1 text-[11px] text-muted-foreground electrobun-webkit-app-region-no-drag hover:bg-accent hover:text-foreground disabled:opacity-50"
+    >
+      @if (importing()) {
+        <ng-icon name="mynaSpinner" size="0.85rem" class="animate-spin" />
+      } @else {
+        <ng-icon name="mynaArchive" size="0.85rem" />
+      }
+      Import WinSCP
+    </button>
   </header>
 
   <div class="flex min-h-0 flex-1">
       <!-- stacks + connections list -->
-      <div class="flex w-60 shrink-0 flex-col border-r border-border">
+      <div class="flex w-72 shrink-0 flex-col border-r border-border bg-muted/30">
         <div class="flex items-center gap-1 border-b border-border px-2 py-1.5">
           <button
             (click)="newConnection()"
@@ -32,20 +45,6 @@
           >
             <ng-icon name="mynaFolderPlus" size="0.85rem" /> Stack
           </button>
-          <div class="flex-1"></div>
-          <button
-            (click)="importWinScp()"
-            [disabled]="importing()"
-            title="Import sessions from a WinSCP.ini export"
-            class="flex items-center gap-1 rounded-md px-2 py-1 text-xs text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-50"
-          >
-            @if (importing()) {
-              <ng-icon name="mynaSpinner" size="0.85rem" class="animate-spin" />
-            } @else {
-              <ng-icon name="mynaArchive" size="0.85rem" />
-            }
-            Import
-          </button>
         </div>
 
         <div class="flex-1 overflow-y-auto py-1">
@@ -75,33 +74,39 @@
                 <span class="truncate text-[11px] font-medium text-muted-foreground uppercase">
                   {{ group.stack.name }}
                 </span>
-                <span class="shrink-0 text-[10px] text-muted-foreground/70 tabular-nums">
+                <div class="min-w-0 flex-1"></div>
+                <!-- count and actions swap on hover: they never share the space,
+                     so a long stack name can't collide with the buttons -->
+                <span
+                  class="shrink-0 text-[10px] text-muted-foreground/70 tabular-nums group-hover:hidden"
+                >
                   {{ group.connections.length }}
                 </span>
-                <div class="min-w-0 flex-1"></div>
-                <button
-                  (click)="renameStack(group.stack)"
-                  title="Rename stack"
-                  class="grid size-4 shrink-0 place-items-center rounded text-muted-foreground opacity-0 group-hover:opacity-100 hover:text-foreground"
-                >
-                  <ng-icon name="mynaEdit" size="0.75rem" />
-                </button>
-                <button
-                  (click)="deleteStack(group.stack)"
-                  title="Delete stack"
-                  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>
-                @if (group.connections.length) {
+                <div class="hidden shrink-0 items-center gap-0.5 group-hover:flex">
                   <button
-                    (click)="openStack(group.stack.id)"
-                    title="Open stack in tabs"
-                    class="grid size-4 shrink-0 place-items-center rounded text-muted-foreground hover:text-primary"
+                    (click)="renameStack(group.stack)"
+                    title="Rename stack"
+                    class="grid size-4 place-items-center rounded text-muted-foreground hover:text-foreground"
                   >
-                    <ng-icon name="mynaArrowRight" size="0.8rem" />
+                    <ng-icon name="mynaEdit" size="0.75rem" />
                   </button>
-                }
+                  <button
+                    (click)="deleteStack(group.stack)"
+                    title="Delete stack"
+                    class="grid size-4 place-items-center rounded text-muted-foreground hover:text-destructive"
+                  >
+                    <ng-icon name="mynaTrash" size="0.75rem" />
+                  </button>
+                  @if (group.connections.length) {
+                    <button
+                      (click)="openStack(group.stack.id)"
+                      title="Open stack in tabs"
+                      class="grid size-4 place-items-center rounded text-muted-foreground hover:text-primary"
+                    >
+                      <ng-icon name="mynaArrowRight" size="0.8rem" />
+                    </button>
+                  }
+                </div>
               </div>
               @if (!group.stack.collapsed) {
                 @for (connection of group.connections; track connection.id) {
@@ -167,7 +172,7 @@
       <!-- edit form -->
       <div class="flex min-w-0 flex-1 flex-col">
         @if (draft(); as d) {
-          <div class="grid flex-1 auto-rows-min grid-cols-2 gap-x-3 gap-y-2.5 overflow-y-auto p-4">
+          <div class="grid flex-1 auto-rows-min grid-cols-2 gap-x-4 gap-y-3 overflow-y-auto p-5">
             <label class="col-span-2 flex flex-col gap-1 text-xs">
               <span class="text-muted-foreground">Name</span>
               <input